[TIL] 210830

Lee Syong·2021년 8월 30일

TIL

목록 보기

12/204

color(폰트 색깔) 속성을 #navbar에 지정해서 한 번에 하위 요소까지 전부 적용될 수 있도록 했다.
flexbox 교차축 중앙 정렬 → align-items: center 🔥🔥🔥🔥🔥
navbar-menu-item, 즉 <li>들 사이를 띄우려면 justify-content: space-between 말고 그냥 margin이랑 padding 값을 넣어주면 된다.
text-decoration: none과 list-style: none처럼 항상 똑같이 적용할 속성들은 매번 class마다 지정해주지 말고, 아예 /* universal tags */에 a와 li 태그를 명시해서 지정해둬라.
구글 폰트를 body에 지정해줬다.
기본적으로 텍스트 위에 마우스 커서를 올려도 그 모양이 변하지 않도록 하기 위해 body에 cursor: default를 지정해줬다.
단, li 위에 마우스 커서를 올렸을 때는 손 모양으로 바뀌도록 cursor: pointer를 지정해줬다.
border-radius는 이 문서 내에서는 항상 동일한 값을 사용할 것이기 때문에 :root에 변수값을 지정해주었다.
class="navbar-menu-item active"를 가리키는 CSS 선택자는 navbar-menu-item.active이다. 이 경우에 .active 앞에서 띄어쓰기 하면 안 된다.
border-radius 속성은 .active와 :hover에서 반복되므로 아예 .nav-menu-item에 한 번만 써주도록 한다.

원 모양으로 만든 프로필 이미지를 원하는 위치가 보이도록 조정하는 법을 모르겠다. img를 감싸는 div 태그를 만들어서 이미지의 중앙이 보이도록 했으나 내가 원하는 건 이미지의 오른쪽이 보이는 것이다.
모든 button에 적용시킬 속성들은 /* universal tags */에 지정해 두도록 한다.

개발자 도구를 사용해도 그림에 수치는 안 나오면서 요소 검색 시에만 주황색으로 뜨는 margin의 경우, 해당 요소가 block 레벨 요소이기 때문에 자동으로 margin 값이 설정되어 있는 것이다. 이 경우에는 좌우 margin에 auto 값을 줌으로써 수평 중앙 정렬을 할 수 있다.
/* universal tags */에 <section> 요소 선택자를 추가해 공통적으로 적용할 속성들을 지정해줬다. 브라우저 창이 커지면 콘텐츠가 너무 퍼지는 것을 막기 위해 지정하는 max-width도 그 중 하나이다.
나는 position과 transform 속성을 이용해서 아이콘(font awesome)을 수직·수평 중앙 정렬시켰는데, 강의에서는 line-height에 height 값과 동일한 값을 지정해 중앙 정렬시켰다.
원 안의 아이템에 마우스 커서를 가져가면 아이템이 커지면서 분홍색으로 바뀌어 돌아가도록 효과를 주었다.
a:hover → a에 커서를 댔을 때 a
a b:hover → a 안의 b에 커서를 댔을 때 b
a:hover b → a에 커서를 댔을 때 b
--animation-duration: 300ms를 추천한다.

능동적으로 살자, 행복하게😁