1. Display 프로퍼티
css 에서 레이아웃 제어를 위한 가장 중요한 프로퍼티. 보통 block, inline element 가 있다.
1-1. block
새 줄에서 시작해 좌우로 늘어남.
div, p, form, header, footer, section 등이 있다.
1-2. inline
span 이 대표적이다. a 태그도 마찬가지이다.
단락의 흐름을 방해하지 않으며 오로지 자기 컨텐츠 만큼의 크기를 가지고 있다.
◎인라인 div 를 만들기 보다 li 태그를 이용해서 가로 메뉴를 만드는 응용이 가능하다.
1-3. none
.selector {
display: none;
}
일부러 요소를 숨길 수도 있다. 자바스크립트를 통해 숨김 효과로 페이지 렌더링이 가능하다.
실제 해당 element 를 삭제 하고 차지하고 있는 공간을 지워 버리게 된다.
.selector {
visibility: hidden;
}
히든의 경우는 보이지는 않더라도 여전히 공간을 차지한다.
2. width 값과 height 값의 계산
width 와 height 프로퍼티의 초기값은 auto 이다.
브라우저가 상황에 따라 적당한 너비와 높이 값을 알아서 계산할거라는 것.
div 를 만든 후 width 값을 지정할 때 너비, 높이를 지정하지 않으면 페이지의 width 만큼 div 가 그대로 늘어나게 된다.
height 는 div 내 요소 (가령 텍스트) 의 높이에 따라 기본 세팅이 되고 px, em 등의 단위를 줘서 세팅을 한다.
3. min-width, max-width 의 사용
가령, 브라우저 창이 엘리먼트 너비보다 좁을 때 (페이지를 작게 줄였을 때) 일반 width 를 적용하였다면 페이지에 가로 스크롤바가 생겨 적용이 되어 질 것이다.
이때 max-width 를 사용하면 (최대 늘어나봤자 이크기다 정도로 해석함) 스크롤 없이도 모바일 환경에서 사용에 원활하게 된다.
4. box-sizing : border-box ; 의 등장
예를 들어 두 개의 box 를 만들었다고 가정한다. 두 개의 공통 width 값은 500px 인데, 다른 하나의 박스는 패딩과 border-width 값이 더 들어가서 실제 계산되는 width 값이 서로 다르게 된다.
기존 박스에 맞추기 위해 패딩과 테두리를 빼는 식으로 늘 원하는 것보다 작은 너비값을 지정해 오는 불편함을 해소하기 위해 등장한
* {
box-sizing: border-box;
}이렇게 하니까 해당 요소의 패딩과 테두리가 더는 너비를 넓히지 않는다!
5. position 의 4타입
5-1. static : 기본값
5-2. relative
별도 프로퍼티가 없다. static 과 동일하게 동장하지만 상대 위치가 지정되었다고 하면 (박스 2개의 포지션이 모두 relative다. 바로 아래 div 는 상위 div 에 상대적으로 움직임), 상대요소를 기준으로 top, bottom, left, right 를 지정하여 다르게 움직인다.
5-3. fixed
width 값이나 top, bottom 값 같은 프로퍼티가 있어야 동작한다.
화면 뷰포트에, 페이지에 고정된다. fixed 요소와 레이아웃을 구별하기 위해 마진이나 패딩등의 요소로 간격을 띄울 수 있다.
5-4. absolute
가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다.
대개 부모 요소가 relative 로 지정된 요소에 absolute 로, 부모 요소 기준으로 상대 위치를 지정해 준다. 없으면 문서 본문을 기준으로 움직이게 될 것이다.
6. float 속성
웹 요소를 문서 위에 (왼쪽 또는 오른쪽 구석에 요소가 배치되게) 떠 있게 만든다.
주로 왼쪽에 이미지, 오른쪽에 텍스트 이렇게 나란히 표시해 주고자 할 때 사용한다. 이미지와 텍스트의 적당한 간격을 유지하기 위해 margin-right 혹은 left 도 사용할 수 있겠지.
.boxes {
width: 120px;
height: 70px;
}
.box-bottom {
background-color: DeepSkyBlue;
float: right;
}
플로팅된 요소는 반드시 width 값이 지정되어 있어야 한다. 그렇지 않으면 요소는 포함된 요소의 전체 요소 폭을 가정하고 float 값을 변경해도 눈에 보이는 결과가 나오지 않게 된다.
6-1. clear 속성 - float 속성 해제하기
float 속성은 여러 개의 요소를 동시에 띄울 수 있다. 하지만 각각의 float 요소들의 높이가 제각각 이라면 페이지의 레이아웃에 영향을 미칠 것이다. 요소들이 서로 부딫힐 수 있고 어떤 요소가 왼쪽 또는 오른쪽으로 가는데 제한을 받을 수 있다.
왜냐하면 float 속성을 이용해 페이지 요소를 왼쪽, 오른쪽으로 배치하면 그 다음에 넣는 다른 요소들에게도 똑같은 속성이 전달되기 떄문이다.
그것이 이제 더 유용하지 않다 라고 알려줄 때 쓰는 속성이 clear 속성이다.
float: left; 로 왼쪽으로 배치했다면 clear: left; 로 종료하고 right 도 마찬가지겠지.
float 속성 값이 left 인지 right 인지와 상관없이 무조건 기본 상태로 되돌리고 싶다면 clear:both; 라고 하면 된다.
6-2. clearfix, overflow 사용하기
부모요소보다 자식요소의 이미지가 커서 자식 이미지를 오른쪽 플로팅 했을 때 이미지가 부모 요소를 이미 넘쳐버리게 된다. 이른바 overflow.
overflow 를 auto 로 지정하면 한결 보기 좋게 되고 위의 clear 속성보다 사용에 적절하다.
7. html5 에 생겨난 헤더 섹션 푸터에 대해
7-1. header & navigation bar : 링크들의 list
링크들의 리스트, ul 과 li tag 로 대부분 구성된다.
- 직관적인 박스모델에는 box-sizing:border-box; 를 사용한다.
- inline 요소는 (a 태그 같은) margin 을 정의하기 위해서 display: inline-block; 을 설정한다.
- 텍스트간 간격 유지에는 패딩이나 마진을 정의.
- 텍스트간 높이는 line-height 로 정의
7-2. section & aside
- section : 컨텐츠 영역에 해당하며 다시 여러 개의 article 영역으로 세분화 할 수 있다.
- aside : 콘텐츠에 대한 nav item 이나 부가 정보 영역을 담는다.
7-3. footer
컨텐츠 영역 다음에 마지막으로 배치된다. 얘도 뭔가 position:fixed 를 써야 할 것 같지만 본문을 가리게 될 것이므로 fixed 를 사용해서는 안 된다.
- 대안 : absolute 프로퍼티를 설정한다. absolute 는 다른 요소가 먼저 위치를 점유하고 있어도 뒤로 밀리지 않고 덮어쓰게 된다. (부유 또는 부유 객체라 한다.)
