1. CSS (Cascading Style Sheets)
계단식 스타일시트. HTML 요소가 화면, 종이 또는 다른 매체에 어떻게 표시되는지 설명. 여러 웹 페이지의 레이아웃을 한 번에 제어. 외부 스타일시트는 CSS 파일에 저장.
다양한 장치 및 화면 크기에 대한 설계, 레이아웃 및 디스플레이 변형을 포함하여 웹 페이지의 스타일을 정의하는 데 사용
2. CSS Syntax
1) CSS selector : 스타일링할 HTML 요소를 가리킨다.
2) declaration block : 세미콜론으로 구분된 하나 이상의 선언이 있다. 각 선언에는 CSS 속성 이름과 콜론으로 구분된 값이 포함.
다중 CSS 선언은 세미콜론으로 구분되고 선언 블록은 중괄호로 둘러 싼다.
3. CSS Selectors
HTML 요소를 "찾거나" 선택하는 데 사용.
1) Selectors
(1) Simple selectors (select elements based on name, id, class) : 이름, ID, 클래스에 따라 요소 선택
(2) Combinator selectors (select elements based on a specific relationship between them) : 특정 관계에 따라 요소 선택
(3) Pseudo-class selectors (select elements based on a certain state) : 특정 상태에 따라 요소 선택
(4) Pseudo-elements selectors (select and style a part of an element) : 요소의 일부 선택 및 스타일 지정
(5) Attribute selectors (select elements based on an attribute or attribute value) : 속성 또는 속성 값을 기준으로 요소 선택
2) The CSS element Selector : 요소 이름에 따라 HTML 요소를 선택
3 The CSS id Selector (#) : HTML 요소의 id 속성을 사용하여 특정 요소를 선택. 요소의 ID는 페이지 내에서 고유하기 때문에 ID 선택기를 사용하여 하나의 고유한 요소를 선택. 특정 ID의 요소를 선택하려면 해시(#) 문자를 쓴 다음 요소의 ID
4) The CSS class Selector : 특정 클래스 특성을 가진 HTML 요소를 선택. 마침표(.)를 입력한 다음 클래스 이름을 입력. 특정 HTML 요소만 클래스의 영향을 받도록 지정할 수도 있다. HTML 요소는 둘 이상의 클래스를 참조할 수도 있다.
3) The CSS Universal Selector : (*)는 페이지의 모든 HTML 요소를 선택
4) The CSS Grouping Selector : 스타일 정의가 동일한 모든 HTML 요소를 선택.
5) ALL CSS Simple Selectors
4. How to add CSS (External / Internal / Inline)
1) External CSS
한 개의 파일만 변경하여 전체 웹 사이트의 모양을 변경할 수 있다.
각 HTML 페이지에는 head section의 <link> 요소에 외부 스타일시트 파일에 대한 참조가 포함되어야 한다.
외부 스타일시트는 모든 텍스트 편집기에 쓸 수 있으며 확장자는 .css로 저장해야 합니다.
외부 .css 파일에는 HTML 태그가 없어야 합니다.
2) Internal CSS
하나의 HTML 페이지에 고유한 스타일이 있는 경우 내부 스타일시트를 사용
<head> 섹션 내부의 <style> element 안에 정의.
3) Inline CSS
단일 요소에 고유한 스타일을 적용. 해당 요소에 스타일 속성을 추가
4) Multiple Style CSS
다른 스타일 시트에서 동일한 selector(요소)에 대해 일부 속성이 정의된 경우 마지막 읽기 스타일 시트의 값이 사용
5) Cascading Order
HTML 요소에 대해 둘 이상의 스타일을 지정할 때는. 페이지의 모든 스타일은 다음 규칙에 따라 새 "가상" 스타일 시트로 "캐스케이드"된다. 여기서 1번은 우선 순위가 가장 높다.
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default
5. CSS Comments
/* */
6. CSS Colors
미리 정의된 색상 이름 또는 RGB, HEX, HSL, RGBA, HSLA 값을 사용
(이 블로그에 HTML1 포스팅에 색상 관련 내용 잘 나와 있음.)
7. CSS Backgrounds
1) background-color
(1) Opacity property : 불투명도. 0.0-1.0의 값 사용 가능. 값 낮을수록 더 투명.
(2) Transparency using RGBA : 하위 요소에 불투명도를 적용하지 않으려면 RGBA 색상 값을 사용. 배경색만 투명하게 하고 싶을 때.
A는 0.0(완전히 투명)에서 1.0(완전히 불투명) 사이의 숫자.
2) background image : 배경으로 사용할 이미지를 지정. 기본적으로 이미지가 반복되어 전체 요소를 덮는다.
3) background repeat
(1) repeat-x : 가로로만 반복됨.
(2) no-repeat : 배경 이미지를 한 번만 표시
(3) background-position : 배경 이미지의 위치를 지정
4) background-attachment
배경 첨부 속성은 배경 이미지를 스크롤할지 또는 고정(페이지 나머지 부분에서는 스크롤하지 않음)할지 여부를 지정
5) background shorthand
코드를 단축하기 위해 단일 속성에서 모든 배경 속성을 지정할 수도 있다
8. CSS Borders
1) border style
2) border-width : 너비는 특정 크기(px, pt, cm, em 등)로 설정하거나 세 가지 사전 정의된 값(thin, medium, thick) 중 하나를 사용하여 설정
3) border-color
4) border-sides : 각 측면에 대해 다른 경계선 지정할 수 있다. 각 경계선(위, 오른쪽, 아래 및 왼쪽)을 지정하는 속성도 있다.
5) border shorthand : 가능
6) Rounded Borders (border-radius)
9. CSS Margins
정의된 테두리 밖에서 요소 주위에 공간을 만드는 데 사용. 요소의 각 측면(위, 오른쪽, 아래 및 왼쪽)에 대한 여백을 설정하는 속성.
1) margin-top/right/bottom/left
2) 속성
(1) auto : 브라우저가 여백 계산. 여유 속성을 자동으로 설정하여 요소를 컨테이너 내에서 수평으로 중앙에 배치하도록 설정할 수 있다. 그런 다음 요소가 지정된 너비를 차지하고 나머지 공간은 왼쪽과 오른쪽 여백 사이에 균등하게 분할.
(2) length : px, pt, cm 등으로 지정
(3) % : 포함 요소의 폭의 %로 여백 지정
(4) inherit : 부모 요소에서 여백 상속
(5) 음수값 허용됨.
3) shorthand : 상 우 하 좌 순으로. 세개면 상 우좌 하.
4) Margin Collapse : 요소의 위쪽 및 아래쪽 여백은 때때로 두 여백 중 가장 큰 여백과 같은 단일 여백으로 접힙니다. 예를 들어 위요소의 아래마진이 50, 아래것의 위마진이 20이면 두개 간격 원래 70이어야 하는데 50이 된다. 좌우는 절대 일어나지 않는다.
10. CSS Padding
정의된 테두리 내에서 요소의 내용 주위에 공간을 생성하는 데 사용
margin과 같이 shorthand, 각면 나누어 설정 모두 가능.
CSS width는 element's content area를 설정. content area는 패딩, 테두리 및 여백 내부 부분(상자 모델).
패딩이 요소의 전체 너비에 추가. 패딩의 양에 관계없이 너비를 300px로 유지하려면 box-sizing 속성을 사용
11. CSS Height and Width
* max-width : 화면 너비 따라 줄어들고, 늘어나지만 max 값보다는 안늘어남.
* max 말고 min도 있고, width, height 다 있음.
12. CSS Box Model
13. CSS Outline
아웃라인은 요소를 "stand out" 요소로 만들기 위해 경계선 바깥쪽에 그려진 선
1) outline properties
outline-style / outline-color / outline-width / outline-offset / outline
2) outlint style
3) width, color, shorthand는 border와 거의 똑같음
4) outline-offset property : 요소의 윤곽선과 가장자리/경계선 사이에 공간을 추가. 요소와 요소의 윤곽선 사이의 공간은 투명.
14. CSS Text
1) Text Color : color name / HEX / RGB
2) Text Alignment : center / left / right / justify(각 줄은 모든 선의 너비가 같고 왼쪽과 오른쪽 여백은 직선으로 표시(like in magazines and newspapers)
3) Text Direction : direction 및 unicode-bidi 속성을 사용하여 요소의 텍스트 방향을 변경
4) Vertical Alignment : vertical-align : top/middle/bottom 요소의 수직 정렬을 설정
5) Text Decoration : 텍스트에서 장식을 설정하거나 제거하는 데 사용
text-decoration: none; : 링크에서 밑줄을 제거하는 데 자주 사용
6) text-transform : uppercase / lowercase / capitalize
7) text spacing
(1) text-indent : 첫 번째 줄의 들여쓰기를 지정하는 데 사용
(2) letter-spacing : 문자 사이의 공백을 지정. 문자 사이의 간격을 늘리거나 줄이는 방법.
(3) line-height : 줄간격.
(4) word-spacing : 단어간격.
(5) white-space : 공백 처리 방법을 지정. white-space: nowrap;
8) text shadow : text-shadow. 색상 추가, 블러도 가능.
15. CSS Fonts
1) Generic Font Families
- Serif fonts : 각 글자의 가장자리에 작은 획. 격식과 우아함.
- Sans-serif fonts : 선이 깨끗. 작은 강조 표시 없음. 현대적이고 미니멀.
- Monospace fonts : 모든 문자의 너비는 동일. 기계적
- Cursive fonts :사람의 필체를 모방. 필기체.
- Fantasy fonts : 장식적인/장난적인 글꼴
2) font-family : 텍스트의 글꼴을 지정. 원하는 글꼴로 시작하고 일반 패밀리로 끝. 다른 글꼴을 사용할 수 없는 경우 브라우저가 일반 패밀리에서 유사한 글꼴을 선택. 쉼표로 구분.
3) font-style : normal / italic / oblique
4) font-weight : normal / bold
5) font-variant : normal / small-caps(모든 소문자가 대문자로 변환, 변환된 대문자는 작은글꼴 크기로 나타남.)
6) font-size : percent , em, vw(viewport width)으로 설정 가능.
7) Google Fonts
16. Navigation Bars
CSS를 사용하면 지루한 HTML 메뉴를 보기 좋은 탐색 막대로 변환
navigation bar는 기본적으로 링크 목록이다. 따라서 ul과 log 요소를 사용하는 것이 좋다.
17. Dropdowns
요소 위로 마우스를 이동할 때 나타나는 드롭다운 상자
'WEB' 카테고리의 다른 글
| [WEB] 웹 개발을 위한 SQL 기본 정리 (0) | 2021.07.25 |
|---|---|
| [JS] JS Tutorial (0) | 2021.07.14 |
| [CSS] CSS 적용 우선순위 (0) | 2021.07.13 |
| [HTML] a태그 - 하이퍼링크 밑줄 없애기 (0) | 2021.07.13 |
| [WEB] HTML 태그 총정리 (0) | 2021.07.11 |
