고정 헤더 영역
상세 컨텐츠
본문
CSS구문
h1{color:yellow; font-size:2em;}
<!--
선택자(selector) - "h1"
속성(property) - "color"
값(value) - "yellow"
선언(declaration) - "color: yellow", "font-size: 2em"
선언부(declaration block) - "{ color: yellow; font-size:2em; }"
규칙(rule set) - "h1 { color: yellow; font-size:2em; }"
-->✅ CSS 파일은 여러 개의 규칙으로 이루어져있다.
✅ 선택자와 선언부 사이, 선언과 선언 사이는 앞뒤로 개행을 해도 상관이 없지만 속성 이름과 속성 값 사이에는 개행을 하면 안 된다.
CSS 적용하는 방법 네 가지
Inline
✅해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법
✅ 해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않게 되고, 선언부에 내용만 스타일 속성의 값으로 넣어주면 된다.
✅ 코드의 재활용이 되지 않기 때문에 자주 사용 X
<div style="color:yellow;"> 내용입니다 </div>
Internal
✅ 문서에 <style>을 활용한 방법
<style> div {color: red;} </style>
<!--
위의 코드로 모든 <div>에 같은 스타일을 줄 수 있다.
하지만 많은 페이지가 있는 경우에는 모든 페이지에 저마다의 규칙을선언해줘야함.
-> 페이지가 많고 스타일 규칙 내용이 많아지면 어려움
-->
External
✅ 외부 스타일 시트 파일을 이용한 방법
✅ 외부 스타일 시트는 스타일 규칙들을 별도의 외부 파일을 만들어 넣는 방식
✅ 외부 파일은 확장자가 .css가 되며 css 파일이라고 부른다.
/* style.css 파일 */
div {color: red;}
사용할 땐 밑의 코드처럼!
<link rel="stylesheet" href="css/style.css">
<!--
<head> 내부에 <link>를 선언한 후 href 속성을 이용해 CSS 파일의 경로를 적어준다.
rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시하는 속성으로, CSS 파일은 'stylesheet' 라고 적어줘야한다.
외부 스타일 시트 방식은 파일 관리가 편하면서도 용량이 작기 때문에 주로 사용되는 방법이다.
-->
Import
✅ 스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식
✅ <style> 내부 상단이나 외부 스타일 시트 파일 상단에 선언하는데 성능상 좋지 않아서 거의 쓰이지 않는다.
@import url("css/style.css");
학습을 위해 부스트코스 비전공자를 위한 HTML/CSS 강의를 보고 정리한 글입니다.
Reference
https://www.boostcourse.org/cs120
비전공자를 위한 HTML/CSS
부스트코스 무료 강의
www.boostcourse.org
'HTML&CSS' 카테고리의 다른 글
| [CSS] 가상선택자 (0) | 2023.04.13 |
|---|---|
| [CSS] 문서 구조 관련 선택자 (0) | 2023.04.10 |
| [HTML] 시멘틱 마크업, 블록 & 인라인 (0) | 2023.04.10 |
| [HTML] Content Models(콘텐츠 모델) (0) | 2023.04.10 |
| [HTML] HTML 이해하기, HTML 태그 (0) | 2023.04.09 |
댓글 영역