📝 오늘 한 것

1. CSS 직접 작성해보기 (이어서)

2. 내가 짠 코드와 강의 내용 비교·분석 (이어서)

🔎 강의를 통해 배운 것

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

2. home

• 원 모양으로 만든 프로필 이미지를 원하는 위치가 보이도록 조정하는 법을 모르겠다. img를 감싸는 div 태그를 만들어서 이미지의 중앙이 보이도록 했으나 내가 원하는 건 이미지의 오른쪽이 보이는 것이다.

• 모든 button에 적용시킬 속성들은 /* universal tags */에 지정해 두도록 한다.

3. about

• 개발자 도구를 사용해도 그림에 수치는 안 나오면서 요소 검색 시에만 주황색으로 뜨는 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를 추천한다.

4. skills

• max-width는 모든 section이 아니라 적용하고 싶은 section에만 따로 쓸 수 있도록 section-container 클래스를 만들어 지정해뒀다. skills 섹션의 경우 브라우저 창이 커짐에 따라 배경만 늘어나고 콘텐츠는 일정 크기 이상 늘어나지 않도록 HTML의 #skills 안에 .section-container를 따로 만들어 나머지 콘텐츠를 감싸주었다.

• .skillset-left / right의 width: 60% /40% → flex-basis: 60% / 40%

• 🙋‍♀️ 질문
  div.skillset 안에 h3.skillset-title이 있다. div.skillset에 color 속성을 지정했을 때 div.description 안의 span들은 모두 색이 변했는데 왜 h3 색깔은 변하지 않는 걸까? 강의에서도 안 변해서 따로 h3 색깔을 지정해주었는데 왜 이런 건지 모르겠다.

• 나는 calc()함수를 이용해 .skill-value의 width 값을 각각 class 별로 지정해주었다. 강의에서는 이를 CSS에서 정의하지 말고 HTML 태그에 인라인 방식으로 적용하였다. (이는 데이터들을 따로 추출해 json에서 관리하도록 하고, json에서 동적으로 받아온 데이터들을 HTML 코드로 변환해 자동 생성할 수 있도록 해준다.)

5. work

• 텍스트를 이미지 중앙에 위치시키고자 할 때, 텍스트가 이미지에 가려서 안 보이면 텍스트에 z-index: 1을 적용할 수 있다.

• 이미지에 마우스 커서를 가져다 대면, 이미지가 어둡게 변하면서 숨어 있던 텍스트가 보이도록 하는 방법

방법 1 (내가 쓴 방법: 텍스트는 투명도에 영향 안 받음)

.text {
  opacity: 0;
}

img:hover .text {
  opacity: 1;
  background: rgba(0, 0, 0, .7);
}

방법 2 (강의 내용: 텍스트도 같이 투명해짐)

.text {
  background: black;
  opacity: 0;
}

img:hover .text {
  opacity: 0.7;
}

• 나는 버튼에서 hover 상태만 따로 추가했는데 강의에서는 첫 번째 버튼이 아예 선택된 것으로 보이도록 꾸며줬다.

• 나는 버튼의 숫자를 꾸밀 때 원이 제대로 보여지도록 일종의 꼼수로 HTML의 span 태그에 가서 콘텐츠 부분 앞뒤로 & nbsp를 넣었다. 강의에서는 먼저 display: inline-block을 적용한 후 width와 height를 지정하고, 숫자를 동그라미의 가운데에 맞추기 위해 line-height = height 방법을 사용했다.

• 나는 버튼의 숫자를 평상시에 안 보이게 하기 위해 font-size: 0을 사용했지만, 강의에서는 opacity: 0을 사용했다.

• 나는 버튼의 숫자를 평상시에 안 보이다가 마우스 오버 시 보이게끔만 만들었지만, 강의에서는 위에서 아래로 버튼이 내려오는 애니메이션 효과를 추가했다.

• 이미지가 컨테이너보다 커지지 않게 하기 위해 max-width와 max-height를 100%로 지정해줬다.

• 나는 project-description을 position과 translate()을 이용해 중앙 정렬 해주었는데, 강의에서는 position과 justify-content를 이용해 중앙 정렬했다.

• project-title과 project-description 사이에 ::after 이용해서 ㅡ 를 넣어주었다.
  ※ :after과 같은 가상 요소는 inline 요소이기 때문에 특정 영역을 갖기 위해서는 block 혹은 inline-block 요소로 만들어주어야 한다.

• project에 마우스 오버 시 project-description이 살짝 올라오는 느낌이 들도록 애니메이션 효과가 나타나도록 해주었다.

• transform: translateY(10px); = top: 10px;

6. testimonials

특별히 없었다. clear.

7. contact

특별히 없었다. clear.

8. 반응형 nav

• .toggle-btn에 position: absolute를 적용한 후 right, top을 지정해 위치를 조정해주었다.

✨ 내일 할 것

1. 미디어쿼리를 이용해 반응형 웹 만들기

2. 내가 짠 코드와 강의 내용 비교·분석 (이어서)

3. 자바스크립트 입문