📝 오늘 한 것

1. CSS 필수 개념 복습

2. CSS 직접 작성해보기

3. 내가 짠 코드와 강의 내용 비교·분석

📚 배운 것

🔎 CSS 필수 개념 + 보너스 개념

---

1. transform

1) 이동 transition(거리)

• transform: transitionX(100px)

• transform: transitionY(100px)

• transform: transition(-50px, -20px)   ※ 순서: (좌우, 상하)

2) 크기 scale(배수)

• transform: scale(1.2)

3) 회전 rotate(각도)

• transform: rotate(45deg)
  
  

2. transition

• transition: 대상 속성｜지속 시간｜변화 리듬｜지연 시간

• 가상 클래스 선택자 또는 javascript의 부수적인 액션이 있어야만 발동 가능

• 변화 리듬

  • ease : 기본값
  • linear : 일정한 속도
  • ease-in-out : 처음 느리고 마지막 빨라짐
  • steps(n, start/end) : n단계로 나눠서 변화
  • cubic-bezier(0, 0, 0, 0) : x축 시간, y축 진행속도   ※ 3차 베지어 곡선 참고

div:hover {
  border-radius: 50%;
  transform: translateX(500px);
  background-color: blue;
  transition: all 3s steps(5, start) 1s;
}

3. 커스텀 속성 정의, CSS 변수 활용

• 정의 방법 → --커스텀 속성: 속성값;

• 적용 방법 → 속성: var(--커스텀 속성);

• 변수값은 하위 요소에 상속된다. 즉, 커스텀 속성이 지정된 요소의 모든 자식요소들에 적용 가능하다.

• calc() 함수를 함께 이용할 수 있다.
  ex. margin-left: calc(var(--base-space) * 2);

• 자주 반복되는 속성을 변수로 정의해서 사용하면, 그 값을 수정하고 싶을 때 한 군데만 찾아서 고치면 된다. 이를 위해 문서 트리의 루트 요소인 :root에 커스텀 속성을 정의하면 편리하다.

• 특히 미디어쿼리를 이용할 때 매우 유용하다. 앞서 :root에 정의해놓은 커스텀 속성들을 그대로 복사 붙여넣기 한 후 그 값만 바꿔주면 된다.

:root {
  --background-color: yellow;
  --font-size: 12px;
}

@media screen and (max-width: 600px) {
  :root {
    --background-color: red;
    --font-size: 8px;
  }
}

• 앞에서 변수값이 지정되지 않았을 경우에는 적용하려는 요소에 직접 default 변수값을 지정해줄 수 있다.
  ex. background-color: var(--background-color, pink);

🔎 CSS 사전 설정

---

1. 글로벌 셋업 (global setup)

• :root → 글로벌 변수 정의 (커스텀 속성 정의)

• * → 모든 요소에 공통적으로 적용될 속성 정의

예시

/* global */

:root {
/* color */
  --color-white: #ffffff;
  --color-light-white: #eeeeee;
  --color-dark-white: #bdbdbd;

/* font size */
  --font-large: 50px;
  --font-medium: 30px;
  --font-regular: 20px;
  --font-small: 15px;
  --font-micro: 10px;

/* font weight */ /* link로 연결한 구글 폰트를 참고해서 설정 */
  --weight-bold: 700;
  --weight-semi-bold: 600;
  --weight-regular: 400;
}

/* universal tags */

* {
  box-sizing: border-box;
}

2. 타이포그래피 (typography)

• 글자(텍스트) 디자인을 꾸며주는 것

• HTML 작성 시 사용했던 <h1>~<h6>, <p> 등에 대해 설정해준다

예시

h1 {
  font-size: var(--font-large);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  margin: 16px 0; /* margin의 경우, 개발자 도구를 통해 확인한 후 적절히 설정할 것 */
}

/* h2, h3, p도 같은 방법으로 설정 */ 

🙋‍♀️ 코딩하면서 생긴 질문들

• 질문 4개를 한마디로 표현하면, 💢수직 중앙 정렬이 죽어도 안됨💢이었다

• 몇 시간의 검색과 고민 끝에 이렇게 저렇게 껴맞춰서 결국 결과물은 도안과 비슷하게 만들 수 있었다. 하지만 어떻게 그렇게 되는지 원리는 이해가 안 됐다.

• 마침내 강의를 봤는데......align-items: center; 이걸 어떻게 생각을 못했을까. 이 모든 질문들에 대한 답은 저 짤막한 한 줄이었다. flexbox의 수평·수직 정렬 이해하려고 거의 하루를 꼬박 쏟았었고, 결국 이해도 했다고 뿌듯해 했었는데 저걸 까맣게 잊고 있었다니.

• 변명하자면, 최근에 vertical-align과 line-height가 이해가 잘 안 돼서 틈틈이 찾아보고 있었는데 그래서 더 꽂혀 있었던 거 같다. 구차한 변명이다. 근데 더 큰 문제는 아직도 이 두 개념은 이해가 안 된다는 거다. 그래서 밑의 질문 4개는 아주 허망하리만치 순식간에 해결이 되었지만 전부 지우지 않고 남겨두기로 한다.

• 직접 코딩하면서 그때그때 떠올랐던 질문들과 어찌저찌해서 결국 찾아낸 찝찝한 답안들이다.

---

Q1. logo 이미지와 텍스트를 어떻게 nav에 수직 중앙 정렬시킬 수 있을까?

vertical-align: middle을 통해 수직 중앙 정렬시키긴 했는데 정확한 원리를 모르겠다.

Q2. ul에 display: flex를 지정했는데도 justify-content: space-between이 안 먹힌다.

ul에 width: 50%를 지정해주니까 justify-content: space-between도 먹히면서 수직 중앙 정렬이 됐다. 다만 이렇게 하니까 브라우저 창 크기를 줄였을 때 오른쪽에 margin도 아닌, HTML 문서 밖의 여백이 생기고 navbar가 잘려 보였다.

Q3. li가 nav에서 수직 중앙 정렬이 되지 않고 다소 위쪽에 붙어있다. nav의 logo 이미지가 커서 그 크기에 맞춰서 li의 높이도 높아진 듯한데 개발자 도구로 확인해 보면 li 콘텐츠를 둘러싸고 있는 여백이 밑쪽에 쏠려 있다. li에 margin이나 padding도 부여되어 있지 않은데 그 여백을 어떻게 아래, 위 똑같이 만들어서 nav에서 li를 수직 중앙 정렬시킬 수 있을까?

<ul> or <li> 에 line-height: 300% 혹은 line-height: 2.5 혹은 line-height: 45px 혹은 line-height: 2.5em 을 적용하니까 눈대중으로는 수직 중앙 정렬이 되는 거 같다. 그러나 눈대중일 뿐이고 이게 어떻게 가능한 건지 원리도 모르겠다. 폰트 매트릭스, line-height와 vertical-align를 참고했으나 이해가 어려웠다.

Q4. <li> 중 HOME 메뉴에 border을 씌우니까 다른 <li>들과 중앙이 맞지 않는다.

HOME 메뉴에만 line-height: 2.3을 적용해서 중앙을 맞추긴 했으나 역시 원리를 모르겠다.

🔎 강의를 통해 배운 것

---

1. navbar

• 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에 한 번만 써주도록 한다.

✨ 내일 할 것

1. CSS 직접 작성해보기 이어서!
   이제는 진짜 너무 고민하지 말고 빨리빨리 하자. 하나를 붙잡고 너무 오래 고민하는 경향이 있다. 근데 배우는 건 정말로 많은 거 같다. 정말로.