코딩야학 5일차

ock·2023년 11월 20일

오즈코딩스쿨

오즈코딩스쿨_코딩야학(HTML, CSS)

목록 보기

5/7

오늘의 공부목차
1. 변형과 전환효과
2. 애니메이션 효과
3. 상속과 공용키워드
4. 반응형 웹과 뷰포트단위
5. 미디어쿼리
6. 모듈화 디자인
7. 과제 - 말풍선 추가하기

1. 변형과 전환효과

웹 요소에서는 변형을 적용할 수 있다.
변형이란, 요소의 크기나 위치를 바꾸는 것을 뜻하는데 이 때, 크기나 위치는 요소의 x축과 y축을 기준으로 바꾼다.
=>transform 속성을 사용
- translate(x,y) : 지정한 크기만큼 x축, y축 방향으로 이동한다.
- scale(x,y) : 지정한 크기만큼 x축, y축으로 확대 및 축소한다.
- skew(x,y) : 지정한 각도만큼 x축, y축으로 비틀어 왜곡한다.
- totate(deg) : 지정한 각도만큼 회전한다.

<transition 하위 속성들>

property : 변화 대상 속성을 지정한다.
duration : 변화가 실행될 시간을 지정한다.
delay : 변화 시작 전 지연 시간을 지정한다.
timing-function : 변화 실행시 실행 곡선 방식을 지정한다.

transition-timing-function 별도 키워드

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

2. 애니메이션 효과

애니메이션을 표현하는 여러 개의 프레임은 @keyframes 모듈을 이용해 정의한다.
백분율을 이용해 프레임을 나누거나, 별도의 키워드로 간단하게 나눌 수도 있다.
animation은 단축속성이며, animation 의 다른 하위 속성들을 함께 지정하면 애니메이션의 실행 시간이나 방식 등을 추가로 정의할 수 있다.
- name : 적용할 키프레임 이름
- duration : 애니메이션 지속시간
- delay : 애니메이션 시작 전 시간
- timing-function : 속도 그래프
- direction : 동작 진행 방향
- iteration-count : 반복 횟수
- fill-mode : 전후 상태 설정
- play-state : 애니메이션 적용 여부

3. 상속과 공용키워드

상속이란, 하위요소가 상위 요소의 스타일 속성값을 물려받는 것을 의미한다.
상위요소로부터 상속이 이루어지는 속성이 있는 반면, 그렇지 않은 속성도 있다.
https://www.w3.org/TR/CSS21/propidx.html (inherited? 항목이 상속여부)

CSS에서는 스타일 속성의 상속 여부를 제어할 수 있는 3개의 키워드를 별도로 지원한다.
=>공용키워드(전역키워드)
- inherit : 상위 요소로부터 해당 속성의 값을 받아 사용한다.
- initial : (브라우저에 지정되어 있는) 해당 속성의 기본값을 요소에 적용한다.
- unset : 상속 속성에 대해서는 inherit처럼, 상속되지 않는 속성에 대해서는 inital처럼 적용된다.

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

반응형 웹이란,
다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 또는 이를 위해 사용하는 기법을 뜻한다.
뷰포트란,
현재 화면에 보여지고 있는 영역을 의미한다.
기기별로 뷰포트가 다르기 때문에, 동일한 웹페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타난다.
- vw : 뷰포트 너비의 100분의 1
- vh : 뷰포트 높이의 100분의 1
- vmin : 뷰포트 너비와 높이 중 작은 쪽의 100분의 1
- vmax : 뷰포트 너비와 높이 중 큰 쪽의 100분의 1

5. 미디어쿼리

미디어쿼리는 미디어 타입을 인식하고, 컨텐츠를 읽어들이는 기기나 라우저의 물리적 속성을 감지할 수 있는 유용한 모듈이다.
- 미디어타입
- 조건에 대한 물음(쿼리)
min-width : 디스플레이 영역의 최소 너비
max-width : 디스플에이 영역의 최대 너비
min-height : 디스플레이 영역의 최소 높이
max-height : 디스플레이 영역의 최대 높이
orientation : portrait 또는 landscape 감지
color : 기기의 색상당 비트 수
color-index : 출력 기기의 색상 테이블 수
aspect-ratio : 디스플레이 영역의 너비와 높이의 비율

6. 모듈화 디자인

컴포넌트란, 독립적이고 재사용이 가능한 모듈을 뜻한다.
모듈화 디자인의 이점
- 반응형 컴포넌트를 만들고, 그것들을 조립해 하나의 페이지를 만들면 페이지는 자연스럽게 반응형 페이지가 된다.
- 스타일 재사용이 용이하다.
- 페이지의 일관성을 유지하기가 용이하다.

7. 과제 - 말풍선 추가하기


<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="chat.css" rel="stylesheet" />
    <link href="text.css" rel="stylesheet" />
    <title>채팅방 만들기</title>
  </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"></div>
            </div>
            <div class="user__column">
              <div class="user__nick">친구</div>
              <div class="user__count">2</div>
            </div>
          </div>
        </section>
        <ul class="chat-screen__texts">
          <li class="text">야</li>
          <li class="text">뭐하냐</li>
          <li class="text">나 심심해</li>
          <li class="text">놀아줘</li>
          <li class="text">바빠?</li>
          <li class="text">자냐?</li>
          <li class="text">아 답장 좀</li>
          <li class="text">아 뭐하냐구</li>
          <li class="text">후엥</li>
          <li class="text">으아아아아아ㅏ아ㅏ 심심해</li>
          <li class="text">연락주삼</li>
          <li class="text">나 연락 기다린다</li>
          <li class="text">심심해 죽어가는 너의 친구가</li>
        </ul>
      </main>
      <form class="chat-form">
        <section class="chat-form__filed">
          <textarea class="chat-form__msg"></textarea>
          <input type="submit" value="전송" class="chat-form__btn" />
        </section>
      </form>
    </div>
  </body>
</html>

/*chat.css*/

* {
  box-sizing: border-box;
}

/* 'height:100%' 화면을 꽉 채워서 쓰겠다는 의미 */
html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
}
/* body에는 기본적인 마진이 존재한다. 0px로 작성해 마진을 없애준다. */

.container {
  height: 100%;
  background-color: rgb(147, 190, 138);
}

/* 스크린 크기 조정 */
.chat-screen {
  height: calc(100% - 120px);
  overflow: scroll;
}

/* 유저 정보 표시되는 부분 */
.user {
  background-color: antiquewhite;
  padding: 16px;
  height: 80px;
}

.user__column {
  float: left;
}

.user__pic {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border-radius: 10px;
  background-color: rgb(147, 190, 138);
}

.user__nick,
.user__count {
  margin: 5px;
}

.user__count {
  font-size: 12px;
  color: gray;
}

/* 채팅 입력창 */

.chat-form {
  height: 120px;
  background-color: antiquewhite;
}

.chat-form__filed {
  height: 120px;
}

.chat-form__msg {
  width: calc(100% - 120px);
  height: 120px;
  border: none;
  font-size: 24px;
  padding: 10px;
  resize: none;

  float: left;
}

.chat-form__btn {
  width: 120px;
  height: 120px;
  border-radius: 10px;
  background-color: rgb(147, 190, 138);
  font-size: 18px;
}
.chat-form__btn:hover {
  background-color: rgb(105, 145, 165);
}
.chat-form__btn:active {
  background-color: rgb(71, 94, 67);
}
.chat-form__msg:focus {
  outline: none;
}

/*text.css*/


.chat-screen__texts {
  padding: 0;
  list-style-type: none;
}

.chat-screen__texts > .text {
  background-color: antiquewhite;
  width: 280px;
  height: 50px;
  margin: 0 0 10px 0;
  padding: 10px;
  border-radius: 8px;
  line-height: 30px;
  position: relative;
  left: 20px;
}

.chat-screen__texts > .text::after {
  content: "";
  border-bottom: 16px solid transparent;
  border-right: 16px solid antiquewhite;
  position: absolute;
  top: 10px;
  left: -10px;
}

.chat-screen__texts > .text:hover {
  background-color: rgb(198, 208, 145);
  transition: background-color 1500ms 200ms ease-in;
}

.chat-screen__texts > .text:hover::after {
  border-right: 16px solid rgb(198, 208, 145);
  transition: border-right 1500ms 200ms ease-in;
}

ock

어제의 ock보다 성장한 오늘의 ock_FE 개발자

이전 포스트

코딩야학 4일차

다음 포스트

코딩야학 5일차

오즈코딩스쿨_코딩야학(HTML, CSS)

1. 변형과 전환효과

2. 애니메이션 효과

3. 상속과 공용키워드

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

5. 미디어쿼리

6. 모듈화 디자인

7. 과제 - 말풍선 추가하기

코딩야학 4일차

코딩야학 6일차

0개의 댓글