머리글
오늘은 'TODO LIST 만들기'라는 첫 'React' 프로젝트를 수행하기 위해 필요한 최소한의 내용을 공부했다. 어제 만들어놓은 기본적인 HTML setting을 CSS로 꾸며보았고, 추가적으로 JavaScript로 'DOM'을 조작해봤다.
CSS
(1) Selector
'selector'는 '선택자'를 의미한다. HTML에서 CSS로 style을 주기 위해서는 선택자를 지정해주는 '선(先)작업'이 필요하다. CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지를 브라우저에게 알려주는 요소가 바로 'selector'인 것이다.
첫 번째 미션은 '오늘 할 일'이라는 가장 큰 제목의 글자색을 파란색으로 바꾸고 밑줄을 추가하는 것이었다. 'id' 선택자는 하나의 html 문서에 한 번만 사용할 수 있다. 오늘 할 일은 나머지 리스트의 가장 상위 카테고리이기 때문에 id라는 선택자에 "title"이라는 값을 주었다.
'id selector'는 '#'을 통해 불러낸다. 이후 '{}', '선언부'에 적용하고 싶은 내용을 작성한다. 글씨를 파란색으로 바꾸었고, 밑줄을 적용한 것을 코드를 통해 확인할 수 있다.
이어서 div태그로 이루어진 영역을 선으로 구분해주는 작업을 했다. div 태그는 크게 세 부분으로 나누어지기 때문에, class 선택자를 통해 "todo-card"라는 값을 주었다.
1px 굵기의 회색 단일 선을 border로서 선언부에 입력해줬다. class 선택자는 앞서 'id'를 '#'을 통해 불러낸 것과는 다르게 '.'을 통해 불러낸다. 지금까지 적용한 내용을 중간점검 해봤다.
contents와 테두리 내부의 공간, 그리고 div와 div간의 간격(=테두리와 테두리 사이)을 확보하는 작업도 진행했다. 전자는 padding 속성을 통해 조절하고, 후자는 margin 속성을 통해 조절한다. 코드와 결과는 다음과 같다.
이제 버튼에 마우스를 올려놓았을 때 색이 변하는 것만 적용해주면 된다.
다 끝난 줄 알았지만 학습자료에 있는 테두리는 모서리 부분이 둥글둥글했다. 바로 적용해봤다.
'border-radius'라는 속성에 5px을 부여하게 되면...
모서리가 둥글둥글...
(2) 그리드 시스템(Grid System)
'grid system'은 layout, 즉 배치를 어떻게 할 것인가에 관한 논의이다. 사이트의 방문자에 따라 최적의 형태로 contents를 전달하기 위해, grid system을 학습하는 것은 필수불가결하다.
'grid system'에 앞서 'box model'에 대한 이해가 필요하다. 'DOM'요소라면 그게 무엇이든 네모난 박스 영역을 가지게 된다. 이런 식으로...
'border'를 기준으로 바깥 영역을 'margin', 안쪽 영역을 'padding'이라고 한다. 파란색 영역은 'contents 영역'이다. box model이 무엇인지 대략적으로 살펴보고, 'flex'를 통해 layout을 두 개로 쪼개보았다.
div 태그를 두 개씩 다시 상위의 div 태그로 묶어주는 작업을 선행했다. 이후 두 개씩 묶어준 div 태그에 wrap이라는 class 선택자를 설정했고 wrap에 display: flex라는 속성을 부여한 상황이다.
(3) CSS 사칙연산
우리는 사용자가 어떤 device를 통해 사이트에 접속할 것인지 확신할 수 없다. 가령 전체를 300px로 잡아놓고 작업을 했는데, 사용자의 device가 제공하는 최대 화면 크기가 200px이라면 스크롤이 생겨 서비스를 이용하는데 불편함이 생길 수 있다. CSS 사칙연산은, CSS로 구성된 요소들이 사용자의 환경을 고려하여 연산되어야 할 때 빛을 보게 된다. 예시로 button에 CSS 사칙연산을 적용해봤다.
해당 코드를 입력했는데 솔직히 뭐가 달라진 것인지 모르겠다. 'CSS 사칙연산' part는 다시 공부해야 할 것 같다.
회고
자바스크립트로 'DOM'을 조작하는 것까지 학습했으나, CSS를 TIL로 정리하다 보니 분량이 부담돼서 여기에서 마치기로 한다. 작은 프로젝트를 위해 알맹이들만 끌어오다 보니 생각보다 소화해야 할 양이 많다. 내일은 오늘 학습한 'JS로 DOM을 조작하는 방식'을 TIL로 정리하고, 자바스크립트 기초 이론 강의를 이어서 수강하겠다! 명절 끝!
