작성 - 2020.8.10
HTML, CSS와 함께 3주차를 시작했다. 기초를 배우고 내일부터는 트위터 클론코딩에 들어간다. 꽤나 빠른 진도로 진행하고 있기 때문에 이번주도 지난주 이상으로 벅찬 한 주가 될 것 같다.
- HTML, CSS, JS 삼총사
셋이 모여 프론트엔드 삼총사
우리가 ‘홈페이지'라고 부르는 것을 만들기 위해서는 두 가지 작업이 필요하다. 하나는 ‘백엔드(Backend) 작업 즉 서버를 구축하는 것과, 사람의 눈에 보여지는 전면부 즉 ‘프론트 엔드(Frontend)’ 제작이 필요하다.
보여지는 화면을 제작하는 프론트엔드와 백엔드…
그 중 첫주부터 배웠던 ‘Java script’와 오늘 시작한 ‘HTML’, 그리고 ‘CSS’는 소위 프론트 엔드를 구축하기 위한 삼대장이다.
HTML, CSS와 Java Script의 관계
HTML은 웹의 뼈대를 만들고, CSS가 살을 만든다면 Java Script는 동적인 부분을 담당한다. 모던 표준 웹은 세가지의 역할을 구분하고, 각자 역할에 따라 기능을 구분하여 웹을 제작할 것을 권장하고 있다.
- HTML
HTML은 Mark up 언어이다.
웹의 뼈대를 이루는 HTML은 ‘Hyper Text Markup Language’의 약자로 웹의 구조를 그려 각 부분이 어떤 역할을 담당하는지 표시해주는 역할을 한다.
CSS 없는 HTML은 앙꼬 없는 찐빵이다.
HTML은 말 그대로 Markup해주는 역할을 한다. 어떤 페이지를 만들지에 대한 기획을 세우고, 설계도를 작성한다. 그리고는 설계도에 각 기관에 대한 설명을 기록한다.
“자, 여기부터 여기까지 집의 입구고
, 그 다음으로 여기는 집 안이야, 집 안에서 이곳은 주방이고, 그리고 맞다! 여기는 주방 안에서 식탁인걸 잊으면 안돼지!철저하게 계획된 설계도가 있어야 문제 없이 집이 완성되는 것 처럼, 웹 페이지도 HTML 문서에 의해 잘 Mark-up 되었느냐에 따라 완성도가 달라진다고 할 수 있다.
- CSS
HTML이 뼈대를 세우는 일이라면, CSS는 ‘Cascading Style Sheets’의 약자로, 앙상한 뼈에 살을 붙이는 작업이다.
일반적인 화장법도, 이목구비가 뚜렷한(…)사람이 화장하는데 수월한 것 처럼, CSS도 마찬가지다. HTML에서 소위 Mark up이 잘되어있고, Selector(ID와 Class)가 명확하게 작성되어있으면, 그만큼 살을 붙이는데 쉽고 다양한 작업을 할 수 있다.
위의 HTML 문서가 CSS 작업을 거치면 이렇게 변한다.
CSS 작업을 거치면 비로소 우리가 알고있는 웹의 정적인 모습이 완료된다. 이곳에 자바스크립트 작업을 마치면 우리가 아는, 버튼을 누르면 페이지가 전환되고, 로그인 정보를 불러오거나 할 수 있는 웹 페이지가 완성된다.
자바스크립트도 눈에 보이는 작업이지만 그래도 html이나 css는 눈으로 변화를 직접적으로 확인할 수 있어 조금 더 만들어가는 재미가 있다. 이번 주, 트위터 클론 코딩을 거치면 어떤 결과물을 얻게 될지 두근거린다.
오늘은 HTML과 CSS를 시작한 기념으로 스티커를 붙였다.
