📌 1. CSS코드의 적용
- CSS는
Cascading Style Sheets의 약어로 HTML 태그에 스타일을 부여한다. - 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄여준다.
📍 1-1. HTML 문서 내에 작성
- CSS코드는
<style>...</style>태그 안에 담긴다. - HTML문서 내의 어느 위치에나 올 수 있지만 일반적으로
<head>태그 안에 위치한다.- 작성 예시
<head> ... <style> li{ color:plum; text-decoration: underline; } </style> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body>- 출력결과
📍 1-2. 외부 파일 참조
-
CSS코드는 별도의 외부 소스파일에 작성해 두고 HTML에서 해당 파일을 참조하는 것이 일반적으로 사용되는 방법이다.
-
참조 작성 방법
<head> <link rel="stylesheet" type="text/css" href="외부 CSS파일 경로"/> </head> -
한번 작성한 코드를 여러 페이지에서 재사용할 수 있다는 장점이 있지만, CSS에 문제가 생길 경우 해당 파일을 참조하는 모든 웹페이지에 문제가 번질 수 있다는 위험도 존재한다.
📍 1-3. HTML 태그에 style 속성 사용
-
세밀한 조정이 가능한 방법이다.
-
작성 예시
<div style="...CSS코드 내용..."> </div> -
전체적으로 소스코드 양이 지나치게 많아지고 유지보수가 쉽지 않다.
- 작성 예시
<ul> <li style="color:blue; text-decoration:underline">HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>- 출력결과
