안녕하세요 빵끗미에요
오늘은 CSS의 기본 구조에 대해서 알아보도록 할게요
1. CSS 기본 구조
■ 선택자 : CSS를 적용할 영역을 선택할 때 사용해요
■ CSS 명령 : CSS 속성과 값으로 구성돼요
■ CSS 명령의 마침 : 각 CSS 명령의 맨 뒤에 세미콜론을 붙여 명령어 마무리를 해요
| h1 { color: red; } |
ㄴ h1 CSS 선택 자이고 color는 속성이고 red는 속성 값이에요
1) CSS 요소 선택자
■ HTML 요소를 기반으로 선택자를 선택해요
| p { text-align: center; } |
ㄴ p CSS 선택 자이고 text-align는 속성이고 center는 속성 값이에요
2) CSS ID 선택자
■ id 선택자는 HTML 요소의 id 속성을 사용하여 특정 요소를 선택해요
| <h1 id="h1id"> |
■ 특정 id를 가진 요소를 선택하려면 (#) 문자와 요소 id를 차례로 작성해요
| #h1id { color: red; } |
3) CSS CLASS 선택자
■ class 선택자는 HTML 요소의 class 속성을 사용하여 특정 요소를 선택해요
| <h1 class="h1class"> |
■ 특정 클래스가 있는 요소를 선택하려면 (.) 마침표 문자와 클래스 이름을 차례로 작성해요
| .h1class { color: red; } |
■ 특정 HTML 요소만 클래스 영향을 받도록 지정할 수 있어요
| h1.h1class { color: red; } |
ㄴ 클래스가 h1 class인 <h1> 요소만 컬러색을 red로 설정하겠다는 뜻이 돼요
4) CSS 그룹화 선택자
■ 그룹화 선택자는 스타일 정의가 동일한 모든 HTML 요소를 선택해요
|
html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 100%;
}
|
■ html, body 요소를 동일한 스타일로 지정했어요
|
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 100%;
}
|
2. CSS 삽입 방법
■ CSS 삽입 방법에는 총 3가지 방법이 있어요
1) 인라인 스타일 적용 방법
ㄴ HTML 문서에 가장 간단하게 CSS를 삽일 할 수 있어요 하지만 CSS와 HTML 태그와 같은 행에 사용하기 때문에 HTML 태그가 복잡 해질 수 있어요
| <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>빵끗빵끗</title> </head> <body> <h1 style= "color: red; font-size:15px;">빵끗빵끗</h1> </body> </html> |
2) 내부 스타일 적용 방법
ㄴ 내부 스타일은 헤드 섹션 내부의 <style> 태그 내에 삽입하는 방식이에요
| <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>빵끗빵끗</title> <style> h1 { color: red; font-size:15px; } </style> </head> <body> <h1>빵끗빵끗</h1> </body> </html> |
3) 외부 스타일 적용 방법
ㄴ 외부 스타일을 사용하게 되면 파일 하나만 변경하여도 전체의 웹 사이트 모양을 변경할 수 있어요
ㄴ HTML 페이지는 헤드 섹션 내부의 <link> 태그로 외부 스타일을 참조해야 돼요
| <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>빵끗빵끗</title> <link rel="stylesheet" href="./style.css"> </head> <body> <h1>빵끗빵끗</h1> </body> </html> |
여기까지 CSS 기본 구조에 대해서 알아봤어요
아마도 티 스토리 스킨을 편집하는 데 있어서 기본적으로 알아두면 좋을 것 같아요
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
댓글