3일차. CSS 기초

 

오늘의 학습

오늘은 기본적인...이라곤 하지만 상당히 빠르게 css 전반적인 부분들을 훑었다. 선택자 부분은 hover나 nth-child, 그리고 나도 몰랐던 first-of-type같은 것까지 한번에 훑었기 때문에 처음 배운다면 어려웠을 것으로 예상된다(학원에서는 이걸로 실습 계속 하면서 한 3일 배웠던 것 같은디...). 그러고 나서 어제 html로 뼈대를 만들었던 개인홈을 css를 써서 좀더 업그레이드 시키는 과제를 얻었다. 과제를 자신만 보는게 아니라 모두 같이 볼 수 있도록 notion에다가 캡쳐해서 올리는데, 서로의 결과물도 볼 수 있어서 상당한 동기부여가 된다. 생각보다 css 공부 미리 다 하고 온 사람들이 많은 것 같아서 빡 긴장되는 시간이었다.

처음 만들었던 디자인이 마음에 들지 않아, zoom하는 시간 뒤에 다시 수정해서 올려보았다. 기존에 홈페이지 만들면서 flex 쓰는 법을 분명 잘 익혔다고 생각했는데 오랜만에 만졌더니 허둥대느라 시간을 많이 썼다(...) 손이 잊게 두지 말 것.

 

낯설었던 거.

css:first-of-type 의사 클래스는 형제 요소 중 자신의 유형과 일치하는 제일 첫 요소를 나타낸다고 한다. 가령 p:first-of-type {...}라면 p엘리먼트의 형제 엘리먼트 중 첫번째 p엘리먼트를 선택한다. first-child와는 다르게 첫 번째 자식 엘리먼트가 아니라 처음 등장하는 p를 선택. <-이 개념 복습 필요

 

내일은 페어 프로그래밍을 처음 시작하는 날이다. 디스코드로 서로 소통 한다고.

두근... 긴장... 잘 할 수 있으면 좋겠다.

 

 

스스로 묻는 하루치 Question.

- em과 rem의 차이는 무엇일까?

rem과 em은 모두 유동적으로 바뀌는 상대(가변)단위이다. 상대 단위에는 이외에도 %, vh, vw등이 있다. pt와 px는 절대 단위이기 때문에 어떤 상황에서도 고정된 길이를 나타낸다. 가령 10px은 모니터 크기가 달라져도 10px로 절댓값인 것이다. 그러나 rem과 em은 css의 font-size에 비례하여 정해지는 상대 단위다. 1em은 font size가 20일 때, 20x1=20px, 2em은 20x2=40px 이런 식으로 적용된다.

다만 rem은 'root'의 r에서 따왔으며, 여기서 root는 html 문서 최상위 요소인 html의 폰트 크기가 기준이다. 즉 이 요소의 폰트 크기 x rem 단위 지정수의 값이 변환값이 되는 것이다. 

하지만 em은 스타일을 지정한 해당 요소의 font size에 비례하여 움직인다. 해당 요소에 font size가 지정되어 있지 않다면, 그 부모 요소의 font size를 그대로 물려받는다. 그런데 여기서 잠깐, 부모 요소의 font size도 em으로 지정되었다면? 계산이 굉장히 복잡해지는 결과가 나올 것이다.

따라서 em은 실제 길이변환에 영향을 받는 변수가 많기에, 가급적 rem을 우선 사용하도록 권장된다. 

 

- background와 background-color의 차이

당연히 알던 지식인데 이렇게 물어보니까 낯설어서 당황했던 문제. background는 배경에 대한 여러 옵션들(가령 color, repeat 여부, position)을 한 줄에 처리할 수 있다. 이때 속성들은 띄어쓰기로 구분이 된다. 하지만 background-color은 배경의 색깔만 처리한다. 

코드의 명시성을 위해서는 한번에 쓰는 것보다는 따로 쓰는 것이 권장된다.

 

ex) background: #color no-repeat center;

ex) background-color: #color;

      background-repeat: no-repeat;

 

 

- vh와 vw는 무엇인가?

vh와 vw는 당장 눈에 보이는 영역, 즉 viewport를 기준으로 둔다. 즉 100vh는 눈에 보이는 영역의 세로로 꽉 찬 높이이며, 1vh는 그 영역의 1/100이다. 따라서 100vw는 가로로 꽉 찬 길이가 될 것이다.

참고로 %는 지금 눈에 보이지 않으나 스크롤 하면 나타나는 전체 영역까지 기준으로 두는 수치이다.

 

 

- 관심사 분리란 무엇인가?

컴퓨터 프로그램에서, 구별된 부분을 분리시키자는 원칙이다. (Separation of concerns, SoC). 특정한 관심사에 따라 기능을 나누고, 각 기능을 독립적으로 개발하여 이를 조합하는 식으로 복잡한 소프트웨어를 구성하자는 원칙을 말한다. 이러면 코드를 파악하는데 수월하며 문제가 생겨도 그 부분만 손보는 식으로 훨씬 수월하게 복잡한 프로그램을 개발할 수 있다.

 

 

https://codepen.io/oyeon-kwon/pen/bGegbvK

CSS1-codestates

코드펜에서는 가벼운 html css를 파일을 직접 만들지 않고 바로 적용시켜볼 수 있다.

 

 

 

ERROR 상황!

1. background-image가 적용이 안 되어서 당황했다. html에 img로 넣으면 들어가는데 왜 css에 넣으면 안 되냐고. 크기를 지정해준 뒤에도 안 나와서 쩔쩔매고 있었다. -> 이전에 배운대로 (내 손에 익은대로) scss 쓰다보니, scss파일 저장으로 자동 생성된 css 파일이 html 문서와 같은 폴더가 아닌 그 외부 폴더에 저장되고 있다는 걸 나중에 깨달았다. 파일 경로에 문제가 있다 판단, 아예 html, css, scss, img까지 다 폴더를 만들어두고 다시 경로를 싹 잡아주니까 어떻게 해결이 되었다. 사실 이건 아직도 좀 의아하다. 왜 거기 생성되고 있던 거지...?
2. css는 reset세팅을 해둬야 한다는 걸 중간에 자각했다. -> 심지어 css파일 꼭대기에 import로 연결해둬서 저장과 동시에 사라져버렸다. scss를 쓰면 scss 파일 꼭대기에 import로 연결해야 하는 듯하다. 그래도 scss파일을 html에 연결하는 게 아니라 생성된 css와 연결해야 되는 건 기억하고 있었다. 옛날에 이걸로 고생했던 기억이...
3. css 레이아웃 오른쪽 여백이 자꾸 생겨 가로 스크롤바가 생기는 오류.  -> 이건 header나 footer에 넓이가 이상하게 지정되었을 때 생기는 스크롤바로 기억한다. width: 100vw로 주니까 사라졌다.
4. footer가 중간으로 붕 뜨는 오류. -> position: absolute 주고 bottom:0이었는데도 중간에 걸쳐 있어서 고민했는데, 생각해보니까 body 높이를 정해주지 않아 생긴 오류 같아서 100vh로 높이를 주니 해결. 
5. 문제 풀이에서 div:nth-last-child(2) {...} 의 영역을 구하라는 걸 틀렸다. -> div중 뒤에서 두번째를 고르라는 줄 알았는데, 형제 엘리먼트 중에 뒤에서 두번째인 div를 구하라는 문제였다! 앞뒤 관계를 완전히 잘못 파악한 수준. 이건 아직도 아리까리해서 다시 복습이 필요해보인다...

 

스스로 칭찬하기

1. 그래도 css 리셋을 아예 잊지는 않았다.
2. 경로 설정을 수월하게 뚝딱뚝딱. 처음 css 접했던 때가 생각난다... ../ 와 ./도 모르던 시절...
3. 쉽다고 css에 안주하려 하지 않고, 배운대로 scss를 혼자 적용시켜서 만들었다!
4. footer와 header을 잘 만들었다. 굿.
5. 길어지는 단어에 적용하는 word-break를 기억해냈다.

 

앞으로 해야하는 것

• 우분투 설치... 이건 사실 주말에 하게 될 것 같다. 
• flex와 position 복습. 그건 잘 알아야 할 것 아니니!
• 아직 first-of-type가 헷갈린다... 이 부분 주말에 다시... 
• 절대경로와 상대경로를 좀 더 깊이 파고들고 싶다. 지금은 감으로 하는 수준.
• scss 쓸때 메인색이나 메인 폰트 사이즈 기준이 되는 걸 미리 짜두고 간단하게 불러오기 하는 방법이 있었는데 뭐였지? 찾아봐야겠다.