📝 오늘 한 것

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

2. CSS 필수 개념 복습

📚 배운 것

🔎 HTML

---

📌 1~3은 여기 참고

📌 각 section마다 공통적으로 지적받은 것들

• 확실하게 구별되는 각 section들에 class 대신 유일무이한 id를 부여해라.
  
  
• class를 BEM 규칙에 따라 작성해라. 단, 반복되는 것들이 있는지 확인하고 효율적으로 부여해야 한다. (나는 케밥 방식을 따라야 해서 _은 사용할 수 없기 때문에 -만 써서 수정했다.)
  
  
• h1, h2, h3 태그를 쓸 곳을 구분해서 사용해라.

4. section.skills

• 강의에서 여태까진 모든 section에서 <h1>에 title 클래스를, <p>에 description 클래스를 부여했는데 이번 section에서는 그러지 않았다.

• 나는 skillset을 총 3개의 박스로 나눴는데 강의에서는 크게 left, right로 나눴다.

• skill 이름과 진도율을 각각 일찍선상에서 왼쪽 정렬과 오른쪽 정렬이 되어 있는 것으로 보고 <span> 태그를 사용했다.

• 🙋‍♀️ 질문
  tools-list와 etc 부분에서 <li> 태그 안에 <span> 태그를 넣어준 이유가 뭘까?

5. section.work

• 나는 <nav>라고 생각했는데 <button>이었다. 혼자 코딩하면서도 이 부분이 제일 아닌 거 같았는데 botton은 생각을 못 했다. 지금 보면 이걸 어떻게 nav로 생각했나 싶을 만큼 누가 봐도 button인 것...

• project 사진에 마우스를 가져다 대면 project 정보가 뜨고, project 사진을 누르면 github으로 이동하도록 만들었다.

6. section.testimonial

• 말풍선(div.testimonial-speechBubble)을 생각 못 했다.

7. section.contact

• 각 section에서 공통적으로 지적받은 사항들을 똑같이 명심할 것.

🔎 CSS

---

1. box-sizing

• content-box : width와 height를 계산할 때 콘텐츠만을 고려한다

• border-box box : width와 height를 계산할 때 border와 padding까지 고려한다

2. position

전에 작성했던 필기에 강의를 토대로 내용 추가

1) postion: static;

(1) 기본값(=위치가 지정되어 있지 않다)

(2) 가장 위 & 가장 왼쪽으로 배치된다

(3) top, left, bottom, right 값을 무시한다

2) position: relative;

(1) 원래 있어야 할 위치(기본값 static 상태)를 기준으로 상대적으로 위치가 변경된다

(2) top, right, bottom, left 값을 주어야만 위치 변경이 일어난다

top, right, bottom, left: 기준이 되는 곳에서 얼마만큼 떨어진 위치인지 나타낸다
ex) left: 200px; 기준이 되는 곳(left)로부터 '오른쪽으로' 200px 떨어진 곳

(3) 원래 있던 공간이 유지된다. 따라서 주변에서 함께 있던 아이템들의 재배치는 일어나지 않는다.

3) position: absolute;

(1) 가장 가까운, 위치가 지정된, 조상 요소를 기준으로 상대적으로 위치가 변경된다

• 위치가 지정된 = static(x) / relative, fixed, absolute(o)
• 조상요소 = 상위 요소 ⊃ 부모 요소

(2) 조상 요소가 하나도 없거나 위치가 지정된 조상 요소가 없다면, 본문(상단, 왼쪽 0, 0 값)을 기준으로 위치가 변경된다

(3) 원래 있던 공간에서 쏙 빠져나온다. 따라서 주변에서 함께 있던 아이템들의 재배치가 일어난다.

(4) 크기가 자신의 콘텐츠만 해진다. 따라서 필요하다면 width, height 값을 설정해야 한다

4) position: fixed;

(1) viewport(화면상의 표시 영역)를 기준으로 상대적으로 위치가 지정된다. 즉, 스크롤을 움직여도 위치가 변하지 않는다.

(2) top, right, bottom, left 값을 줄 수 있다.

(3) 크기가 자신의 콘텐츠만 해진다. 따라서 필요하다면 width, height 값을 설정해야 한다.

5) position: sticky;

(1) 부모요소 box(scroll 박스)를 기준으로 상대적으로 위치가 지정된다. 즉, 스크롤을 움직여서 그 부모요소가 화면상에 보이지 않게 되면 sticky 속성값이 지정된 요소도 더 이상 보이지 않게 된다.

(2) top, right, bottom, left 값을 주어야만 위치 변경이 일어난다

3. 중앙 정렬

1) 중앙 정렬하고 싶은 요소에 margin: auto; 적용하기

• block 레벨 요소를 중앙 정렬할 때 사용

• 수평 중앙 정렬만 가능 (수직x)

2) 중앙 정렬하고 싶은 요소의 부모요소에 text-align: center; 적용하기

• 이때 중앙 정렬하고자 하는 요소는 inline 혹은 inline-block 레벨 요소여야만 한다.(예외: 텍스트 블록 레벨 요소) block 레벨 요소는 자체 margin 값 때문에 그 부모요소에 중앙 정렬 속성을 적용해도 위치 변화가 없다. ❗

• 수평 중앙 정렬만 가능 (수직x)

3) 중앙 정렬하고 싶은 요소에 transform: translate (-50%, -50%) 적용하기

• 수평·수직 중앙 정렬 모두 가능
  단, 이 방법은 (부모요소 크기 = 자식요소 크기 x 2) 일 때만 사용 가능

• transform을 이용한 정석적인 중앙 정렬 방법은 🔥

<div class="transform-practice-outer">
  <div class="transform-practice-inner"></div>
</div>

div[class$="outer"] {
  background-color: pink;
  width: 600px;
  height: 400px;
  position: relative; /* inner 박스에 absolute 적용하기 위해 적어준 것 */
}

div[class$="inner"] {
  background-color: cadetblue;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%; /* 여기까지만 하면 inner 박스의 왼쪽-위 꼭지점이 outer 박스의 정가운데 위치하게 됨 */
  transform: translate(-50%, -50%) /* 이렇게 하면 비로소 inner 박스의 정가운데가 outer 박스의 정가운데 위치하게 됨 */
}

4) text를 중앙 정렬하는 방법

• text에 text-align: center; 적용하기
  → 수평 중앙 정렬
  → 이때 text는 block 레벨 요소(h1, p 등)여야 한다. inline 레벨 요소(a, span 등)는 width 속성을 갖지 못해 중앙 개념이 존재하지 않기 때문이다. inline 레벨 요소를 중앙 정렬하기 위해서는 먼저 display: block; 등을 지정해 block 레벨 요소로 바꿔 주어야 한다. ❗

• text에 그 부모 요소의 높이만큼 line-height 값 적용하기
  → 수직 중앙 정렬
  → 한 줄짜리 text일 때만 편법처럼 사용된다
• [CSS] 텍스트 세로 중앙 정렬 4가지 참고 🔥

li {
  display: table;
  a {
    display: table-cell;
    vertical-align: middle;
  }
}

4. 반응형 background

1) background: position/size repeat url('');

• ex. background: center/cover no-repeat ul('');
• position과 size 값 사이는 '/'를 써줘야 한다

🙋‍♀️ 질문

1. 요기 바로가기

✨ 내일 할 것

1. CSS 필수 개념+보너스 개념 마저 수강

2. 포트폴리오 CSS styling 직접 해본 후 강의와 비교·분석