(특강:종찬님) 기본중에 기본인 CSS 지식✨
📚 What is TIL?
오늘 배운 내용의 핵심
✅ CSS 초기값 initial value 이해하기
✅ CSS 상속 inheritance 이해하기
✅ User-agent stylesheet 이해하기
✅ 캐스케이드 이해하기, CSS Specificity
✅ CSS 박스모델 5가지 이해하기
✅ CSS 셀렉터의 목적 제대로 이해하기
✅ 클래스 셀렉터의 올바른 쓰임새
작업순서
HTML/CSS 만지는 일을 요리라고 표현한다면…
우선 요리를 하려면 손질된 재료가 필요하다
무턱대고 재료를 모두 꺼내 어지럽혀놓으면 손질이 힘들다는 점!
맛좋은 요리를 하려면 재료 손질의 우선순위부터 정해야한다
1. 컨텐츠에 집중말고 전체 웹사이트가 몇개의 덩어리로 구성되어있는지 보자
🔎 화면을 구성하는 요소는 header | contents | footer로 나뉠 수 있다
2. 덩어리에 해당하는 마크업만 최소한으로 가져가고 그 이상의 마크업을 멈추자
🔎 css style reset 과 margin: 0 auto 와 같이 layout을 해준다 && height 값을 건드는 것은 자제하자
* {
margin: 0;
padding: 0;
}
⚠️ 위와 같은 방법으로 reset 하는 것은 자제하자
3. 큰 덩어리 내부의 덩어리가 어떻게 공간을 차지하고 있는지 보자
🔎 경계면이 더 정확하게 구분하기 위해 background-color 또는 box-shadow를 주자 box-sizing(x)
4-1. 각각의 요소에게 세팅되어있는 User-agent stylesheet (!== initial value) 가 노출 되는 것을 인지하자
🔎 User-agent stylesheet는 브라우저가 각각의 요소에게 지정해놓은 스타일리스트로 브라우저 마다 제공하는 스타일이 다르다
4-2. 기본으로 세팅되어있는 default값을 부분적으로 초기화 한다
🔎 margin: initial 과 같이 브라우저의 margin을 initial 이라는 키워드로 초기화 해줄 수 있다 (===margin 초기화)
손질 끝..!
initial value(초기값)
-
모든 property에는 각각의 initial value가 있다
ex-1) width property에는 auto라는 initial value가 이미 세팅되어있다
ex-2) background-color property의 초기값은 transparent이다
ex-3) margin property의 초기값은 0이다⚠️ User-agent stylesheet 개념과 헷갈리지 말자
width: auto
- 부모가 제공해주는 콘텐츠 영역만큼 너비를 설정한다
- width property 값이 고정으로 들어가면 사용가능한 크기에서 값만큼만 들어간다
width: 100%
- 콘텐츠에 관계 없이 요소가 부모 컨테이너의 너비와 동일하게 설정한다
⚠️ width: auto 는콘텐츠를 표시하는 데 필요한 너비만큼만 차지하지만
⚠️ width:100% 부모 컨테이너 내에서 사용 가능한 전체 수평 공간을 채우도록 늘어나는 차이점이 있다
See the Pen Untitled by tjqehd23 (@tjqehd23) on CodePen.
✔️ width: auto 와 width:100% 각각 차지한 공간이 다른 것을 확인할 수 있다
height의 고려성
- 부모요소의 컨텐츠영역 height값 총합을 나타낸다
- 컨텐츠의 양이 많아지면 알아서 높이가 자동 조절될수 있게끔 구성해야한다
- 따라서, 섣불리 height에 고정값이 들어가면 안된다
어떻게 auto라는 값이 지정될까?
-
브라우저가 계산해주기 때문이다
💡 그렇다면, 브라우저가 어떻게 계산을 해낼까?
🔎 해당요소의 직계부모가 제공해주는 콘텐츠영역의 containing block (부모의 Content 영역) 크기 만큼 가득차게끔 한다
margin: auto 했을 때 작동원리
- block-level element를 가운데로 정렬하는 걸 말한다
- 사용가능한 공간을 margin값으로 자동계산해준다
- block-level element의 사용가능한 공간이 반으로 쪼개져 요소의 왼쪽 오론쪽으로 이동되어 여백화된다
See the Pen Untitled by tjqehd23 (@tjqehd23) on CodePen.
이해를 위해 연습삼아 만들어봤다 ㅎㅎ
margin병합현상
- block-level element끼리만 발생한다
- 인접해있는 상하단 면만 겹친다, 좌우가 아니다
- 마진병합은 의도된 현상이다
block-level element의 특성
- 사용가능한 공간의 크기까지 모두 차지한다
div가 이에 해당한다
text-align
- inline element이다
- contents와 footer와 같은 컨테이너는 영향을 받지 않는다
- inline 콘텐츠인 text와 image만 영향을 받는다
text-align: center
- 요소 안에 있는 모든 inline element들이 가운데로 올 수 있게 해준다
💡 text-align: center 로 block-level element(h1)가 가운데 정렬되었다고 할 수 있을까?
⚠️ 아니다 block-level element의 내부 inline들이 정렬된 것이다
⚠️ 따라서 block-level element(h1)는 text-align: center로 인해서 가운데로 정렬이 된적이 없다고 표현해야 맞다
상속
- 상속이 지원이되는 property(===자식에게 전파가되는 property)가 있다
- 상속이 지원되는 property는 초기값이 부모의 값이라고 볼 수 있다
강제 상속
- 상속을 억지로 하고싶을 때 inheritance로 부모의 property value를 상속받을 수 있다
* {…}
- Universal Selector
- 전체 선택자
- 모든 타입을 선택하는 개념이다
.header ✔️ h1 {…}
- descendant combinator
- 하위셀렉터 | 자손셀렉터라고 부르기도 한다
- 선택을 더 섬세하게하기위해, 명시적인 관리를 위해 사용한다
Cascade
- Cascading Style Sheet
- 페이지 요소에 적용되는 속성을 결정하는 알고리즘이다
- 위에서 아래로 흐르는… 폭포식으로 동작한다
- 중요도, 명시도, 코드 순서에 따라 정해진다
!important>inline>id>class>element
🔗 TIP
부모도 %로 지정돼있으면 inherit과 %로 준것이 달라질 수 있을까?
See the Pen Untitled by tjqehd23 (@tjqehd23) on CodePen.
✔️ 위와 같이 부모가 %로 지정되어 있을 경우 inherit은 부모의 width 프로퍼티 값을 100%로 가져오는 것을 확인 할 수 있었다..!
div는 왜 왼쪽에서 시작하는가?
- direction property로인해 왼쪽에서 시작 되는것이다
- 다른 문화권(아랍)은 오른쪽으로 시작이 되는데, 이처럼 문화권에 따라 다를 수 있다
💡 기본적으로 우리가 모르는 property가 존재하고 그것의 초기값이 적용되어있다는 것을 인지해야 한다
reset css을 그대로 써도 되는가?
- 누군가의 결과물을 그대로 쓴다는 것은 배울점이 없다
- 모든 개발에 통용되는 얘기로, 수련하는 입장에서 하나씩 reset 해나가기를 추천 받았다
css 쓰다보면 너무 지저분해지는데 깔끔하게 쓰는 방법이 있을까?
- 시도를 먼저해보고 여러과정을 통해 깨달음을 얻을때 까지 반복하며 지저분해지는게 맞다
- 작동이 되는데 왜 되는지 모르고 넘어갈 때가 가장 큰일이다
오히려 모르는 걸 그대로 두었다가 다시 쓰고 그게 반복되면 그것이야말로 지저분해지는 것이다
✨ Today is …
선배님의 이야기
프론트엔드 3기를 수료하신 선배님인 지형님의 이야기를 듣는 시간이 있었다.
과연 전 기수 선배님들은 어떤 동기로 멋사에 지원하셨는지,
수료하기까지 어떤 마음으로 지내셨는지 속으로 정말 궁금했는데 🤔
지형님이 모두 해소시켜주셨다 🌊
덕분에 자신감도 생겼고 더 적극적으로 나설 용기가 생긴 것 같다 🙌
가장 기억에 남는 부분이 있는데
지형님은 프론트엔드 스쿨에서 못다해낸 아쉬움이 많다고 하셨다.
커리큘럼을 모두 소화하지 못한 아쉬움…
과정 중에 미리미리 이력서를 준비하지 못했던 아쉬움…
더 깊이 있게 JS를 공부하지 못했던 아쉬움…
다양하게 스터디 활동을 하지 못했던 아쉬움…
작은 토이프로젝트라도 부딪히면서 성장하지 못했던 아쉬움…
내가 공부했던 것들을 잘 정리해서 기술 블로그를 하지 못했던 아쉬움…
많은 성장을 이루어내셨음에도 그때그때 이루지 못한 아쉬움이 남는다는 것은
그만큼 내가 성장할 수 있는 방법은 정말 많다는 얘기라고 생각한다.
아쉽지 않도록 하루하루 꾸준히 달려야겠다.
💡 내가 지금 어떻게 공부를 해내가야하는지 반복해서 생각하고 실천하자!
종찬님의 특강🌟
CSS 장인 종찬님의 특강이 이어서 있었다.
난 웹디자인에 관심도 있고 내가 만들어낼 수 없을 법한..
고퀄의 웹페이지를 구경하는 취미가 있어서 정말 기대가됐었다 😎
그 동안 CSS에 대해 그냥저냥 알고 넘어갔던 부분들이 많았고
구현을 위해 그때 그때 MDN으로 대충 찾아보기만 했었지,
사실 이게 왜 되는거지..? 하고 생각했던 적이 얼마나 있었을까…
강의를 듣고나니 종찬님이 많은 것을 깨우쳐주신 것 같다 🔆
그리고, 이게 왜 되는지 궁금해하지 않고 넘어갔던 순간들이 기억나면서 회의감이 몰려왔다 🌊
어떤 식으로 개념에 대한 궁금증을 가져야하는지 알 수 있었던 유익한 시간… 정말 감사드립니다 👏
다음 종찬님 특강에서는 어디 한 번 날카로운 질문을..!
댓글남기기