CSS(Cascading Style Sheets)
1. 개념
- 웹페이지에 자주 적용되는 부분들은 미리 정리하고 조합하여 정의한 후
- 페이지 부에서 필요할 때마다 해당 부분을 적용하는 스타일시트 중 하나
- HTML로는 부족한 레이아웃이나 폰트 등에 다양성을 부여한다
2. 특징
- 폰트 크기는 지정하는 수치에 따라 마음대로 조절 가능
- 자간/행간 배치가 자유로워 가독성을 높인다
- 링크 상의 밑줄 변형이 자유롭다
- 페이지의 여백을 원하는 만큼 만들어 줄 수 있다
3. CSS 기본 문법
- 단일 속성 지정
selector(선택자) {
property(속성) : value(값) ;
}
- 다중 속성 지정
selector(선택자) {
property(속성) : value(값) ;
property(속성) : value(값) ;
property(속성) : value(값) ;
property(속성) : value(값) ;
property(속성) : value(값) ;
}
CSS 기본동작
1. CSS 사용하는 방법 3가지
- <head></head> 사이 기술
- <body> 안에서 직접기술
- *.css(파일)로 따로 저장
기본구성
<HEAD>
<STYLE type="text/css"> -- 스타일의 유형이 텍스트이고 그 파일은 css 이라는 뜻
선택자 {속성1: 값1; 속성2: 값2;} -- 선언문(속성과 값)간의 구분은 ;(세미콜론)이다
</STYLE>
</HEAD>
2. 스타일시트(CSS) 파일을 로드 하는 방법
| <link> 태그 | <link> 태그 : 기본적으로 외부에 있는 리소스를 가져오는 태그 <link rel="stylesheet" type="text/css" href="css/style.css"> <head> 섹션에 들어가 있어야 한다 rel 을 stylesheet 로 지정하고 href 에 해당 CSS 파일의 절대주소 혹은 상대주소를 넣어주면 CSS 파일을 로드 할 수 있다 |
| @import | <style type="text/css"> @import url("css/style.css"); </style> <link> 태그와 마찬가지로 <head> 섹션에 들어가 있어야 하며, <head> 섹션 내부에 style 태그를 만들고 그 안에서 @import 를 사용해야 한다 |
3. CSS의 특성
- 기존의 HTML 기능을 확장해서 사용할 수 있다
- 한 번의 지정으로 웹 문서 모든 곳에 적용할 수 있다
- CSS는 상위의 기능을 상속받을 수 있다
- 복잡하지 않고 쉽게 파악할 수 있어 관리가 용이하다
- 스타일 시트가 중첩되었을 때 순위
- 1순위 : 태그 안의 스타일 시트
- 2순위 : <style> 태그
- 3순위 : 파일 스타일 시트
4. 길이의 단위
- 1em = 기본 1개 글자 크기
- 부모의 길이가 정해져 있지 않을 때
- 부모의 길이가 정해져 있으면 그 값이 기준
body { font-size : 12px; }
p { font-size : 1.1em; }
5. 상속
- 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려받는 것
- 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 함
- 모든 프로퍼티가 상속되는 것은 아님
- 프로퍼티 중에는 상속이 되는 것과 되지 않는 것이 있다
- 상속 가능한 속성 : font, color, visibility, opacity, line-height, text-align, white-space
- font-size 단위 : pt, em
- em 방식 : 현재 글자 크기에서 몇 배의 크기로 하라는 뜻
- 만일 font-size: 1.4em 라고 하면 1.4배의 크기로 만드라는 뜻
6. HTML 기본 화면 구조
⚒️ 예제
| CSS\webapp\01_css | |
| exam01.html | css 코드 <head></head> 사이 기술 |
| exam02.html | css 코드 <head></head> 사이 기술 |
| exam03.html | css 코드 <body> 안에서 직접기술 |
| exam04.html | css 코드 *.css(파일)로 따로 저장, <link href="./myStyle.css" rel="stylesheet" /> |
| exam05.html | css 코드 *.css(파일)로 따로 저장, @import url("./myStyle.css") |
| exam06.html | <em>, 상속 |
| exam07.html | 스타일 중첩 |
ref. (연습)
'WEB > CSS' 카테고리의 다른 글
| 리스트, 표, 폼 꾸미기 (0) | 2024.08.14 |
|---|---|
| Positioning (0) | 2024.08.14 |
| Box Model (0) | 2024.08.14 |
| 색과 텍스트 꾸미기 (0) | 2024.08.14 |
| Selector (0) | 2024.08.14 |
