CSS 필수 속성 익히기

6.1 CSS의 특징 살펴보기

6.1.1 기본 스타일 시트

브라우저는 기본적으로 HTML 요소에 자체 스타일을 적용합니다. 이러한 기본 스타일을 덮어쓰는 것이 CSS의 주요 기능 중 하나입니다.

사용 시기: 기본 스타일을 사용자 정의 스타일로 변경할 때 사용됩니다.

예시:

p {
    margin: 0;
    padding: 0;
}

6.1.2 적용 우선순위와 개별성

CSS에서 스타일 적용 우선순위는 인라인 스타일, ID 선택자, 클래스 선택자, 태그 선택자의 순으로 결정됩니다. 이 우선순위에 따라 스타일이 적용됩니다.

사용 시기: 특정 요소에 더 강력한 스타일을 적용하고자 할 때 사용됩니다.

예시:

#unique {
    color: red;
}
.class {
    color: blue;
}
p {
    color: green;
}

6.1.3 상속

CSS의 일부 속성은 부모 요소로부터 자식 요소로 상속됩니다. 예를 들어, color, font 등의 속성은 상속됩니다.

사용 시기: 요소 간에 스타일을 일관되게 적용할 때 사용됩니다.

예시:

body {
    color: black;
}
p {
    font-size: 16px;
}

6.1.4 단위

CSS에서 크기, 길이 등을 정의할 때 사용되는 단위입니다. px, em, rem, % 등이 있습니다.

사용 시기: 요소의 크기, 여백, 패딩 등을 설정할 때 사용됩니다.

예시:

p {
    font-size: 14px;
    margin: 1em;
}

6.1.5 색상 표기법

색상을 정의할 때 사용되는 여러 표기법이 있습니다. 예를 들어, #RRGGBB 형태의 16진수 색상, rgb(), rgba(), hsl(), hsla() 등이 있습니다.

사용 시기: 요소의 텍스트, 배경, 테두리 등의 색상을 설정할 때 사용됩니다.

예시:

p {
    color: #ff0000; /* 빨간색 */
    background-color: rgb(255, 255, 0); /* 노란색 */
}

6.2 텍스트 속성으로 텍스트 꾸미기

6.2.1 font-family 속성

텍스트의 글꼴을 설정합니다.

사용 시기: 웹 페이지의 텍스트에 사용할 글꼴을 지정할 때 사용됩니다.

예시:

p {
    font-family: Arial, sans-serif;
}

6.2.2 font-size 속성

텍스트의 크기를 설정합니다.

사용 시기: 텍스트 크기를 조정할 때 사용됩니다.

예시:

p {
    font-size: 16px;
}

6.2.3 font-weight 속성

텍스트의 두께를 설정합니다. normal, bold, bolder, lighter 또는 100~900 사이의 숫자 값을 사용할 수 있습니다.

사용 시기: 텍스트의 굵기를 조정할 때 사용됩니다.

예시:

p {
    font-weight: bold;
}

6.2.4 font-style 속성

텍스트의 스타일을 설정합니다. normal, italic, oblique 값이 있습니다.

사용 시기: 텍스트를 기울여 표시할 때 사용됩니다.

예시:

p {
    font-style: italic;
}

6.2.5 font-variant 속성

텍스트의 소문자를 작은 대문자 형식으로 표시할 수 있습니다.

사용 시기: 대문자와 소문자의 스타일을 변경할 때 사용됩니다.

예시:

p {
    font-variant: small-caps;
}

6.2.6 color 속성

텍스트의 색상을 설정합니다.

사용 시기: 텍스트 색상을 변경할 때 사용됩니다.

예시:

p {
    color: blue;
}

6.2.7 text-align 속성

텍스트의 정렬을 설정합니다. left, right, center, justify 값이 있습니다.

사용 시기: 텍스트를 왼쪽, 오른쪽, 가운데 정렬할 때 사용됩니다.

예시:

p {
    text-align: center;
}

6.2.8 text-decoration 속성

텍스트에 밑줄, 취소선 등을 추가합니다. underline, overline, line-through 등의 값을 사용할 수 있습니다.

사용 시기: 텍스트에 밑줄을 추가하거나 취소선을 표시할 때 사용됩니다.

예시:

p {
    text-decoration: underline;
}

6.2.9 letter-spacing 속성

텍스트의 글자 간격을 설정합니다.

사용 시기: 텍스트의 가독성을 높이기 위해 글자 사이의 간격을 조정할 때 사용됩니다.

예시:

p {
    letter-spacing: 2px;
}

6.2.10 line-height 속성

텍스트의 줄 간격을 설정합니다.

사용 시기: 텍스트의 줄 간격을 조정하여 가독성을 높일 때 사용됩니다.

예시:

p {
    line-height: 1.5;
}

6.3 박스 모델을 구성하는 속성 다루기

6.3.1 margin 영역

요소와 다른 요소 사이의 외부 여백을 설정합니다.

사용 시기: 요소 간의 간격을 설정할 때 사용됩니다.

예시:

p {
    margin: 20px;
}

6.3.2 border 영역

요소의 테두리를 설정합니다.

사용 시기: 요소의 경계선을 설정할 때 사용됩니다.

예시:

p {
    border: 1px solid black;
}

6.3.3 padding 영역

요소의 내용과 테두리 사이의 내부 여백을 설정합니다.

사용 시기: 내용과 테두리 사이의 간격을 조정할 때 사용됩니다.

예시:

p {
    padding: 10px;
}

6.3.4 content 영역

요소의 실제 콘텐츠 영역을 설정합니다.

사용 시기: 요소의 콘텐츠 영역의 크기와 내용을 제어할 때 사용됩니다.

예시:

p {
    width: 100px;
    height: 50px;
}

6.3.5 박스 모델의 성격과 display 속성

display 속성은 요소의 박스 모델을 설정합니다. block, inline, inline-block, none 등이 있습니다.

사용 시기: 요소가 차지하는 공간과 레이아웃 방식을 결정할 때 사용됩니다.

예시:

p {
    display: inline-block;
}

6.4 배경 속성으로 요소의 배경 설정하기

6.4.1 background-color 속성

요소의 배경색을 설정합니다.

사용 시기: 요소의 배경색을 변경할 때 사용됩니다.

예시:

div {
    background-color: lightblue;
}

6.4.2 background-image 속성

요소의 배경에 이미지를 설정합니다.

사용 시기: 배경에 이미지를 추가할 때 사용됩니다.

예시:

div {
    background-image: url('background.jpg');
}

6.4.3 background-repeat 속성

배경 이미지를 반복할지 여부를 설정합니다. repeat, no-repeat, repeat-x, repeat-y 등의 값이 있습니다.

사용 시기: 배경 이미지의 반복을 제어할 때 사용됩니다.

예시:

div {
    background-repeat: no-repeat;
}

6.4.4 background-size 속성

배경 이미지의 크기를 설정합니다.

사용 시기: 배경 이미지의 크기를 조정할 때 사용됩니다.

예시:

div {
    background-size: cover;
}

6.4.5

background-position 속성
배경 이미지의 위치를 설정합니다.

사용 시기: 배경 이미지의 위치를 조정할 때 사용됩니다.

예시:

div {
    background-position: center;
}

6.4.6 background-attachment 속성

배경 이미지의 스크롤 동작을 설정합니다. scroll, fixed, local 값이 있습니다.

사용 시기: 배경 이미지가 스크롤에 따라 움직일지 고정될지를 설정할 때 사용됩니다.

예시:

div {
    background-attachment: fixed;
}

6.4.7 background 속성으로 한 번에 지정하기

배경과 관련된 여러 속성을 한 줄로 설정할 수 있습니다.

사용 시기: 배경과 관련된 여러 속성을 간결하게 정의할 때 사용됩니다.

예시:

div {
    background: url('background.jpg') no-repeat center/cover fixed;
}

6.5 위치 속성으로 HTML 요소 배치하기

6.5.1 position 속성

요소의 위치를 설정하는 속성입니다. static, relative, absolute, fixed, sticky 값이 있습니다.

사용 시기: 요소를 페이지 내에서 특정 위치에 배치할 때 사용됩니다.

예시:

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

6.5.2 float 속성

요소를 왼쪽 또는 오른쪽으로 띄워서 다른 콘텐츠와 함께 배치할 수 있도록 합니다.

사용 시기: 텍스트와 이미지 등을 함께 배치할 때 사용됩니다.

예시:

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

6.5.3 clear 속성

float 속성이 적용된 요소 주위에 다른 요소가 배치되지 않도록 합니다.

사용 시기: float 요소 다음에 새로운 행을 시작하고자 할 때 사용됩니다.

예시:

.clearfix {
    clear: both;
}

6.6 전환 효과 속성 적용하기

6.6.1 전환이란

전환(transition)은 요소의 스타일 속성이 일정 시간 동안 부드럽게 변화하도록 만드는 효과입니다.

사용 시기: 스타일 변화에 애니메이션 효과를 주고자 할 때 사용됩니다.

6.6.2 transition-property 속성

전환 효과를 적용할 속성을 지정합니다.

사용 시기: 특정 속성에만 전환 효과를 적용할 때 사용됩니다.

예시:

div {
    transition-property: background-color;
}

6.6.3 transition-duration 속성

전환 효과의 지속 시간을 설정합니다.

사용 시기: 전환 효과가 지속될 시간을 조정할 때 사용됩니다.

예시:

div {
    transition-duration: 2s;
}

6.6.4 transition-delay 속성

전환 효과가 시작되기 전에 지연 시간을 설정합니다.

사용 시기: 전환 효과를 지연시키고자 할 때 사용됩니다.

예시:

div {
    transition-delay: 0.5s;
}

6.6.5 transition-timing-function 속성

전환 효과의 속도 곡선을 설정합니다. linear, ease, ease-in, ease-out, ease-in-out 등이 있습니다.

사용 시기: 전환 효과의 속도 패턴을 조정할 때 사용됩니다.

예시:

div {
    transition-timing-function: ease-in-out;
}

6.6.6 transition 속성으로 한 번에 지정하기

전환과 관련된 여러 속성을 한 줄로 설정할 수 있습니다.

사용 시기: 전환 관련 속성을 간결하게 정의할 때 사용됩니다.

예시:

div {
    transition: background-color 2s ease-in-out 0.5s;
}

6.7 애니메이션 속성으로 전환 효과 제어하기

6.7.1 키 프레임 정의하기

애니메이션의 중간 단계 상태를 정의합니다. @keyframes를 사용하여 애니메이션의 각 단계를 지정할 수 있습니다.

사용 시기: 애니메이션 효과를 만들 때 사용됩니다.

예시:

@keyframes slidein {
    from {
        margin-left: 100%;
        width: 300%;
    }
    to {
        margin-left: 0%;
        width: 100%;
    }
}

6.7.2 animation-name 속성

실행할 애니메이션의 이름을 지정합니다.

사용 시기: 정의된 애니메이션을 적용할 때 사용됩니다.

예시:

div {
    animation-name: slidein;
}

6.7.3 animation-duration 속성

애니메이션의 지속 시간을 설정합니다.

사용 시기: 애니메이션이 얼마나 오래 실행될지를 설정할 때 사용됩니다.

예시:

div {
    animation-duration: 3s;
}

6.7.4 animation-delay 속성

애니메이션이 시작되기 전에 지연 시간을 설정합니다.

사용 시기: 애니메이션을 지연시키고자 할 때 사용됩니다.

예시:

div {
    animation-delay: 1s;
}

6.7.5 animation-fill-mode 속성

애니메이션이 시작되기 전과 끝난 후에 애니메이션 상태를 유지할지를 결정합니다.

사용 시기: 애니메이션이 끝난 후에도 그 상태를 유지하고자 할 때 사용됩니다.

예시:

div {
    animation-fill-mode: forwards;
}

6.7.6 animation-iteration-count 속성

애니메이션이 몇 번 반복될지를 설정합니다. 숫자 또는 infinite 값이 사용됩니다.

사용 시기: 애니메이션을 반복할 횟수를 설정할 때 사용됩니다.

예시:

div {
    animation-iteration-count: infinite;
}

6.7.7 animation-play-state 속성

애니메이션을 재생하거나 일시 중지하는 상태를 설정합니다.

사용 시기: 애니메이션을 중지하거나 재개하고자 할 때 사용됩니다.

예시:

div {
    animation-play-state: paused;
}

6.7.8 animation-direction 속성

애니메이션의 진행 방향을 설정합니다. normal, reverse, alternate, alternate-reverse 값이 있습니다.

사용 시기: 애니메이션의 방향을 변경하고자 할 때 사용됩니다.

예시:

div {
    animation-direction: alternate;
}

6.7.9 animation 속성으로 한 번에 지정하기

애니메이션과 관련된 여러 속성을 한 줄로 설정할 수 있습니다.

사용 시기: 애니메이션 관련 속성을 간결하게 정의할 때 사용됩니다.

예시:

div {
    animation: slidein 3s forwards;
}

6.8 변형 효과 적용하기

6.8.1 transform 속성

요소를 변형할 수 있습니다. 예를 들어, 회전(rotate), 크기 조정(scale), 기울이기(skew), 이동(translate) 등이 가능합니다.

사용 시기: 요소의 모양이나 위치를 변경하고자 할 때 사용됩니다.

예시:

div {
    transform: rotate(45deg);
}

6.8.2 transform-origin 속성

변형이 시작되는 기준점을 설정합니다.

사용 시기: 변형의 기준점을 조정할 때 사용됩니다.

예시:

div {
    transform-origin: top left;
}

6.9 웹 폰트와 아이콘 폰트 사용하기

6.9.1 구글 폰트 적용하기

웹에서 제공되는 구글 폰트를 사용하여 웹 페이지의 글꼴을 설정합니다.

사용 시기: 구글 폰트를 사용하여 웹 페이지의 텍스트를 더욱 아름답게 표시하고자 할 때 사용됩니다.

예시:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
    body {
        font-family: 'Roboto', sans-serif;
    }
</style>

6.9.2 아이콘 폰트 적용하기

아이콘 폰트를 사용하여 웹 페이지에 아이콘을

삽입합니다. Font Awesome과 같은 아이콘 폰트 라이브러리를 사용할 수 있습니다.

사용 시기: 이미지 대신 아이콘 폰트를 사용하여 웹 페이지에 아이콘을 삽입할 때 사용됩니다.

예시:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<i class="fas fa-home"></i>

```

이제 이 내용을 복사하여 원하는 곳에 사용하시면 됩니다. 추가적으로 더 필요한 부분이나 다른 챕터가 필요하다면 언제든지 말씀해 주세요!