고정 헤더 영역
상세 컨텐츠
본문
728x90
반응형
1. CSS
CSS(Cascading Style Sheets)는 HTML과 함께 사용되어 웹 페이지의 스타일과 레이아웃을 정의하는 스타일시트 언어입니다. HTML이 웹 페이지의 구조를 담당한다면, CSS는 글꼴, 색상, 여백, 정렬, 배경 등 시각적인 요소들을 제어하여 웹 페이지를 보다 보기 좋고 사용하기 쉽게 만들어줍니다. 또한, CSS는 동일한 스타일을 여러 페이지에 일관되게 적용할 수 있게 해주며, 미디어 쿼리를 사용하면 화면 크기나 장치 종류에 따라 반응형 디자인도 구현할 수 있습니다.
2. CSS 문법
선택자 {
속성: 값;
}
1. 선택자
선택자는 "어떤 HTML 요소에 스타일을 적용할지"를 지정합니다. 예를 들어, <p> 태그에 스타일을 적용하고 싶다면 p라는 선택자를 사용합니다.
2. 속성(Property)과 값(Value)
중괄호 { } 안에는 스타일을 정의하는 속성과 값이 들어갑니다.
- 속성(Property): 변경하고 싶은 스타일의 종류입니다. 예: color, font-size, background-color, margin, padding 등
- 값(Value): 해당 속성에 어떤 값을 적용할지 정합니다. 예: blue, 16px, center, 10px 등
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS</title>
<style>
body {
background-color: #adce09;
}
h1 {
color: deeppink;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS란?</h1>
</body>
</html>
3. 스타일 적용 방법
1. 인라인(inline) 스타일
HTML 태그 안에 직접 style 속성으로 CSS를 작성하는 방식입니다. 해당 태그 하나에만 스타일이 적용됩니다.
- 장점: 빠르게 특정 요소에 스타일 적용 가능
- 단점: 유지보수가 어려움, 스타일 중복이 많아짐
<p style="color: red; font-size: 18px;">이 문장은 인라인 스타일입니다.</p>2. 내부(internal) 스타일시트
HTML 문서의 <head> 태그 안에 <style> 태그를 사용하여 CSS를 작성하는 방식입니다. 해당 HTML 파일 전체에 적용할 수 있습니다.
- 장점: 한 문서 안에서 스타일을 통일되게 관리 가능
- 단점: HTML과 CSS가 섞여 있어 코드가 복잡해질 수 있음
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<p>이 문장은 내부 스타일시트입니다.</p>
</body>
</html>
3. 외부(external) 스타일시트
CSS 코드를 별도의 .css 파일에 작성하고, HTML 문서에서 link 태그로 연결하는 방식입니다.
여러 HTML 파일에서 재사용 가능하며 가장 많이 사용되는 방식입니다.
- 장점: 코드 분리로 관리가 쉬움, 여러 페이지에서 재사용 가능
- 단점: 파일이 분리되어 있으므로 연결이 필요함
p {
color: green;
font-style: italic;
}
<head>
<link rel="stylesheet" href="styles.css">
</head>
🔍 <link rel="stylesheet">
<link rel="stylesheet">는 HTML 문서에서 외부 CSS 파일을 연결할 때 사용하는 태그입니다. 여기서 link는 HTML과 외부 리소스를 연결(link)한다는 의미이고, rel="stylesheet"는 연결된 파일의 종류가 스타일시트(CSS)임을 나타냅니다. 이 태그는 <head> 태그 안에 위치하며, href 속성에는 연결할 CSS 파일의 경로를 지정합니다. 예를 들어 <link rel="stylesheet" href="style.css">는 style.css 파일을 HTML 문서에 적용하여, 그 안의 스타일을 HTML 요소에 반영하게 합니다.
아래 파일을 style.css 로 저장합니다.
/* 외부 스타일시트 */
h1 {
color: darkorange;
text-align: center;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 적용 방식 예제</title>
<!-- 외부 스타일시트 연결 -->
<link rel="stylesheet" href="style.css">
<!-- 내부 스타일시트 -->
<style>
.internal {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<!-- 외부 스타일 적용: h1 -->
<h1>CSS 적용 방식 비교</h1>
<!-- 내부 스타일 적용: 클래스 internal -->
<p class="internal">이 문장은 내부 스타일시트로 스타일이 적용되었습니다.</p>
<!-- 인라인 스타일 적용 -->
<p style="color: green; font-style: italic;">
이 문장은 인라인 스타일로 스타일이 적용되었습니다.
</p>
</body>
</html>
4. 다양한 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS</title>
<style>
/* 1. 태그 선택자 */
h1 {
color: deepskyblue;
text-align: center;
}
/* 2. 클래스 선택자 */
.intro {
font-weight: bold;
color: deeppink;
}
/* 3. 아이디 선택자 */
#favorite-list {
background-color: #f9f9f9;
padding: 10px;
}
/* 4. 그룹 선택자 */
p,
li {
font-size: 16px;
}
/* 5. 클래스 선택자 (li 하나에 적용) */
.highlight {
color: gold;
}
/* 6. 의사 클래스 선택자 */
a:hover {
color: yellowgreen;
text-decoration: underline;
}
/* 7. 속성 선택자 */
a[href^="https"] {
font-weight: bold;
color: red;
}
/* 8. 자식 선택자: ul 바로 아래에 있는 li만 선택 */
ul#favorite-list > li {
list-style-type: square;
}
/* 9. 자손 선택자: ul 내부에 있는 모든 p 태그 선택 */
ul#favorite-list p {
color: gray;
font-style: italic;
}
/* 10. 형제 선택자: .intro 바로 다음에 오는 p 한 개만 선택 */
p.intro + p {
background-color: #ffffcc;
}
</style>
</head>
<body>
<h1>선택자</h1>
<p class="intro">이 문단은 첫번째 문단입니다.</p>
<p>이 문단은 두번째 문단입니다.</p>
<ul id="favorite-list">
<li>김사과</li>
<li>반하나</li>
<li class="highlight">오렌지</li>
<p>출석부</p>
</ul>
<a href="https://www.naver.com">외부 링크</a>
<a href="#top">내부 링크</a>
</body>
</html>728x90
반응형
