[CSS]CSS3 속성

1. 박스 속성

1.1 박스 크기와 여백

• HTML 요소는 기본적으로 박스 모델을 따름
• 박스의 크기는 `width`와 `height`로 정의
• 전체너비=내용width+2×(margin+border+padding)
• 전체높이=내용height+2×(margin+border+padding)

div {
    width: 100px;
    height: 100px;
    background-color: red;
}

 

1.2 여백 (Margin, Padding, Border)

속성	설명	예제
margin	요소 바깥쪽 여백 (다른 요소와 거리 조정)	`margin: 10px;`
padding	요소 안쪽 여백 (내용과 테두리 간격)	`padding: 20px;`
border	요소의 테두리	`border: 2px solid black;`

div {
    margin: 10px;
    padding: 20px;
    border: 2px solid black;
}

 

✅ 핵심 요점 정리

항목	설명
박스 모델	HTML 요소는 박스 모델을 따름
크기 조정	`width`, `height` 속성 사용
여백 조정	`margin` (바깥 여백), `padding` (안쪽 여백)
테두리	`border` 속성으로 조정 가능

---

2. 가시 속성

2.1 display 속성

• 요소의 표시 방식을 설정하는 속성
• inline: width, height, margin, padding 속성이 지정되지 않음.(왼쪽 or 오른쪽 방향으로 설정은 가능)
• inline-block: width, height, margin, padding 속성이 지정됨.

속성값	설명
none	요소를 화면에서 숨김
block	블록 요소로 설정 (줄바꿈 포함)
inline	인라인 요소로 설정 (줄바꿈 없음)
inline-block	인라인 요소지만 크기 지정 가능

Inline / Inline-Block

 

#box {
    display: none; /* 요소 숨김 */
}

---

3. 배경 속성

3.1 배경 색상

• 요소의 배경 색상 지정

body {
    background-color: lightblue;
}

 

3.2 배경 이미지

속성	설명
`background-image`	배경 이미지를 설정
`background-size`	이미지 크기 조정
`background-repeat`	이미지 반복 여부
`background-attachment`	이미지의 부착 형태 지정
`background-position`	이미지의 위치 지정
`background`	한 번에 모든 배경 속성 입력

body {
    background-image: url('background.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 0 50%; //정중앙 위치
    background-attachment: fixed; //스크롤 이동해도 배경 이미지 고정
    
}

 

✅ 핵심 요점 정리

항목	설명
배경 색상	`background-color` 속성 사용
배경 이미지	`background-image` 속성 사용
이미지 크기	`background-size: cover;` 추천
이미지 반복	`background-repeat: no-repeat;`

---

4. 글자 속성

4.1 글자 크기(`font-size`)

• 글자 크기를 픽셀(px), 상대 단위(em, rem) 등으로 설정 가능

.a { font-size: 32px; }  /* 픽셀 단위 */
.b { font-size: 2em; }   /* 부모 요소 기준 배수 */
.c { font-size: large; } /* CSS 키워드 */
.d { font-size: small; } /* CSS 키워드 */

4.2글자(`font-family`)

• 특정 폰트를 지정하고, 폰트가 없을 경우 대체 폰트를 설정 가능
• 두 단어 이상으로 된 글꼴 이름에는 따옴표 사용

.font_arial { font-family: Arial, sans-serif; }
.font_roman { font-family: 'Times New Roman', serif; }

 

4.3 작은 스타일과 크기(` font-style`, `font-weight `)

속성	설명
`font-style`	글자의 스타일(기울기 등) 지정
`font-weight`	글자 굵기 지정

.font_italic { font-style: italic; }
.font_bold { font-weight: bold; }​

4.4 정렬 속성( `text-align`)

• 글자의 정렬 방식 지정

설명
`text-align`	텍스트 정렬 (left, center, right)
`line-height`	줄 간격 조정

p {
    text-align: center;
    line-height: 1.5;
}

4.5 링크 글자의 밑줄( `text-decoration`)

• 기본적으로 링크에 적용되는 밑줄 제거

a { text-decoration: none; }

 

✅ 핵심 요점 정리

설명	설명
글자 크기	`font-size`로 설정(px, em, rem 지원)
글꼴	`font-family`로 지정
스타일	`font-style: italic;`, `font-weight: bold;`
밑줄 제거	`text-decoration: none;`
정렬	` text-align: left/center/right;`

---

5. 위치 속성

5.1 `position`속성 개요

• 요소의 위치 지정 형식을 설정
• absolute: 화면상에서 어디든지 원하는 위치에 자유롭게 배치

속성	설명
`position: static`	기본 위치 (변경 없음)
`position: relative`	현재 위치 기준 이동 가능
`position: absolute`	부모 요소 기준 절대 위치
`position: fixed`	화면에 고정
`position: sticky`	특정 스크롤 위치에서 고정

div {
    position: absolute;
    top: 50px;
    left: 100px;
}

5.1 `z-index`속성

• 요소의 겹치는 순서를 지정하는 속성 (값이 클수록 앞에 표시됨)

.box1 { position: absolute; z-index: 100; }
.box2 { position: absolute; z-index: 10; }
.box3 { position: absolute; z-index: 1; }

 

✅ 핵심 요점 정리

항목	설명
`position`	요소의 위치 지정(static, relatives, absolute, fixed, sticky)
`z-index`	요소의 위쪽 배치 순서 지정

---

6. 유동 속성

6.1 `float` 속성

• 요소를 왼쪽 또는 오른쪽으로 배치

속성값	설명
`float: left`	요소를 왼쪽으로 배치
`float: right`	요소를 오른쪽 정렬

img {
    float: left;
    margin-right: 10px;
}

 

6.1 `clear` 속성

• `float`으로 인해 흐름이 깨지는 것을 방지하는 속성

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

 

✅ 핵심 요점 정리

항목	설명
`float`	요소를 왼쪽(`left`) 또는 오른쪽(`right`) 배치
`clear`	`float`의 영향 제거

---

7. 그림자와 그레이디언트 속성

7.1 글자 그림자 (`text-shadow`)

• 텍스트에 그림자 효과를 적용

h1 { text-shadow: 5px 5px 5px black; }​

값	설명
첫 번째 값	X축 이동
두 번째 값	Y축 이동
세 번째 값	흐림 정도
네 번쨰 값	그림자 색상

7.1 박스 그림자 (`box-shadow`)

box {
    box-shadow: 5px 5px 10px gray;
}

 

7.2 그레이디언트(`linear-gradient`)

• CSS3 Generator 를 통해 원하는 스타일 지정 가능

속성	설명
`linear-gradient`	직선 방향 색상 변환
`radial-gradient`	원형 방향 색상 변환

background: linear-gradient(to right, red, blue);

 

✅ 핵심 요점 정리

항목	설명
글자 그림자	`text-shadow`사용
박스 그림자	`box-shadow` 사용
그레이디언트	`linear-gradient`, `radial-gradient`

---

📎 참고자료

• MDN CSS 박스 모델
• MDN CSS 배경 속성
• HTML5 웹 프로그래밍 입문 4판 (김성윤 저, 한빛미디어)