[CSS] 6장: CSS 필수 속성 다루기 (2)

개요

이번 글에서는 CSS의 위치 속성을 이용해 HTML 요소를 원하는 위치에 배치하는 방법을 다룬다. 이후, 페이지의 인터랙티브한 요소를 구현하기 위한 전환 효과와 애니메이션 속성을 학습하고, 이를 활용해 부드러운 전환과 애니메이션을 제어하는 법을 배운다. 또한, 변형 효과를 적용해 요소의 모양이나 크기를 변경하는 방법도 살펴본다. 마지막으로, 웹 폰트와 아이콘 폰트를 사용해 텍스트와 아이콘을 보다 세련되게 표현하는 방법을 알아볼 예정이다.

위치 속성으로 HTML 요소 배치하기

HTML 요소를 기본 흐름에서 벗어나서 원하는 곳에 배치할 수 있도록 해준다.

position 속성

좌표값에 따라 요소를 배치하도록 한다.

position : <속성값>;

속성값	설명
static	요소를 기본 흐름에 따라 배치
relative	요소를 기본 흐름에 따라 배치하되 좌표 속성 사용 가능
absolute	요소를 기본 흐름에 벗어난 절대 좌표 위치에 배치
fixed	요소를 기본 흐름에서 벗어난 절대 죄표 위치에 배치. 스크롤해도 고정 상태.
sticky	요소를 static처럼 기본 흐름에 따라 배치하되 지정 좌표의 임계점에 이르면 fixed처럼 화면에 고정.

# relative

.relative-box {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            
            /* 마지막 요소 기준으로 이동 */
            position: relative; 

            /*좌표 속성에 따라 배치 가능*/
            left: 50px;
        }

 

# absolute

.absolute-box {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            
            /* 부모 위치 기준으로 이동 */
            position: absolute; 
            
            /* 좌표 속성에 따라 배치 가능 */
            top: 10px;
            left: 150px;
        }

# fixed

.fixed-box {
            width: 100px;
            height: 100px;
            background-color: lightsalmon;

            /* 화면에 고정되며, 웹페이지 기준으로 이동 */
            position: fixed; 

            /* 좌표 속성에 따라 배치 가능 */
            top: 212px;
            left: 230px;
        }

# sticky

.sticky-box {
            width: 100px;
            height: 100px;
            background-color: lightpink;
            
            /* 화면에 고정되며,  */
            position: sticky; 
            top: 100px;
            left: 100px;
        }

위의 코드에 기반한 position 속성의 웹페이지 스크롤 예시

# z-index 속성

position 속성으로 배치한 요소의 z축 위치를 결정할 수 있다.

즉, 겹치는 요소가 있을 때 어떤 요소가 더 위로 보일지 정해준다. 

속성값이 높을 수록 앞에 표시된다.

float 속성

대상 요소를 공중에 띄워 다음에 오는 요소를 주변에 자연스럽게 배치하기 위한 용도로 사용한다.

속성값 : none, left, right.

이미지 요소와 텍스트 요소를 배치할 때 특히 자주 사용된다. 이 글의 개요 역시 float 요소의 예다.

단, 요소끼리 겹치는 등 원하는 공간을 제대로 인식하지 못할 수 있으므로 주의해야 한다. 
(clear 속성과 overflow 속성을 사용하면 해결할 수 있다.)

clear 속성

float 속성이 대상 요소의 다음 요소에 영향을 주지 못하도록 막는 속성.

속성값 : left, right, both.

전환 효과 속성 적용하기

전환이란

한 요소에 적용된 스타일 속성값을 다른 속성값으로 변하게 한다.

transition-property 속성

속성값에 전환 효과의 대상이 되는 속성명을 적거나 all을 적으면 해당 속성을 전환효과로 지정한다.

transition-duration 속성

속성값의 시간만큼 전환 효과를 지속한다.

위의 property 속성에서 전환 효과가 여럿인 경우 쉼표로 구분해 duration을 각각 지정할 수 있다.

transition-delay 속성

전환 효과의 발생을 지연할 수 있다. 속성값은 역시나 시간단위이다.

transition-timing-function 속성

전환 효과의 진행속도를 지정한다. 

속성값	설명
linear	처음 속도와 마지막 속도가 일정하다
ease	처음에는 속도가 점점 빨라지다가 중간부터 점점 느려진다
ease-in	처음에는 속도가 느리지만 완료될 때까지 점점 빨라진다
ease-in-out	처음에는 속도가 느리지만 점점 빨라지다가 다시 점점 느려진다
cubic-bezier(p1, p2, p3, p4)	사용자가 정의한 속도로 진행한다

실제로 코딩해서 웹으로 보면 더 부드러움.

변환 효과는 cubic-bezier를 통해 커스텀할 수도 있지만, 크롬 개발자 도구에서 애니메이션 그래프를 활용하거나 값을 구해주는 외부 사이트를(https:://cubic-bezier.com) 활용하는 편이 편하다.

transition 속성으로 한 번에 지정하기

위의 속성들은 transition 속성으로 한번에 지정될 수도 있다.

transition: <property>, <duration>, <timing-function>, <delay>;

또한, 모든 속성이 전환 효과가 가능한 것은 아니다.

 

애니메이션 속성으로 전환 효과 제어하기

transition 속성보다 더 정확하고 부드럽게 제어할 수 있다.

키 프레임 정의하기

키프레임 : 애니메이션이 진행되는 과정에서 특정 시점에서 발생해야 하는 여러 작업을 정의하는 문법

@keyframes name {
    0% {/* css code */} //from으로 대체 가능
    n% {/* css code */}
    100% {/* css code */} //to로 대체 가능
}

 

animation-name 속성

속성값 : 특정 요소에서 적용할 키프레임 명 (위에서 만든 키프레임의 이름)

animation-duration 속성

속성값 : 지속 시간

animation-delay 속성

속성값 : 애니메이션 실행 지연 시간

animation-fill-mode 속성

애니메이션 실행 전후의 스타일 지정

속성값	상태	설명
none	실행 전	시작지점(0%)의 스타일을 적용하지 않고 대기
	실행 후	실행되기 전의 스타일 적용 상태로 복귀
forwards	실행 전	시작지점(0%)의 스타일을 적용하지 않고 대기
	실행 후	키 프레임에 정의된 종료지점(100%)의 스타일을 적용하고 대기
backwards	실행 전	시작지점(0%)의 스타일을 적용하고 대기
	실행 후	실행되기 전의 스타일 적용 상태로 복귀
both	실행 전	시작지점(0%)의 스타일을 적용하고 대기
	실행 후	키 프레임에 정의된 종료지점(100%)의 스타일을 적용하고 대기

animation-iteration-count 속성

속성값 : 반복 횟수

animation-play-state 속성

애니메이션의 재생 상태 지정 : paused, running

즉, 애니메이션의 실행 도중 일시정지할 수 있다.

animation-direction 속성

애니메이션의 진행 방향 지정

normal : 시간 순

reverse : 시간 역순

alternate : 홀수는 normal, 짝수는 reverse

alternate-reverse : 홀수는 reverse, 짝수는 normal

animation 속성으로 한 번에 지정하기

animation:<name> <duration> <timing-funciton> <delay> <iteration-count> <direction> 
<fill-mode> <play-state>;

 

변형 효과 적용하기

transform 속성

속성값 : 변형 효과가 정의된 다양한 함수

translate(x, y) : 요소를 현재 위치에서 (x, y)만큼 이동. (translateX, translateY)

scale(x, y) : 요소를 (x, y)만큼 확대/축소. (scaleX, scaleY)

skew(xdeg, ydeg) : 요소를 xdeg, ydeg 각도만큼 기울임. (skewX, skewY)

rotate(deg) : 요소를 deg각도만큼 회전함

transform-origin 속성

변형의 기준점을 정할 수 있다. 기본값은 요소의 중심이다.

웹 폰트와 아이콘 폰트 사용하기

구글 폰트 적용하기

웹 폰트 : 인증된 기관 또는 회사에서 웹 서버에 올려놓은 폰트

 구글 웹 폰트 링크 

Browse Fonts - Google Fonts

아이콘 폰트 적용하기

다양한 아이콘을 웹 폰트처럼 사용하는 기술.

Font Awesome, Material Icon 참조.