11강 : CSS 속성2

11-1. margin 및 padding 속성

---

중요!!

 

margin 및 padding 속성은 여러 번의 실습을 통해 익숙하게 해주어야 한다!

 

margin은 공간의 밖에, padding은 공간의 안에 적용된다고 생각하면 된다.

 

8강에서 다뤘던 margin 사용법에 대해 보자. (padding도 규칙은 같다.)

 

style 태그 안의 div에 주는 CSS 속성에서 margin: 30px 0 0 30px에 주목해보자.

여백을 위에는 30px, 오른쪽에는 0px, 아래에는 0px, 왼쪽에는 30px 준다는 의미이다.

위부터 시계방향으로 회전하여 위, 오른쪽, 아래, 왼쪽 순서로 명시해주면 된다.

 

margin: 30px 20px 10px 의 경우에는

여백을 위에는 30px, 오른쪽에는 20px, 아래에는 10px, 왼쪽에는 20px 준다는 의미이다.

오른쪽과 왼쪽에 같은 값을 줄 때는 왼쪽 값을 생략해준다.

 

margin: 30px 10px 의 경우에는

여백을 위, 아래에는 30px, 오른쪽, 왼쪽에는 10px 준다는 의미이다.

위, 아래가 같을 시 아래를 생략해주고 오른쪽, 왼쪽이 같을 시 마찬가지로 왼쪽을 생략해준다.

 

margin: 30px 의 경우에는

여백을 위, 오른쪽, 아래, 왼쪽 모두 동일하게 30px을 준다는 의미이다.

 

주의할 점!

margin의 경우 해당 태그가 차지하는 공간 겉에 덧붙여지기 때문에 전체의 width, height를 고려할 때 우선적으로 생각해주어야 한다!

 

 

 

 

11-2. box-sizing 속성

---

content-box는 기본적으로 너비, 높이를 계산할 때 padding, margin, border를 제외한 content 영역만을 대상으로 한다.

border-box 는 기본적으로 너비, 높이를 계산할 때 margin을 제외한 content, padding, border를 포함한다.

 

 

 

 

 

11-3. border 속성

---

이름 그대로 테두리 속성을 주는 것이다.

 

border: width, style, color 와 같은 형식이다.

width : 테두리의 두께,

style : 선의 형태(solid - 실선, dashed - 점선)

color : 테두리 색

 

border: 1px solid black;

 

border-top, border-bottom, border-left, border-right와 같이 일부만 설정도 가능하다.

그동안 CSS를 공부하며 여러 차례 다뤄봤기 때문에 예시는 생략한다.

 

 

 

 

 

11-4. background-image 속성

---

말 그대로 배경 이미지를 부여하는 속성이다.

url 속성에서 배운 것처럼 background-image: url('사진 경로'); 와 같이 사용하고

background-size 를 이용해 배경 사이즈(%)를 설정해준다.

 

background-repeat : 배경의 반복 여부를 설정한다. (repeat - 반복, no-repeat - 반복x, 디폴트는 반복이다.)

background-attachment : 스크롤의 영향 여부를 설정한다.

- scroll : 각 영역의 스크롤바, 전체 웹페이지의 스크롤바에 영향 받지 않고 사진은 그대로이다.

- fixed : 각 영역의 스크롤바를 움직였을 때 사진은 그대로이고, 전체 웹페이지의 스크롤바를 움직였을 때 사진의 드러나는 부분이 스크롤에 따라 바뀐다.

- local : 각 영역의 스크롤바를 움직였을 때 사진은 스크롤에 따라 드러나는 부분이 바뀌고, 전체 웹페이지의 스크롤바를 움직였을 때는 영향을 받지 않고 사진 그대로를 보여준다.

 

 

 

 

 

 

 

 

출처

https://www.inflearn.com/course/html-css-%EA%B0%95%EC%A2%8C#

인프런 실전 HTML & CSS 강좌