1. CSS 기초
1. CSS (Cascading Style Sheets)
- CSS (Cascading Style Sheets) : HTML 문서에 모양과 서식을 제공하기 위한 스타일 시트 언어
- 웹문서 작성에 대한 생산성 증가 및 유지보수의 효율성 증가
- HTML 태그를 사용하여 웹문서를 구성하고 CSS를 사용하여 웹문서에 스타일 적용
- 사이트 구현시 모든 페이지에 일관성 있는 스타일 적용
- 사용법
Selector[, Selector, ...][:paduo-class] {
Property: Value [Value Value ...];
Property: Value [Value Value ...];
፧
}
2. 선택자 (Selector)
- 선택자 (Selector) : 태그(박스모델 - 엘리먼트)를 선택하기 위한 표현식
- 기본 선택자 : 태그 선택자, 클래스 선택자, 아이디 선택자
- * (전체 선택자) : 모든 태그를 엘리먼트로 선택
- 선택자는 ','기호를 사용하여 여러개 나열하여 엘리먼트로 선택 가능
- 태그 선택자 : 태그의 이름을 이용하여 엘리먼트 선택 (태그의 이름이 같은 다수의 엘리먼트에 동일한 스타일 적용)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
h2 {
color: green;
}
p {
color: blue;
}
</style>
</head>
<body>
<h2>태그 선택자</h2>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
</body>
</html>
- 클래스 선택자 : 태그에 설정된 class 속성값을 이용하여 엘리먼트로 선택
=> 태그 선택자와 구분하기 위해 앞에 .을 붙여 표현
=> 태그에 설정된 class 속성값은 공백을 이용하여 다수의 속성값 설정 가능
=> 동일한 class 속성값을 사용하는 다수의 엘리먼트에 동일한 스타일 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
.text1 {
color: maroon;
}
.text2 {
color: pink;
}
.text3 {
text-align: center;
}
</style>
</head>
<body>
<p class="text1">브라우저에 출력될 아주 중요한 내용입니다.</p>
<p class="text1 text3">브라우저에 출력될 아주 중요한 내용입니다.</p>
<p class="text2">브라우저에 출력될 아주 중요한 내용입니다.</p>
</body>
</html>
- 아이디 선택자 : 태그에 설정된 id 속성값을 이용하여 엘리먼트로 선택
=> 태그 선택자와 구분하기 위해 앞에 #을 붙여 표현
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
#text4 {
color: olive;
}
#text5, #text6 {
color: silver;
}
</style>
</head>
<body>
<p id="text4">브라우저에 출력될 아주 중요한 내용입니다.</p>
<p id="text5">브라우저에 출력될 아주 중요한 내용입니다.</p>
<p id="text6">브라우저에 출력될 아주 중요한 내용입니다.</p>
</body>
</html>
3. 파생 선택자
- 파생 선택자 : 후손 선택자, 자식 선택자, 필터 선택자, 형제 선택자
- 후손 선택자 : 부모 엘리먼트를 기준으로 모든 깊이의 태그를 엘리먼트로 선택
부모선택자 후손선택자 {
}
- 자식 선택자 : 부모 엘리먼트를 기준으로 첫번째 깊이릐 태그를 자식 엘리먼트로 선택
부모선택자 > 자식선택자 {
}
- 필터 선택자 : 선택된 다수의 엘리먼트 중 특정 태그를 이용하여 엘리먼트로 선택
=> 필터 선택자는 클래스 선택자를 사용하여 구현
선택자.클래스선택자 {
}
- 형제 선택자 : 선택자에 의해 선택된 엘리먼트 다음에 위치한 같은 깊이의 태그를 이용하여 형제 엘리먼트로 선택
선택자 ~ 선택자 {
}
4. 속성 선택자
- 속성 선택자 : 태그의 속성이나 속성값을 이용하여 엘리먼트로 선택
- 해당 태그 속성이 존재하는 태그를 엘리먼트로 선택
선택자[속성] {
}
- 태그 속성값이 비교값과 같은 태그를 엘리먼트로 선택
선택자[속성='비교값'] {
}
- 태그 속성값에 비교값이 포함된 태그를 엘리먼트로 선택
선택자[속성*='비교값'] {
}
- 태그 속성값에 비교값이 하나의 단어로 포함된 태그를 엘리먼트로 선택
선택자[속성~='비교값'] {
}
- 태그 속성값에 비교값으로 시작되는 태그를 엘리먼트로 선택
선택자[속성^='비교값'] {
}
- 태그 속성값에 비교값으로 종료되는 태그를 엘리먼트로 선택
선택자[속성$='비교값'] {
}
5. 가상 선택자
- 가상 선택자 : 엘리먼트의 상태에 따라 다른 스타일을 적용하기 위한 선택자
- 선택자로 선택된 엘리먼트에 따라 사용 가능한 상태 존재
선택자:상태 {
}
2. CSS 스타일의 단계적 적용과 상속
상속
- 부모 엘리먼트에 적용된 스타일은 자식 엘리먼트에 상속되어 적용
=> 자식 엘리먼트에 상속되지 않는 스타일 존재
- 스타일은 선언 순서에 의해 단계적 적용 (오버라이드)
- !important : 단계적 적용을 무시하고 최우선적으로 스타일을 적용하기 위한 속성값
3. 글꼴 및 글자관련 스타일 속성
1. 글꼴
- 웹폰트 (WebFont) : 웹서버에 저장된 글꼴 파일을 클라이언트에게 제공하여 사용하는 기능
- @font-face : 글꼴 파일을 클라이언트에게 제공하기 위한 시스템 속성
- font-family : 글꼴 파일을 구분하기 위한 식별자를 속성값으로 설정
=> 글꼴 나열 가능하며 순차 적용
=> font-family 속성이 생략되거나 속성값으로 설정된 글꼴이 없는 경우 클라이언트 플랫폼(OS)의 기본 글꼴 사용
2. 글자
- font-size : 글자 크기에 대한 스타일 속성 (기본크기 16px)
=> 속성값 (단위) : px, pt, em, %, 키워드 (smal, medium, large 등)
- font-style : 글자의 기울기에 대한 스타일 속성
=> normal, italic
- font-variant : 알파벳에 대한 스타일 속성
=> normal, small-caps (소문자를 작은 크기의 대문자로 변환)
- font-weight : 글자 굵기에 대한 스타일 속성
=> 100 ~ 900 (기본 : 400)
=> normal, bold
- font : 글자 관련 모든 스타일 속성값을 설정 가능
=> 글꼴을 반드시 설정
- letter-spacing : 문자 간격을 설정하기 위한 스타일 속성
- word-spacing : 단어 간격을 설정하기 위한 스타일 속성
- line-height : 줄간격을 설정하기 위한 스타일 속성
3. direction
- direction : 문장 쓰기 방향에 대한 스타일 속성
=> 속성값 : ltr, rtl
- ltr : 왼쪽에서 오른쪽으로
- rtl : 오른쪽에서 왼쪽으로
4. align
- text-align : 문장 정렬에 대한 스타일 속성
=> 속성값 : left, right, center, justify
5. text-shadow
- text-shadow : 문자의 그림자 효과에 대한 스타일 속성
=> 속성값 : 가로 세로 번짐 색상
6. overflow
- overflow : 박스모델의 폭을 벗어난 문장에 대한 처리 관련 스타일 속성
=> 속성값 : visible, hidden, scroll
- visible : 출력 처리
- hidden : 숨김 처리
- scroll : 스크롤 처리
7. text-overflow
- text-overflow : 숨겨진 문장에 대한 처리 관련 스타일 속성
=> 속성값 : clip, ellipsis
- clip : 잘라내기
- ellipsis : '...' 기호를 사용하여 출력
8. text-decoration
- text-decoration : 문장에 대한 선 관련 스타일 속성
=> 속성값 : none, underline, line-through, overline
- none : 선 없음
- underline : 아랫줄
- line-through : 가운뎃줄
- overline : 윗줄
9. text-indent
- text-indent : 문장 들여쓰기 관련 스타일 속성
10. text-transform
- text-transform : 문장 변형 관련 스타일 속성
=> none, uppercase, lowercase, capitalize
- none : 기본
- uppercase : 대문자로 변형
- lowercase : 소문자로 변형
- capitalize : 각 단어의 첫 글자만 대문자 변형
11. color
- color : 글자색 관련 스타일 속성
=> 속성값 : 색 관련 키워드, 색에 대한 16진수 표기법, rgb 함수, hsl 함수, rgba 함수, hsla 함수
4. 공백
white-space
- white-space : 공백 처리에 대한 스타일 속성
=> 박스모델의 폭보다 큰 태그내용 처리에 대한 스타일 속성
=> 속성값 : normal, pre, nowrap, pre-wrap
- normal (pre-line) : 다수의 공백을 하나의 공백으로 처리하여 출력하고 박스모델보다 큰 태그 내용은 자동 줄바꿈 처리하여 출력
- pre : 다수의 공백을 다수의 공백으로 처리하여 출력하고 박스모델보다 큰 태그 내용은 자동 줄바꿈 없이 처리하여 출력
- nowrap : 다수의 공백을 하나의 공백으로 처리하여 출력하고 박스모델보다 큰 태그 내용은 자동 줄바꿈 없이 처리하여 출력
- pre-wrap : 다수의 공백을 다수의 공백으로 처리하여 출력하고 박스모델보다 큰 태그 내용은 자동 줄바꿈 처리하여 출력
5. 목록
1. list-style-type (ul)
- list-style-type : 목록에 대한 불릿 또는 순서값 관련 스타일 속성
=> 속성값 : none, disc, circle, square
- none : 불릿 또는 순서값 미제공
- disc : 불릿 제공
- circle : 비어있는 원 제공
- square : 사각형 제공
2. list-style-type (ol)
- 속성값 : decimal, lower-alpha, upper-alpha, lower-roman, upper-roman
- decimal : 순서값 제공
- lower-alpha : 알파벳 소문자 제공
- upper-alpha : 알파벳 대문자 제공
- lower-roman : 로마숫자 소문자 제공
- upper-roman : 로마숫자 대문자 제공
