5. CSS기초
* 스타일, 스타일 시트
- 스타일: HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등을 결정짓는 요소
- 스타일 시트: 스타일을 관리하기 쉽게 집합시켜놓은 것
- 스타일 형식
p { text-align: center; }p: 선택자, { } 와 사이에 정의한 스타일 규칙이 적용될 대상
text-align: 스타일 속성
center: 속성 값, 속성과 속성값이 여럿일 경우 세미콜론으로 구분
- 스타일 주석: /* */ 사이에 주석 내용 입력
- 내부 스타일 시트
- 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것
- 모든 스타일 정보는 <head> </head> 태그 안에서 정의
- <style> 태그와 </style> 태그 사이에 작성
- 외부 스타일 시트
- 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용
- <style> 태그 없이 <link> 태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일 연결
- (예시) <link href="style.css" rel="stylesheet" type="text/css">
- 예시의 rel은 역할을 의미
- 인라인 스타일
- 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시
- style 속성을 사용해 style="속성: 속성 값;" 형태로 스타일 적용
* 주요 선택자
- 전체 선택자
- 페이지에 있는 모든 요소를 대상으로 스타일을 적용할 때 사용
- 모든 하위 요소 일괄적으로 스타일 적용할 때 사용
- (예시)
* { 속성: 속성 값; 속성: 속성 값; ... }
- 태그 선택자: 문서에서 특정 태그를 사용한 모든 요소에 스타일이 적용
(예시)
태그 { 스타일 }- 클래스 선택자, id 선택자
- 공통점: 요소의 특정 부분만 적용
- 클래스 선택자: 문서 안에서 여러 번 반복할 스타일, 마침표(.) 다음에 클래스 이름 지정
- id 선택자: 문서 안에서 한 번만 사용하는 스타일, 파운드(#) 다음에 id 이름 지정
- 그룹 선택자: 같은 스타일을 사용하는 선택자를 한꺼번에 정의, 쉼표로 구분해 선택자를 나열
* Cascading Sytle Sheet(CSS)
- Cascading: 위에서 아래로 흐름, 선택자에 여러 스타일이 적용될 때 충돌을 막기 위해 적용하는 방법
- 원칙
- 스타일 우선순위: 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 위에서 아래로 적용
- [중요도에 따른 우선순위] 사용자 스타일 시트(중요) -> 제작자 스타일 시트(중요) -> 제작자 스타일 시트(일반) -> 사용자 스타일 시트(일반) -> 브라우저 스타일 시트
- [영역 한정에 따른 우선순위] 인라인 스타일 -> id 스타일 -> 클래스 스타일 -> 태그 스타일
- 스타일 상속: 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달
* CSS3와 모듈
- CSS2 규약 안에서 모든 스타일 규약이 담겨 있어서 한 번에 업데이트 하기 어려움 -> CSS3로 별도 규약 제작 -> CSS 모듈
- CSS3와 브라우저 접두사
- CSS3 모듈이 계속 개발되고 있는 중, 표준 규약이 아닌 속성은 브라우저에 따라 다른 방식으로 지원(prefix로 브라우저별로 구분하기)
6. 텍스트 관련 스타일
* 글꼴 관련 스타일
- font-family 속성
- 웹 문서에서 사용할 글꼴 지정, 상속의 속성이 있다.
- 웹 문서에서 글꼴을 지정할 때, 없을 경우를 대비해 여러 폰트를 지정한다.
- (예시)
body { font-family: "맑은 고딕" , 돋움, 굴림 }
- @font-face 속성
- 웹 폰트: 웹 문서 안에 글꼴 정보도 함께 저장하고, 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드하여 사용하는 글꼴
- 사용자 시스템에 없는 글꼴이더라도 웹 제작자가 의도한 대로 텍스트를 표시할 수 있다.
* 텍스트 스타일
- color 속성
- 글자 색 지정, 16진수 값 or rgb, hsl, 영문명 중에서 사용
- text-decoration 속성
- 텍스트 밑줄 or 가로지르는 줄 표시
- 링크 밑줄 제거할 때 사용
| 속성 값 | 설명 |
| none | 표시 X |
| underline | 표시 O |
| overline | 영역 위로 선 긋기 |
| line-through | 영역을 가로지르는 선(취소 선) 긋기 |
- text-shadow 속성(그림자)
text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상>
- white-space 속성(공백 처리 방법 지정)
white-space: normal | nowrap | pre | pre-line | pre-wrap
| 속성 값 | 설명 |
| normal | 기본 값으로 연속하는 공백을 하나로 처리 |
| nowrap | 연속하는 공백을 하나로 처리하고 줄 바꿈 X |
| pre | - 연속하는 공백을 소스 그대로 표시 - 소스에서 줄을 바꾼 부분만 줄로 바꾸어 표시 - 영역 너비를 넘어가는 부분의 줄은 자동으로 바꾸지 않음 |
| pre-line | - 연속하는 공백을 하나로 취급 - 소스에서 줄을 바꾼 부분은 줄을 바꾸어 표시 - 영역 너비를 넘어가는 부분은 자동으로 줄을 바꿈 |
| pre-wrap | - 연속하는 공백을 소스 그대로 표시 - 줄 바꿈 표시 - 영역 너비를 넘어가는 부분은 자동으로 줄을 바꿈 |
- letter-spacing, word-spacing 속성
letter-spacing: normal | <크기>
word-spacing: noraml | <크기>* 문단 스타일
- text-indent 속성: 문단의 첫 글자를 얼마나 들여 쓸지 지정
text-indent: <크기> | <백분율>
- line-height 속성: 문단의 줄 간격 지정, 보통 글자 크기의 1.5 ~ 2배 정도 지정
line-height: normal | <숫자> | <크기> | <백분율> | inherit* 목록과 링크 스타일
- list-style-type 속성: 순서 없는 목록의 불릿이나 순서 목록의 숫자를 바꾸는 속성
list-style-type: none | <순서 없는 목록의 불릿> | <순서 목록의 번호>1) 순서 없는 목록의 불릿 바꾸기
| 속성 값 | 설명 |
| disc | 채운 원(●) |
| circle | 빈 원(○) |
| square | 채운 사각형(■) |
| none | 없음 |
2) 순서 목록의 숫자 바꾸기
| 속성 값 | 설명 |
| decimal | 1로 시작하는 십진수 |
| decimal-leading-zero | 앞에 0이 붙는 십진수 |
| lower-roman | 소문자 로마 숫자 |
| upper-roman | 대문자 로마 숫자 |
| lower-alpha 또는 lower-latin |
소문자 알파벳 |
| upper-alpha 또는 upper-latin |
대문자 알파벳 |
| armenian | 아르메니아 숫자 |
| georgian | 조지 왕조시대의 숫자 |
- list-style-image 속성: 순서 없는 목록의 불릿을 이미지로 바꾸는 속성
list-sytle-image: <이미지> | none
<이미지> = url(이미지 파일 경로)- list-style-position 속성: 불릿이나 번호를 들여쓰거나 내여쓸 수 있음
list-style-position: inside | outside;'프로그래밍' 카테고리의 다른 글
| HTML5 + CSS3 (10) HTML - 시맨틱 태그, (11) 멀티미디어 (0) | 2021.10.12 |
|---|---|
| HTML5 + CSS3 (7) 배경 스타일, (8) 레이아웃 스타일, (9) CSS 포지셔닝 (0) | 2021.10.11 |
| HTML5 + CSS3 (4) 폼 (0) | 2021.10.07 |
| SQL 튜닝 - 튜닝 활용 (0) | 2021.10.06 |
| SQL 튜닝 - JOIN(2) (0) | 2021.10.05 |