[WebDevCurriculum] CSS

개요

어플리케이션을 구성하는 CSS에 대해 이해한다.

Checklist

• CSS란 무엇인가요?
  → 웹페이지를 "꾸미기 위해" 관련 기능과 도구를 제공하는 언어

• CSS 적용방법
  → inline : element에 style을 직접 기술하는 방법
  → 외부 : CSS파일을 별도로 분리하여 link하는 방법
  (※ 기본적으로 코드는 기능과 유형에 따라 분리하면 유지보수가 간편해진다)
  → 내부(style tag) : style tag안에서 HTML 및 CSS구성을 기술하는 방법
  (※ inline에 비해 상대적으로 경제적인 방식이지만, 한 script안에서 기술한다는 점에서 유지보수가 어려워진다)

• margin, flex, background, weight, size 등 tag와 내부속성에 맞는 CSS 문법을 적용한다.

• HTML tag에 CSS를 적용하는 방식(외부 .css file를 활용)이 주로 활용되기 때문에, HTML(or XML) tag는 div, button 등으로 simple하게 구성하는 것이 좋다.

기본개념

• CSS, Cascading Style Sheets
  → Cascading 은 폭포, 상속의 뜻을 가지고 있다.
  → Style Sheets가 상속된다는 개념으로, 상위 속성의 Style이 하위 속성으로 폭포처럼 퍼진다(영향을 준다)라는 점에서 착안하였다.
  → 그러나 tag 및 구성방식에 따라 Style을 모든 상위 속성의 Style이 하위 속성에 영향을 주진 않는다.

styled-components

• 실제 현업에서는 CSS보다 styled-components를 많이 사용한다.
  → styled-component를 이용하여 별도의 CSS file import 없이 내부적인 logic으로 구현한다.
  → 기존 CSS가 별도의 CSS file을 통해 구현하는 것과는 달리, tag 내부에서 style = {{}} 문법을 활용하여 CSS를 바로 적용한다.

정리

0. why

• 웹 사이트를 구현하기 위한 기본 개념인 CSS에 대해 이해한다.

1. what

• CSS란 무엇이며, 어떤 방식으로 활용해야 하는지 숙지한다.
• CSS를 적용할 수 있는 가장 대표적인 방식인 styled-components 등을 학습한다.

2. how

• 일단 HTML을 통해 본문의 head와 body 구획을 분할한다.
• 분할한 구획과 영역에 따라 CSS를 적용하며, 실무에서는 styled-components을 많이 활용하고 있다.