TIL 2021.09.16 - 1주차 ✏️

이민영·2021년 9월 17일

엘리스 AI트랙 Today I Learned ✏️

목록 보기

3/10

📍이번주 학습 목표

웹 프로그래밍 기초 배우기

HTML/CSS 로 웹사이트 제작하기

리눅스에 대해 공부하기

Git 에 대해 공부하기

오늘 배운 내용 💪

html, css 학습하여 웹사이트 제작하기

<오늘 복습 할 목록>

그리드
transform, transition, animation 속성
미디어 쿼리

1. 그리드

레이아웃 표현을 하기 위해 여러가지 방법이 있지만 최신 기능 그리드!
들어본적도 있고 한두번 공부는 해보았지만 쓸일이 없겠지 싶어 대강 이해하고 넘어갔는데,
그리드를 지원하는게 96% 브라우저라고 하니 충분히 실무에서도 써도 될거 같고
이참에 제대로 공부하고 이해하고 넘어가자!

그리드 문법

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
 /* grid-template-columns: repeat(3, 1fr); */
    grid-template-rows: 100px 500px;
}

2. transform, transition, animation 속성

지금까지 html, css 작업 할때는 동적인 요소를 넣지 않았어서 잘 사용 해본적 없는 속성이여서 신경써서 잘 이해하고 넘어가야겠다 생각했다. 만약 처음 접하시는 분이라면 transform, translate, transition, animation 이름 도 비슷하고 어디에 속성을 넣어야 하는지도 꽤나 헷갈렸기 때문에 다시 한번 정리 하고 가면 좋을거 같다!

먼저! 이름이 비슷하니까 용어 정리부터 확실하게!

transform - 요소의 모양, 위치, 크기를 바꿀수 있는 속성
transition - 정해진 시간동안 요소의 속성값을 부드럽게 변화 시키는 속성
animation - 요소의 현재 스타일을 다른 스타일로 천천히 변화시키는 속성

transform
= transform 은 모양의 변형을 할 수 있는 속성이다. 그 종류로는 아래와 같다.

translate(x, y)
rotate(deg)
scale(x배율, y배율)
skew(x-deg, y-deg)
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

해당 html요소에 transform속성을 지정하는걸로 변화 된 모양의 요소를 볼 수 있다.

transition
= 정해진 시간동안 요소의 속성값을 부드럽게 변화 시키는 속성이다.
animation과 달리 트리거가 되는 장치를 설정 후 액션이 일어난다. 1회성의 움직임으로 이해했다. 예를 들면, 마우스를 클릭하면 크기가 커진다거나 마우스 호버를 하면 색깔이 바뀌거나 하는 1회성 움직임을 컨트롤 할때는 transition 속성을 만들어준다.

/* transition 속성 작성 문법 */
.transition {
    transition-property: all;
    transition-duration: 1000ms;
    transition-timing-function: linear;
    transition-delay: 3000ms;
}

/* 마우스를 호버하면 색깔이 바뀌는 움직임을 설정하는 예제로 알아보자 */
.box1 {
    color: blue;
    transition: color 0.3s linear; 
}
.box1:hover{
    color: red;
}
// 0.3초 동안 색깔이 blue 에서 red로 일정한 속도로 부드럽게 변화

animation
= 요소의 현재 스타일을 다른 스타일로 천천히 변화시키는 속성이다.
내가 특별히 트리거가 되는 액션을 취하지 않아도 설정해놓으면 자동으로 움직인다.

/* animation 속성 작성 문법 */
.animation{
    animation-name: makeAnimationName;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes makeAnimationName{
    from{ width: 300px }
    to{ width: 600px }
}

/* 크기가 변하는 움직임을 설정하는 예제로 알아보자 */
.animation {
        width: 300px;
        height: 300px;
        background-color:orange;
        animation: changeWidth 3s linear 1s 6 alternate;
    }
    @keyframes changeWidth{
        from{ width: 300px; }
        to{ width: 600px; }
    }

3.미디어 쿼리

미디어 쿼리도 몇번 다뤄본적 있어서 생소하지 않았지만 요새는 사용을 안했어서 다시 체크체크 하고 넘어가기!

미디어 쿼리 사용시 주의사항
모바일 디바이스에서도 의도한 화면을 보게 하도록 아래 코드 꼭 넣어주기!

<head>
    <meta name="viewport" content=“width=device-width, initial-scale=1.0”>
</head>

미디어 쿼리 문법

@media (min-width: 320px) and (max-width: 640px){
    .media{
    	//원하는 내용 입력
    }
}

이민영

프론트엔드 개발자를 꿈꾸고 있습니다 !

이전 포스트

TIL 2021.09.15 - 1주차 ✏️

다음 포스트