#011. 천천히, 단계별로 생각하며 CSS 작성하기

😎 오늘의 잘한점

액션

컨디션 관리를 위해 과감히 오늘의 미라클 모닝 스터디는 쉬어가기!

칭찬

무리해서 진행하지 않으니까 오늘 수업 시간에는 집중을 더 잘할 수 있었다.

야간 특강까지 이어져서 집중을 꽤 오래 해야했는데 적절하게 컨디션을 관리해주는 것도 때로는 필요한 것 같다.

짧고 굵게 달리는 것에 빠져서 방향성을 잃지 말자!!

---

✔️ 오늘의 개선점

문제

스타일을 적용할 때 어떤 코드를 추가적으로 적용해야하는지, 왜 문제가 되는지 파악하기 어려운 것

원인

코드를 작성하면서 구조를 파악하는 습관, 레이아웃을 적용할 때 습관적으로 flex가 튀어나오려는 것 때문에

레이아웃이 머릿속에 정리가 되지 않는 것 같다.

액션 플랜

종찬님의 특강 내용을 다시 한번 정리하면서 천천히 단계별로 코드를 작성하는 습관을 들여야겠다.

추가적으로 작성할 때는 예상치 못한 상황에서는 어떻게 나오는지 테스트도 진행하면서 만들자.

연습하다보면, 어떤 점 때문에 적용이 안되는지 무엇이 문제가 되는지 알 수 있을 것이다.

---

💡 오늘의 배운점

배움

• media query
• 작은 단위부터 반복되는 것을 찾아 공통적인 부분은 CSS 분리해주기

[CSS 특강]

클래스명

• 컨텐츠에 종속적인 클래스 명은 좋지 않다. 일반적으로 사용되는 클래스명을 사용하자.
  ex) class="candy" class="potato" 처럼 컨텐츠에 종속적인 클래스명보다는
  class="wrapper" class="card" 와 같이 안의 컨텐츠가 변경되어도 사용이 이상이 없는 이름을 선택한다.
• 클래스 방법론에는 BEM, OOCSS, SMACSS등이 있다.

클래스 방법론

• BEM
  • : Block Element Modifier
  • [Block]__Element--Modifier 의 클래스명을 사용한다.
  • ex) header__login--modifier
  • 구체적이고 명료한 클래스명으로 HTML 안에서도 읽기 쉬워야한다.
  • Block: 문단 전체에 적용된 element 또는 element를 담고 있는 컨테이너
  • Element: block 안에서 특정 기능을 수행하는 컴포넌트로, block과 __로 연결하여 클래스명을 결정한다.
  • Modifier: block 또는 element의 속성으로 외관이나 상태를 변화시킨다. -로 연결한 클래스명을 사용한다.
• OOCSS
  : Object Oriented CSS
  • CSS를 모듈 방식으로 코딩하여 중복을 최소화한다.
  • 작은 단위의 컴포넌트로 분리시켜서 결합하여 사용하는 방식이다.
  • 간결하고 명료하며 재사용성을 증가시키는 클래스 이름으로 지어 CSS 코드는 간결해지지만, HTML 코드는 살짝 복잡해질 수 있다.
• SMACSS
  • : Scalable and Modular Architecture for CSS
  • CSS에 대한 확장형 모듈식 구조
  • 파생된 CSS 셀렉터, ID 셀렉터 사용을 금지하며 의미있는 이름으로 선언한다.
  • Base / Layout / Module(Components) / State / Theme 로 분류
  • Layout: 레이아웃 관련 클래스 명을 l-로 시작한다.
  • State: 상태를 나타내는 스타일(hidden, active, ...)을 적용할 클래스 명을 is 또는 s-로 시작한다.
  • Theme: 전반적인 색상이나 이미지를 불변 스타일과 분리하여 기존 스타일을 재 선언하여 사용한다.
    적용 범위가 넓은 테마의 경우 theme- 클래스 명을 적용한다.

[CSS방법론] SMACSS, BEM, OOCSS | WIT블로그

CSS를 작성할 때 유의할 점

• 컨텐츠가 늘어나거나 추가되었을 때 유연하게 동작하는 CSS를 적용하자.
• 웹을 만들어내는 것은 포스터, 제품 디자인과는 다르게 바로 수정할 수 있다. 즉, 유지 보수가 매우 중요하다는 얘기이기 때문에 어떤 컨텐츠가 들어가도 유지가 될 수 있는 레이아웃을 짜야한다.
• 퍼플리싱, 프론트엔드를 한다는 것은 겉으로 봤을 때 똑같이 보이게 만드는 것이 아니라 여러 상황에 대비할 수 있는 설계 능력, 사고 방식을 기본 값으로 가지고 있다.
  따라서 방어적인 코딩을 할 수 있는 연습을 많이 하자.

의미

오늘 수업들에서는 단계별로 스타일을 적용하고 마크업을 진행해야한다는 것을 다시금 깨달았다.

미디어 쿼리를 적용할 때도 기본적인 레이아웃이 제대로 되어있지 않아서인지 깔끔한 코드가 나오지 않았었다...

공부에 대한 조급한 마음이 코딩을 할 때에도 드러나는 건가 싶다. 조급하게 생각하지 말자고 매번 다짐하지만

아직은 마음 속에 남아있는 조급함과 마주치게 된다. 마음에 여유를 가지고 내 자신에게 너무 채찍질을 하지 말아야겠다✊

---

🙋‍♀️ 오늘의 질문

box-shadow대신 border-bottom을 사용하는 경우

👉box-shadow는 공간을 차지하지 않기 때문에 추후에 컨텐츠가 추가될 경우 컨텐츠끼리 겹치는 경우가 생길 수 있다.

따라서 시각적으로 공간을 차지하고 있는 경우에는 box-shadow대신 border-bottom을 사용해보자.

 

background-image를 적용하려면 height값이 있어야한다.

👉 background-image는 말 그대로 배경 이미지이다. 벽이 있어야 페인트를 칠할 수 있듯이 height 값을 주어야 시각적으로 확인할 수 있다.

여기서, 빈 div에 배경 이미지를 주는 것은 좋지 않기 때문에 주의하자!

 

body는 브라우저 기본 설정값에 의해 margin: 8px을 가지고 있는데 왜 background-image를 지정하면 전체가 깔리게 될까요?

👉 실질적으로는 body에 깔린 것이 아닌 저 너머로 깔린 것이다. body와 html에 배경 이미지가 적용되었을 경우에는 body에 해당하는 부분에만 배경 이미지가 적용되는 것을 확인할 수 있다.
하지만 body에만 배경 이미지를 적용할 경우 장치적으로 배경 이미지가 화면 전체에 설정된다.

 

구성이 바뀌거나 컨텐츠가 더해졌을 때 대응하기 위해서 :nth-child보다 class를 부여하는 것이 더 좋은 방법인가요?

👉 짝수번째 요소를 선택해서 스타일 하는 것처럼 순서가 필요한 요소의 경우 nth-child를, 그렇지 않은 경우에는 클래스를 부여하는 것이 좋다.