[길벗 학습단] 6장 CSS 필수 속성 다루기 (2)

3. 박스 모델을 구성하는 속성 다루기

html 문서의 각각의 요소는 사각형 박스로 둘러싸여있다. 즉 하나의 박스이다. 그 박스를 css로 적절히 배치해 레이아웃을 잡는다

1. margin(외부여백), padding(내부여백)

margin: 10px 20px 10px 20px; /* 차례대로 위-오른쪽-아래-왼쪽 */
margin: 10px 20px 10px ; /* 차례대로 위-오른쪽-아래. 왼쪽은 오른쪽이랑 같은 값 */
margin: 10px 20px; /* 위+아래, 오른쪽+왼쪽 */
margin: 10px; /* 전부 10px 씩 */

/* padding도 문법은 같다. */

margin 은 인접한 marign값이 좀 더 큰 값으로 통일되는 겹침 현상이 있다.

2. border

테두리.

border: 2px dotted red; /* 선 두께, 스타일, 색깔 */

3. content

width, height는 padding, border 사이즈까지 더한 값으로 나타난다. 즉 width를 100px 로 설정해도 padding:10px, border: 1px로 지정했으면 width 는 100+10+10+1+1 해서 122가 나오는 것이다. (높이도 마찬가지) 이런 귀찮은 일을 방지하기 위해 box-sizing 속성을 적어준다.

box-sizing: border-box; /* width, height 속성의 적용 범위를 border 영역으로 제한

4. display

block : 한줄 다 차지하는 것
inline : 요소의 너비가 콘텐츠 크기만큼만 차지하는 것
inline-block : 요소의 너비가 콘텐츠의 크기만큼 차지하지만 그 외의 성격은 블록 성격을 가짐

4. 배경 속성으로 요소의 배경 설정하기

background-color: 색상값;
background-image : url('이미지 경로');

background-repeat: no-repeat; /* 이미지 반복하지 않게 */
background-repeat: repeat-x; /* 가로 방향으로 반복. y로 적으면 세로 방향으로 반복 */

background-size: auto; /* 이미지 크기 유지 */
background-size: cover; /* 이미지 가로 세로 비율 유지하면서 확대, 축소 해 배경에 꽉 채우기 */

background-position:<x 위치> <y 위치>;
background-attachment: fixed; /* 스크롤해도 배경 고정 */

/* 위 코드는 background로 한꺼번에 설정 가능하지만 position과 size는 순서를 지켜준다. */
background : color, image, repeat, position/size, attachment

답글 남기기

이메일 주소는 공개되지 않습니다.