쉽게 따라해보는 HTML & CSS 기초 프로젝트 — 카카오톡 프로필 만들기
웹을 처음 공부하는 비전공자들도 늘어나고 있고, 직장인과 성인들도 굳이 웹이 아니더라도 프로그래밍에 대한 교육 수요가 늘어나고 있다.
다들 공부는 해보고 싶은데, 사실 웹 프로그래밍 관련해서 교육 자료를 찾아보면, HTML이란 무엇인가? 라던지 CSS는 무엇인가? 등을 알아보면서 시작하게 될 것이고 (실제로 나도 그랬다) 정말 지루한 각 각의 문법 설명 등을 늘어놓는 글을 대다수 목격하게 될 것이다.
“아니 누가 문법 알고싶대? 그 문법을 사용해서 뭘 만들 수 있는지 알고 싶댔지”
이런 종류의 끌탕을 하신 분들이 상당히 있을 것이라 생각한다. 그래서 사실 전혀 어려운 내용은 들어가지 않지만, 간단하게 연습해 볼 수 있는 자료를 제작해보게 되었고, 많은 양의 CSS가 전혀 포함되지 않는, 카카오톡 프로필 제작하기를 만들어보는 글을 제작하게 되었다.
우선 이 글은 HTML, CSS 기본적인 문법 내용을 아주 조금이나마 이해하고 있고, 모르는 내용을 찾아보면서 작성해볼 수 있는 독자들을 대상으로 제작되었다는 것을 감안하고 읽어주면 감사하겠다.
만들게 될 카카오톡 프로필 예시는 아래와 같다.
좀 상당히 옛날 버전의 카카오톡으로 보일 것이다. 하지만 카카오톡 버전 업그레이드 UI를 뽑는 것은 아니지 않은가?
무엇보다 HTML, CSS 튜토리얼을 연습해본다는 느낌으로 접근하기 때문에 최근 UI와 다르다고 오해하지 마시길..
우선 폴더를 위의 이미지와 같이 만들어 보자. 최상위 폴더의 이름은 kakao로 만들었고, 안에 img, css 폴더를 별도로 구성했다. 그리고 코드를 작성할 파일 2개를 새롭게 구성하자. profile.html, profile.css라는 파일을 만들자.
그리고 관련 이미지 파일들은 내 깃허브 코드 저장소에 있으니, 다운로드 받아서 사용하면 되겠다.
자, 한 번 시작해보자!
먼저 전반적인 코드 구성은 다음과 같다.
먼저 profile.html 최상단에 다음과 같은 9줄을 따라 쳐보자. 우리가 작성할 내용과는 직접적으로 상관 없어 보이지만, 위의 9줄이 없으면 코드를 웹 브라우저(크롬, 파이어폭스, 오페라 등)가 이해하지 못할 것이다.
<!DOCTYPE html>은 이 파일이 HTML로 웹브라우저에서 읽어들이기 위해 선언한 식이라 이해하면 된다.
그리고 <html lang=”en”>은 html 내에서 읽어들일 값은 영어로 인지한다는 형태로 이해하면 된다.
meta 태그 등을 초심자가 자세히 이해할 필요는 전혀 없고, 여기서 지켜볼 부분은 <title>, <link> tag 두 부분이다. 해당 태그에 html 페이지 제목을 넣을 수 있고 (title태그), link 태그를 사용하면 우리가 이제부터 디자인을 위해 사용할 css라는 코드를 불러와 사용할 수 있다.
(<img>태그 내에 class = photo1이라는 클래스 내에 src = “”라는 형태로 값이 비어 있다. 이 안에 이 링크를 넣어주자)
그리고 하단에 <body>라는 태그로 내용이 추가된다. 이 body 태그는 그 의미처럼 내용물을 담은 몸이라 이해하면된다. 모든 html 관련 사용자에게 보여주고 싶은 값들은 여기서 작성이 된다. 실제로 우리가 크롬 등 웹브라우저에서 눈으로 볼 수 있는 모든 화면 내용들은 이 body 태그의 내용물들이라 생각하면 된다.
나는 이 body 태그 안에 container라는 값을 작성했다. 그리고 그 태그의 이름은 div라는 태그다. 값(container)을 통해 의미를 유추할 수 있듯, 컨테이너는 모든 내용물들을 담아서 처리하는 역할을 한다.
그리고 컨테이너 안에 pink-box, img, white-box라는 값의 3개의 큰 영역으로 구분되어 있고, 그 영역 안에서 각 각의 영역으로 내용물이 분리되어 있다. (예를 들어, pink-box내에는 line, profile-image라는 영역의 형태로 분리가 되어 있는 것을 볼 수 있다.)
그렇다. 내용물을 이해하려고 하는 시도보다, 먼저 영역이라는 관점에서 공간이 분리된다라는 관점으로 접근하면 이해하기가 쉽다.
우리가 마주하는 모든 웹 화면들은 무수한 영역 분리의 작업으로 이해하면 된다. 이 영역을 구분하는데는 가장 많이 사용되는 것이 <div><div />라는 형태로 분리되며 division이라는 이름의 약자로 ‘분리’라고 하는 형태로 우리의 눈에 보여진다.
때문에 웹을 디자인하는 과정은 다시 말해, 어떤 영역에 무슨 내용을 넣을지를 고민해보는 과정이자, 각 각의 공간에 텍스트, 이미지, 영상, 소리 등 다양한 컨텐츠를 집어넣는 과정이 될 것이다.
그리고 해당 작업을 하는데 있어서 위의 코드를 모두 다 한꺼번에 따라치지 말자. 위의 코드는 한 번에 따라치라고 업로드한 것이 아니다. 아래의 코드를 보면서 내용을 이어가면,
위에서 언급된 class =”클래스 내용” 형태로 된 값이 css에서 해당하는 클래스로 이름을 그대로 받아오고, 색 변환(color, background-color), 영역 크기 변환(width, height), 여백 주기(margin, padding), 영역 구분 선 만들기 (border), 영역 지정의 방향을 설정하기 (display: flex, justify-content, align-content) 등으로 지정되는 것들을 볼 수 있다.
위 내용들을 타이핑할 때는 화면을 2개로 분할해서, 한쪽에는 내 블로그, 다른 한쪽에는 코드 에디터를 키고 작성해보자.
그리고 작성하는 순서는, container(html클래스 지정), 그리고 csss내에서 container 클래스 영역에 적용할 값을 작성, 이런 순서로 작성해야 영역이 디자인 되는 순서를 볼 수 있다.
부탁이니 HTML 전부 다~ 쓰고 CSS 전부 다 작성하는 형태의 작업은 하지 말았으면 좋겠다. 내가 작성한 구형 카카오톡을 의미없이 따라치는 것만큼 도움이 안되는 일이 없다.
요즘에 성인들을 대상으로 프로그래밍 기초 교육을 시키고 있는데, 새로운 것을 만드는 것을 과제로 진행해주기보다, 오늘 수업 내용을 3번 정도 강의안을 보면서 따라치게 하는 것이 조금 더 과제의 효과가 있는 것 같다.
이 강의안을 3번 정도 따라 치면, 구조 이해 -> 내용 이해 -> CSS의 사용법 이해로 발전해 또 새로운 것을 도전해 볼 수 있지 않을까?
시작이 반이다. 이 기초 실습을 다 따라치고 새로운 것을 더 시도해보고 싶다면, 댓글을 남겨주시길… 새로운 프로젝트에 대해 시도해보고 게시글을 업로드해보겠다.
Ryan Kim
데이터 엔지니어로 나아가는 웹 개발자
Reference
멋쟁이 사자처럼 고려대학교
