CSS

◈ CSS를 사용하기 전에는 디자인 관련 HTML 태그와 속성을 사용하여 웹문서 작성→ 웹문서 작성에 대한 생산성 및 유지보수의 효율성이 낮음CSS(Cascading Style Sheets) : HTML 언어로 작성된 웹문서에 모양과 서식을 제공하기 위한 스타일 시트

◈ 전체 선택자 : 모든 엘리먼트(Element - 태그)를 선택 - 비권장🐧가상 선택자

◈ font-family 속성이 생략되거나 속성값으로 설정된 글꼴이 없는 경우 클라이언트 플렛폼(OS - 운영체제)의기본 글꼴 사용 - 클라이언트에 따라 다른 글꼴 사용하여 출력글꼴파일 : ttf 파일(OS에서 사용하는 글꼴파일), woff 파일(IE9 이상, 크롬,

◈ 속성값(단위) : px(기본), pt, em, %, 키워드(small,medium,large 등)→ http://pxtoem.com 사이트 참조→ 글꼴을 반드시 설정

→ 박스모델의 폭보다 큰 태그내용 처리에 대한 스타일 속성속성값 : normal(기본 : pre-line), pre, nowrap, pre-wrap→ 태그내용이 박스모델의 폭을 벗어난 상태로 출력 처리

속성값 : ltr(왼쪽 > 오른쪽 : 기본), rtl(오른쪽 > 왼쪽)

◈ 속성값 : none - 블릿 또는 순서값 미제공◈ 속성값(블릿) : disc(기본), circle, square◈ 속성값(순서값) : decimal(기본), lower-alpha, upper-alpha, lower-roman, upper-roman 등◈ 속성값 :

◈ 속성값 : 색 관련 키워드 - red, green, blue 등

◈ 속성값 : url 함수를 사용하여 이미지 파일의 URL 주소를 설정◈ 배경 이미지가 박스 모델의 폭 또는 높이보다 작은 경우 가로 방향(X) 또는 세로 방향(Y)으로 이미지가 반복 출력─────────────────────────────────────◈ 배경 이미지

🐧박스모델 관련 스타일 속성-3

🐧박스모델 배치 관련 스타일 속성-6

🐧테이블 관련 스타일 속성-3

◈ 속성값 : Z 영역에 대한 깊이을 px 단위로 설정◈ 속성값 : flat(기본 - 2차원), preserve-3d(3차원)◈ 속성값 : 변형 관련 함수 - translate, scale, rotate, skew 등🌠 translate(x, y) : 박스모델을 가로

◈ 속성값 : 정수값 또는 infinite◈속성값 : normal(기본 : 순방향), reverse(역방향), alternate(순방향 <-> 역방향),alternate-reverse(역방향 <-> 순방향)→ 상태(백분율 또는 키워드 - from, to)에