반응형
- CSS 적용 방법 3가지 : 내부 스타일 시트, 외부 스타일 시트, 인라인 스타일 시트
- 스타일 적용 순서 : 인라인 > 내부 > 외부
내부 스타일 시트
<head>
<!-- css는 style에 담기며 style은 head에 있다 -->
<style>
/* 내부 스타일 시트 */
section{
width :500px;
padding : 15px;
border:5px solid gray;
}
</style>
</head>
<body>
<section>
...
</section>
</body>- head 안 style 태그 안에 담김
외부 스타일 시트
<head>
<!-- 외부에 css 파일을 만들어둔다. -->
<link rel="stylesheet" href="css/style.css">
</head>- 외부에 css 파일을 만들어두고 불러옴
- 불러올 때는 head 안 link 태그를 이용함
- 가장 많이 사용하는 방식
인라인 스타일 시트
<!-- 간단한 스타일을 적용시킨다 -->
<p style="color:green;"> 내가 보려고 정리하는 프로그래밍 </p>- 간단한 스타일을 적용시킬 때 사용
- 문서가 복잡해지기 때문에 권장하지는 않는다.
🐍 테일윈드(Tailwind) 이용 방식
<!-- 테일윈드로 만든 스타일 시트 불러온 후 -->
<p class="text-lg font-medium text-lime-500"> 테일윈드 이용하기! </p>- 엄밀히 말해서는 Tailwind라는 외부 스타일 시트를 불러온 후 적용하는 방식
- 각 스타일 설정마다 클래스가 정해져 있어, 클래스 명으로 적용할 스타일을 입력하면 인라인 스타일처럼 이용 가능하다.
반응형
'⭐ 코딩 기초 > HTML, CSS' 카테고리의 다른 글
| 📌 CSS 연결 선택자 정리! (0) | 2022.09.21 |
|---|---|
| 📌 CSS의 기본적인 주요 선택자! (0) | 2022.09.21 |
| 🎨 CSS 기본 개념, 문법 구조 초간단 요약! (1) | 2022.09.21 |
| 🖼️ 이미지와 링크를 다는 HTML 태그들! (0) | 2022.09.20 |
| 📝 표를 만드는 HTML 태그들! (0) | 2022.09.20 |
댓글