Frontend Dev (147) 썸네일형 리스트형 Section1 Unit4 HTML, CSS 활용 Section1 Unit4 [HTML/CSS] 활용 📌 Chapter1. 레이아웃 • 와이어프레임과 목업 와이어프레임과 목업을 작성하는 단계를 건너뛰고, JavaScript로 동작하는 애플리케이션을 만들 수 있지만 HTML 문서를 통해 화면을 다 그려보지 않으면 JavaScript를 적용한 완성본이 어떤 형태를 가질지 상상하기 어렵다. 마치 설계도 없이 건물을 짓는 것과 같으니 와이어프레임과 목업을 작성하는 단계는 중요하다. → 와이어프레임: 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계. 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것 → 목업: 실물 제품이 없는 무형의 웹 또는 앱의 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성하는 것 • .. CSS UNITS (절대 단위와 상대 단위) 👾 자주 사용되는 CSS Units • 절대 단위: px, pt 등 • 상대 단위: %, em, rem, vw, vh 등 ✓ 기본적으로 브라우저에서 html에 할당되는 폰트 사이즈는 16px (100%, 1em) px px은 모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위를 의미한다. CSS에서 절대 단위를 사용할 때 대부분은 px을 사용한다. 픽셀은 크기가 고정된 절대 단위이기 때문에 사용자 접근성이 불리하다. 글꼴의 크기를 픽셀로 설정하면, 작은 글씨를 보기 힘든 사용자가 브라우저의 기본 글꼴 크기를 더 크게 설정하더라도 글꼴의 크기는 항상 설정된 픽셀로 고정된다. 그리고 픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않다. 기본적으로 고해상도에서는 1px이 모니터.. Section1 Unit3 CSS 기초 Section1 Unit3 [CSS] 기초 📌 Chapter1. CSS 기초 • CSS와 UI, UX 사용자 인터페이스 (UI; user interface) → interface : 컴퓨터와 교류하기 위한 연결고리. 버튼도 없고, 마우스도 없던 시대의 개발자는 자신이 만든 애플리케이션과 소통하기 위해 CLI를 사용했다. 키보드로 작성한 비밀 암호 같은 코드를 적어서 엔터를 눌러야만 애플리케이션을 작동시킬 수 있었다. 하지만 지금은 키보드 인터페이스로 입력을 할 수 있고, 버튼 모양의 인터페이스로 입력한 내용을 전송할 수 있다. 이렇게 일반 사용자가 쉽게 사용할 수 있는 인터페이스를 사용자 인터페이스, UI라고 부른다. UI는 사용자가 애플리케이션을 사용하게 하는데 매우 중요한 역할을 하고, UI가 없으면.. HTML5 시맨틱 요소 (Semantic Element) update 23.06.27 👾 시맨틱 요소(Semantic Element)란 무엇일까? 시맨틱 요소(의미 요소, semantic element)란 그 자체로 의미를 가지고 있는 요소를 가리킨다. → semantic : 의미가 있는, 의미론적인 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미한다. HTML5에서는 시멘틱 웹이 중시되면서 여러 시맨틱 요소가 새롭게 만들어졌고, 의미를 가진 요소를 사용하는 방식을 추구하기 시작했다. 👾 시멘틱 요소를 사용해야 하는 이유 1. 검색 효율성 검색 엔진은 HTML 코드를 보고 문서의 구조를 파악하기 때문에 어떤 시맨틱 요소를 사용함으로써 어떤 요소에 더 중요한 내용이 들어있을지 우선순위를 정할 수 있고, 우.. Section1 Unit2 HTML 기초 코드스테이츠 프론트엔드 부트캠프 본격적인 시작!! 어제는 거의 OT라 오늘부터 강의가 시작되었다. 하루종일 줌으로 수업하는 형식이 아니라 스스로 공부하는데 초점이 맞춰진 듯했다. 어제 OT때 구글 캘린더를 공유받아서 전체 일정을 확인할 수 있었다. 오늘 내일은 오후 5시에 라이브 세션이 있고, 금요일부터 페어 프로그래밍이 시작되었다. 두근두근 🥰 블로그 챌린지가 있어 앞으로 2주 동안은 수업한 내용을 꾸준히 기록할 생각이고, 그 다음부터는 내 학습 속도와 이해도를 보고 기록할 계획이다. 화이팅 👍🏻 Section1 Unit2 [HTML] 기초 📌 Chapter1. 웹 개발 이해하기 첫 시작은 간략하게 웹 개발에 대한 소개 타임~ HTML은 구조를, CSS는 스타일을, JavaScripts는 상호작용을 담.. Section1 Unit1 코드스테이츠 프론트엔드 부트캠프 개강 (OT & 첫 라이브세션) 기다리고 기다렸던 코드스테이츠 프론트엔드 부트캠프가 시작되었다. 첫날은 부트캠프 학습 툴 설정, 전반적인 안내와 설명 정도 듣는 오리엔테이션 시간이 있었다. 시작하기 전에는 더 공부를 해서 개발자로 취업해야지, 라는 조금은 설레는 마음이 더 크게 자리잡았었는데 막상 코스를 시작하게 되니 지금껏 계속 설렜던 마음이 걱정스러운 마음으로 변해갔다. 세상에는 정말 잘하는 사람이 많고, 열심히 하려는 사람이 너무 많은데 아무것도 모르는 내가 개발이라는 영역에 발을 들일 수 있을까? 잘 할 수 있을까? 구체적인 목표를 가지고 자신감 넘치게 지원했지만 막상 시작하려니 막연해지는 기분이 들었다. 이런 걱정을 하면서 남들과 나를 비교하고 있다는 사실을 깨달았다. 남과 비교하지 않고, 나 자신의 목표에 집중하는 것. 잊지.. 코드스테이츠 프론트엔드 엔지니어링 부트캠프 사전학습 참여! 2년 전쯤 HTML을 배우기 시작했을 때 뭔가 배우는 걸 정리해야겠다는 생각이 들어 노션을 사용했었는데, 공부를 계속 하다보니 나 혼자 보는 노션이 아닌 스터디용 블로그로 공유를 하고 싶다는 생각이 들었다. 미루고 미루다가 코드스테이츠 부트캠프 사전학습을 참여하며 드디어 '개발'에 관련된 첫 글을 쓰게 되었다! (뭐, 정보 공유나 스터디 기록 보다는 이벤트 참여가 목적이었지만... 뭐든 시작이 반이라고...ㅎ) 코드스테이츠 프론트엔드 부트캠프는 비전공자를 대상으로 한다고 했다. 이렇게 귀염뽀짝한 사전학습 미션으로 내가 공부하려는 이 분야가 나와 맞는지, 흥미를 느끼는지 알아보기 좋을 것 같다는 생각이 들었다. 김코딩네 농장 주스 만들기 완성~ 😀 웹 퍼블리싱, 코딩 공부를 처음 할 때 준비하면 좋을 것들 이번 글은 웹 퍼블리싱, 코딩 공부를 처음 할 때 미리 준비하면 좋은 것들에 대해 공유해보기로 했다. 참고로 나는 국비지원으로 웹디자인, 퍼블리싱 교육을 듣고 웹 퍼블리셔로 취업을 한 1년도 안된 새내기 퍼블리셔이다. 따라서 이 글은 새내기 퍼블리셔의 지극히 주관적인 의견이다. ↓↓ 국비지원 웹 퍼블리셔 수료 후기가 궁금하신 분들은 아래 글을 참고해주세요! ↓↓ 국비지원 UIUX 디자인, 퍼블리셔 수료 후기 (QnA) 나는 2021년 1월부터 6월까지 약 5개월간의 국비지원 UI/UX 디자인 & 퍼블리셔 국비지원 과정을 수강했고, 약 2개월간의 취업 준비 끝에 작년 7월부터 웹 퍼블리셔로 새로운 직장에서 일을 하는 중 fay-story.com 일을 시작한지 1년도 되지 않은 신입 퍼블리셔이지만 길지 않은.. 이전 1 ··· 15 16 17 18 19 다음
