레이아웃을 보는 시각

---

📚 What is TIL?

전체 웹사이트에서 덩어리를 보는 방법

• 컨텐츠를 집중 시작할 필요가 없다
• html은 문서이기 때문에 정보로써 중요한 것을 마크업하고 그 외의 데코레이션은 마크업하지 않는 것이 좋다

작업 순서에 있어서 주의점

• 전체적인 덩어리를 볼 수 있어야한다

• 마크업이 어떻게 되는지 1차적으로 중요하지는 않다 (main,section,article…)

• 마크업 보다는 클래스 명에 더 신경을 쓰자

  💡 일종의 템플릿을 만든다고 생각하자
  💡 어느 컨텐츠가 들어와도 이상하지 않게끔..!

  
  

block-level element div

• width의 initial value 는 auto 이다
• 즉, 블록레벨의 width auto란 부모가 제공해주는 콘텐츠의 크기만큼 가득찬다

💡 하지만, 가운데 정렬을 하고싶다면..? width값을 지정한다!

.wrapper의 용도

우선 시작은 wrapper로 감싸서…!!

• .wrapper 로 요소를 감싸고 감싼 요소를 의미있는 덩어리로 만들기 위해 한번 더 감싸자

💡 가운데 정렬을 해주는 역할의 layout으로 생각하자

컨텐츠 양에 대한 대비

height

• 컨텐츠에 대한 길이가 계속해서 늘어나면 각 컨텐츠에 대한 구분이 어려울 수 있다
• 때문에 문단이라는게 얼마든지 들어갈 수 있도록 설정하자

.contents p {
  margin-bottom: 1.2em 0;
}

background

• background의 width가 늘어나지 않을거라는 장담을 할 수 없다
• background-repeat: repeat-x; 을 통해 width값에 맞게 늘어나도록 할 수 있다

background-image 에게 height 이란?

• background-image는 공간을 차지하지 못한다

🔎 즉, background-image 공간에 종속적으로 깔리는 존재이기 때문에 높이 개념이 성립되지않는다

body의 margin 값이 0이 아닌데 왜 background-image는 왜 꽉 찰까?

💡 body에 background-image 를 준다고해서 body에 배경이 깔리는 것이 아니고 너머로 보내기 때문이다

• 너머로 보내기 때문이다..?

안전한, 디테일한 설계란?

• 시작적으로 보여지는 컨텐츠가 문제가 당장은 문제가 없어보인다고 하더라도
  만약 컨텐츠양이 많아지는 경우를 생각해봤을 때 강담이 가능한가?

💡 발생할 수 있는 이슈를 생각하는 연습이 필요하다
💡 즉, 변화에 얼마나 대응을 잘할수있느냐에 대한 준비가 되어야한다

그래서 퍼블리싱, 프론트엔드 개발자는

주어진 디자인을 html/css로 똑같이 만들어내는것 물론 중요한 일이다
하지만 보여지는 것만 만들어내는 작업이 아닌 제품을 만들어내는 일이다보니까
여러변수에 대응하는 안전한 설계는 기본중에 기본이다

💡 사고방식이 방어적이어야 한다
💡 주어진 디자인을 똑같이 만들어내는 것은 노력과 관찰력으로 커버 할 수 있다

클래스 작명의 방법론들

클래스명 만으로도 얻을 수 있는 장점

• 코드의 재사용성을 높일 수 있다
• 쉽게 유지보수 할 수 있다
• 클래스명으로 의미를 예측할 수 있다
• bem | oocss | smacss | tailwind 등이 있다

종찬님의 경우에는 smacss에 영향을 많이 받고
자신만의 노하우가 생겼다고 하셨다
그래서 smacss에 대해 잠깐 알아봤다..!

smacss 규칙

Scalable and Modular Architecture for CSS

• 상태와 관련된 이름은 Hidden, expend, active, hover 와 같이 지을 수 있다
  • is- 또는 s-를 붙일 수도 있다
• 레이아웃과 관련된 이름은 클래스명에 l-를 붙인다

💡 단순히 클래스명을 잘 짓는 것보다는 레이아웃과 컴포넌트로 구분짓는 것이 여러방면에서 중요하다
💡 웹페이지가 복잡해도 내가 만들어놓은 css의 카테고리에 의해서 관리가 잘 될 수 있다!

추천해주신 책 - css 설계 실전가이드 | SMA CSS

🔎 예를 들어 레이아웃에 대한 부분들은 레이아웃 담당자라는 느낌이 있어야한다
🔎 따라서, 아래와 같이 역할에 맞게 시각적인 디자인을 해주는 속성은 빼주는 것이 좋다

.l_grid {
  color: #fff;
  background-color: tomato;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

🔻

css .l_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

---

🔗 TIP

구성이 바뀌거나 컨텐츠가 더해졌을 때 대응하기 위한 :nth-child 는?

• :nth-child 는 확장성이 존재하지 않는 고정적인 짝수단위나 홀수단위로
  지정해줘야하는 요소의 경우에만 사용하는 것이 좋은 것 같다..!
• 되도록 class를 부여해서 스타일을 지정해주는 게 좋은 방법!

미디어 쿼리의 활용

• 화면의 크기나 환경에 따라 레이아웃에 동적인 변화를 주기위해선 필요한 기술이다

• 큰 화면이 아닌 아예 작은 화면의 크기(스마트폰의 크기)에서 부터 작업을 하기도 한다고 한다

💡 그렇다면 미디어 쿼리는 꼭 필수인가?

🔎 꼭 그렇지는 않다 미디어쿼리를 사용하지않고 rem em 단위로 충분히 반응형웹을 만들수 있다

img 하단의 여백을 없애는 방법

img {
  vertical-align: top;
}

textarea

• image랑 같은 inline element이다
• text의 base라인에 맞춰지다보니 공백이생길 수 있다

textarea {
  display: block;
  /* or */
  vertical-align: top;
}

✔️ image와 같은 방법으로 해결이 가능하다

창의 높이가 작아져도 요소가 잘리지 않았던 방법

• align-items 뺴고 margin:auto 를 주면 된다

disabled가 아닐때만 커서가 보이는 법

.black-btn:not(:disabled) {
  cursor: pointer;
}

화면비율값을 Javascript로 조작하는 법

• BOM API를 이용하여 화소의 밀도를 볼 수 있다
• window.devicePixelRatio 통해 반응형 동작을 만들 수 있다

---

✨ Today is …

HTML/CSS로 캐릭터 만들어보기

CSS 를 활용해서 시바를 만들어봤다 🐶
사실 애니메이션까지는 넣지 않을 계획이었지만
다들 애니메이션을 넣어서 만드셨길래 나도 모르게 승부욕이 타올랐다 🔥
만들다보니 재밌어서 오늘 야간 특강인건 잊고… 늦게까지 만지다가 오늘 더 손을 봐서 제출했다 😵

종찬님의 두 번째 야간특강🌙

저번 특강이 만족스러웠던 만큼 기대했지만 피곤했던 야간 특강,,, 결론은 재밌었다 🤤
과제에 대한 피드백시간 부터 진행이 됐고 과제 하나 하나 보시면서 피드백을 주셨는데 긴장,,
나의 이스트에그를 알아주신 종찬님의 세심함 덕분에 칭찬을 받을 수 있었다 😁
오늘도 정말 유익한 특강 감사합니다 👏

체력 관리에 대한 필요성이 조금씩 느껴지기 시작했다
특히나 잠..! 오늘 같이 야간 특강있는 날은 미리 대비하자❗