[Study] HTML/CSS | 05 단위, 배경, 박스모델

DAVEMINS·2023년 10월 7일

-Study

HTML/CSS

목록 보기

5/8

속성 - 정의와 구문

W3C

속성 - 단위

CSS 속성과 값을 사용할 때 값과 함께 많이 사용되는 것 중의 하나가 단위입니다.

절대 길이 : px, pt

상대 길이 : %, em, rem, vw

속성 - 색상

폰트의 색상 값을 적용할 때 사용하는 속성은 color 속성입니다.

<!-- 색상 값 지정 방식 -->

<!-- 컬러 키워드 -->
<h1 style="color: red"> heading </h1>

<!-- 16진법 -->
<h1 style="color: #ff0000"> heading </h1>

<!-- 16진법 -->
<h1 style="color: #f00"> heading </h1>

<!-- RGB() -->
<h1 style="color: rgb(255,0,0)"> heading </h1>

<!-- RGBA() -->
<h1 style="color: rgba(255,0,0, 0.5)"> heading </h1>

속성 - background

background 속성은 요소의 배경에 관련된 속성을 지정할 때 사용합니다.

div {
/* background-color */
background-color: yellow;

/* background-image */
background-image: url(https://www.w3schools.com/CSSref/img_tree.gif);

/* background- repeat */
background-repeat: no-repeat;

/* background-position */
background-position: center top;

/* background-attachment */
/* 화면 스크롤에 따른 배경 이미지의 움직임 여부를 지정하는 속성입니다. */
}

속성 - boxmodel

HTML의 모든 요소는 사각형의 박스 형태로 만들어집니다.

박스는 총 4가지의 세분된 영역으로 구성되어있으며 영역마다 다양한 스타일을 적용할 수 있습니다.

이 4가지 영역을 통틀어서 박스모델이라고 합니다.

속성 - border

border 속성은 요소의 테두리에 관련된 속성을 지정할 때 사용합니다.

테두리의 굵기, 모양, 색상을 지정할 수 있는 속성들이 있으며,

앞서 배운 background 속성처럼 여러 속성을 축약하여 적용할 수도 있습니다.

div {
/* border-width */
border-width: 10px;

/* border-style */
border-style: solid;

/* border-color */
border-color: #000;
}

속성 - padding

박스 모델 강의에서 padding 영역은 border와 content 사이의 여백이라는 것에 대해 배웠습니다.

이번 강의에서는 padding의 세부 속성값을 적용하는 것을 중심으로 자세히 배워보도록 하겠습니다.

div {
/* padding-top */
padding-top: 10px;

/* padding-right */
padding-right: 20px;

/* padding-bottom */
padding-bottom: 40px;

/* padding-left */
padding-left: 20px;

속성 - margin

div {
/* margin-top */
margin-top: auto;

/* margin-right */
margin-right: 20px;

/* margin-bottom */
margin-bottom: auto;

/* margin-left */
margin-left: 20px;

/* Margin Collapsing */
/* 마진이 겹칠 때 큰 수치를 우선으로 병합되는 현상이다 */
}