CSS

CSS float 속성

float를 사용하면 해당 요소를 문서의 흐름과 별개로 취급하여, 왼쪽이나 오른쪽으로 띄울 수 있다. float 적용시, block 속성이 사라진다.

float 속성

HTML Code X CSS Code

clear 속성

float 요소와 겹치는 경우, float 속성을 해제한다.

clear 속성

HTML Code X CSS Code

CSS float 레이아웃

CSS로 레이아웃을 구현할 때는 float속성을 자주 사용한다.

1. float를 해제할 임의 요소 삽입

<br style="clear : both">

2. 부모에 overflow 설정

.overflow {
  overflow: auto;
  /* float 요소와 자식 요소의 margin값을 인식 */
  overflow: hidden;
}

3. 부모에 float 설정

.float-left {
  float: left;
}

4. 가상선택자 이용

위의 3가지 방법은 side effect가 있다. 실제로 가상선택자를 이용하는 방벙이 많이 쓰인다.

/* 가상선택자 after는 해당 요소 뒤에 content가 생성
(임의 요소 삽입과 같은 역할) */
.clearfix::after {
  content: ' ';
  display: block;
  height: 0;
  clear: both;
}

CSS float 레이아웃 예제 결과

HTML Code X CSS Code

CSS 포지션

요소의 위치를 지정한다.

position
- static : 기본값
- relative : static과 같은 순서로 배치되지만, top/right/bottom/left 속성을 이용해 위치 지정 가능하다. 또한 자식 요소가 absolute일때 적용될수있게 해줌
- fixed : 브라우저 창을 기준으로 정렬
- absolute : 자신과 가장 가까운 position이 static이 아닌 부모를 기준(없을 경우 body 기준)으로 정렬

CSS 포지션 예제 결과

HTML Code X CSS Code

CSS 가운데 정렬

부모의 가로 가운데 정렬

전체 크기가 정해져 있지 않을 경우, 내용의 width만 지정한 후 좌/우 여백은 auto로 같게 처리한다.

#center {
  width: 500px;
  margin: 0 auto;
}

부모의 세로 가운데 정렬

부모 요소의 height와 line-height 값이 같을 경우 가운데로 정렬한다.

div {
  height: 50px;
}
#center {
  width: 500px;
  margin: 0 auto;
  line-height: 50px;
}

transform을 이용한 가운데 정렬

요소를 position: absolute로 설정한다. top/left를 부모의 50%만큼 이동 후 자신의 높이와 가로의 -50%만큼 위와 왼쪽으로 다시 이동한다. transform을 사용할 경우, 픽셀이 깨져보일 수 있다.

div.relative {
  position: relative;
}
#center {
  position: absolute;
  width: 500px;
  height: 50px;
  top: 50%;
  left: 50%;
  /* 자기 기준으로 움직인다 */
  transform: translate(-50%, -50%);
}

CSS 가운데 정렬 예제 결과

HTML Code X CSS Code

Semantic Tag

Document 구조를 위해 HTML 5에 추가됐다.

header : 머릿말, 페이지 맨위나 왼쪽에 삽입
nav : 내비게이션 링크, 가로/세로 형태의 메뉴에 사용
section : 콘텐츠 영역
article : 콘텐츠 내용
aside : 본문 이외의 내용

실습

패딩과 마진
- 패딩 : 콘텐츠 영역이기 때문에 클릭할 수 있는 공간을 늘리기 위해 사용
- 마진 : 콘텐츠 밖이기 때문에 단순히 요소 사이를 벌릴 때 사용
인라인은 높이 값을 가질 수 없으므로 display 값을 설정
CSS 선택자 우선순위가 완전히 같을 경우에는 아래에 있는 것이 우선순위가 있다.
다방 페이지는 960px 이하는 고려하지 않는 앱이다.
다방 페이지 footer의 아래 정렬은 인라인 스타일로 바꿔서 작업해야 한다.

CSS