CSS를 정복하자 - 응용편

devheyrin·2022년 2월 27일
0

frontend

목록 보기
5/9

텍스트 정렬하기

CSS에는 텍스트를 정렬하기 위한 속성으로 text-align 이 있다. 이 속성에 대한 속성값으로는 다음과 같은 것들이 있다.

  • text-align: justify; 문서 편집기의 '양쪽 정렬'에 해당하는 속성값이다. 모든 줄이 일정한 간격을 가질 수 있도록 정렬한다.
  • text-align: center; '중앙 정렬'에 해당하는 속성값이다.
  • text-align: right; '오른쪽 정렬'에 해당하는 속성값이다.
  • text-align: left; 기본값으로, '왼쪽 정렬'에 해당하는 속성값이다.

너비와 높이 조절하기

width 와 height 속성으로 너비와 높이를 조절할 수 있다.

속성값의 단위로는 절대 단위와 상대 단위 모두를 사용할 수 있다. 

img {
  width: 220px;
	height: 220px;
}

텍스트 강조하기

텍스트를 강조하기 위해 여러 가지 방법을 사용할 수 있다.

볼드체 만들기

  • font-weight: bold; 선언하기
  • 강조하고 싶은 부분을 <strong></strong> 태그로 감싸기

밑줄 긋기

  • text-decoration: underline; 선언하기
  • 밑줄 긋고 싶은 부분을 <u></u> 태그로 감싸기

기울임체 만들기

  • font-style: italic; 선언하기
  • 기울임체로 만들고 싶은 부분을 <em></em> 태그로 감싸기

취소선 긋기

  • text-decoration: line-through; 선언하기
  • 취소선 긋고 싶은 부분을 <s></s> 태그로 감싸기

텍스트 배경색 부여하기

강조하고 싶은 텍스트가 들어 있는 요소에 배경색을 줘서 강조할 수 있다.

배경색의 투명도를 조절하기 위해 rgba(0, 0, 0, 0) 을 사용할 수 있다.

rgba 의 a 는 투명도의 알파값, 즉 투명도를 의미하고, 0에서 1사이의 값으로 표현한다. 1에 가까울수록 불투명하다.

background-color: rgba(45, 45, 45, 0.1) 를 텍스트가 들어 있는 요소에 추가해 주면 회색으로 배경색을 추가할 수 있다.

텍스트 크기 조절하기

텍스트 크기를 조절하려면 font-size 속성값을 변경해 주면 된다. (text-size 아님!!!!)

그림자 만들기

요소에 그림자를 주고 싶을 때 box-shadow 속성을 사용한다. 속성값으로는 다음과 같은 것들이 있다.

  • offset-x 요소와 그림자 간의 수평 거리
  • offset-y 요소와 그림자 간의 수직 거리
  • blur-radius 경계선의 흐린 정도
  • spread-radius 그림자의 퍼짐 정도
  • color

blur-radius 와 spread-radius 는 생략해도 무방하다.

이 속성값들을 한 줄에 적어 주면 요소에 그림자가 생성된다.

  • 두 개의 값 - 수평거리와 수직거리로 분석한다.
  • 세 번째 값 - blur-radius 로 분석한다.
  • 네 번째 값 - spread-radius 로 분석한다.

쉼표를 사용해 속성 set 를 구분하면 여러 개의 그림자를 만들 수 있다. 

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

투명도 조절하기

opacity 속성값을 조정하여 투명도를 조절할 수 있다. opacity 는 0에서 1사이의 값을 가진다. 1에 가까울수록 불투명함을 나타낸다.

텍스트 대소문자 변경하기

text-transform 속성으로 대소문자를 변경할 수 있다. 속성값에 따라 결과는 다음과 같다.

Transform me 에 속성을 적용하는 경우

ValueResult
lowercase"transform me"
uppercase"TRANSFORM ME"
capitalize"Transform Me"
initial기본값을 사용한다.
inherit부모 요소의 속성값을 상속한다.
noneDefault

요소 위치 조정하기

상대 위치 조정하기

다른 요소 위치에 영향을 주지 않으면서, 해당 요소의 위치만을 변경하고 싶을 때 position: relative; 를 사용하면 된다.

top, bottom, right, left 에 적절한 값을 주어 요소를 이동시킬 수 있다.

이때 top: 10px 의 의미는 해당 요소의 현재 위치에서 위로부터 10px 이동한다는 뜻이므로, 현재 위치를 기준으로 하여 아래로 10px 을 이동한다는 점을 기억해야 한다!

절대 위치 조정하기

position: absolute; 를 사용하면 position: relative; 속성을 가진 가장 가까운 상위 태그를 기준으로 위치를 고정시킬 수 있다.

즉, 상위 태그를 기준으로 하여 항상 그 자리에 위치시킬 수 있다.

만약 상위 태그에 position: relative; 속성이 빠져 있다면, 궁극적으로 body 태그를 기준으로 위치를 조정하게 된다.

위치 고정하기

position: fixed 를 사용하면 브라우저를 기준으로 요소의 위치를 고정시킬 수 있다. 스크롤을 해도 항상 그 자리에 있는 요소를 만들고 싶을 때 사용한다.

float 으로 요소 위치 조정하기

position 속성 대신 float 을 사용해 요소를 부모 요소의 왼쪽 또는 오른쪽으로 이동시킬 수 있다. 

float: right;
float: left;

겹치는 요소 순서 지정하기

z-index 속성을 사용하면 겹치는 요소들의 순서를 지정해줄 수 있다.

속성값은 정수로 표현되고 값이 높을수록 뒤로 배치된다.

magin 속성으로 수평 가운데 정렬하기

블록 요소를 수평으로 정렬할 때 margin: auto 를 사용할 수 있다.

이미지의 경우 기본적으로는 인라인 요소이지만, display: block 를 선언하면 블록 요소로 변경할 수 있어 이 방법으로 가운데 정렬을 할 수 있다.

그라데이션 만들기

background 속성에 대한 값으로 linear-gradient() 함수를 사용하면 그라데이션을 만들 수 있다. 

background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);

gradient_direction : 그라데이션 방향을 지정한다. 90deg 는 왼쪽에서부터 오른쪽으로 뻗어 나가는 수평 그라데이션, 45deg 는 우상향하는 사선의 그라데이션을 의미한다. 0부터 360까지의 값을 가진다.

줄무늬 만들기

repeating-linear-gradient() 함수를 이용하면 줄무늬를 만들 수 있다.

함수에는 각도(방향), 색상 정지점을 차례대로 넣어준다. 색상 정지점으로는 전환이 발생하는 위치를 나타내는 너비 값을 지정해 준다.

다음과 같이 코드를 작성하면 0픽셀에서 노란색으로 시작해서 40픽셀 에서 파란색과 섞인다. 또 한 번의 색상 정지점이 40px에서 초록색이므로 파란색과 초록색은 섞이지 않고 바로 초록색으로 전환된다. 다음 정지점은 80px에서 빨간색이므로 40px에서 출발한 초록색이 80px에서 빨간색과 섞인다. 

repeating-linear-gradient(
      90deg,
      yellow 0px,
      blue 40px,
      green 40px,
      red 80px
    );

요소 변경하기 - transform

요소 크기 변경하기

transform 속성의 속성값으로 scale() 함수를 사용하면 요소의 크기를 변경할 수 있다.

다음 코드를 사용하면 p태그 요소의 크기를 2배로 늘릴 수 있다. 

p {
  transform: scale(2);
}

요소 기울이기

X축 방향 기울이기

transform 속성의 속성값으로 skewX(Ndeg) 함수를 사용하면 요소를 N도 만큼 X축 방향(가로방향)으로 기울일 수 있다.

Y축 방향 기울이기

transform 속성의 속성값으로 skewY(Ndeg) 함수를 사용하면 요소를 N도 만큼 Y축 방향(세로방향)으로 기울일 수 있다.

애니메이션

CSS를 사용해 움직이는 요소를 만들 수 있다.

@keyframes

애니메이션 지속 시간 동안 발생하는 작업을 제어한다.

총 지속 시간을 100으로 쪼개 100개의 프레임이 있다고 할 때, 특정 프레임에 어떤 속성을 부여할 것인지 지정할 수 있다.

다음과 같은 코드가 있다면, colorful이라는 애니메이션이 지정된 요소는 지정된 시간에 걸쳐 파란색에서 노란색으로 변화한다. 

@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }

animation 속성

총 8가지의 animation 속성이 있다.

  • animation-name 애니메이션의 이름을 설정한다. 이 이름은 @keyframes에게 어떤 규칙이 어떤 애니메이션에 적용되는지 알려주기 위해 사용된다.
  • animation-duration 애니메이션 지속 시간을 설정한다.
  • animation-fill-mode 애니메이션 완료 시 적용되는 스타일을 지정한다.
    • forwards 종료 상태를 계속 유지
  • animation-iteration-count 애니메이션 반복 횟수를 설정한다.
    • infinite 애니메이션이 무한 반복된다.
  • animation-timing-function 애니메이션 변경 속도를 제어한다.
    • ease 천천히 시작해서 중간에 빨라졌다가 마지막에 다시 느려짐
    • ease-out 처음에는 빠르다가 점점 느려짐
    • ease-in 처음에는 느리다가 점점 빨라짐
    • linear 전체에 일정한 속도를 적용
    • cubic-bezier(x1, y1, x2, y2) : 애니메이션 재생 방식을 더욱 세밀하게 제어한다.

      • x축은 지속시간, y축은 애니메이션 변화를 나타내는 2차원 평면 좌표계 위에 그려지는 베지어 곡선을 따라 속도가 표현된다. cubic-bezie 함수는 이 좌표평면 위의 4개의 주요 점(p0, p1, p2, p3)으로 구성된다.

      • p0, p3은 각각 (0,0) 과 (1,1) 으로 고정되어 있고, cubic-bezier(x1, y1, x2, y2) 함수에 가운데 두 점의 위치 즉 (x1, y1), (x2, y2)를 지정해 주면 된다.

      • 다음과 같은 경우, (0,0), (0.25, 0.25), (0.75, 0.75), (1, 1) 을 지나는 곡선 ⇒ 직선이 생성되어 linear 속성값과 동일한 효과를 낸다.

        animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);

      • 다음과 같이 작성하면 (0,0), (0,0), (0.58, 1), (1, 1) 을 지나는 곡선이 그려지므로 ⇒ 속도가 점점 느려지는 ease-out 효과를 표현할 수 있다.

        animation-timing-function: cubic-bezier(0, 0, 0.58, 1);

      • 다음과 같이 y값을 1보다 큰 값으로 주면 바운싱 동작을 표현할 때 좀 더 자연스러운 움직임을 만들 수 있다.

        cubic-bezier(0.3, 0.4, 0.5, 1.6);

마우스오버 시 커지는 애니메이션 만들기

  1. img 의 초기 너비를 30px로 설정한다.
  2. img:hover 를 선택하고, animation-name과 지속시간을 설정한다.
  3. @keyframes 를 사용해 100% {width: 40px} 로 애니메이션 종료 시 적용할 속성을 지정해준다.
  4. 애니메이션의 종료 상태를 유지할 수 있도록 animation-fill-mode 를 forwards 로 설정해준다. 
<style>
  img {
    width: 30px;
  }
  img:hover {
    animation-name: width;
    animation-duration: 500ms;
		animation-fill-mode: forwards;
  }

  @keyframes width {
    100% {
      width: 40px;
    }
  }
</style>

<img src="https://cdn.freecodecamp.org/curriculum/applied-visual-design/google-logo.png" alt="Google's Logo" />

페이드아웃되는 애니메이션 만들기

  1. 요소의 초기 색상을 지정해준다.
  2. 애니메이션 이름과 지속시간을 설정한다.
  3. 50% 대에서 opacity 값을 0.1 로 지정한다. 
@keyframes fade {
    50% {
      left: 60%;
      opacity: 0.1;
    }
profile
devheyrin
개발자 헤이린
이전 포스트

CSS를 정복하자 - 기본편

다음 포스트

반응형 웹 디자인, CSS flexbox

0개의 댓글