포털에서 제공하는 블로그를 코딩 걱정 없이 편하게 사용했다.
코딩 걱정이 없다는 의미는 내가 직접 수정하기 어렵거나 불가능하다는 의미다.
내가 원하는 스타일로 자유롭게 블로그나 웹사이트를 만들고 싶다면 배워야 한다.
그래서 직접 블로그를 만들고 운영하고 싶은데 어떻게 해야 할까?
블로그나 홈페이지를 예쁘게 잘 꾸미고 만들고 싶은데 무엇을 배워야 하나?
바로 웹페이지를 구성해 주는 html과 꾸며주는 CSS를 배워야 한다.
HTML이란?
Hyper Text Markup Language의 약자라고 한다.
쉽게 설명하면 우리가 엣지, 크롬 등에 웹사이트를 만들기 위한 약속된 언어다.
여기에는 이미지, 여기는 제목, 여기는 원하는 값 등을 배치하기 위한 설계도라고 생각하면 된다.
궁금하니 직접 보자.
컴퓨터에서 엣지나 크롬 등을 실행하고 주소창에 google.com을 넣자.
크롬에서 google 사이트에 접속한 화면이다.
가운데 google이미지가 있고 그 아래 검색어를 넣을 수 있는 입력칸이 있다.
그 아래는 google 검색과 I'm Feeling Lucky 버튼 2개가 있다.
이제 어떻게 만들었는지 html을 확인해 보자.
키보드 우측 상단에 보면 F12키가 있다.
누르자.
우측에 갑자기 코드가 있는 창이 나타났다.
크롬은 한 번 확인차 물어보는 창이 뜬다.
개발자 도구를 여시겠습니까?라고 묻는다.
우리가 F12로 여는 창이 개발자 도구인 것이다.
열기 DevTools를 클릭하면 같은 화면이 나온다.
빨간색 화살표의 Elements가 현재 페이지의 html 소스(빨간색 점선)를 보여준다.
HTML 수정하기.
재미있는 테스트를 해보자.
위에 소스를 수정하면 실제 화면의 정보도 바뀌는지 실험해 볼 것이다.
왼쪽 위 빨간 점선 동그라미에 있는 아이콘을 클릭한다.
그리고 왼쪽의 google.com 화면의 검색어 입력창 아래 Google 검색 버튼을 클릭한다.
1번을 클릭하고 2번을 클릭하면 위 빨간 점선 박스처럼 표시된다.
2번을 클릭하면 3번 영역이 회색으로 2번을 클릭한 부분의 html 영역이 표시된다.
3번 영역을 확대해 봤다.
value="Google 검색"이라고 되어 있는데 값을 바꿔보겠다.
"Google 검색"을 더블클릭하면 수정할 수 있게 된다.
Google을 구글로 바꿔보겠다.
그리고 엔터를 치면 끝.
왼쪽 구글 페이지의 버튼이 변경되었음을 알 수 있다.
혹시 내가 구글 사이트를 바꾼것인가?
걱정 안 해도 된다.
내가 보고 있는 브라우저에서만 그렇게 보일 뿐이다.
그런데 우리가 생각할 부분이 있다.
로고와 입력창 그리고 버튼 2개뿐인데 html 소스를 보면 복잡해 보인다.
html은 브라우저와 소통하는 언어다.
그 규칙과 사용법을 안다면 우리도 더 복잡한 화면을 만들 수 있다.
html에는 다양한 태그가 있다.
< > 사이에 태그명을 넣으면 된다.
<div>, <img>, </br> 등 각각 역할이 있다.
샘플 화면을 구성하고 html 태그를 사용해서 만드는 방법을 앞으로 공부해 보자.
어디서 html을 코딩하면 좋을까?
사실 html은 브라우저만 있으면 쉽게 코딩할 수 있다.
개발 환경을 건너뛰고 html 테스트만 해보고 싶다면 2가지 방법 중 하나를 사용하자.
브라우저 사용.
1. 브라우저에서 F12를 눌러 개발자 도구를 열고 주소창에 "about:blank"를 입력한다.
2. <body></body> 사이에 마우스 우클릭을 한다.
3. Edit as HTML을 선택하면 수정할 수 있는 상태로 변경된다.
4. 원하는 값을 넣는다. (샘플로 "<h1>나의 첫 페이지</h1>"를 입력)
5. 엔터를 치면 왼쪽 화면에 큰 글씨로 입력한 값이 나온다.
메모장 사용.
1. 메모장을 연다.
2. 아래와 같이 기본 html을 입력한다.
3. index.html로 저장한다.
4. index.html을 더블 클릭하거나 브라우저에 끌어다 놓는다.
이상 간단하게 html을 스터디할 수 있는 환경을 알아봤다.
다음 포스팅은 다양한 html 태그를 사용해서 원하는 화면을 구성해 보겠다.
끝.
