#2 CSS3

1. CSS3

• Cascading Style Sheet, css로 작성된 코드를 style sheet이라고 한다
• 적용방법 : <link href="url" type="text/css" rel="stylesheet">
• 규칙 
  1. 자식태그는 부모태그의 스타일을 상속
  2. cascading : 여러 스타일이 합쳐서 적용된다
  3. overriding : 여러 스타일이 합쳐서 적용되어 충돌이 발생되는 경우 우선 순위가 높은 스타일을 적용
     ①html 태그의 style 속성  ② <style> 태그  ③스타일시트  ④브라우저디폴트스타일
• selector
  1. 태그이름 셀렉터 : h1 { color : red; }
  2. class 셀렉터 : .class1 { color : red; }
  3. id 셀렉터 : #id1 { color : red; }
  4. 자식 셀렉터 : div > h1 { color : red; }
  5. 자손 셀렉터 : div h1 { color : red; }
  6. 전체 셀렉터 : * { color : red; }
  7. 슈도 클래스 셀렉터 : h1:hover { color : red; }

pseudo class selector

 

 

2. 폰트 프로퍼티

- 폰트 단위

• html 요소 크기의 기본값은 웹브라우저에서 설정한 글자크기, 디폴트 16px
• em : 상위 요소 크기의 몇 배인지로 폰트 크기를 정함
• rem : html 요소 (문서의 최상위 요소) 크기의 몇 배인지로 폰트 크기를 정함

 

- 웹 폰트

• <style> </style> 태그 내에서 @font-face 규칙을 설정
  1. font-family : 사용할 웹 폰트의 이름 지정, 폰트 파일의 이름과 일치할 필요는 없지만 비슷하게 설정하여 유지보수 용이성 확보
  2. src : url( )에 폰트 파일의 경로를 설정하고 format( )에 폰트 파일의 형식을 설정
• @font-face 규칙을 설정한 다음 웹 폰트가 필요한 선택자의 font-family 속성에서 사용할 웹 폰트의 이름을 호출하여 사용. 웹 폰트 로딩 실패시 fallback폰트가 렌더링

 

font-family

• 글꼴 지정
• font-family : 글꼴1, 글꼴2  // 글꼴1 없는 경우 글꼴2(fallback 폰트) 적용

 

font-size

• 글자크기 지정
• font size : small | mediann | large | 3rem | 1.2em | 10px ...

 

font-weight

• 글자 굵기 지정
• font-weight : bold | bolder | lighter | normal | 100~900수치

 

font-style 

• 글자스타일
• font-style : italic | oblique

 

font 

• 단축 프로퍼티
• font : style weight size family

 

3. 텍스트 프로퍼티

text-decoration

• 밑줄
• text-decoration : none | underline | overline | line-through

 

text-transform

• 대,소문자 전환
• text-transform : none | capitalize | uppercase | lowercase

 

text-align

• 문단 정렬
• text-align : start (시작위치 맞춤) | end (끝위치 맞춤) | left (왼쪽정렬) | right | center | justify (양쪽정렬)

 

text-justify

• 문단 정렬시 공백 조절
• text-justify : auto | none

 

text-indent

• 들여쓰기
• text-indent : 10px | 10% (부모요소기준으로 10% 들여쓰기)

 

line-height

• 줄 높이
• line-height : noraml | 2.0 (2배) | 200% | 20px

 

4. 박스모델

- 개념

• html 태그 요소를 하나의 박스로 보고 박스의 크기, 배경, 색 여백 등을 다루는 시스템
• box는 margin, border, padding, content로 구성

 

box-sizing

• 박스의 크기의 기준을 설정
• box-sizing : content-box | border-box | initail (기본값으로 설정 : content-box) | inherit

 

- 박스 제어 프로퍼티

 

 

overflow

• html 콘텐츠가 width와 height 의 크기를 넘어가는 경우 콘텐츠를 자를 것인지 말 것인지 지정
• 블록태그에만 적용
• overflow : visible (잘리지 않고 태그 영역을 넘어서 출력, 디폴트) | hidden (넘어가는 것은 보이지 않음, 스크롤바 없음) | scroll | auto  

 

5. 포지셔닝

- 개념

• html 태그가 출력되는 위치를 지정하는 것

 

display 프로퍼티

• 디폴트 박스 유형을 무시하고 html 박스 유형을 지정한다
• display : block | inline | inline-block
• css3 박스유형

• 박스 유형 비교

 

 

position 프로퍼티

• 단일 박스 모델의 배치방법
• position : static (기본위치에 배치)
• positiion : relative (기본위치에서 left, top, bottom, right 프로퍼티 값 만큼 이동한 상대위치)
• position : absolute (부모요소를 기준으로 left, top, bottom, right 프로퍼티 값 만큼 이동한 절대위치)
• position : fixed (스크롤하거나 브라우저 크기 변경과 상관없이 left, top, bottom, right 값으로 뷰포트의 특정위치에 고정)

 

float 프로퍼티

• html 요소를 문서에 떠있게끔 배치
• position 이 absolute이나 fixed로 지정되어 있으면 해당 요소는 완전히 독립적인 위치를 갖으므로 float 속성은 none으로 지정된다.
• float : left (요소 자신을 포함하고 있는 컨테이너의 왼쪽으로 띄움)
• float : right (요소 자신을 포함하고 있는 컨테이너의 오른쪽으로 띄움)
• float : none (요소를 띄우지 않음, 디폴트)

 

clear 프로퍼티

• clear된 요소의 좌우에 float된 요소를 허용하지 않도록 함
• clear : none (요소들이 양쪽으로 float 할 수 있음, 디폴트)
• clear : left (왼쪽으로 float 할 수 없게 함)
• clear : right (오른쪽으로 float 할 수 없게 함)
• clear : both (양쪽으로 다 float 할 수 없게 함)

 

z-index 프로퍼티

• html 태그들을 z축을 따라 수직으로 쌓는 순서를 지정
• 값이 클 수록 위에 쌓인다
• position이 relative나 absolute인 경우에만 작동
• z-index : 3

 

 visibility 프로퍼티

• html 태그를 출력할 것인지 숨길 것인지 지정
• visibility : visible(출력) | hidden(공간은 차지하지만 태그는 보이지 않음)
• display : none (공간도 차지않고 태그도 출려되지 않음)