특강 DAY!
선배특강듣고 느낀점
멋사를 하면서 여러가지 활용 방법과 어떻게 해야 수료 후 후회를 안남기고 알차게 즐길 수 있을까에 대한 조언을 듣는 시간이였다.
멋사하면 스터디지! 라는 생각은 멋사를 준비하며 계속 가지고 있었다. 하지만 리액트 스터디를 해보면서 나는 시간에 대한 강박과 억압을 느꼈어서 자유로움이 보장되어있지 않으면 쉽사리 다가가기 힘들다는 느낌을 받았다. 스터디가 많은 도움이 된다는 건 알지만,,, 내가 스터디의 목표까지 도달할 수 있는가에 대한 두려움이 남아있다. 계속 고민을 해보고 부딪칠 수 있을 때 다시 도전을 해봐야겠다.
두번째로는 기술 블로그에 대한 고민이 생겼다. 여태 공부는 이론 위주였고 강의를 보면서 따라한다는 느낌이 강하기 때문에 혼자 오류를 많이 접해보고 해결하는 경우가 적었다. 앞으로 멋사를 진행하면서 혼자 여러 코드를 짜보고 많은 오류와 해결을 많이 적어봐야겠다고 생각했다. 이론 같은 경우는 어떻게 적어야 하는지 고민이 많이 되는데 많은 기술 블로그를 봐왔지만 더 많이 봐야하나 싶기도 하다. 어떻게 쓰는게 좋은 글이고, 어떻게 쓰는게 나에게 도움이 되는지 끊임없이 고민해야겠다.
CSS 특강
CSS는 어떻게 짜야할까? - 작업 순서에 대한 고민
빔캠프(이종찬) 강사님이 오셔서 CSS 강의를 진행해주셨다!
CSS를 하면서 겪었던 많은 고민들과 생각들을 다 들켜버리는 순간이기도 했고, 내가 너무 속성에만 매달려서 본질을 놓치고 있었구나 깨닳는 순간이기도 했다. 정말 유익한 시간이였다.
가장 큰 덩어리 먼저, 디테일은 나중에
항상 CSS가 깨지는 순간을 생각해보면 엉성한 레이아웃이 가장 큰 원인이였던 것 같다.
강사님께선 레이아웃을 우선적으로 가져가야 함을 당부해주셨다!
<body>
<div class="wrap"> <!-- 가장 큰 레이아웃 요소 -->
<!-- 그 다음 레이아웃 요소 -->
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
</body>여기서 스탑!🖐️ 처음 레이아웃을 잡을 땐 최소한의 마크업만 가져가야한다.
📍 속성 제대로 알고 넘어가기
div class=" " : attribute (HTML)
div { background-color: #ff6600; } : property (CSS)
우리는 이 다음에 레이아웃의 넓이 값을 잡아주어야 할 것이다.
❓ width: auto가 계산되는 원리가 무엇일까?
여기서 우리는 초기값을 짚고 넘어갈 수 있었다.
📍 initial value, 초기값
CSS에 모든 속성들은 기본 세팅되어 있는 값이 있다.
MDN에서 초기값 외에도 상속 여부를 알 수 있다.
wrap에 width: auto;을 주게되면 가장 자리 조금을 남겨두고 다 채워지는걸 볼 수 있다.
왜 이렇게 되는 것일까?
일단 width: auto;는 직계 부모가 제공해주는 컨텐츠 영역 전부를 의미한다.
그렇기 때문에 사용자 에이전트 설정 margin: 8px;을 제외한 컨텐츠 구역에 속성이 적용되는 것이다.
👉 이는 containing block 이라고 불린다.
그렇다면 width: auto와 width: 100%는 무슨 차이일까?
-
width: auto → 컨텐츠 영역에 마진, 패딩, 보더 값이 다 포함된 상태이다.
-
width: 100% → 부모의 width 컨텐츠 영역을 가지고 오는 것은 맞으나 마진, 패딩, 보더 값이 포함되지 않은 상태이다.
그렇기 때문에 width: 100%;은 width 값이 초과되면 가로 스크롤이 생기면서 오른쪽으로 밀리는 현상이 발생한다.
div를 만들었을 때 왜 왼쪽에서부터 생기는걸까?
컨텐츠를 넣기 전에 우린 가운데 정렬을 하고 싶을 것이다.
블록요소의 크기를 줄여도 다른 블록요소가 옆에 온다거나, 블록이 옆으로 움직이거나 하지 않는다.
(block level element는 한 줄을 차지한다.)
그 이유는 밑에 그림과 같다.
div의 크기를 400px로 지정했을 시
그럼 이 상황에서 가운데로 정렬하기 위해서 우리는 margin: auto;를 사용할 것이다.
margin: auto;는 사용 가능한 공간을 자동으로 취해주겠다는 의미가 되어 width 값이 정해져있는 블록요소를 가운데로 정렬시켜준다.
이렇게 레이아웃이 완성이 되면 그 다음 HTML 컨텐츠를 추가하는 것이다.
❓ 왜 height는 정하지 않나요?
고정값을 정해버리면 다른 내용이 추가되어 그 값을 넘어버렸을 때 다른 대처를 해야한다. 그렇기 때문에 height는 컨텐츠에 따라 자동적으로 늘어날 수 있는 auto 상태가 가장 좋다.
디자이너가 높이나 이미지를 고정하여 주는 경우엔 flex와 같은 다른 지식이 필요하다.
위와 같은 이유로 HTML에 컨텐츠를 추가하고 나면 높이는 자동적으로 잡혀있게 되는 것이다.
🧑🏫 : 실무에 들어가면 reset.css와 같은 초기화를 하겠지만 수련하는 과정에선 직접 해보세요.
강사님께선 공부하는 시기에는 직접 기본 스타일을 빼보면서 속성들에 대해 더 알아보는 것이 좋다고 말씀하셨다. (😭...)
과연 그게 정렬된걸까?
기본 스타일까지 초기화를 시켰다면 이미지나 텍스트 요소들을 정렬하고 싶을 것이다.
이때 우리는 text-align 속성을 쓰게된다. (인라인 요소 정렬, 상속 ⭕)
여기서 던져진 멘붕
🧑🏫 : 여기서 정렬된 것은 h1이 아니다.
?? 가운데에 있는데요??
저 말의 해석은 다음과 같았다.
h1은 블록 요소이기 때문에 center로 정렬했어도 h1이 center가 되는 것이 아니다.
h1의 텍스트(inline 요소)가 정렬 되는 것이다.
이를 확인하기 위해 box-shadow을 써서 확인 하였더니 정말 h1 한줄이 다 차지되어 있는 상태에서 글자들만 가운데에 와있었던 것이다!!! (진짜 짱 신기했음!!!!!!!!!!!)
상속은 절대 추상적이지 않다!
이후 글자색들을 보며 상속에 대한 이야기가 진행되었다.
상속의 핵심은 상속이 지원되는 프로퍼티는 "지정" 되어 있다는 점이다.
우리가 width: 100%을 이야기할 때 width 컨텐츠 영역을 가지고 오는 것이라는 표현을 썼는데 왜 상속이 아니라 가지고 오는 것이라 하였을까?
👉 일단 width와 height는 상속이 되지 않는다.
이러한 상속이 원래 되지 않는 속성을 inherit 속성 값을 써서 강제로 상속 시킬 때 상속이라 하는 것이다.
그렇기 때문에 무엇이 상속인지 아닌지는 구별할 필요가 있다.
강사님이 답변 못했던 질문!
❓ 그럼 100%랑 상속이 다른 점이 무엇인가요?
❓ 부모가 % 지정되있으면 inherit와 %로 준 것이 달라질 수 있나요?
ㄹㅇ 궁금함 담 시간이 기다려진다 ㅎ
이렇게 큰 덩어리들이 정리되고 나면 다시 마크업을 추가하고 그에 맞는 작은 스타일들을 추가하는 과정을 반복하는 것이다.
유지보수를 위한 알차게 클래스 쓰기
일단 같은 템플릿이면 같은 클래스를 쓰는게 맞다!
사진 하나 바뀐다고 클래스명에 숫자 붙여서 늘려가는 모습을 보여주셨는데 정말,,, 많은 시간들이 스쳐지나갔다^^,,,,
<div class="section skills"> </div>.section { ... }
.skills { ... }겹치는 템플릿을 section에 지정하고 달라지는 부분을 skills에 넣어서 계속 덮어씌우면서 재활용을 하게 하는 방법을 써야 함을 알려주셨다. → 유지보수에도 용이하고 보기에도 좋음!
이때 덮어씌워야 하는 것은 주 클래스 밑에 작성되어야 한다는 점!!
👉 후자 우선 순위, cascading의 핵심
이 내용 외에도 셀렉터, 선택자 우선 순위(Specificity) 등의 이야기도 해주셨다.
Specificity에선 "구체적일수록 CSS가 선택해준다" 라는 점을 짚고 넘어갔다.
사실 중요한 이야기 되게 많이하고 엄청 좋은 강의였는데 나의 정리가 부족한게 아닐까 싶다😭
그리궁,,, CSS 어떻게 해야 깔끔하게 쓰나요 물어봤다가,,, 팩폭 당하고,,, 괜찮아요ㅡ,,, 알면서 모른 척하고 있었던거니까,,,,
강사님께선 시행착오를 겪고 있는 과정이기 때문에 속성들을 사용해보면서
스스로에게 질문을 할 것
이라는 말씀을 해주셨다. 여러의미로 해석될테지만 나에게는 확신을 가질 수 있을 때까지 공부를 하라고 들렸다. 그게 나에겐 좋은 방향으로 해석될 수 있을 것 같았기 때문이다. 이제 과제하러 가야징
