[2020-여름 WEB] 4주차

4주차_웹실습_21기_송희원.pdf

0.35MB

4주차_웹이론_21기_송희원.pdf

0.09MB

 

1. 목록과 표 장식하기

1.1 목록

목록의 글머리 기호 설정 : list-style-type 속성

 

  ① 순서 없는 목록

disc : ●, circle : ○, square : ■

 

  ② 순서 있는 목록

decimal(1, 2, 3,…), lower-roman(ⅰ, ⅱ, ⅲ, …), upper-roman(Ⅰ, Ⅱ, Ⅲ, …), lower-alpha(a, b, c, …), upper-alpha(A, B, C, …)

 

목록의 글머리 기호에 이미지 사용                                                                                                                    

list-style-image : url(“이미지 파일 주소”)

 

글머리 기호 위치 지정 : list-style-position 속성                                                                                         

inside, outside(기본값)

 

 

 

1.2 표

 

표 또는 셀의 폭 지정 방법 : width, table-layout

  ① width 속성 : 표나 각 셀의 가로 길이

  ② table-layout 속성 : auto(기본값), fixed

 

셀의 테두리 모양 지정

  ① border-spacing 속성 : 테두리 간격

  ② border-collapse 속성 : 셀의 테두리 분리

  ③ empty-cells 속성 : 빈 셀의 테두리

 

캡션의 위치 지정 : caption-side 속성

  ① top(기본값), bottom

 

 

 

 

 

2. 박스모델 설정하기

2.1 영역설정을 위한 박스모델

 

배경영역

  ① h3, p, div : 해당하는 줄만큼 배경

  ② strong, span : 해당하는 글자들만 배경

  ③ table, img : 자신의 영역을 미리 결정

 

박스공간을 위한 스타일 속성

  ① 외부공백 : margin, margin-top, margin-right, margin-left, margin-bottom, …

  ② 내부여백 : padding, padding-top, …

  ③ 테두리/경계선의 두께 : border-width, border-top-width, …

  ④ 테두리의 모양 : border-style(실선, 점선, 이중선 등)

  ⑤ 테두리의 색상 : border-color

  ⑥ 테두리 지정 줄여쓰기 : border : <width> <style> < color>

 

 

 

2.2 박스모델 유형의 지정

display 속성값 : block, inline, table, list-item, none

 

 

 

 

 

3. 레이아웃 설정하기

3.1 콘텐츠의 위치 지정 방법

 

콘텐츠의 위치 지정 : top, right, left, bottom 속성 사용

 

위치값의 유형 지정 : position 속성

  ① static(기본값) : 순서대로

  ② absolute : 문서 내에서 절대위치

  ③ relative : 직전 요소에 이어서 상대위치

  ④ fixed : 현재 브라우저 화면 내에서 절대위치

 

 

 

3.2 플로팅 박스 배치하기

플로팅 박스의 지정 : flaot

 

≫ 특정 콘텐츠를 주변 콘텐츠와 별도로 분리하여 배치할 때 사용한다.

≫ float 속성은 플ㄹ로팅 박스와 주변 콘텐츠의 배치 방법을 지정한다. [left, right, none(기본값, 순서대로)]

 

 

 

3.3 콘텐츠 박스의 크기 조정하기

콘텐츠의 크기 조정 : width, height 속성

 

≫ 특정 콘텐츠에서 차지하는 공간 크기를 임의로 조정한다.                                                                               

(width, height / min-width, min-height / max-width, max-height)

 

 

 

 

 

4. 다양한 효과 설정하기

4.1 박스에 효과 주기

 

둥근 모서리 : border-radius 속성

≫ 모서리의 둥근 정도를 달리 지정                                                                                                               

(border-radius, border-top-left-radisu, border-top-right-radius)

 

박스 그림자 : box-shadow 속성

box-shadow : <hoffset><voffset><blur><spread><color><inset>

 

 

 

4.2 객체의 투명도 및 가시성 설정

 

투명도 : opacity 속성

≫ 0.0일 때 투명(fully transparent), 1.0일 때 불투명(fully opaque)

 

가시성 : visibility 속성

≫ visible(기본값), hidden, collapse(표에서 열이나 행)

 

 

 

 

 

5. 움직임 설정하기

5.1 전환효과

 

[점진적으로 변하는 전환효과]                                                                                                                      

transition : <property> <duration>          ≫          변화될 속성이름과 전환시간을 지정

 

 

 

5.2 좌표변환

transform : <함수>

  ① translate(x, y) : 이동변환

  ② scale(x, y) : 크기변환

  ③ rotate(angle) : 회전변환

  ④ skew(x-angle, y-angle) : 기울임변환