[100일의 IT 초보 탈출] #23 웹페이지 꾸미기: CSS로 스타일 입히기 🎨

 

안녕하세요!

 어제는 HTML로 웹페이지의 구조를 만드는 방법을 알아봤는데요.

오늘은 그 구조에 디자인을 입히는 'CSS'에 대해 알아볼게요! 😊

 

💡 CSS란 무엇인가요?

 

CSS(Cascading Style Sheets)는 HTML로 만든 웹페이지에 스타일을 적용하는 언어예요.

HTML이 웹페이지의 구조를 정의한다면, CSS는 그 구조의 디자인을 담당하죠!

 

실생활 예시: 인테리어

 

HTML이 집의 구조를 짓는 것이라면, CSS는 인테리어 작업과 같아요:

• 벽지 색상 선택하기
• 가구 배치 및 크기 조절하기
• 조명 설치하여 분위기 연출하기

🎨 CSS 작성 방법

CSS를 HTML에 적용하는 방법은 세 가지가 있어요.

 

1. 인라인 스타일: HTML 태그에 직접 style 속성 사용
2. 내부 스타일 시트: HTML 문서의 head 태그 안에 style 태그로 정의
3. 외부 스타일 시트: 별도의 CSS 파일을 만들고 HTML에 연결 (가장 권장)

 

📝 CSS 기본 문법

 

CSS는 선택자와 속성:값 쌍으로 구성된 선언부로 이루어집니다.

 

🔍 CSS 선택자 종류

 

• 태그 선택자: HTML 태그 이름으로 선택 (예: h1 { color: blue; })
• 클래스 선택자: 클래스 속성으로 선택 (예: .highlight { background: yellow; })
• ID 선택자: ID 속성으로 선택 (예: #header { height: 80px; })
• 복합 선택자: 여러 선택자 조합 (예: div p { margin: 10px; })
• 가상 클래스: 특정 상태의 요소 선택 (예: a:hover { text-decoration: underline; })

 

🌈 주요 CSS 속성

 

• 텍스트 스타일: 색상, 글꼴, 크기, 정렬 등 텍스트 모양을 지정
• 박스 모델: 너비, 높이, 여백, 테두리 등 요소의 크기와 공간 지정
• 배경 스타일: 배경 색상, 이미지, 위치 등 배경 관련 스타일
• 레이아웃: 위치, 정렬, 배치 방식 등 화면 구성 방법

 

🌟 CSS 레이아웃 기법

 

• Flexbox: 1차원 레이아웃(행 또는 열)을 쉽게 구현
• Grid: 2차원 레이아웃(행과 열)을 동시에 제어
• Position: 요소의 정확한 위치를 지정
• Float: 요소를 왼쪽이나 오른쪽으로 띄움

 

✍️ 오늘의 IT 초보 탈출 한 줄 정리

 

"CSS는 웹페이지에 스타일을 입히는 언어로, 선택자와 다양한 속성을 활용해 HTML 요소를 아름답게 꾸밀 수 있어요!"

 

 

여러분의 IT 초보 탈출을 응원합니다! 🎉

궁금한 점이 있다면 댓글로 남겨주세요~