고정 헤더 영역
상세 컨텐츠
본문
CSS란?
CSS(Cascading Style Sheets)는 HTML 요소의 스타일(색상, 크기, 배경 등)을 지정하는 언어로 HTML이 웹 페이지의 구조(뼈대) 를 담당한다면, CSS는 디자인(옷) 을 담당하는 역할
CSS의 역할
- 텍스트 스타일링 (글꼴, 색상, 크기 조절)
- 레이아웃 조정 (화면 배치, 여백 설정)
- 반응형 웹 디자인 (모바일, 태블릿 최적화)
CSS 적용 방법
1) 인라인 스타일 (style 속성 사용) : HTML 태그 안에 직접 CSS를 적용하는 방식
<p style="color: blue; font-size: 20px;">이 문장은 파란색이고, 글자 크기가 20px입니다.</p>
장점: 빠르게 적용 가능
단점: 유지보수가 어렵고, 코드가 지저분해짐
2) 내부 스타일 (<style> 태그 사용) : HTML 문서의 <head> 안에 <style> 태그를 사용하여 적용하는 방식
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p>이 문장은 파란색이고, 글자 크기가 20px입니다.</p>
</body>장점: HTML과 CSS가 한 파일에 있어 관리가 쉬움
단점: 스타일이 많아지면 복잡해짐
3) 외부 스타일 (CSS 파일 분리) : HTML과 CSS를 분리하여 별도의 CSS 파일을 만드는 방식
//style.css (CSS파일)
p {
color: blue;
font-size: 20px;
}//index.html (HTML 파일)
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>이 문장은 파란색이고, 글자 크기가 20px입니다.</p>
</body>장점: 여러 HTML 파일에서 동일한 CSS를 사용할 수 있어 효율적
단점: 파일을 따로 관리해야 함
CSS 기본 문법
선택자 {
속성: 값;
}예시)
h1 {
color: red;
font-size: 30px;
}
1) 태그 선택자: 태그 이름으로 스타일 적용
p {
color: green;
}2) 클래스 선택자: 특정 그룹에 스타일 적용 (. 사용)
/css
.highlight {
background-color: yellow;
}//html
<p class="highlight">이 문장은 배경이 노란색입니다.</p>3) 아이디 선택자: 특정 요소에만 스타일 적용 (# 사용)
//css
#main-title {
font-weight: bold;
}// html
<h1 id="main-title">이 제목은 굵게 표시됩니다.</h1>4) 자식 선택자 (>), 후손 선택자 (공백)
div > p { color: blue; } /* div의 직접적인 자식 p만 적용 */
div p { color: red; } /* div 내부 모든 p에 적용 */CSS 주요 속성
1) 텍스트 관련 속성
p {
color: blue; /* 글자 색상 */
font-size: 20px; /* 글자 크기 */
font-weight: bold; /* 굵기 */
text-align: center; /* 가운데 정렬 */
}2) 배경 관련 속성
body {
background-color: lightgray; /* 배경색 */
background-image: url("image.jpg"); /* 배경 이미지 */
background-size: cover; /* 화면에 맞게 조정 */
}3) 박스 모델 (여백, 테두리)
div {
width: 200px; /* 가로 크기 */
height: 100px; /* 세로 크기 */
padding: 10px; /* 내부 여백 */
margin: 20px; /* 바깥 여백 */
border: 2px solid black; /* 테두리 */
}4) 레이아웃 (Flexbox)
.container {
display: flex;
justify-content: center; /* 가로 중앙 정렬 */
align-items: center; /* 세로 중앙 정렬 */
}
간단한 CSS 스타일 적용 예제
<!DOCTYPE html>
<html>
<head>
<title>CSS 연습</title>
<link rel="stylesheet" href="style.css">
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.highlight {
color: white;
background-color: blue;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>CSS 배우기</h1>
<p class="highlight">이 문장은 스타일이 적용되었습니다!</p>
</body>
</html>728x90
'기초 > IT 기본 지식' 카테고리의 다른 글
| #12 HTML (0) | 2025.02.04 |
|---|---|
| #11 프롬프트 엔지니어링 (1) | 2025.01.01 |
| #10 풀스택 개발 (1) | 2024.12.04 |
| #9 백앤드 개발 (0) | 2024.12.02 |
| #8 프런트앤드 개발 (2) | 2024.11.06 |
