CSS의 기본 1 - 웹 문서에 디자인 입히기

이제 책과 강의 영상을 시청하며 CSS 공부를 본격적으로 해볼 것이다. 엘리스도 아주 조금 맛보기로 학습을 진행했는데 얼마 안 되는 부분이었지만 1시간 넘게 걸렸다. 어제 내가 세운 학습 계획이 얼마나 무리한 일정이었는지 알 것 같다. 이런 식이면 주말 내내 공부를 해도 절반을 끝내기도 어려울 듯하다.

이 단원에서는 CSS를 어떻게 표현하는지 기초적인 내용부터 학습하게 될 것이다.

 

HTML은 텍스트나 이미지, 표 같은 요소를 웹 문서에 넣어 뼈대를 만드는 역할을 한다. CSS는 텍스트나 이미지, 배경의 크기나 배치 방법 등의 요소를 이용하여 디자인을 담당한다. 

---

 

 

 

 

왜 스타일을 사용할까?

스타일이란 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 가리킨다. 내용은 건드리지 않고 스타일 시트를 이용해 다자인만 바꿔도 완전히 다른 느낌의 문서로 만들 수 있다.

---

 

1. 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다

 

 

 

 

HTML 문서로 작성한 문서를 CSS로 바꾸어 이렇게 달라졌다. 내용과 디자인을 분리함으로써 필요한 부분만 수정할 수 있다. 내용은 HTML에서, 디자인은 CSS에서 작성하면 실수로 내용을 건드리는 일이 줄어든다.

---

 

 

 

 

2. 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다.

화면의 크기에 맞게 변경하는 반응형 웹 디자인으로 만든다. 크기만 줄여도 화면이 달라지는 것을 볼 수 있다.

 

PC 버전

 

 

모바일 버전

 

CSS의 미디어 쿼리를 활용하면 화면 배치를 다르게 할 수 있다.

---

 

 

 

 

DO IT 실습 - Web Developer 확장 기능 사용하기

웹 브라우저의 Web Developer라는 확장 기능을 사용하면 스타일의 개념을 쉽게 익힐 수 있다. 이 기능은 크롬과 파이어폭스 브라우저에서만 사용할 수 있다.

---

 

 

1단계 : Web Developer 확장 기능 설치하기

크롬 웹 스토어에서 이 프로그램을 추가한다.

 

---

 

 

 

2단계 : Web Developer를 사용해 사이트에서 스타일 비활성화하기

자주 방문하는 웹 사이트에 접속한다. 확장 아이콘을 클릭하여 Web Developer를 실행한다.  그리고 CSS 탭에 있는 Disable All Styles를 선택한다.

 

 

 

네이버의 뉴스 페이지를 검색해보았는데 CSS가 빠진 HTML만 활성화된 것을 볼 수 있다. 스타일이 없으니 볼품없게 느껴진다.

 

 

 

원래 사이트는 이렇게 표시된다.

---

 

 

 

주석 변경하는 단축키

HTML, CSS, 자바스크립트의 주석의 단축키가 모두 다르다. 하지만 VS Code에서 이 단축키를 사용하면 어떤 문서에서든 주석 처리할 수 있다.

---

 

 

 

학습을 마치고

여기까지 첫 장을 열어보았다. CSS가 왜 필요한지 배울 수 있었던 수업이었다. 강의와 함께 공부하니 머릿속에 쏙쏙 들어오게 된다. 그리고 다음 장에서는 스타일과 스타일 시트를 적용하여, 조금 전에 엘리스에서 학습했던 것처럼 CSS를 적용하는 3가지 방법을 배우게 될 것 같다.