나는 오늘도 멋있다

목적 부트캠프 과정의 두번째 과제로 HTML과 CSS 만으로 Youtube의 홈부분을 flex로 구조를 잡는 과제였다. Flex는 항상 써왔다. 그래도 Flex의 각 속성에 대해 좀더 깊이이해하고 쓰자는 생각으로 이글을 작성한다. Flex란? 주로 CSS Flexbox 레이아웃을 만들때 사용되는 속성으로, 웹페이지의 레이아웃을 효율적으로 설계하고, 요소들을 유연하게 배치하기 위한 CSS 기술이다. Flex의 속성들 Flex의 Container는 부모요소를 뜻하고, Item은 자식요소를 뜻한다. Container 속성 속성명 설명 단위 속성 dispaly 부모요소를 Flexbox 컨테이너로 만든다. flex, inline-flex justify-content 주축의 요소들을 정렬한다. flex-start,..

Container 속성 속성 의미 grid-template-columns 명시적으로 아이템들의 열(가로) 크기를 지정 grid-temaplte-rows 명시적으로 아이템들의 행(세로) 크기를 지정 gird-template 명시적 행(세로), 열(가로)의 단축속성 grid-auto-columns 암시적으로 아이템의 열(가로) 크기를 정의 grid-auto-rows 암시적으로 아이템의 행(세로) 크기를 정의 grid-template-areas 영역(Area)이름을 참조해 템플릿 생성 column-gap 아이템들 열(가로)셀 간격설정 row-gap 아이템들 행(세로)셀 간격설정 gap 열(가로), 행(세로) 셀간격의 단축속성 justify-items 아이템들의 가로방향 정렬 aligin-items 아이템들의 ..

개발자가 사용자에게 보여주고 싶은 컨텐츠를 브라우저가 읽을 수 있도록 만들어 놓은 문서 HTML구조 // 문서의 형식을 지정하여 브라우저는 해당문서를 HTML5 문서로 해석한다. // 문서의 시작을 알리며, lang속성은 문서의 언어를 지정한다. // body태그를 읽기전에 정보들 // html 파일의 기본정보(문서정보, 메타데이터, 스타일시트, 스크립트) // 문서의 본문으로서 화면에 표시되는 모든내용이 들어감 시멘틱 태그(Semantic Tag) 태그 설명 용도 문서나 섹션의 헤더를 정의 로고, 제목, 네비게이션 네비게이션 링크를 정의 메뉴, 링크목록 문서의 주요콘텐츠를 정의하며, 하나만 사용해야함 독립적으로 구분되거나 재사용가능한 콘텐츠 블록 뉴스, 기사, 블로그 포스트 문서의 섹션을 정의 제목, ..