css

CSS를 사용하기 전에는 디자인 관련 HTML 태그와 속성을 사용하여 웹문서 작성했기 때문에 웹문서에 작성에 대한 생성성 및 유지보수의 효율성 낮음

CSS(Cascading Style Sheets) : HTML 언어로 작성된 웹문서에 모양과 서식을 제공하기 위한 스타일 시트 언어 CSS의 활용 : HTML의 태그(박스모델)를 이용하여 웹문서를 구성하고 CSS를 사용하여 태그에 디자인을 적용 웹문서에 작성에 대한 생

부모 엘리먼트에 적용된 스타일은 자식 엘리먼트 상속되어 적용 단 : 자식 엘리먼트에게 상속되지 않는 스타일 속성 존재 CSS 선언의 순서에 의해 CSS 스타일은 단계적으로 적용 !important : 단계적 적용을 무시하고 최우선적으로 CSS 스타일을 적용할 경우 사용되는 속성값 단계적 적용의 예외 - HTML 태그의 계층 순서에 의해 스타일 적용 즉 자식...

외부에서 CSS파일을 link태그로 불러와서 사용했어도 현재 웹문서에서 CSS 스타일 적용가능

각종 선택자. * 전체 선택자 : 모든 엘리먼트(Element - 태그)를 선택 - 비권장 태그 선택자 : 태그명을 이용하여 엘리먼트 선택 태그명이 같은 다수의 엘리먼트에 동일한 스타일 적용 클래스 선택자 : 태그의 class 속성값을 이용하여 엘리먼트 선택

후손 선택자 : 부모 엘리먼트를 기준으로 모든 깊이의 엘리먼트(후손 엘리먼트) 선택 형식) 선택자(부모) 선택자(후손 자식 선택자 : 부모 엘리먼트를 기준으로 첫번째 깊이의 엘리먼트(자식 엘리먼트) 선택 형식) 선택자(부모) > 선택자(자식) 필터 선택자 : 선택된 다수의 엘리먼트 중 특정 엘리먼트 선택 필터 선택자는 클래스 선택자를 이용해야만 구...

속성 선택자 : 태그의 속성이나 속성값이 이용하여 엘리먼트 선택 형식) 선택자[속성] => 태그 속성이 존재하는 엘리먼트 선택 형식) 선택자[속성="비교값"] => 태그 속성값이 비교값과 같은 엘리먼트 선택 형식) 선택자[속성*="비교값"] => 태그 속성값에 비교값이 포함된 엘리먼트 선택 형식) 선택자[속성~="비교값"] => 태그 속성값에 비교값이 하...

가상 선택자 : 선택된 엘리먼트의 상태에 의해 CSS 스타일을 다르게 적용 형식) 선택자:상태 => 선택된 엘리먼트에 따라 사용 가능한 상태가 존재 link 상태 : a 태그로 설정된 URL 주소의 웹문서를 브라우저로 한번도 요청하지 않은 상태 visited 상태

font-family : 글꼴 관련 스타일 속성 - 글꼴 나열 가능(순차 적용) font-family 속성이 생략되거나 속성값으로 설정된 글꼴이 없는 경우 클라이언트 플렛폼(OS)의기본 글꼴 사용 - 클라이언트에 따라 다른 글꼴 사용하여 출력

View selected families 버튼을 눌러서 원하는 방식으로 폰트 활용

font의 속성과 다양한 속성값

letter-spacing : 문자 간격을 설정하기 위한 스타일 속성 - 단위 : px, em, % 등 word-spacing : 단어 간격을 설정하기 위한 스타일 속성 - 단위 : px, em, % 등 line-height : 줄 간격을 설정하기 위한 스타일 속성 - 단위 : px, em, % 등 font 스타일 속성에서 [글자크기/줄간격] 속성값...

white-space : 공백 처리에 대한 스타일 속성 => 박스모델의 폭보다 큰 태그내용 처리에 대한 스타일 속성 속성값 : normal(기본 : pre-line), pre, nowrap, pre-wrap pre-line 속성값 : 다수의 공백을 하나의 공백으로

택스트 문장에 관련해서 다양한 CSS명령으로 속성부여가 가능하다 일단 기능과 형식에 대해서 다뤄보겠다. direction : 문장 쓰기 방향에 대한 스타일 속성 속성값 : ltr(왼쪽 > 오른쪽 : 기본), rtl(오른쪽 > 왼쪽) text-align : 문장 정렬에 대한 스타일 속성 속성값 : left(기본), right, center, justif...

list-style-type 목록에 대한 블릿또는 순서 관련 스타일 속성 속성값 : none -블릿 또는 순서값 미제공 속성값(블릿) : disc(기본), circle, square decimal 기본 lower-alpha upper-alpha, lower-roman upper-roman list-style-image: 블릿 대신 출력될 이미지를 설...

color : 글자색 관련 스타일 속성 속성값 : 색 관련 키워드 - red, green, blue 등 속성값 : 색에 대한 16진수 표기법 - #RGB 또는 #RRGGBB 등 속성값 : rgb 함수를 사용하여 색 표현 - rgb(RED:0~255,GREEN:0~255,BLUE:0~255) 속성값 : hsl 함수를 사용하여 색 표현 - hsl(색상...

background-color : 배경색 관련 스타일 속성 - 색 관련 속성값 전체 배경부터 시작해서 다양한 태그들의 배경에 원하는 색 관련 속성을 부여해서 컬러를 표현할 수 있다.

단! 배경 이미지가 박스모델의 폭 또는 높이보다 큰 경우 박스모델을 벗어난 이미지는 잘라내어 출력

박스모델의 폭 또는 높이보다 작은 배경 이미지를 반복적으로 출력하지 않을 경우 배경 이미지는 박스모델의 왼쪽 상단을 기준으로 출력 background-position : 배경 이미지의 출력 위치 관련 스타일 속성 속성값 : px, %, 키워드(left, right,

background-attachment : 배경 이미지 고정 관련 스타일 속성 속성값 : scroll(기본 - 스크롤), fixed(브라우저 고정) background : 배경 관련 모든 스타일 속성값 설정

배경 이미지가 박스모델의 크기보다 큰 경우 이미지 잘림 발생 background-size : 배경 이미지의 크기 관련 스타일 속성 속성값 : auto(기본) - 배경 이미지를 그대로 출력 속성값 : 배경 이미지의 폭을 px 단위로 변경 - 이미지 비율에 맞게 높이 자동

background 속성값으로 linear-gradient 함수 사용 linear-gradient : 엘리먼트에 선형 그라데이션 효과를 제공하는 함수 그라데이션(Graduention) 효과 : 색이 한쪽방향으로 일정하게 변화되어 출력되는 효과 linear-gradient(진행방향, 시작색, 종료색) 진행방향 : 각도(deg), 키워드(to left, ...

박스모델(BoxModel) : 텍스트 또는 이미지를 출력하기 위해 태그를 이용하여 생성한 사각형 모양의 영역

border-radius : 박스모델 외곽선 모서리 관련 스타일 속성 속성값 : px, % - 박스모델 외곽선의 모서리에 원을 그려 둥글게 표현

box-shadow : 박스모델 그림자 관련 스타일 속성 속성값 : 가로 세로 범짐 확장 색상

블럭 레벨의 박스모델과 인라인 레벨의 박스모델을 구분하여 브라우저에 자동 배치 블럭 레벨의 박스모델 : 하나의 라인을 모두 사용하는 박스모델 div, h1~h6, ul, ol, li, p, table, tr, form 등 인라인 레벨의 박스모델 : 하나의 라인을 같이 사용하는 박스모델 span, img, a, input, select, textare...

display : 박스모델 배치 관련 스타일 속성 속성값 : none(미배치), block(블럭 레벨 배치), inline(인라인 레벨 배치) ,table, table-row, table-cell 등

position : 박스모델 배치 관련 스타일 속성 속성값 : static(기본) - 박스모델 자동 배치(박스모델 중첩 미발생) position: static; 속성값 : relative - 박스모델 자동 배치 후 top 속성과 left 속성으로 박스모델 이동하여

z-index : 중첩된 박스모델의 배치순서 관련 스타일 속성 속성값 : 정수값 - 정수값이 큰 박스모델을 위쪽에 배치

테이블의 속성 테이블 행의 속성 테이블의 명암과 출력 내용이 없는 셀 처리

transform : 박스모델 변형 관련 스타일 속성 속성값 : 변형 관련 함수 - tanslate, scale, rotate, skew 등 translate(x, y) : 박스모델을 가로(X)와 세로(Y) 방향으로 이동하는 함수 - 단위 : px translat

transition-property : 트렌지션 효과를 제공할 CSS 스타일 속성을 속성값으로 설정transition-duration : 트렌지션 효과의 제공 시간을 속성값으로 설정 - 단위 : 초(s) transition-timing-function : 트렌지션 효과

animation-name : 박스모델에 적용될 애니메이션의 이름을 속성값으로 설정animation-duration : 박스모델에 적용될 애니메이션의 지속시간을 속성값으로 설정 애니메이션 내용 from 시작상태 to 종료상태로 표현EX

반응형 웹디자인이란 해상도에 맞게 변하는 웹