반응형
- 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 |
댓글