chapter4. 태그를 표현하는 CSS와 advanced CSS(css3)

01 css 개요 및 css 기본 사용법

- CSS는 디자인, 레이아웃, 다양한 기기 및 화면 크기에 따른 디스플레이의 다양성 문제를 포함한 웹 페이지의 스타일을 정의할 때 사용한다.

 

- CSS는 작성 위치에 따라 스타일시트를 태그의 style속성에 기술하는 인라인(inline)스타일시트, 스타일시트를 html 문서 내에 포함해서 작성하는 내부(internal) 스타일시트, 스타일시트를 별도의 파일로 작성하는 외부(external)스타일 시트가 있다.

 

- 스타일 시트를 구성하는 규칙 집합(rule set or rule)은 셀렉터(selector)와 선언 블륵 ({ })으로 구성된다. 셀렉터에는 태그명,id속성 값, class 속성 값이 올 수 있다

 

02 CSS의 주요 속성과 값

종류	속성	설명	값	기본 값	적용 대상
글자색	color	텍스트 문자열의 글자색을 지정하는데 사용	<color> | inherit(부모로부터 상속)	브라우저에 따라 다름	모든 태그
배경	background- color	배경색을 지정하는데 사용	<color> | transparent(투명한 색상 지정) | inherit	transparent
	backround-image	배경 이미지를 지정하는데 사용	<uri> | none(없음) I inherit	none
	background-repeat	배경의 이미지가 있는 경우, 이것을 반복해서 표시할지 여부를 결정하는데 사용	repeat(수평, 수직 양방향으로 반복) | repeat-x(수평으로만 반복) | repeat-y(수직으로만 반복) | no-repeat(반복 안 함) I inherit	repeat
	background-attachment	배경에 이미지가 있을 때 화면의 스크롤이 이동하더라도 이미지를 고정적으로 보여줄 것인지으 여부를 지정	scroll(스크롤) | fixed(고정) I inherit	scroll
	background-position	배경 이미지가 있을 경우 이미지의 초기 위치를 지정	[[ <percentage> | <length> | left | center | rignt ] [ <percentage> | <length> | top | center | bootom ]?] | [ [left | center | rignt] || [top | center | bootom] ] | inherit	0% 0%(x와 y의 크기 쌍으로 기술)
	background	모든 배경 속성을 한 번에 표기하기 위한 속성

​

- 폰트를 지정하는 스타일

속성	설명	값	기본 값	적용 대상
font-family	엘리먼트에 설정 할 폰트의 종류를 지정하는데 사용	[[<family-name> | <generic-family>] [, <family-name> | <generic-family>]*] | inherit	브라우저에 따라 다름	모든 태그
font-style	폰트 스타일을 지정한다.	normal | italic(기울임꼴) | oblique(기울임꼴) | inherit	normal (스타일이 없는 일반 형태)
font-variant	소문자를 모두 대문자로 표시할 때 사용	normal | small-caps | inherit	normal
font-weight	폰트의 굵기 선택	normal | bold | bolder | lighter | 100 | ... | inherit	normal
font-size	폰트의 크기를 지정하는 속성	<absolute-size> | <relative-size> | <length> | <percentage> | inherit	medium
font	모든 속성 한 번에 표시

​

- 텍스트를 지정하는 스타일

속성	설명	값	기본 값	적용 대상
text-indent	문단에서 첫 번째 줄의 들여쓰기를 지정	<length> | <percentage> | inherit	0	block-level element, table cells, inline blocks
text-align	문단의 내용을 왼쪽, 오른쪽 등으로 맞춤	left | right | center | justify | inherit	left | right
text-decoration	텍스트에 장식을 지정한다.	none | [underline || overline || line-through] | inherit	none	모든 태그
letter-spacing	글자 간격을 지정	normal | <length> | inherit	normal
word-spacing	단어 간격을 지정
text-transform	영문자의 첫 글자를 대문자로 변환하거나 영문자의 대소문자의 변경을 지정	capitalize | uppercase | lowercase | none | inherit
white-space	태그 내의 여백을 처리하는 방법을 정의	normal | pre } nowrap | pre-wrap | pre-line | inherit

​

- 테이블을 지정하는 스타일

종류	속성	설명	값	기본 값	적용 대상
모델 표시	display	테이블 모델 표시와 관련되어있다.			모든 태그
내용 배치	vertical-algin	테이블 각각의 셀의 수직 맞춤을 결정	baseline | top | middle | bottom
	text-algin	테이블 내용의 정렬 결정	left | center | right	left

​

- 테두리를 지정하는 스타일

모델	설명	속성	기본 값
separated	각각의 셀로 구성된 모델이다.	border-spacing, empty-cells
collapsing	하나의 셀들이 연속되어 한 덩어리로 합쳐진 듯한 모양을 갖는 셀이다.	border	none | hidden | dotted | dashed | solid | double

· separated 보더 모델과 collapsing 보더 모델은 border-collapse 속성의 값에 따라 결정된다.

​

- 박스 모델을 지정하는 스타일

종류	속성	설명	값	기본 값	적용 대상
margin	margin-top, margin-right, margin-bottom, margin-left	margin 영역의 위쪽, 오른쪽, 아래쪽, 왼쪽의 마진을 의미한다.	<margin-width> | inherit	0	table-caption, table, inline-table 등의 테이블 관련 태그들을 제외한 모든 태그
	margin	모든 마진 속성을 한 번에 준다.	<margin-width>{1,4} | inherit	개별적인 속성들
padding	padding-top, padding-right, padding-bottom, padding-left	padding 영역의 위쪽, 오른쪽, 아래쪽, 왼쪽의 패딩딩을 의미한다.	<padding-width> | inherit	0	table-row-group, table-header-group, table-footer-group, table-row, table-colum-group, table-colum 태그들을 제외한 모든 태그
	padding	모든 패딩 속성을 한 번에 준다.	<padding-width>{1,4} | inherit	개별적인 속성들

03 미디어 쿼리(Media Query)

- 미디어 쿼리

· 미디어 및 화면에 크기에 따라 다른 스타일 시트가 적용되도록 하는 것을 말한다.

· 정보화 기기들이 다양해짐에 따라 브라우저를 사용해서 웹 사이트를 보는 화면의 크기도 다양해졌기 때문에 사용자가 보기 편하도록 화면의 크기가 달라진다.

​

- 미디어 쿼리 사용법

1. 기본적인 스타일 - 공통 스타일

html, body, div, p{margin : 0;}

 

2.특정 태그에만 적용되는 스타일

div ul li{display : inline;} // <div>의 하위 태그인 <ul>의 하위 태그인 <li> 태그에만 적용

 

3. 미디어쿼리 - 화면의 크기별로 각각 지정

​

- 미디어 쿼리의 작성 위치

1. html 페이지의 <link> 태그를 사용해서 기술하는 방법

2. CSS 파일에 미디어 쿼리 구문을 추가하는 방법 : 권장

​

- 미디어 쿼리 구문 작성 방법

1. @media screen 으로 시작

2. 조건을 추가

화면의 넒, 높이, 색, 격자 등 다양한 형태로 적용하는 것이 있음

 

@media screen and (조건 추가)...

// 화면의 크기가 320px~500px
@media screen and (min-width : 320px) and (max-width : 550px) {}

// 720px 이하
@media screen and (max-width : 720px) {}

// 1000px 이상
@media screen and (min-width : 1000px) {}

 

04 Adavanced CSS(CSS3)의 추가 기능

- Advanced CSS

· 스타일시트의 최신 표준이다. (기존의 CSS + CSS3(추가된 신기능))

· 실렉터, 박스 모델, 배경과 테두리, 이미지 관련, 텍스트 효과, 2D/3D 트랜스폼, 애니메이션, 폰트, 다단 기능을 제공한다.

· 사용 시 속성에 벤더 프리픽스를 추가하고 스타일 구문의 마지막에 표준 규약의 기술한다.

​

- 테두리와 배경

· border-radius 속성 : 둥근 모서리 지정

· box-shadow 속성 : 그림자 효과 지정

· Advaned CSS의 색상 : 기존의 색상 및 투명도가 추가된 RGBA와 HSLA 색상을 사용 가능하다. (background-color)

· border-image 속성 : 테두리에 이미지를 사용할 수 있다.

​

- 배경

· 배경 이미지 중첩

· background-size 속성 : 배경 이미지 크기 조절

​

- 텍스트 효과

· text-shadow 속성 : 글자에 그림자 등의 효과

​

- 그래디언트

· 선형과 원형 두 개의 타입의 그래디언트를 제공

· linear-gradient, radial-gradient

​

- 트랜스폼(transform)

· translate() : 개체(태그)를 지정한 픽셀만큼 가로, 세로, 가로세로 이동 시킨다.

· rotate() : 개체(태그)를 지정한 각도만큼 회전시킨다.

· scale() : 주어진 값에 따라 개체(태그)를 지정한 크기만큼 확대하고 축소한다.

· skew() : 지정한 각도 값을 가지고 개체를 왜곡한다.

​

- 트랜지션

· 어떤 형태에서 다른 형태로 변환을 주는 기능이다.

· 원하는 형태 변환을 기술하고, 그 형태로 변환될 때의 지속 시간을 기술해야 한다.

 

- 애니메이션

· 개체나 이미지 등에 움직임 효과를 주는 것으로 기존의 자바스크립트나 플래시 등에서 하던 작업을 대체한다.

· 애니메이션 규칙 등을 @keyframes 규칙에 정의하고 이 정의한 규칙을 필요한 곳에서 animation을 사용해서 쓴다.

​

@keyframes 애니메이션규칙이름 {
    start                        // 애니메이션이 시작할 때 형태 등을 지정
    ...                          // 특정 지점에서의 형태 등을 지정
    end                          // 애니메이션이 끝나는 형태 등을 지정
}

// 사용
div {
    animation: 애니메이션규칙이름 지속시간;
}

 

- 필터

· 이미지 등에 사진에서 사용하는 블러, 밝기 조절 , 세피아와 같은 필터 기능을 줄 때 사용한다.

· 엣지에서는 아직 이 기능을 제공하지 않는다.

 

filter : 필터 값;

// none, blur(), brightness(), contrast(), drop-shadow(), gray-scale(),
// hue-rotate(), invert(), opacity(), saturate(), sepia() 등

 

 

- 라운드 이미지

- 썸네일 이미지

- 다단

 

05 부트스트랩

부트스트랩은 HTML, CSS, JavaScript 반응형 웹사이트, 모바일 우선 웹 사이트를 쉽게 작성할 수 있도록 해주는 

무료 프레임워크로 그리드 기반의 디자인, 캐러셀, 모달 등을 쉽게 구현하는 방법을 제공