노마드 코더 코코아톡 클론코딩 7일차

노마드 코더 코코아톡 클론코딩 7일차

잡담

개발 블로그에 이미지를 업로드하는 데 어려움을 겪고 있다. 이 방법, 저 방법 해보긴 했는데 잘 되지 않아서 일단 내버려 두고 나중에 한 번에 수정을 할 예정이다(귀찮아..). 일단 기록을 남기는 데 의미를 두는 것으로 하자.

정리

클론 코딩

1. Navigation Bar(03.png)
a. navigation을 찾아서 ul 의 li 안에 있는 link를 가져오게끔 설정되어 있다.
b. 단축키: nav>ul>li*4>a
c. css box 모델
ㄱ. 200픽셀의 박스에 50픽셀의 패딩을 주면, css는 기존 박스의 크기를 유지하기 위해 50만큼 박스를 늘린다. 이에 따라서 화면 밖으로 밀려나는 요소가 발생할 수 있다.
ㄴ. 실습에서는 width를 100%로 주었지만, padding 때문에 100%보다 더 큰 박스가 되버린다. 이를 해결하는 방법이 box-sizing:border-box, padding을 주더라도 신경쓰지 말라고 명령한다(박스 사이즈 변경하지 마라).

d. span은 width, height 가지지 않으므로 설정해주려면 display: block를 이용해야 한다.

navigation 작업의 완성본이다. 이번에는 강의를 중간에 멈춰 가면서 미리 한 번 짜보는 식으로 진행했다.

알게 된 점과 의문점들을 정리하면

1. 아이콘들을 가로 방향으로 배열하기 위해선 아이콘들을 모두 감싸고 있는 태그에 CSS를 적용해야 한다. 어떤 태그에 적용할 지, 뭐가 어떤 태그에 쌓여 있는 지를 이해하는 게 중요해 보인다.

2. flex 적용한 뒤 position 으로 하단 고정을 하면 space-between 설정이 깨져 버린다. » 어째서 인지 width가 줄어들어 발생한 문제이므로 width를 100%로 하면 해결된다.

3. width를 100%로 하면 space-between 문제는 해결이 되는데 문제는 마지막 아이콘이 화면 밖으로 나가버린다. 이는 위에 서술한 padding으로 인한 문제다.

4. border-radius: 50%로 하면 원이 되는데 원리를 모르겠다. 번역하면 경계선의 반지름을 절반으로 한다. 즉, 원을 그릴 건데 box의 경계선의 절반을 원의 반지름으로 정한다는 의미다.

5. border 없어도 텍스트 자체로 박스를 가지기 때문에 배경 색을 설정할 수 있다.

6. 나는 숫자를 원 가운데 놓기 위해 그냥 position: fixed 를 해놓고 화면을 기준으로 위치를 움직였는데, 강의에서는 display: flex와 주축, 교차축 center로 해결했다. 문제점은 position fixed를 이미 .nav 안에 해놓았기 때문에 fixed를 할 필요가 없다는 점, 그리고 위 방법은 화면 크기가 변경되면 위치가 변경된다는 것이다. 이를 해결하기 위해선 display:flex를 통해 1이 박스를 기준으로 움직이도록 설정해야 했다.

7. 강의에서 숫자를 메시지 아이콘 위에 올려놓기 위해 position:absolute를 사용했다. absolute는 relative한 부모를 기준으로 움직인다. 이 때 다른 레이어가 되는데 position fixed 뿐만 아니라 다른 것도 다른 레이어가 되는 듯하다. 만약 relative가 없으면 body를 기준으로 삼기 때문에, 아이콘과 숫자를 감싸고 있는 태그를 relative로 지정해줘야 한다. 나는 또 화면 기준으로 위치를 수정했는데, 이는 마찬가지로 화면 크기가 변경되면 위치도 변경된다.

8. padding 말고도 width와 height로 원 크기 조정이 가능하다. padding으로 설정하면 box-sizing 때문에 padding만큼 박스 사이즈가 커지는 것을 이용한 것인데, 굳이 꼬아서 설정할 필요는 없을 듯..

오늘 목표가 3.png 까진 완성하는 거 였는데 만들고 보니 진이 빠진다.. 그래도 결과물을 보니 뿌듯하군