[WEB] 2. CSS

CSS 원칙

1. 모든 요소는 박스모델이고 좌측 상단에 배치된다.

2. display에 따라 크기와 배치가 달라진다.

3. position으로 위치의 기준을 변경한다. relative : 본인의 원래 위치 absolute: 특정 부모의 위치, fixed : 화면의 위치

 

box-sizing

기본적으로 모든 요소의 box sizing은 content-box이다. padding을 제외한 순수 contents 영역만을 box로 지정한다. 다만, 우리가 일반적으로 영역을 볼 때는 border 너비를 100px 보는 것을 원하고, 그러한 경우에는 box-sizing을 border-box로 결정한다.

 

대표적으로 활용되는 display

display : block

• 줄 바꿈이 일어나는 요소(다른 요소들을 밀어낸다)
• 화면 크기 전체의 가로 폭을 차지한다
• 블록 레벨 요소 안에 인라인 레벨 요소가 들어갈 수 있다.
• 대표적인 블록 레벨 요소 : div, ul,ol,lu,p,hr,form
• block의 기본 너비는 가질 수 있는 너비의 100 %

display : inline

• 줄 바꿈이 일어나지 않는 행의 요소
• content를 마크업 하고 있는 만큼만 가로 폭을 차지한다.
• width, height, margin-top, margin-bottom을 지정할 수 없다. (딱 컨텐츠 만큼만 차지한다.)
• 상하 여백은 line-height로 지정한다.
• 대표적인 인라인 레벨 요소 : span, a, img, input, label, em, i, strong
• inline의 기본 너비는 컨텐츠 영역만큼이다.

속성에 따른 수평 정렬

block을 정렬할 때는 margin을 정렬하여 컨텐츠를 움직여서 정렬한 것처럼 보이도록 한다.

display : inline-block

• block과 inline 레벨 요소를 모두 가진다. inline처럼 한 줄에 표시가 가능하고 block처럼 margin, width, height 속성을 모두 지정할 수 있다

display : none

• 해당 요소를 화면에 표시하지 않고, 공간조차 부여되지 않는다.
• 이와 비슷한 visibility:hidden은 해당 요소가 공간은 차지하나 화면에 표시만 하지 않는다.

CSS position

문서 상에서 요소의 위치를 지정한다.

static : 모든 태그의 기본 값(기준 위치)으로, 일반적인 요소의 배치 순서에 따른다(기본적으로 좌측 상단에 배치된다). 부모 요소 내에서 배치될 때에는 부모 요소의 위치를 기준으로 배치된다.

relative: 상대 위치로, 자기 자신의 static 위치를 기준으로 이동한다. 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다.

absolute: 절대 위치로, 요소를 일반적인 문서 흐름에서 제거 후 레이아웃에 공간을 차지하지 않는다.(normal flow에서 벗어난다.) static이 아닌 가장 가까이 있는 부모/조상 요소를 기준으로 이동한다. 부모와 조상이 없는 경우 body를 기준으로 이동한다.

fixed : 고정 위치로, 요소를 일반적인 문서 흐름에서 제거하고 레이아웃에 공간을 차지하지 않도록 한다. 부모 요소와 관계없이 viewport를 기준으로 이동하며, 스크롤 시에도 항상 같은 곳에 위치한다. (포스트잇을 붙여놓은 것과 비슷하다.)