개요
어플리케이션을 구성하는 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을 많이 활용하고 있다.
