CSS
Cascading Style Sheet
html = 웹 페이지의 정보 / css = html을 보기 좋게 디자인하는 역할
CSS 문법
h1 { color: yellow; font-size: 2em; }
- 선택자 (selector) = "h1"
- 속성 (property) = "color"
- 값 (value) = "yello"
- 선언 (declaration) = "color: yello", "font-size: 2em"
- 선언부 (declaeration block) = "{ color: yellow; font-size: 2em; }"
- 규칙 (rule set) = "h1 { color: yellow; font-size: 2em; }"
html에서의 속성 = Attribute : 어떤 구체적인 값을 가지는 객체
css에서의 속성 = Property : 객체의 특성을 설명하는 정의같은 개념
CSS 주석
/* 주석 내용 */
/* 주석은 여러 줄로도
선언 할 수 있습니다.
*/
CSS와 문서 연결법
1. Inline
해당 요소에 직접 스타일 속성을 이용해 규칙 선언
선택자 X / 선언부에 속성 값만 삽입
<p style = "color: red;">내용</p>
2. Internal
문서에 <style> 활용
<style> p {color: red;}</style>
3. External
외부 스타일 시트 파일 이용
(1) css 파일 하나 만들고 스타일 규칙 선언
(스타일 파일).css
p {color: red;}
(2) <link> 이용해 css 파일 연결
(적용할 파일)
<link rel = "stylesheet" href "(스타일 파일).css">
*rel : 연결되는 파일이 문서와 어떤 관계인지 명시하는 속성
4. Import
스타일 시트 내 다른 스타일 시트 파일 불러오는 방식
@import url("css/style.css");
'HTML & CSS > html & css 입문' 카테고리의 다른 글
[부스트코스 강의] 4. (2) 선택자 ( 요소 / class / id / 속성 / 문서구조 관련 ) (0) | 2023.11.26 |
---|---|
[부스트코스 강의] 3. (3) 블록 레벨 / 인라인 레벨 (0) | 2023.11.26 |
[부스트코스 강의] 3. (2) 시멘틱 마크업 (0) | 2023.11.26 |
[부스트코스 강의] 3. (1) 콘텐츠 모델 (0) | 2023.11.26 |
[부스트코스 강의] 2. (3) HTML 태그 ( 폼 요소 ) (0) | 2023.11.26 |