CSS 기초 완전 정복 가이드! 🎨

안녕하세요, 초록대디 입니다! 🙋‍♂️ 오늘은 '유노코딩과 함께하는 더덕마켓 클론 코딩' 강의의 CSS 기초 모든 내용을 총정리하여, 웹 페이지를 더욱 매력적으로 만드는 CSS를 학습해보고자 합니다! 🚀

1. CSS란 무엇일까요? HTML과의 환상의 짝꿍! 🤝

CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 마크업 언어로 작성된 문서의 스타일을 꾸미기 위한 스타일 시트 언어입니다. HTML이 웹 페이지의 구조와 콘텐츠를 정의한다면, CSS는 그 문서를 시각적으로 꾸미고 스타일을 지정하여 레이아웃을 제어합니다. 마치 제가 Cursor로 코드를 구조화하고 n8n으로 워크플로우를 구성하는 것처럼, CSS는 HTML 구조에 시각적 질서를 부여하는 역할을 합니다.

HTML: 웹 페이지의 구조와 콘텐츠를 정의합니다.
CSS: 웹 페이지의 디자인(스타일)을 담당하며, HTML 문서에 스타일을 추가합니다.

CSS를 사용하면 HTML 코드와 디자인 코드를 분리하여 관리할 수 있어, 웹 페이지의 유지보수성을 높이고 디자인 변경을 용이하게 만듭니다. 현재 웹 표준으로 인정받는 CSS 버전은 CSS3입니다.

2. CSS 문법의 기본: 선택자, 속성, 값 🎯

HTML 코드가 '태그'로 구성되는 것처럼, CSS 코드는 다수의 '스타일 선언문'으로 구성됩니다.

선택자(Selector): 어떤 요소에 스타일을 적용할지에 대한 정보를 나타냅니다.
중괄호 {}: 선택한 요소에 적용할 스타일을 정의하는 영역입니다.
속성명(Property): 어떤 스타일을 정의하고 싶은지에 대한 정보입니다.
속성값(Value): 어떻게 정의하고 싶은지에 대한 정보입니다.

/* CSS 스타일 선언문의 기본 형태 */
선택자 {
  속성명: 속성값;
}

2.1. CSS 주석: 코드 속 메모장 🤫

CSS에도 주석이 있어 사람에게는 보이지만, 컴퓨터(웹 브라우저)에게는 보이지 않는 코드를 작성할 수 있습니다. 주로 코드에 대한 메모를 남기기 위한 용도로 사용됩니다.

형태: /* 주석 내용 */

3. CSS를 HTML에 적용하는 세 가지 방법 🎨

CSS 문서는 독립적으로 존재할 수 있지만, HTML 문서와 함께 사용해야 비로소 웹 브라우저 화면을 통해 보여집니다. HTML에 CSS를 적용하는 방법은 크게 세 가지가 있습니다.

인라인 스타일 (Inline Style): 태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식입니다. 선택자가 필요 없습니다. 특정 요소에만 스타일을 적용할 때 유용하지만, 웹 콘텐츠와 스타일시트를 분리하기 위해서는 사용하지 않는 편이 좋습니다.
```
<p style="color: blue;">글자를 파랗게 만들어줘</p>
```
내부 스타일 시트 (Internal Style Sheet): HTML 문서의 <head> 태그 안에 <style> 태그를 추가하여 그 안에 CSS 코드를 작성할 수 있습니다. '내부 스타일시트'라 표현하기도 합니다. 해당 HTML 문서 내에서만 스타일을 공유할 수 있습니다.
```
<head>
  <style>
    p { color: red; }
  </style>
</head>
```
외부 스타일 시트 (External Style Sheet): 가장 권장되는 방식입니다! 확장자가 .css인 스타일시트 파일을 생성해 그 안에 CSS 코드를 작성하고, HTML 문서에 이를 연결해줄 수 있습니다. 이때는 <link> 태그를 사용합니다. <link> 태그는 HTML 문서의 <head> 내부에 사용해야 합니다. 여러 HTML 문서에서 동일한 스타일을 공유할 수 있어 유지보수성이 가장 높습니다.
- <link href="./style.css" rel="stylesheet">
- href: 연결하고자 하는 외부 소스의 URL을 기술하는 속성입니다.
- rel: 현재 문서(HTML)와 외부 소스의 연관 관계를 기술하는 속성입니다.

4. CSS 선택자의 기본: 태그, 클래스, ID, 그룹 선택자 🎯

스타일 선언문의 선택자를 어떻게 입력하는가에 따라 스타일이 적용될 요소가 결정됩니다. CSS는 다음과 같이 여러 가지 유형의 선택자를 지원합니다.

전체 선택자 (*): 문서 내 모든 요소를 선택합니다.
태그 선택자 (태그명): 특정 태그로 만들어진 모든 요소를 선택합니다. (예: p, h1)
클래스 선택자 (.클래스값): 특정 class 속성 값이 지정된 모든 요소를 선택합니다. 여러 요소에 동일한 스타일을 적용할 때 유용합니다.
ID 선택자 (#아이디값): 특정 id 속성 값이 지정된 요소를 선택합니다. 특정 요소 하나에만 스타일을 적용할 때 사용하며, id는 문서 내에서 유일해야 합니다.
그룹 선택자 (선택자, 선택자, ...): 여러 유형의 선택자를 한꺼번에 선택하여 동일한 스타일을 적용합니다.

5. CSS의 핵심 개념: 상속과 캐스케이딩, 그리고 우선순위 🌊

CSS에서 스타일이 어떻게 적용되는지를 이해하는 데 있어 상속(Inheritance)과 캐스케이딩(Cascading), 그리고 우선순위(Specificity)는 매우 중요한 개념입니다.

5.1. 상속(Inheritance): 스타일 물려주기 👨‍👩‍👧‍👦

상속이란 하위 요소가 상위 요소의 특정 스타일 속성값을 물려받는 것을 의미합니다. 예를 들어, 부모 요소의 color나 font-family 속성은 자식 요소에게 자동으로 적용됩니다.

상속되는 속성: color, font-family, font-size, font-weight, text-align, cursor 등.
상속되지 않는 속성: background-color, background-image, border, display 등.

CSS는 스타일 속성의 상속 여부를 제어할 수 있는 세 가지 공용 키워드(전역 키워드)를 지원합니다. 이들은 모든 속성에 적용할 수 있습니다.

inherit: 상위 요소로부터 해당 속성의 값을 받아 사용합니다.
initial: 브라우저에 지정되어 있는 해당 속성의 기본값을 요소에 적용합니다.
unset: 상속 속성에 대해서는 inherit처럼, 상속되지 않는 속성에 대해서는 initial처럼 적용됩니다.

5.2. 캐스케이딩과 우선순위(Specificity): 스타일 충돌 시의 해결사 ⚔️

캐스케이딩(Cascading)은 여러 스타일 규칙이 충돌할 때, 어떤 스타일을 적용할지 결정하는 규칙입니다. 이때 우선순위(Specificity) 계산 방식에 따라 스타일이 적용됩니다.

인라인 스타일: 가장 높은 우선순위를 가집니다.
ID 선택자: 높은 우선순위 (#아이디값).
클래스, 속성, 가상 클래스 선택자: 중간 우선순위 (.클래스값, [속성명], :hover 등).
태그 선택자: 낮은 우선순위 (태그명).
!important: 어떤 규칙보다 무조건 우선 적용되지만, 스타일을 덮어쓰기 어렵게 만들고 유지보수를 어렵게 하므로 자주 사용하지 않는 것이 좋습니다.

6. HTML 요소의 유형 변경: `display` 속성 🔄

HTML 요소는 기본적으로 '블록 레벨 요소'와 '인라인 요소'로 나뉩니다.

블록 레벨 요소: 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성합니다. (예: div, p, h1 등)
인라인 요소: 자기에게 필요한 만큼의 공간만 차지합니다. (예: span, a 등)

display 속성은 이러한 요소의 유형을 변경할 수 있습니다.

display: none;: 요소를 화면에 표시하지 않습니다.
display: block;: 요소를 블록 레벨 요소로 만듭니다.
display: inline;: 요소를 인라인 요소로 만듭니다.
display: inline-block;: 요소를 인라인 요소처럼 표시하되, 블록 레벨의 너비/높이, 마진/패딩과 같은 특성을 추가할 수 있습니다.

7. 웹 페이지 레이아웃: 박스 모델, 문서의 흐름, 위치 지정 📦🌊📍

7.1. CSS 박스 모델 (Box Model): 모든 HTML 요소는 박스다! 📦

박스 모델은 모든 HTML 요소가 사각형 '박스'로 구성된다는 CSS의 기본 개념입니다. 각 박스는 네 가지 영역으로 나뉩니다:

Content (콘텐츠): 요소 내에 포함된 콘텐츠를 표시하는 영역입니다. (width, height로 크기 지정)
Padding (패딩): 테두리 안에서 콘텐츠 주변을 감싸는 안쪽 여백입니다.
Border (테두리): 콘텐츠와 안쪽 여백을 둘러싸는 테두리입니다.
- border-width (두께), border-style (모양), border-color (색상).
- border-radius 속성으로 모서리를 둥글게 만들 수 있습니다.
Margin (마진): 테두리 바깥에서 요소를 감싸는 바깥쪽 여백입니다.

여백 개별 지정: padding과 margin은 속성값 사용 개수에 따라 네 면(위, 오른쪽, 아래, 왼쪽)의 여백 크기를 달리 정할 수 있습니다.

7.2. 문서의 흐름과 `float` 속성 🌊

웹 요소들이 화면에 표시되는 순서는 기본적으로 HTML 문서 내에서 태그가 쓰여진 순서를 따릅니다.
float 속성은 요소를 이 문서의 흐름에서 제외시킨 채 부모 요소 또는 루트 요소를 기준으로 위치를 변경합니다. left, right, none 값을 사용할 수 있습니다.

float 적용 시 발생할 수 있는 역효과를 방지하기 위해 clear 속성을 사용할 수 있습니다.

7.3. 요소의 위치를 정밀하게 지정하는 `position` 속성 📍

position 속성은 문서 상에 요소를 배치하는 방법을 정의합니다. position이 배치 방법을 결정하면, top, bottom, right, left 속성들이 최종 위치를 결정합니다.

static: 기본값으로, 요소를 일반적인 문서의 흐름에 맞게 배치합니다.
relative: 문서의 흐름에 맞춰 배치된 자리를 기준으로 요소를 이동시킵니다.
absolute: position이 지정된 상위 요소를 기준으로 요소를 이동시키며, 이때 요소는 문서의 흐름에서 제외됩니다.
fixed: 화면(뷰포트)을 기준으로 요소의 위치를 고정합니다. 스크롤해도 움직이지 않습니다.

7.4. 겹치거나 넘치는 요소 다루기: `z-index`와 `overflow` 겹쳐서

z-index: 요소의 쌓임 순서(stack order)를 정의할 수 있습니다. 정수 값을 지정하여 쌓임 맥락에서의 레벨을 정의하며, position 속성이 정의된 '위치 지정 요소(positioned element)'에만 적용할 수 있습니다. z-index의 기본값은 auto입니다.
overflow: 요소 내부에 콘텐츠 양이 많아져 요소의 크기를 벗어나는 '넘침 현상'을 처리합니다.
- visible: 기본값으로, 영역을 벗어난 콘텐츠를 그대로 보여줍니다.
- hidden: 영역을 벗어난 콘텐츠를 잘라내어 보이지 않게 합니다.
- scroll: 잘려진 콘텐츠 방향으로 스크롤바를 만듭니다.
- auto: 웹 브라우저의 설정값을 따르며, 데스크톱 브라우저에서는 주로 scroll로 처리됩니다.

8. 다양한 스타일 속성: 색상, 텍스트, 배경 등 🎨📝🏞️

8.1. 색상 지정 방법: `color` 속성 🌈

글자색을 지정할 때는 color 속성을 사용하며, 색 지정 방법은 글자색, 테두리색, 배경색 모두에 동일하게 적용됩니다.

키워드: red, blue 등 색상 이름을 사용합니다.
rgb() 함수: 빛의 3원색(Red, Green, Blue) 비율을 0~255 값으로 지정합니다. (rgba()는 투명도(alpha) 추가).
hsl() 함수: 색조(Hue), 채도(Saturation), 조도(Lightness)를 각각 지정합니다. (hsla()는 투명도 추가).
16진수 값: 해시(#) 기호로 시작하는 여섯 자리 16진수 값을 입력하는 방법을 사용하기도 합니다. 이때 입력하는 16진수 값을 'RGB 색상 코드'라고 부르기도 합니다.

8.2. 텍스트 꾸미기: `font`, `text` 속성 ✏️

font-family: 텍스트의 글꼴을 정의할 때 사용합니다. 한 개 이상의 글꼴을 지정할 수 있으며, 가장 먼저 쓰여진 글꼴이 우선적으로 적용됩니다. 시스템에 해당 폰트가 설치되어 있지 않은 경우에도 웹 서버로부터 이를 제공받아 사용할 수 있는 '웹 폰트'를 이용하면 문제가 발생하는 것을 방지할 수 있습니다.
font-size: 글자 크기를 지정합니다.
font-weight: 글자 두께를 지정합니다.
line-height: 행 높이 (줄 간격)를 지정합니다.
text-align: 텍스트 정렬 방식을 지정합니다. (예: left, center, right)
text-decoration: 텍스트 줄 긋기를 지정합니다. (예: underline, line-through, none)

8.3. 배경 스타일: `background` 속성 🏞️

요소의 배경을 꾸밀 수 있습니다. 박스 모델의 바깥쪽 여백을 제외한 나머지 영역 안에서 요소의 콘텐츠를 뒷받침합니다.

background-color: 요소의 배경 색상 지정.
background-image: 요소의 배경 이미지 지정.
background-repeat: 배경 이미지의 반복 패턴.
background-position: 배경 이미지의 위치.
background-size: 배경 이미지의 크기.
background-clip: 요소 내 배경의 적용 범위.
background-origin: 요소 내 배경의 시작 위치.

9. 다양한 CSS 단위: 크기 정밀 제어 📏

요소의 크기, 간격 등을 설정할 때 다양한 단위를 사용할 수 있습니다.

고정 단위:
- px (픽셀): 화면의 고정된 크기를 의미합니다.
상대 단위:
- em: 부모 요소의 글꼴 크기를 배수로 계산해 적용하는 상대 단위입니다.
- rem: 루트 요소(<html> 태그)의 글자 크기를 배수로 계산해 적용하는 상대 단위입니다. (루트 요소는 문서의 시작 부분을 뜻합니다).
- %: 부모 요소의 크기에 비례하는 백분율입니다.
- vw (Viewport Width): 뷰포트 너비의 100분의 1입니다.
- vh (Viewport Height): 뷰포트 높이의 100분의 1입니다.
- vmin: 뷰포트 너비와 높이 중 작은 쪽의 100분의 1입니다.
- vmax: 뷰포트 너비와 높이 중 큰 쪽의 100분의 1입니다.

10. 반응형 웹 디자인: 미디어 쿼리 (Media Query) 📱💻

반응형 웹이란, 다양한 기기나 브라우저의 크기에 맞게 웹 문서의 구성이나 크기를 변경해가며 반응하는 웹문서 또는 이를 위해 사용하는 기법을 뜻합니다.

미디어 쿼리(media query)는 미디어 타입(예: 화면)을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성(예: 화면 너비)을 감지할 수 있는 유용한 모듈(기능)입니다. 이를 통해 특정 조건이 만족될 때만 적용되는 스타일을 정의할 수 있습니다.

기본 구조: @media 미디어_타입 and (조건에_대한_물음) { 스타일 선언문 }
주요 쿼리: min-width, max-width, min-height, max-height (디스플레이 영역), orientation (portrait 또는 landscape 감지), color, color-index, aspect-ratio 등.

11. 요소에 생동감을! 변형(Transform), 전환(Transition), 애니메이션 효과 ✨🎬

11.1. 변형 (`transform`) 속성: 요소의 크기나 위치 바꾸기 ↔️↕️🔄

웹 요소에는 변형을 적용할 수 있습니다. 변형이란 요소의 크기나 위치를 바꾸는 것을 뜻하며, 요소의 x축과 y축을 기준으로 바꿉니다. CSS의 transform 속성을 사용하며, CSS가 지원하는 다양한 변형 관련 함수들을 속성값으로 지정합니다.

translate(x, y): 지정한 크기만큼 x축, y축 방향으로 이동합니다.
scale(x, y): 지정한 크기만큼 x축, y축으로 확대 및 축소합니다.
skew(x, y): 지정한 각도만큼 x축, y축으로 비틀어 왜곡합니다.
rotate(deg): 지정한 각도만큼 회전합니다.

11.2. 전환 (`transition`) 속성: 스타일을 부드럽게 변화시키기 💨

transform이 단순한 변형이라면, transition 속성을 이용하면 요소에 지정되어 있는 스타일 속성을 완전히 다른 스타일로 점진적으로 변화시킬 수 있습니다. 또한, 스타일이 변화할 때의 시간이나 변화 속도 등을 추가로 지정할 수 있어 다양한 애니메이션 효과를 만들 수도 있습니다. transition은 단축 속성으로, 변화를 주고자 하는 속성, 실행 시간, 실행 방법, 지연 시간 등에 대한 정보를 포함할 수 있습니다.

transition-property: 변화 대상 속성을 지정합니다.
transition-duration: 변화가 실행될 시간을 지정합니다.
transition-delay: 변화 시작 전 지연 시간을 지정합니다.
transition-timing-function: 변화 실행 시 실행 곡선 방식을 지정합니다. (예: ease, linear, ease-in, ease-out).

11.3. 애니메이션 효과: 움직이는 웹 페이지 만들기 🎞️

CSS는 웹 페이지 상에 표시되는 콘텐츠가 TV 애니메이션과 같은 동적 움직임을 구현할 수 있도록 @keyframes 모듈과 animation 속성을 지원합니다.

@keyframes: 애니메이션을 표현하는 여러 개의 프레임을 정의합니다. 백분율을 이용해 프레임을 나누거나, from (0%)과 to (100%) 키워드로 간단하게 나눌 수도 있습니다.
animation: @keyframes로 정의한 애니메이션을 실행하고 제어합니다.
- animation-name, -duration, -delay, -timing-function, -direction, -iteration-count, -fill-mode, -play-state 등 다양한 하위 속성들을 함께 지정하여 애니메이션의 실행 시간이나 방식 등을 추가로 정의할 수 있습니다.

12. 모듈화 디자인: 컴포넌트 기반 개발의 중요성 🧩

반응형 웹 개발의 대세는 '페이지 만들기'에서 '컴포넌트 만들기'로 이동했다고 해도 과언이 아닙니다.

컴포넌트(Component): 독립적이고 재사용이 가능한 모듈을 뜻합니다.
이점: 마치 블록 장난감을 조립하듯 각각의 컴포넌트 간 조합을 이용해 화면을 구성할 수 있어 효율이 좋아집니다.
- 반응형 컴포넌트를 만들고 조립하면 페이지는 자연스럽게 반응형 페이지가 됩니다.
- 스타일 재사용이 용이하고, 필요한 경우 추가 스타일을 적용할 수 있습니다.
- 페이지의 일관성을 유지하기가 용이합니다.

실습 하기! 🚀

아래에는 '유노코딩과 함께하는 더덕마켓 클론 코딩' 강의의 실습 내용 입니다.

프로필 페이지 꾸미기

이전에 HTML 실습에서 만들었던 프로필 페이지를 CSS를 활용해서 꾸며보았습니다.

채팅방 만들기

'학습 내용' 카테고리의 다른 글

자바스크립트 입문! 변수와 함수로 코딩 기초 다지기! 💻 (0)	2025.06.20
HTML 기초 완전 정복 가이드! 🚀 (2)	2025.06.18
웹 페이지에 생명을 불어넣는 마법! CSS 기초 이론 2 (0)	2025.06.16
웹 페이지에 생명을 불어넣는 마법! CSS 기초 이론 1 (2)	2025.06.13
웹 문서의 시작: HTML 기초 이론 정복하기 (0)	2025.06.12

1인 개발자 생존일기

CSS 기초 완전 정복 가이드! 🎨

1. CSS란 무엇일까요? HTML과의 환상의 짝꿍! 🤝

2. CSS 문법의 기본: 선택자, 속성, 값 🎯

2.1. CSS 주석: 코드 속 메모장 🤫

3. CSS를 HTML에 적용하는 세 가지 방법 🎨

4. CSS 선택자의 기본: 태그, 클래스, ID, 그룹 선택자 🎯

5. CSS의 핵심 개념: 상속과 캐스케이딩, 그리고 우선순위 🌊

5.1. 상속(Inheritance): 스타일 물려주기 👨‍👩‍👧‍👦

5.2. 캐스케이딩과 우선순위(Specificity): 스타일 충돌 시의 해결사 ⚔️

6. HTML 요소의 유형 변경: `display` 속성 🔄

7. 웹 페이지 레이아웃: 박스 모델, 문서의 흐름, 위치 지정 📦🌊📍

7.1. CSS 박스 모델 (Box Model): 모든 HTML 요소는 박스다! 📦

7.2. 문서의 흐름과 `float` 속성 🌊

7.3. 요소의 위치를 정밀하게 지정하는 `position` 속성 📍

7.4. 겹치거나 넘치는 요소 다루기: `z-index`와 `overflow` 겹쳐서

8. 다양한 스타일 속성: 색상, 텍스트, 배경 등 🎨📝🏞️

8.1. 색상 지정 방법: `color` 속성 🌈

8.2. 텍스트 꾸미기: `font`, `text` 속성 ✏️

8.3. 배경 스타일: `background` 속성 🏞️

9. 다양한 CSS 단위: 크기 정밀 제어 📏

10. 반응형 웹 디자인: 미디어 쿼리 (Media Query) 📱💻

11. 요소에 생동감을! 변형(Transform), 전환(Transition), 애니메이션 효과 ✨🎬

11.1. 변형 (`transform`) 속성: 요소의 크기나 위치 바꾸기 ↔️↕️🔄

11.2. 전환 (`transition`) 속성: 스타일을 부드럽게 변화시키기 💨

11.3. 애니메이션 효과: 움직이는 웹 페이지 만들기 🎞️

12. 모듈화 디자인: 컴포넌트 기반 개발의 중요성 🧩

실습 하기! 🚀

프로필 페이지 꾸미기

채팅방 만들기

'학습 내용' 카테고리의 다른 글

티스토리툴바

CSS 기초 완전 정복 가이드! 🎨

1. CSS란 무엇일까요? HTML과의 환상의 짝꿍! 🤝

2. CSS 문법의 기본: 선택자, 속성, 값 🎯

2.1. CSS 주석: 코드 속 메모장 🤫

3. CSS를 HTML에 적용하는 세 가지 방법 🎨

4. CSS 선택자의 기본: 태그, 클래스, ID, 그룹 선택자 🎯

5. CSS의 핵심 개념: 상속과 캐스케이딩, 그리고 우선순위 🌊

5.1. 상속(Inheritance): 스타일 물려주기 👨‍👩‍👧‍👦

5.2. 캐스케이딩과 우선순위(Specificity): 스타일 충돌 시의 해결사 ⚔️

6. HTML 요소의 유형 변경: display 속성 🔄

7. 웹 페이지 레이아웃: 박스 모델, 문서의 흐름, 위치 지정 📦🌊📍

7.1. CSS 박스 모델 (Box Model): 모든 HTML 요소는 박스다! 📦

7.2. 문서의 흐름과 float 속성 🌊

7.3. 요소의 위치를 정밀하게 지정하는 position 속성 📍

7.4. 겹치거나 넘치는 요소 다루기: z-index와 overflow 겹쳐서

8. 다양한 스타일 속성: 색상, 텍스트, 배경 등 🎨📝🏞️

8.1. 색상 지정 방법: color 속성 🌈

8.2. 텍스트 꾸미기: font, text 속성 ✏️

8.3. 배경 스타일: background 속성 🏞️

9. 다양한 CSS 단위: 크기 정밀 제어 📏

10. 반응형 웹 디자인: 미디어 쿼리 (Media Query) 📱💻

11. 요소에 생동감을! 변형(Transform), 전환(Transition), 애니메이션 효과 ✨🎬

11.1. 변형 (transform) 속성: 요소의 크기나 위치 바꾸기 ↔️↕️🔄

11.2. 전환 (transition) 속성: 스타일을 부드럽게 변화시키기 💨

11.3. 애니메이션 효과: 움직이는 웹 페이지 만들기 🎞️

12. 모듈화 디자인: 컴포넌트 기반 개발의 중요성 🧩

실습 하기! 🚀

프로필 페이지 꾸미기

채팅방 만들기

'학습 내용' 카테고리의 다른 글

관련글

티스토리툴바

6. HTML 요소의 유형 변경: `display` 속성 🔄

7.2. 문서의 흐름과 `float` 속성 🌊

7.3. 요소의 위치를 정밀하게 지정하는 `position` 속성 📍

7.4. 겹치거나 넘치는 요소 다루기: `z-index`와 `overflow` 겹쳐서

8.1. 색상 지정 방법: `color` 속성 🌈

8.2. 텍스트 꾸미기: `font`, `text` 속성 ✏️

8.3. 배경 스타일: `background` 속성 🏞️

11.1. 변형 (`transform`) 속성: 요소의 크기나 위치 바꾸기 ↔️↕️🔄

11.2. 전환 (`transition`) 속성: 스타일을 부드럽게 변화시키기 💨