웹페이지
CSS STEP 1 - CSS 기초
IT의 큰손
2023. 4. 12. 16:42
728x90
★ CSS, Cascading Style Sheet
- HTML 서식을 담당하는 언어
- 독립 실행이 안된다. 반드시 HTML 코드가 있어야 css 실행이 가능하다.
- CSS1, CSS2, CSS3(+HTML5)
- HTML 서식 기능 > CSS 서식 기능(확장) + 생산성
■ ex01) 요구사항] "안녕하세요." x 5번 출력
- 추가사항] 글자색 > 파란색
- 추가사항2] 글자색 > 빨간색
- HTML만 사용
<p><font color="blue">안녕하세요.</font></p>
<p><font color="blue">안녕하세요.</font></p>
<p><font color="blue">안녕하세요.</font></p>
<p><font color="blue">안녕하세요.</font></p>
<p><font color="blue">안녕하세요.</font></p>
<!-- 변경 -->
<p><font color="red">안녕하세요.</font></p>
<p><font color="red">안녕하세요.</font></p>
<p><font color="red">안녕하세요.</font></p>
<p><font color="red">안녕하세요.</font></p>
<p><font color="red">안녕하세요.</font></p>- CSS 사용
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* CSS 영역 */
div{ color : blue;}
</style>
</head>
<body>
<div>안녕하세요</div>
<div>안녕하세요</div>
<div>안녕하세요</div>
<div>안녕하세요</div>
<div>안녕하세요</div>
</body>
★ HTML <- 연결 -> CSS
- HTML 문서에 CSS를 적용하는 방법
- 코드 관리
- 코드 재사용
- 1. 인라인 스타일 시트(Inline Style Sheet)
- <태그 style="">
- 모든 태그는 style 속성을 가진다.
- 서식을 태그에 직접 적용
- 단점 : CSS 재사용 불가능
- 장점 : 가독성 높음
- 특정 부분에 대한 서식을 정의(잘 사용 안함)
- ex) 소스코드
<h1>오늘의 할일</h1>
<ul>
<li>HTML 복습하기</li>
<li style="color:red;">VS Code 설치하기</li>
<li style="color:red;">DB 프로젝트 정리하기</li>
<li style="color:red;">밥먹기</li>
<li style="color:red;">잠자기</li>
</ul>- 2. 내부 스타일 시트(Embeded Style Sheet)
- <style> 태그내에 CSS를 작성
- 문서내의 여러개의 태그에 한번에 서식을 적용할 수 있다.
- 장점 : CSS 재사용 가능
- 단점 : 가독성 낮음
- 현재 페이지에서 반복되는 서식을 정의
- ex) 소스코드
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li { font-weight: bold;}
</style>
</head>
<body>
<h1>오늘의 할일</h1>
<ul>
<li>HTML 복습하기</li>
<li style="color:red;">VS Code 설치하기</li>
<li style="color:red;">DB 프로젝트 정리하기</li>
<li>밥먹기</li>
<li>잠자기</li>
</ul>
</body>- 3. 외부 스타일 시트(External Style Sheet)
- *.css 파일에 css를 작성
- 하위 폴더에 css파일을 따로 작성
- 장점 : CSS 재사용 높음(모든 문서에 적용 가능)
- 단점 : 가독성 최악, 여러 페이지의 서식을 한곳에 작성
- 사이트 내의 모든 페이지 공통 서식 정의
- ex) 소스코드
- HTML 파일 -> head 태그 안에 link 태그를 통해 css파일을 불러와 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li { font-weight: bold;}
</style>
<link rel="stylesheet" href="./css/ex02.css">
</head>
<body>
<h1>오늘의 할일</h1>
<ul>
<li>HTML 복습하기</li>
<li style="color:red;">VS Code 설치하기</li>
<li style="color:red;">DB 프로젝트 정리하기</li>
<li>밥먹기</li>
<li>잠자기</li>
</ul>
</body>
</html>- CSS 파일
li { font-style : italic;}
728x90