자습

오늘은 자습을 통해 CSS기능들을 배워보는 날이다.
이번에 해볼것들 목차는 이렇게 있다.

1. Transform
2. Transition
3. Animation
4. Media Query
5. nth-child
6. em,rem,vw,vh

Transform

어려운 기능이 있었던것은 아니라 간단하게 넘어갔다.

주요하게 봐야하는 기능들은 요정도

rotate:각도,scale:크기배율,skew:각도비틀기,translate:좌표변경

prefix를 새로배웠는데, transform앞에 접두사로
-webkit- : 크롬,사파리, -mox- : 파이어폭스, -ms- : 익스플로러9.0,-o- : 오페라등
최적화와 관련된 기능이라고 이해했다. 접근성을 높이는 기술?이면 충분하다.

Transition

변화에대한 기능이다. 스르륵~ 사라지고 부드럽게 나타나는 모든 모션들을 Transition에서 핸들링할 수 있다. 막 어려웠던건 없었던거 같다.
간단히 알아야하는 것은 transition속성중 숫자가 앞에 나오는것은 반드시 duration 이라는 점만 알 고 있으면 크게 어려운점은 없었다.(duration은 효과지속시간이다. delay와 헷갈리지 말 것)

Animation

애니메이션은 복잡한 모션도 모두 작동하게 만들어주는 기능이다. 이것도 어려운건 없고 @keyframes만 이해하고 있으면 쉽다.
@keyframes은 @keyframes 이름중 이름에 해당하는 효과를 적용시키며 from~to 즉 시작 ~ 끝으로 움직일때 어떻게 할지 정하면 끝난다.

⛔️주의사항 Transition과 마찬가지로 숫자가 먼저 나오는 건 항상 duration이다.

Media Query

미디어 쿼리를 사용하는 이유?

3일차에서 viewport를 설명했듯이 모바일,태블릿에서도 잘 반응하는 웹을 만드려고 나온 기술이다.

일반적인 사용방법

@media (min-width: 320px) and (max-width: 800px) {
max와 min에 해당하는 사이즈가 되었을때 변하는 css 내용을 넣으면 됨.}

⛔️주의사항은 html에 meta태그 viewport를 넣어야 정상 작동한다.

상속?

미디어 쿼리에대해 엘리스 디스코드 채널에 질문글이 올라왔는데,
엘리스 실습코드는 저작권이 엘리스에 있으므로 변형하였습니다.

<footer id="하단">
      <div class="저작권">
        <strong>저작권</strong>
    </div>
    <div class="주소">
      <strong>주소</strong>
    </div>
</footer>

이 코드에서 질문자는 div태그안에 있는 저작권과 주소의 width 넓이를 미디어쿼리로 변경하려고 했는데, #하단 div로 선택자를 주고 넓이를 변경하려고 해도 변경이 되지않고 id선택자로 해야만 먹혀서 질문을 했던것이다.
나도 처음에 질문자의 오타정도니 생각했는데, 그게 아니라 미디어쿼리 상속문제 때문에 우선순위가 달라져서 안먹히는 것이었다.(저에게 깨달음을 줬던 엘리스 레이서분 감사합니다.)
즉 실제 현업에서도 이러한 상속문제가 일어날수 있다고 생각이 들었다.
이거의 해결방법은 미디어 쿼리 밖에서 #하단 div태그를 만들어야 해결되었다.(클래스에 들어가있는 넓이 속성은 없애야한다.)

문제해결 깨달음🤔

실제 작업을 할때는 일반 Tag의 사용을 최대한 피해야된다고 생각한다. 그래서 css를 적용할때는 최대한 구체적으로 넣어야 상속으로 인한 문제점을 피할 수 있다고 생각이 들었다.

nth-child

@ 업뎃예정

em,rem,vw,vh

@ 업뎃예정