HTML 요소는 박스 형태로 표현된다 - CSS 박스모델을 공부해 보자.
웹 페이지에서 개발자도구(F12) - Elements를 열면 박스모델 속성을 볼 수 있다.
- content: 텍스트나 이미지가 들어가는 곳
- padding: content와 border 간의 간격
- border: 패딩을 감싸는 테두리
- margin: 요소와 요소 사이의 거리. border에서 다른 요소까지의 거리를 나타낸다.
● padding 설정 방법: 위쪽, 아래쪽, 왼쪽, 오른쪽 각각 설정하거나 한번에 설정할 수 있다.
<h1>은 위쪽, 오른쪽, 아래쪽, 왼쪽 각각 15px, 20px, 15px, 20px로 설정했고(시계방향으로 적용한다고 생각하면 쉽다),
<p>는 padding: 위쪽, 오른쪽, 아래쪽, 왼쪽 값을 한 줄에 작성한 것이다.
<p id="hello">는 한 줄에 위쪽-아래쪽에 15px, 오른쪽-왼쪽에 20px을 작성한 것이다. 위아래값이 같고, 오른쪽 왼쪽 값이 같은 경우에 쓰면 된다.
위와 같이 설정하고 열어봤더니 잘 적용되었다. 굿.
● border 설정 방법: <style> 하위에 다음과 같이 설정한다.
p{
border-width: 두께; (ex. 1px)
border-style: 선 종류; (ex. solid, dashed, dotted..)
border-color: 색깔; (ex. red, blue, white..)
}
border도 padding과 마찬가지로 위쪽, 오른쪽, 아래쪽, 왼쪽 각각 설정할 수도 있고, border-style: solid dashed dotted solid 와 같이 한번에 설정할 수도 있다. 두께, 선, 색깔을 한 번에 설정하고 싶으면 border: 5px solid blue 와 같이 쓰면 된다.
● margin 설정 방법: 마진도 패딩, 보더와 설정 방법이 비슷하다. 모든 크기를 같게 설정할 땐
p{
margin: 5px;
}
위쪽과 아래쪽의 크기를 같게(5px), 오른쪽과 왼쪽의 크기를 같게(10px) 하려면, margin: 5px 10px; 로 쓰면 된다.
margin: 5px 10px 15px 20px; 과 같이 모든 크기(위쪽, 오른쪽, 아래쪽, 왼쪽)를 한 줄에 작성할 수 있다.
● 텍스트 또는 이미지가 들어가는 content의 크기는 <body> 안에서 조정할 수 있다.
inherit은 부모 요소의 속성을 그대로 이어받는다는 뜻이다. 설정 결과는 다음과 같다.
콘텐트의 넓이 100px로 줄이니 글자가 줄바꿈 되었다.
박스모델 공부 끝.
'MS AI School' 카테고리의 다른 글
| DAY 5 - 자바스크립트 기초(데이터 유형, 함수, HTML에서 작성하기) (0) | 2022.10.13 |
|---|---|
| DAY 4 - CSS 심화 공부(레이아웃, 반응형) (0) | 2022.10.11 |
| DAY 2 - CSS를 배워보자 (0) | 2022.10.09 |
| Day 1 - HTML을 배워보자 (0) | 2022.10.09 |
| DAY 0 - Hello, world! 개발자 마인드, CS 기초 (0) | 2022.10.05 |