1. HTML 요소 분류하기
-인라인(inline) 요소
-태그가 할당된 텍스트나 이미지의 크기에 맞는 필요한 공산만을 차지한다
-높이나 너비를 지정할 수 없으며 줄 내부 어디서든 시작한다
-<span> , <button> , <img> 등이 대표적이다
-블록(block) 요소
-태그가 시작되면 이전 요소와 상관없이 개행해 새로운 줄에서 시작한다
-너비는 좌우 양쪽으로 부모 요소의 100%를 차지하며 왼쪽에서부터 오른쪽으로 확장한다
-<div> , <article> , <form> 등이 대표적이다
2. 시맨틱(Semantic)
-HTML를 작성할 때는 시맨틱하게 작성해야 한다
-시맨틱하게 작성한다는 것은 의미에 맞는 태그를 사용해 문서를 작성하는 것을 말한다
1) <h1> ~ <h6>
-각 세견의 제목을 나타낸다
-<h1>이 가장 높고 <h6>이 가장 낮다
2) <header>
-제목이나 대표 이미지가 들어가는 요소이다
-<body>의 하위로 작성되면 웹 페이지의 전체 헤더를 정의하는 영역이다
-Sectioning Content 의 하위로 사용되면 해당영역의 헤더를 의미한다
-일반적으로 <h1>,<h2>..등의 요소나 로고 등을 포함한다
3) <footer>
-<header> 요소와 마찬가지로 전체 문서 또는 Sectioning Content의 바닥글로 쓰인다
-작성자나 관련 문서 링크, 라이선스, 색인 등의 데이터가 들어간다
*(Sectioning Content : 아웃라인을 정의하며 각 Heading(제목)요소와 Footer(바닥글)요소의 범위를 정한다)
4) <main>
-페이지의 콘테츠 영역을 의미한다
-페이지당 한 번 사용하며 <body> 아래 직접 추가 한다
-다른 요소 내에 중첩되지 않아야 한다
5) <article>
-요소 자체가 하나의 의미 있는 콘텐츠 블록 영역이다
-이 요소만으로 단일 게시물을 나타낼 때 사용한다
-이 요소의 내용은 독립적으로 배포하거나 재사용한다
-블로그 항목이나 게시물, 기사, 위젯 등에 사용한다
6) <section>
-<article>과 유사하지만 페이지의 단일부분을 그룹화하는 데에 유용하다
-예를 들어 기사의 헤드라인을 모으거나 블로그의 피드정보가 나타나는 영역으로 사용된다
-요소의 콘텐츠를 함께 묶는 것이 합리적일 때 사용
7) <aside>
-기본 콘텐츠와는 직접 관련이 없지만 간접적으로 관련된 추가 정보를 포함하는 요소이다
-<nav>요소나 광고, 인용처럼 분리된 콘텐츠를 나타낼 때 사용한다
8) <nav>
-다른 페이지 또는 내 문서의 특정 영역(탐색 링크가 있는 섹션)으로 이동시키는 링크를 나타낸다
3. CSS - 박스 모델과 여백상쇄
1) 박스 모델
-4가지 영역 : Content, padding, border, margin
-content영역은 텍스트나 하위 박스 모델 등을 나타내며 padding, border, margin순서대로
content영역을 둘러싸는 영역이다
-box-sizing 프로퍼티 : 요소의 너비와 높이를 계산하는 방식을 지정한다
-content-box 와 border-box 두가지 값이 가능하며 브라우저 디폴트는 content-box이다
-border-box : padding,border,margin 영역을 합한 영역을 기준으로 계산한다
-content-box : content 영역만을 기준으로 계산된다. padding과 border는 별개로 계산된다
2) 여백 상쇄
-인접한 같은 레벨의 블록요소에 상하 여백이 겹치면 여백이 하나로 합쳐지는 현상이 일어난다
-이때 여백은 인접한 여백 중 큰 여백으로 상쇄된다
-여백 상쇄는 display 프로퍼티 값이 flex,grid일때나 position 프로퍼티가 absolution일때,
float인 상태일 때는 적용이 안된다
4. CSS - flex를 이용한 레이아웃
1) flex container
-HTML 요소의 display에 flex나 inline-flex 값으로 지정한다
flex-direction : 주축의 방향을 지정한다. 방향은 row, column이 있다
flex-wrap : 여러 행으로 표현가능 (flex container는 한줄에 맞춰진다)
justify-content : 주축의 item을 어떻게 배치할지 결정한다
align-items : 교차 축에 대해 item을 어떻게 배치할지 결정한다
align-content : 교차 축과 아이템 간 공간이 있으면 공간을 어떻게 분배할지 정한다
2) flex items
-부모 요소가 flex container이면 자식 요소들은 자동으로 flex items이다
order : flex items의 순서를 지정한다 기본값은 0이며 음수와 양수모두 가능, order가 작은 요소부터 정렬된다
flex-grow : item이 차지하는 비율을 정한다 양수만 가능하며 이 속성을 가진 다른 자식요소들과 균등하게 분배된다
align-self : flex container에서 정의된 align-items의 속성을 오버라이딩 한다 (동일)