[CSS] HTML CSS 복습 - 에이블런 프론트엔드부트캠프 11일차

1. Block 태그

대표적인 block 태그는 div, 시멘틱태그(Header, section, footer, article 등)가 있다. block 태그는 화면의 가로 너비 기준으로 전체의 한 영역을 차지한다. width, height을 통해 크기를 조절할 수 있다. 크기 값을 지정하지 않을 경우 width는 화면 가로 너비를 모두 차지하고, height는 자신이 가진 요소만큼의 크기를 가진다.

2. Inline 태그

inline 태그로는 h1~h6과 p 태그 등이 존재한다. 이 태그들은 inline 요소로, 자신이 가진 요소만큼만 너비와 높이를 가진다.

margin과 padding은 위아래는 지정이 불가능하지만, 양옆은 지정이 가능하다. 또한, 줄바꿈이 되지 않는다.

3. 텍스트 특정 부분 강조

텍스트의 특정 부분을 강조하기 위해선 span, i, strong 등의 태그를 사용할 수 있다. inline 요소를 화면의 가운데 또는 부모요소의 가운데 배치하기 위해서는 부모 요소에 text-align: center를 지정해야한다.

4. POSITION

HTML 요소를 레이아웃 잡을 때 쓰는 속성이다.

속성명	속성값
position	static
	relative
	absolute
	fixed

5. FLOAT

block 요소를 나란히 배치하고자 할 때 쓰는 속성이다. 나란히 배치하고자 하는 요소에 float: left 또는 float: right를 지정하면 된다. 하지만 float를 지정하면 다음에 오는 요소에도 자동으로 float이 적용되므로 float이 필요없는 부분에 float 해제를 해주어야 한다. float 해제를 하기 위해서는 해당 요소의 ::after로 가상 선택자를 만든 후, clear: both를 지정하면 된다.

6. FLEX 

flex를 사용해 요소를 나란히 배치할 수 있다. 나란히 배치하고자 하는 요소를 감싼 부모요소에 flex를 지정하고, 줄바꿈이 필요하다면 flex-wrap: wrap을 지정하면 된다. 배치하고자 하는 방법에 따라 중심축 / 반대축에서 배치할 수 있다.

justify-content	중심축
align-content	반대축