11강. CSS 속성 2

※ 다음 강좌를 수강하고 내용을 정리한 것입니다.

https://www.inflearn.com/course/html-css-강좌#

실전 HTML & CSS 강좌 - 인프런

★이번 강의 매우 중요

 

11-1 margin 및 padding 속성

margin 및 padding 속성은 아주 중요한 속성으로 정확한 속성의 의미를 알아야 합니다.

margin은 background바깥에 여백이 생기고, padding은 background자체가 확장됩니다.

margin은 시계방향 순서로 적습니다. 모든 방향 같으면 값 하나만 줘도 됩니다. 값 두 개 주면 첫번째는 위아래, 두번째는 좌우입니다.
block레벨이 좌우로 붙는건 float:left;주고 바깥에 감싸는 태그에 overflow:hidden;을 줘서 구현합니다.

 

 

11-2 box-sizing 속성

box-sizing속성을 이용하면 전체 사이즈의 크기를 변경할 수 있습니다.

box-sizing : border-box;를 주면 border가 원래 사이즈 바깥으로 나가는게 안이라 내부에서 생성됩니다.

box-sizing : content-box;를 주면 border가 원래 사이즈 바깥으로 나갑니다.(기본값)

 

 

11-3 border 속성

border 속성을 살펴봅니다.

border-width, border-style, border-color묶어서 border: 15px solid yellow;로 적을 수 있습니다.

 

 

11-4 background-image 속성

배경을 지정하는 속성을 살펴봅시다.

background-size: 50%면 같은 이미지가 여러 개 들어갑니다.

background-repeat : no-repeat; 주면 이미지가 반복되서 들어가지 않고 하나만 들어갑니다.

background-attachment: fixed를 주면 브라우저의 시작점부터 시작해서 나열됩니다.

 

 

github.com/HoYoungChun/piro14/tree/master/%EC%9D%B8%ED%94%84%EB%9F%B0%20%EC%9D%B8%EA%B0%95

HoYoungChun/piro14