생활코딩 웹 제작 스터디 [WEB2 - CSS] - 속성을 스스로 알아내는 법

생활코딩이라는 유용한 사이트를 통해 웹 만들기 스터디를 시작했다. 현재 정보처리기사 실기, 파이썬, 웹 이렇게 세 가지의 방향으로 공부를 진행하고 있다. 일상에서 언급했던 것과 같이 내 시간표는 그렇게 움직인다. 앞으로 이 카테고리에서는 공부했던 웹의 내용을 잊지 않고 기억하기 위해 기록할 것이다.

---

 

CSS를 통해 웹을 디자인하다 보면 더 많은 요구사항이 발생할 수 있다. 예를 들면 제목 글자를 더욱 크게 만든다던가, 혹은 글자의 위치를 왼쪽(default 값)이 아닌 중앙 혹은 오른쪽으로 변경하고 싶을 수 있다. 이런 경우엔 어떻게 코드를 찾아보아야 하는 것일까?

 

답은 구글링이다. 역시 코딩은 구글링이 최고다. 이 강의에서는 구글링을 통해 웹 디자인에서 원하는 요소를 찾아내는 방법을 설명하고 있다. 예를 들면, "나는 제목의 글씨를 좀 더 크게 하고 싶다." 라는 needs가 있다. 

전체 코드 중 일부

위 코드에서 설정한 제목은 2개가 있다. 바로 <h1>,<h2> 하지만 나는 h1을 바꾸고 싶은 것이기 때문에 아래 사진과 같이 <style> CSS에 h1 선택자(selector)를 추가했다. 아래 사진은 완성된 코드이지만, font-size라는 명령어를 알기 위해서 

Google에 "text size property in css"라고 검색을 하였다. 아래와 같이 text가 아닌 font-size라는 명령어를 사용한다는 것을 알 수가 있었다. 그 밑에 있는 코드인 text-align: center는 text position property in css 라고 검색을 하였다. 검색 결과는 text-position이 아니라 text-align이라는 명령어를 사용한다는 점을 인지할 수 있었다. 

The result of searching about "text size property in css" on Google

가운데 정렬 및 폰트 사이즈를 확대한 제목의 웹 사이트의 모습

이처럼, 필요한 needs가 생기면 즉각 검색하는 것 즉, 구글링을 습관화하는 것이 중요하다는 것을 깨달았다.