QUOTE THE DAY
“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
-
이글슨 (Eagleson)
반응형
1. Inline : 해당 요소에 직접 스타일 속성을 적용
직접 태그에 스타일을 적용하는 방법입니다. 통일성 및 가독성을 해치며 유지보수가 어렵기 때문에, 특수한 경우에만 제한적으로 사용합니다.
<h2 style="color: red;">Inline</h2>
<h2 style="font-size: 30px">https://seolheeone.tistory.com/</h2>
2. Internal : head태그 > style태그에 작성하는 법
head 태그 내에 style 태그를 이용해서, HTML 내의 전체 태그에 서식을 적용합니다.
전체 웹페이지에 적용되기 때문에 global 방식이라 부르기도 하고, head 태근에 스타일을 정의하기 때문에 embedded 방식이라고도 합니다.
<head>
<style>
h2 {color: red; font-size: 40px;}
</style>
</head>body 태그 내의 h2는 모두 빨간색이고 40px 크기로 출력됩니다.
3. Extermal : 외부 스타일 시트 파일 이용. link 태그
CSS를 적용하는 모범답안으로, 가장 많이 쓰는 방식입니다. 외부의 css파일을 불러와서 사용합니다.
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<h2>CSS</h2>
</body>
다음과 같이 head 태그에서 link로 css파일을 불러옵니다.
4. Import : 스타일 시트(.css) 내에서 다른 스타일 시트 불러오는 방식
link 방식 외에, import URL로 css파일을 불러올 수도 있습니다. 하지만, 이 방식은 거의 쓰이지 않으면 link 태그를 이용하는 것이 좋습니다.
<head>
<style>
@import URL("css파일 경로")
</style>
</head>반응형
