[HTML/CSS] 4일차

김민정·2024년 1월 10일

CSS html 개발 기술블로그 백엔드 부트캠프 오즈스쿨 웹개발 초격차캠프 코딩 코린이 프론트엔드

HTML/CSS

목록 보기

7/9

< CSS 더 화려하고 효율적으로 만들기 💫>

1. 변형과 전환

1. 변형과 `transform` 속성

웹 요소에는 변형을 적용할 수 있다.
변형이란, 요소의 크기나 위치를 바꾸는 것을 뜻하는데, 이때 크기나 위치는 요소의 x축과 y축을 기준으로 바꾼다.
변형을 적용하기 위해서는 CSS의 transform 속성을 사용하는데, 여기에는 CSS가 지원하는 다양한 변형 관련 함수들을 속성값으로 지정한다.

translate(x,y)
: 지정한 크기만큼 x축, y축 방향으로 이동한다. (단위: px)
scale(x,y)
: 지정한 크기만큼 x축, y축으로 확대 및 축소한다. (단위: 실수)
skew(x,y)
: 지정한 각도만큼 x축, y축으로 비틀어 왜곡한다. (단위: deg)
rotate(deg)
: 지정한 각도만큼 회전한다. (단위: deg)

2. 전환과 `transition` 속성

transform 속성을 이용한 변형은 좌표 평면 상에서 각 축의 값을 변경해 이루어지는 비교적 단순한 형태의 변형이다.
transition 속성을 이용하면 요소에 지정되어 있는 스타일 속성을 완전히 다른 스타일로 변화시킬 수 있다.

또한, transition 은 스타일이 변화할 때의 시간이나 변화 속도 등을 추가로 지정할 수 있어 다양한 애니메이션 효과를 만들 수도 있다.

transition 속성은 단축 속성으로, 변화를 주고자 하는 속성이나 실행 시간, 실행 방법, 그리고 지연 시간 등에 대한 정보를 포함할 수 있다.

( 약간 ppt 애니메이션 효과 같은 느낌들,,,? )

> `transition` 하위 속성들

'transition-property'
: 변화 대상 속성을 지정한다.
'transition-duration'
: 변화가 실행될 시간을 지정한다. (단위: ms, s, m)
'transition-delay'
: 변화 시작 전 지연 시간을 지정한다. (단위: ms, s, m)
'transition-timing-function'
: 변화 실행시 실행 곡선 방식을 지정한다.

하위 속성들을 적지 않고 한번에 지정할 수도 있다.

에시)
	transition: background-color 2s 0s linear;
    → 배경색을 2초동안 delay 없이 같은 속도로 변경.

3. `transition-timing-function` 속성

transition 에 의한 변화가 실행될 때는 실행 시간(duration)을 지정해 원하는 시간 동안 변화가 일어나게 할 수 있다. 그리고 여기에 transition-timing-function 속성을 추가 정의하면 실행 시간 동안의 속도 변화 방식을 지정할 수 있다. 속성값으로는 주로 별도의 키워드를 지정한다.
(아래는 대표적인 키워드 4가지에 대해서만 소개한다.)

ease (기본값)
: 점점 속도가 빨라지다가 끝날 때 다시 느려지는 방식이다.
linear
: 처음부터 끝까지 같은 속도로 진행한다.
ease-in
: 느리게 시작했다가 점점 빨라진다.
ease-out
: 빠르게 시작했다가 점점 느려진다.

[실습]

2. 애니메이션 효과

1. 애니메이션이란

애니메이션의 사전적 정의는 '움직이지 않는 물체를 움직이는 것처럼 보이게 만드는 촬영기법 또는 그렇게 만들어진 영화'이다.
CSS는 웹페이지 상에 표시되는 콘텐츠가 TV 애니메이션과 같은 동적 움직임을 구현할 수 있도록 @keyframes 모듈과 animation 속성을 지원한다.

2. @keyframes 모듈

애니메이션을 표현하는 여러 개의 프레임은 @keyframes 모듈을 이용해 정의한다.
백분율을 이용해 프레임을 나누거나, 별도의 키워드(from, to)로 간단하게 나눌 수도 있다.

1. @keyframes 애니메이션_이름{
	from{ width: 100px; }
    to{ width: 200px; }
  }

2. @keyframes 애니메이션_이름{
	0%{ width: 100px; }
	33%{ width: 133px; }
    66%{ width: 166px; }
    100%{ width: 200px; }
  }

3. animation 속성

animation은 단축 속성이며, animation의 다른 하위 속성들을 함께 지정하면 애니메이션의 실행 시간이나 방식 등을 추가로 정의할 수 있다.

animation-name
: 적용할 키프레임 이름
animation-duration
: 애니메이션 지속 시간
animation-delay
: 애니메이션 시작 전 시간
animation-timing-function
: 속도 그래프
animation-direction
: 동작 진행 방향 (normal, reverse, alternate)
animation-iteration-count
: 반복 횟수 (무한대는 'infinite')
animation-fill-mode
: 전후 상태 설정
animation-play-state
: 애니메이션 적용 여부 (running_기본값, paused)

하위 속성들을 한번에 쓰려면
{ animation: 애니메이션이름 duration delay 기타 하위 속성들 }
로 적어주면된다.

[실습]

3. 상속과 공용키워드

1. 상속 (Inheritance)

상속이란, 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것을 의미한다.

예시)
ul{ color: tomato; }
→ 하위 li들의 색상들이 tomato로 변경!!

상위 요소로부터 상속이 이루어지는 속성이 있는 것도 있고 아닌것도 있다.

상속 되는 속성
: color, font-family, font-size, font-weight, text-align, cursor 등
(대게 글자와 관련된 속성들)
상속 안 되는 속성
: background-color, background-image, background-repeat, border, display 등
(대게 박스 모델들과 관련된 속성들)

※ 속성별 상속 여부 확인 가능한 페이지

: https://www.w3.org/TR/CSS21/propidx.html
에서 'Inherited?' 항목

2. 공용 키워드

스타일 속성마다 상속 가능 여부가 기본적으로 설정되어 있지만, CSS에서는 스타일 속성의 상속 여부를 제어할 수 있는 3개의 키워드를 별도로 지원한다. 이들은 모든 속성에 적용할 수 있는 키워드이므로 '공용 키워드' 또는 '전역 키워드'라 부르기도 한다.

interit
: 상위 요소로부터 해당 속성의 값을 받아 사용한다.
initial
: (브라우저에 지정되어 있는) 해당 속성의 기본값을 요소에 적용한다.
unset
: 상속 속성에 대해서는 inherit처럼, 상속되지 않는 속성에 대해서는 initial처럼 적용된다.

[실습]

4. 반응형 웹과 뷰포트 단위

1. 반응형 웹

반응형 웹이란, 다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 또는 이를 위해 사용하는 기법을 뜻한다.

2. 뷰포트 (viewport)

반응형 웹을 이해하려면 뷰포트에 대해 이해해야한다.
뷰포트란, 현재 화면에 보여지고 있는 영역을 의미한다.
기기 별로 뷰포트가 다르기 때문에, 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타난다.
ex) PC에서 보이는 글자 크기가 모바일에서는 배율 조정으로 글자 크기가 작아지는 것.

3. 뷰포트 설정하기

뷰포트는 <meta> 태그로 설정할 수 있다.

<meta 
	name="viewport" 
    content="width=device-width, initial-scale=1.0"
>

→ 폭을 기기 너비에 맞추고 그 것에 맞춰서 배율을 1로 정한다.

4. 화면 크기 단위

아래 단위들은 뷰포트 크기를 기반으로 값을 계산하여 크기를 결정한다.

vw
: 뷰포트 너비의 100분의 1
vh
: 뷰포트 높이의 100분의 1
vmin
: 뷰포트 너비와 높이 중 작은 쪽의 100분의 1
vmax
: 뷰포트 너비와 높이 중 큰 쪽의 100분의 1

→ 작업이 까다로워질 위험이 있을 수 있기 때문에 꼭 필요할 때만 사용할 것 ‼️

[실습]

5. 미디어 쿼리

1. 미디어 쿼리 (Media Query)

미디어 쿼리란, 미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 모듈(기능)이다.
모든 미리어 쿼리는 다음 두 가지 구성 요소를 지니고 있다.

미디어 타입
조건에 대한 물음 (쿼리)

@media 미디어_타입 and (조건에_대한_물음) {
	/* 미디어 타입과 조건을 모두 만족할때
    덮어씌울 스타일 선언문 */
}
ex) 
@media screen and (max-width: 768px) {
	/* 화면(screen)의 너비가 768px 이하일 경우에
    여기에 정의된 스타일 선언문을 추가 적용할 것이다!
}

2. 미디어 타입과 쿼리의 종류

미디어 쿼리에 입력할 수 있는 미디어 타입과 쿼리의 종류는 무척 다양하다. 그러나 주로 사용되는 것들은 거의 정해져 있다시피 하므로 공부에는 큰 어려움이 있지 않을 것이다.

min-width / min-height
: 디스플레이 영역의 최소 너비 / 높이
max-width / max-height
: 디스플레이 영역의 최대 너비 / 높이
aspect-ratio
: 디스플레이 영역의 너비와 높이의 비율
orientation
: portrait 또는 landscape 감지
color
: 기기의 색상당 비트 수
color-index
: 출력 기기의 색상 테이블 수

[실습]

6. 모듈화 디자인

1. 컴포넌트 (Component) 만들기

반응형 웹 개발의 대세는 '페이지 만들기'에서 '컴포넌트 만들기'로 이동했다고 해도 과언이 아니다.
웹 개발(또는 프로그래밍)에 있어 컴포넌트란, 독립적이고 재사용이 가능한 모듈을 뜻한다.
컴포넌트 기반으로 웹을 제작하면 마치 블록 장난감을 조립하듯 각각의 컴포넌트 간 조합을 이용해 화면을 구성할 수 있어 효율이 좋아진다.

※ 컴포넌트 만들기 = 모듈화 디자인

2. 모듈화 디자인의 이점

반응형 컴포넌트를 만들고, 그것들을 조립해 하나의 페이지를 만들면 페이지는 자연스럽게 반응형 페이지가 된다.
스타일 재사용이 용이하다. 필요한 경우 추가 스타일을 적용하면 된다.
페이지의 일관성을 유지하기가 용이하다.

7. Mini Project. 채팅방에 말풍선 추가하기.

3일차에서 진행한 Mini Project에서 말풍선을 추가해 보았다. (CSS Code는 말풍선만 따로 추가하였다.)

[HTML CODE]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나만의 채팅방 🗯️</title>
    <link href="day4_challenge3_chat.css" rel="stylesheet">
    <link href="day4_challenge3_text.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <main class="chat-screen"> <!-- 친구 상태바 & 채팅 내용 부분 -->
            <section class="chat-screen__bar">
                <div class="user"> <!-- 친구 상태바 -->
                    <div class="user__column"> <!-- 친구 프로필 -->
                        <div class="user__pic">
                            <img src="https://img1.daumcdn.net/thumb/R658x0.q70/?fname=https://t1.daumcdn.net/news/202105/22/koreadognews/20210522152933617uzcd.png" 
                            class="user__pict">                            
                        </div>
                    </div>
                    <div class="user__column"> <!-- 친구 이름 및 채팅방 인원수 -->
                        <p class="user__nick">고영희🐈</p>
                        <p class="user__count"> &nbsp; 2</p>
                    </div>
                </div>
            </section>
            <section class="chat-screen__chat">
                <p class="chat-screen__date">2024년 01월 10일</p>
                <ul class="chat-screen__texts"> <!--말풍선 항목 (상대방) -->
                    <li class="text__y">집사님~!</li>
                    <li class="text__y">저 밥 먹을 시간이에야옹~!</li>
                    <li class="text__y">사료 달라옹! 🐱 </li>
                </ul>
                <ul class="chat-screen__texts"> <!--말풍선 항목 (나)) -->
                    <li class="text__m">앗!!</li>
                    <li class="text__m">지금 거의 다왔어! 금방 줄게~! 💁🏻‍♀️</li>
                </ul>
            </section>
        </main>

        <form class="chat-form"> <!-- 채팅 입력창 부분 -->
            <section class="chat-form__field">
                <textarea class="chat-form__msg"></textarea>
                <input type="submit" value="전송" class="chat-form__button">
            </section>
        </form>
    </div>
</body>
</html>

[추가된 CSS CODE]

.chat-screen__chat{ /* 채팅 부분만 스크롤 하기 위해 section 새로 만듦. */
    display: inline-block;
    width: 100%;
    height: calc(100% - 250px);
    position: absolute;
    top: 130px;
    overflow: scroll;
}
.chat-screen__chat::-webkit-scrollbar{ /* 스크롤바가 보이지 않지만 기능은 함. */
    display: none;
}
.chat-screen__date{
    position: relative;
    left: calc(100% / 2 - 100px);
    text-align: center;
    font-weight: 500;
    color: azure;
    width: 200px;
    border: 1px solid rgba(0, 0, 0, 0.685);
    background-color: rgba(54, 54, 54, 0.596);
    border-radius: 10px;
}
.chat-screen__texts{
    padding: 0;
    list-style-type: none; /* list 기호 삭제 */
}
.chat-screen__texts > .text__y, .text__m{
    background-color: rgb(239, 255, 238);
    width: 280px;
    height: 50px;
    margin: 0 0 20px 20px;
    padding: 10px;
    border-radius: 10px;
    line-height: 30px;
}
.text__y{
    position: relative;
}
.text__m{
    position: absolute;
    right: 20px;
}
.text__m:nth-child(2){
    position: absolute;
    top: 335px;
}
.chat-screen__texts > .text__y::after{
    content: "";
    border-left: 16px solid transparent; /* transparent : 투명하게 */
    border-bottom: 16px solid rgb(239, 255, 238);
    position: absolute;
    top: 30px;
    left: -10px;
}
.chat-screen__texts > .text__m::after{
    content: "";
    border-top: 16px solid transparent; /* transparent : 투명하게 */
    border-left: 16px solid rgb(239, 255, 238);
    position: absolute;
    top: 30px;
    right: -10px;
}
.chat-screen__texts > .text__y:hover, .text__m:hover{
    background-color: rgb(161, 196, 159);
    transition: background-color 1500ms 200ms ease-in;
}
.chat-screen__texts > .text__y:hover::after{
    border-bottom: 16px solid rgb(161, 196, 159);
    transition: border-bottom 1500ms 200ms ease-in;
}
.chat-screen__texts > .text__m:hover::after{
    border-left: 16px solid rgb(161, 196, 159);
    transition: border-left 1500ms 200ms ease-in;
}

[CSS 3일차 후기]

CSS 교육 2일차에서는 위치 조정정도 배웠는데
이번 3일차에서는 애니메이션을 추가하는 것을 배워서
확실히 더 심화 과정을 배운듯 했고
이것저것 추가할 수 있는 기능이 많아지다보니 과제 하나 하는데 1시간이 넘게 걸린다...

내일까지만 하면 HTML, CSS 교육이 종료되는데 끝나고 과제로 했던 Mini Project들도 공유할 예정이다.

(Python도 얼른 정리해야되는데,,,)

[참고 자료]

[입문자를 위한 CSS3 (저자)강윤호] https://wikidocs.net/book/9136
[google browse fonts]
https://fonts.google.com/?subset=korean¬o.script=Kore
[16진수 색상표]
http://www.hipenpal.com/tool/html-color-charts-rgb-color-table-in-korean.php
[오즈스쿨 스타트업 웹 개발 초격차캠프 백엔드 HTML&CSS 강의]
[tistory]
https://gurtn.tistory.com/191

김민정

백엔드 코린이😁

이전 포스트

[HTML/CSS] 과제 3일차 (UX와 UI 차이)

다음 포스트

[HTML/CSS] 4일차

HTML/CSS

< CSS 더 화려하고 효율적으로 만들기 💫>

1. 변형과 전환

1. 변형과 transform 속성

2. 전환과 transition 속성

( 약간 ppt 애니메이션 효과 같은 느낌들,,,? )

> transition 하위 속성들

3. transition-timing-function 속성

[실습]

2. 애니메이션 효과

1. 애니메이션이란

2. @keyframes 모듈

3. animation 속성

[실습]

3. 상속과 공용키워드

1. 상속 (Inheritance)

※ 속성별 상속 여부 확인 가능한 페이지

2. 공용 키워드

[실습]

4. 반응형 웹과 뷰포트 단위

1. 반응형 웹

2. 뷰포트 (viewport)

3. 뷰포트 설정하기

4. 화면 크기 단위

[실습]

5. 미디어 쿼리

1. 미디어 쿼리 (Media Query)

2. 미디어 타입과 쿼리의 종류

[실습]

6. 모듈화 디자인

1. 컴포넌트 (Component) 만들기

2. 모듈화 디자인의 이점

7. Mini Project. 채팅방에 말풍선 추가하기.

[HTML CODE]

[추가된 CSS CODE]

[CSS 3일차 후기]

[참고 자료]

[HTML/CSS] 과제 3일차 (UX와 UI 차이)

[HTML/CSS] 과제 4일차 (Reset.css vs Normalize.css)

0개의 댓글

1. 변형과 `transform` 속성

2. 전환과 `transition` 속성

> `transition` 하위 속성들

3. `transition-timing-function` 속성