(인터랙티브 웹 페이지 만들기) Chapter3

---

Chap1. 웹 페이지의 배경 꾸미기

태그 영역마다 배경색과 이미지를 넣을 수 있다

Chap1-1. 배경색 지정하기

배경색은 background-color 속성을 사용해서 태그에 직접 지정할 수 있다

속성명	속성값	설명
background-color	영문명 rgb(0,0,0) #000000	배경색을 영어 색상명으로 적용 배경색을 RGB 표기법으로 적용 배경색을 16진수 표기법으로 적용

See the Pen background-color by mon node (@mon-node) on CodePen.

---

Chap1-2. 배경 이미지 적용하기

속성명	속성값	설명
<background-image>	url(이미지 경로	배경 이미지를 삽입
<background-repeat>	repeat, repeat-x, repeat-y, no-repeat	배경 이미지를 반복
<background-position>	가로축, 세로축	배경 이미지의 위치를 지정
<background-size>	contain, cover	배경 이미지의 크기를 지정
<background-attachment>	fixed	배경 이미지가 움직이지 않게 고정

See the Pen background-image by mon node (@mon-node) on CodePen.

Chap2. 웹 페이지의 레이아웃 구성하기

집의 공간을 거실, 주방, 서재등 사용 목적에 나누듯이 웹 페이지도 시맨틱 태그를 통해 레이아웃을 분리해본다

Chap2-1. float을 사용하여 블록 요소 좌우로 배치하기

float 속성은 블록 요소를 강제로 띄워서 화면에 좌우로 배치가 가능하다

속성명	속성값	설명
<float>	left right	요소를 띄워서 왼쪽에 배치한다 요소를 띄워서 오른쪽에 배치한다

See the Pen 웹 페이지의 레이아웃 구성_float 예제 by mon node (@mon-node) on CodePen.

위와 같이 section 요소가 좌우로 잘배치되었지만 부모 요소인 .wrap가 자식 요소의 높잇값을 인식하지 못해 테두리를 감싸지 못했다 인식 시키기위해서는 하기와 같이 가상 선택자를 생성한다

.wrap::after{
    content: '';
    display: block;
    clear: both;
}

Chap2-2. position 블록 요소 자유롭게 배치하기

position 속성은 여러 요소를 순서와 상관없이 화면에 가로세로 좌푯값을 설정해서 자유롭게 배치가 가능하다

속성명	속성값	설명
<position>	relative absolute fixed	적용된 요소의 현재 위칫값을 기준으로 상대 위치를 지정 부모 요소의 특정 구간을 기준으로 절대 위치를 지정한다 웹 브라우저를 기준으로 절대 위치를 지정한다

[position-relative]

See the Pen 웹 페이지의 레이아웃 구성_position 예제 by mon node (@mon-node) on CodePen.

relative는 요소를 일반적인 문서 흐름에 따라 배치하되, 상하좌우 위치 값에 따라 오프셋(위치를 얼마간 이동시킬 것인지)을 적용한다

---

[position-absolute]

See the Pen 웹 페이지의 레이아웃 구성_position-absolute 예제 by mon node (@mon-node) on CodePen.

absolute는 일반적인 문서 흐름에서 제거하고, 가장 가까운 position 지정 요소(position 속성에 속성값이 정의되어 있는 요소)에 대해 상대적으로 오프셋(위치를 얼마간 이동시킬 것인지)을 적용한다

[position-fixed]

See the Pen 웹 페이지의 레이아웃 구성_position-fixed예제 by mon node (@mon-node) on CodePen.

fixed는 웹 브라우저 기준으로 좌푯값이 고정된다

Chap2-3. object-fit을 사용하여 콘텐츠를 특정 영역에 채우기

object-fit 속성을 사용하면 부모 요소 영역에서 자식 요소로 지정한 이미지, 동영상 등 콘텐츠의 비율을 설정할 수 있다

속성명	속성값	설명
<object-fit>	fill cover contain	요소의 비율을 무시하고 가득 채움 요소의 비율을 유지하면서 여백 없이 가득 채움 요소의 비율을 유지하면서 콘텐츠가 잘리지 않게 가득 채움

See the Pen 웹 페이지의 레이아웃 구성_object-fit예제 by mon node (@mon-node) on CodePen.

Chap2-4. z-index을 사용하여 겹쳐 있는 요소의 z축 순서를 지정하기

z-index를 사용하여 겹친 요소의 z축 순서를 강제로 지정할 수 있다

속성명	속성값	설명
<z-index>	순섯값	요소에 z축의 순서를 지정한다(값이 큰 요소가 위로 올라감)

--css--

.wrap .left{
    width: 200px;
    height: 200px;
    background-color: blue;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 2;
}
.wrap .right{
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 1;
}

Chap2-5. opacity을 사용하여 요소의 투명도 설정하기

특정 요소에 opacity 속성을 사용하여 투명에서 불투명까지 단계별로 투명도를 지정할 수 있다

속성명	속성값	설명
<opacity>	0~1	요소의 투명도를 지정함

--css--

.wrap .left{
    width: 200px;
    height: 200px;
    background-color: blue;
    position: absolute;
    top: 50px;
    left: 50px;
    opacity: 0.3;
}
.wrap .right{
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
    top: 50px;
    left: 50px;
    opacity: 0.5;
}

Chap3. 다양한 그래픽 효과 적용하기

css만으로도 그래픽 효과를 넣고 다양한 인터랙티브한 콘텐츠를 만들 수 있다

Chap3-1. 요소의 그림자 만들기

box-shadow, text-shadow 속성을 사용하면 블록 요소와 텍스트에 그림자 효과를 적용할 수 있다

속성명	속성값	설명
<box-shadow>	가로축/세로축/퍼짐정도/색상	블록 요소의 그림자를 생성
<text-shadow>	가로축/세로축/퍼짐정도/색상	텍스트의 그림자를 생성

See the Pen 블록 요소 그림자 만들기 예제 by mon node (@mon-node) on CodePen.

Chap3-2. 모서리를 둥글게 만들기

border-radius 속성을 사용하면 모서리를 둥글게 설정할 수 있다

속성명	속성값	설명
<border-radius>	px, %	모서리를 속성값만큼 둥글게 만듬

See the Pen 모서리 둥글게 만들기 예제 by mon node (@mon-node) on CodePen.

Chap3-3. 그레이디언트 적용하기

gradient 속성을 사용하면 한쪽은 짙게 하고 다른 쪽으로 갈수록 엷어지는 그레디언트로 지정이 가능하다 (그레이디언트 모양은 직선 또는 타원으로 지정한다)

속성명	속성값	설명
<gradient>	linear-gradient(방향, 색상1, 색상2) radial-gradient(색상1, 색상2)	직선 모양의 그레이디언트를 적용 타원 모양의 그레이디언트를 적용

See the Pen 그라디언트 적용하기 by mon node (@mon-node) on CodePen.

Chap3-4. filter 속성 적용하기

filter 속성은 요소에 대한 시각효과를 지정하며 포토샵에서의 보정 기술과 같은 기술을 적용할 수 있다

속성명	속성값	설명
<filter>	blur brightness contrast grayscale hue-rotate invert saturate sepia	요소의 흐림 효과를 조정한다 요소의 밝기를 조정한다 요소의 명도 대비를 조절한다 요소의 흑백을 지정한다 요소의 색상 단계를 조절한다 요소의 색상 반전 단계를 조절한다 요소의 채도를 조절한다 요소의 갈색 톤 단계를 조절한다

See the Pen filter 사용하기 예제 by mon node (@mon-node) on CodePen.

Chap4. 인터랙티브 웹을 위한 css다루기

css를 사용하여 사용자 행동에 따라 반응하는 인터랙티브 웹 콘텐츠를 만들기

Chap4-1. 콘텐츠 모양을 자유롭게 변형하기

transform 속성을 이용하여 HTML의 요소들을 다양하게 변형한 효과를 적용할 수 있다

속성명	속성값	설명
<transform(2D)>	scale skew translate rotate	선택한 요소의 크기를 확대 및 축소한다) 선택한 요소를 x축 또는 y축으로 비틀어서 변형한다 선택한 요소를 현재 위치 기준 x축 또는 y축 이동 선택한 요소를 회전시킨다
<transform(3D)>	rotateX, rotateY translateZ	선택한 요소를 x축 또는 y축으로 입체감 있게 회전시킨다 선택한 요소를 z축으로 입체감 있게 보이면서 이동시킨다
perspective	px	3D효과가 적용된 요소가 입체감 있게 보이도록 원근감을 부여한다
transform-style	preserve-3d	3D효과를 유지시킨다
transform-origin	가로축,세로축	요소의 변형이 일어나는 중심축을 변경할 수 있다

See the Pen transform 예제 by mon node (@mon-node) on CodePen.

Chap4-2. 사용자 행동에 반응하는 전환 효과 만들기

transition 속성을 이용하여 요소의 속성값이 변경될 때 시간을 지정하여 일정시간 동안 부드러운 모션 처리를 가능하게한다

속성명	속성값	설명
<transition-property>	속성명	전환 효과를 줄 css 속성명을 지정한다 속성명은 여러개 지정이 가능하며 all을 입력하면 전체 속성에서 사용이 가능하다
transition-duration	지속 시간(초 단위)	전환 효과가 발생할 때 지속할 시간을 나타낸다, 지속 시간은 초(s)단위로 지정하는데 0.5s는 0.5초, 1s는 1초를 의미한다
transition-delay	지연 시간(초 단위)	전환 효과가 발생할 때 지연할 시간을 나타낸다. 지연 시간은 초 단위로 지정하고, 이 속성을 사용하면 지연 시간 이후에 전환 효과가 나타난다
transition-timing-function	가속도	전환 효과의 가속도를 나타낸다
transition	속성명/전환시간/가속도/지연시간	모든 전환 효과 관련 속성값을 한꺼번에 축약해서 사용할 수 있다

See the Pen trnstion 예제 by mon node (@mon-node) on CodePen.

Chap4-3. 자동으로 움직이는 애니메이션 효과 만들기

animation 속성을 사용자가 특정 동작을 하지 않더라도 미리 지정한 조건에 맞게 자동으로 반복하는 애니메이션 효과를 줄 수있다

속성명	속성값	설명
<@keyframes>	애니메이션 세트 지정	애니메이션의 시작과 끝을 등록하여 사용자 모션을 등록한다 0%는 시작 지점, 100%는 끝 지점이며 중간 지점은 여러개 추가 가능
animation-name	이름	키프레임으로 등록한 모션의 이름을 호출한다
animation-duration	지속 시간(초 단위)	키프레임 모션 한 세트를 얼마 동안 동작하게 할지 초 단위로 등록
animation-timing-function	가속도	키프레임 모션을 실행할 때 가속도를 설정한다 가속도의 사용 방법은 transtion속성과 같다
animation-iteration-count	횟수	키프레임 모션 한 세트가 몇 번 동작하는지 횟수를 숫자로 설정한다, 무한 반복하고 싶으면 속성값을 infinite로 지정한다
animation-play-state	running/paused	키프레임 모션을 실행할 때 동작 상태를 지정한다 running은 모션을 그대로 진행하는 것을, paused는 일시 정지하는 것을 나타낸다
animation	이름/진행 시간/가속도/지연 시간/반복 횟수	애니메이션 속성을 축약해서 작성할 수 있다

See the Pen 애니메이션 예제 by mon node (@mon-node) on CodePen.