20.08.11 CSS 포지션, active

deokyeong1020·2020년 8월 11일
0

어제 이야기했던데로 오늘은 CSS레이아웃 다듬기랑
위코드에서 주문한 미션을 처리하는데 주력하였다.

위코드 미션

  1. navigation bar 상단에 고정
  2. navigation bar 클릭시 색이 변화하는 효과주기
  3. 본인을 나타내는 소개글
  4. 상단에 navigation bar 고정

우선 3번과 4번은 모두 처리하였기때문에 따로 언급을 하지않고.

  1. navigation bar 상단에 고정
    -. 우선 navigation bar를 상단에 고정해야한다고하여 CSS의 position 속성을 사용해야겠다고 생각했다.
    -. 나는 여기서 sticky? fixed? 무엇을 써야할지 고민을 하다가 fixed를 사용하기로 마음먹었다. 우선 각각의 사용법과 fixed로 결정하게된 판단 근거를 말해보겠다.
    top,left,right,bottom(tlrb라고부르겠다.)을 안 지정해줄때
    sticky:효과없음... 무효과
    fixed: 없어도 상관없다. 못으로 찍어버린마냥 그 자리에 찍혀버린다.
    위 사진은 예시를 들기위한 코드고 이를 구현하니

    원래 tlrb를 정했다면 스크롤을 내렸을때 sticky는 제한된 스크롤 영역이 끝나는 지점에서 따라와야하는데 그냥 스쳐지나가버린다.
    fixed는 tlrb가 없어도 상관없으나 정확한 장소를 지정해주지 않으면 처음 있던 자리에서 콕 박힌다. 만약 tlrb를 써준다면 그 시작 기준점은 html 왼쪽 상단 꼭지점이 위치의 기준이 된다.

  2. 클릭시 색 변화 옵션
    별다른 어려움이 없었다. hover가 마우스를 올려놓으면 바뀌는 거니 클릭해서 바뀔 수 있는 선택자를 찾으면 되었다. 그건 바로 active이다. 그런데 한가지 치명적인게 클릭을 떼는순간 효과가 사라진다. 아마 클릭 이후 동작을 다루는 것은 자바스크립트라 지금은 이게 최선인 듯 보인다. 아무튼 색과 transition으로 변화 속성을 좀 줘보았다.

    :hover, :active 선택자를 주던 도중 배운 것
    아래사진을 구현하기위해 2번째 밑에있는 것을 가공할 필요가있는 와중에 찾은것이다.. 사실 찾았다기보다 내가 몰랐겠지...

버튼위에 마우스가 올라가면 화살표 배경색이 모두 변해야하는데 화살표쪽 따로 배경쪽 따로 바뀌는 것이다... 그 이유를 보니 화살표와 버튼이 다른 박스인 것 이 문제였다. 해결 방법은 간단했다.
button:hover [버튼에 마우스 올라갈 때]
button:hover i [해석하면 버튼에 올라갔을 때 i에게 주는 효과]
이런식으로 쓰면 되는 것이었다. 이렇게하면 위아래 다 버튼에 올라갈때라 한 번에 효과가 나타난다.. 지금까지
button:hover{ } [버튼에 마우스 올라갈 때]
button i:hover{ } [버튼 안에있는 i에 마우스 올라갈때] 이렇게 쪼개 놓으니 따로따로 움직인 것이었다...

ㅡㅡㅡ오늘은 이만 끝 ㅡㅡㅡ
transition, transform, animation도 공부했으나 너무 한꺼번에 공부해서 정리, 숙련도가 떨어진다... 내일 다시 복습해서 추가로 작성하겠다!

화이팅!

profile
일일 개발 기록 블로그

0개의 댓글