상하 width 2px red

좌우 width-2px red

위치 속성과 관련된 굉장히 중요한 몇가지 공식이 있다. *꼭 알아두자

position 속성에 absolute 키워드를 적용하면 부모 태그가 영역을 차지하지 않습니다.

따라서 자손의 position 속성에 absolute 키워드를 적용할 경우 부모 태그에 몇 가지 처리를 해야 합니다.

문제1 : div 태그가 영역을 차지하지 않습니다.

문제2: div 상자가 자신의 부모를 기준으로 위치를 잡지않습니다.

문제1 해결공식 : "자손의 position 속성에 absolute 키워드를 적용하면 부모는 height 속성을 사용합니다."

문제2  해결공식: 부모박스에 por를 준다.

line-height 속성은 글자의 높이를 지정합니다. 현대의 HTML 페이지는 글자의 높이를 지정하는 기능보다 글자를 수직 중앙 정렬할 때 사용합니다.

*css block 형식을 가지는 태글즐 수직 정렬할 수 있는 스타일 속성이 없습니다. 따라서 대체 방안으로 line-height 속성을 사용합니다.

line-height를 글자를 감싸는 박스 높이의 크기와 맞춰주면 글자가 수직정렬 됩니다.

*vertical align은 table에 쓰인다고 보면됨

원래 inline에도 쓰이나 크로스 브라우징이 잘 안되므로 쓰지 않는 게 좋다.

float 속성은 부유하는 대상을 만들 때 사용하는 스타일 속성입니다.

아래그림 처럼 img태그는 inline 형식의 태그이고 p태그는 block 형식의 태그이므로 그림과 글자가 분리되어 출력됩니다.

처음 float 속성을 개발했을 때는 img 태그에 사용하는 것을 기본으로 했습니다.

그래서 그림과 같이 이미지가 글자 위에 부유하고 있습니다.

출처 : http://poiemaweb.com/css3-float

overflow 속성은 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할지 지정하는 속성입니다.

overflow 속성에 사용 가능한 키워드

oveflow 속성에 scroll 키워드를 적용하면 무조건 모든 축에 스크롤이 생성됩니다. 만약 특정한 방향으로만 스크롤을 생성할 때는 overflow-x 속성과 overflow-y 속성을 사용합니다.