잡다한기술블로그

이전 두가지 포스팅에서 태그를 이용하여 내용을 강조하는 방법, 자주 사용되는 태그, 모르는 태그를 찾는 방법 등을 배웠다.

다음으로 서로 경쟁관계에 있는 두 태그를 이용하여 줄바꿈을 하는 방법을 알아본다.

이전 포스팅에서 작성한 본문은 다음과 같다.

위의 코드 빨간 박스를 보면 단락을 구분하기 위해 줄바꿈을 했지만 웹페이지에서 동작하지 않는다.

이는 줄바꿈을 위해서 태그가 필요하기 때문이다.

우리는 줄바꿈 태그가 무엇인지 모르기 때문에 찾아야 한다. 이전의 포스팅에서 다룬 내용과 같이 태그는 일상생활의 경험을 토대로 유사한 단어를 활용하기 때문에 검색할때도 필요한 기능과 유사한 내용으로 검색하면 된다.

위와 같이 검색을 하면 <br>태그에 관한 글들이 나온다.

따라서, HTML에서 새로운 줄을 표현할 때는 <br>태그를 사용한다.

위의 화면을 보면 줄바꿈이 잘 된것을 알 수 있다.

여기서 눈썰미가 있다면 <br>태그의 특이한 면을 발견할 수 있을 것이다.

지금까지 배운 태그들은 열리는 태그와 닫히는 태그가 쌍으로 존재하는 반면 br태그는 닫는 태그가 존재하지 않는다. 이는

HTML의 여러 태그 중에 무엇인가를 설명하지 않는 태그들은 감싸야하는 컨텐츠가 없으므로 태그를 닫지 않는다는 규칙이 존재하기 때문이다. 이와 같은 태그는 img, input, br, hr, meta 등이 있다.

다시 원래 하던 내용으로 돌아와 줄바꿈을 한 이유는 단락을 표현하기 위함이다.

HTML을 만든 사람들은 단락을 표현할 때 쓸 수 있는 태그를 마련해 두었다.

이 태그 또한 알지 못하므로 검색을하여 찾아본다.

위와 같이 검색하면 바로 <p>태그가 나온다.

p태그는 br태그와 달리 하나의 단락을 그룹핑할 수 있도록 열고 닫는 태그가 존재한다.

아래와 같이 <p>태그를 이용하여 코드를 변경해 본다.

위의 화면을 보면 웹페이지의 결과는 같지만 사용된 태그는 다르다.

단락을 표현할 때는 줄바꿈 br태그보다 단락을 표현하는 p태그가 더 좋다.

br 태그는 단지 줄바꿈을 의미할 뿐이므로 단락 태그를 사용하는 것이 웹페이지를 정보로서 보다 가치있게 해준다.

그러나 p태그는 단락과 단락의 간격이 고정되어 있기 때문에 시각적으로 자유도가 떨어지는 단점이 존재하는 반면 br태그는 쓰는만큼 줄바꿈이 되기 때문에 원하는 만큼 간격을 줄 수 있는 장점이 있다. 이러한 이유로 사람들이 br태그를 선호하는 상황이 존재한다.

이를 극복하기 CSS라는 기술을 이용할 수 있다.

CSS는 HTML과 다른 문법을 가진 언어이다. HTML이 정보를 표현한다면 CSS는 정보를 꾸며준다.

CSS를 이용해 첫번째 단락과 두번째 단락의 간격을 세밀하게 조정해본다.(CSS는 추후에 더 자세히 다룰 예정이다.)

위와 같이 p 태그에 style="margin-top:45px"를 추가하면 p 태그 위에 45px만큼의 여백(margin)이 생긴다.

이와 같이 p태그를 이용하면 단락의 경계를 분명히 하면서 CSS를 통해 p태그의 디자인을 자유롭게 변경할 수 있어 br태그보다 유용하다.

참고: https://opentutorials.org/course/3084/18403

태그 사용 빈도 통계

이제 태그가 무엇이고 태그를 어떻게 사용하는지 알게 되었다. 하지만 내가 알고 있는 strong, u가 전부인 반면 오늘날의 HTML은 약 150개가 넘는 태그가 존재하고 이를 어떤 상황에 어떻게 사용할지에 대해 전부 외울 수는 없다.

태그가 무엇인지 알면 구글링을 통해 검색하여 알 수 있지만 알고 있는 태그 자체가 적다면 코딩하는 것이 너무 불편할 것이다.

따라서, 태그의 사용빈도 통계를 이용하여 밑천으로 알고 있으면 편리한 태그가 무엇인지를 판단한다.

구글에서는 전 세계에 있는 수많은 웹페이지를 분석한다.

그 분석 결과를 잘 정리 정도한 사이트는 다음과 같다.

https://advancedwebranking.com/html/

아래 그래프는 전 세계에 있는 웹페이지들이 몇 종류의 태그로 이루어져 있는지 보여준다.

이에 따르면 웹 페이지들은 평균적으로 약32개의 태그를 사용함을 알 수 있다.

아래 그래프는 태그별 인기도이다.

위의 32개 태그만 알아도 웹페이지에 평균적으로 사용되는 태그들은 대부분 알 수 있다는 것을 통계자료를 통해 알 수 있다.

모르는 태그 찾기

다음으로 내가 아직 모르는 위의 태그들이 무엇인지 찾아보자.

정보기술의 발전으로 우리는 언제든지 스마트폰으로 웹브라우저를 켜고 검색엔진으로 검색할 수 있다.

위의 태그 중 가장 많이 사용되는 html 태그가 무엇인지 찾아본다.

구글 검색엔진을 열어 아래와 같은 검색어를 입력한다.

검색 결과중 w3school의 결과는 다음과 같다.

위의 예제와 정의 중 예제를 통해  이 기능이 무엇인지 유추해보고 정의를 보기로 한다.

위의 예제를 실행하기 위해 html_ex.html이라는 파일을 생성하고 예제의 내용을 입력한 후 웹 페이지를 실행한다.

위의 결과를 통해 html 태그가 무엇인지 추론하기 어려우므로 정의를 살펴본다.

정의는 다음과 같다.

이를 통해 html 태그는 HTML파일의 루트(최상단 요소)를 나타내며 모든 HTML 파일 요소를 포함하는 컨테이너임을 알 수 있다.

다른 모르는 태그들도 이와 같은 방법으로 쉽게 찾을 수 있을 것이다.

참고:

https://opentutorials.org/course/3084/18452

https://opentutorials.org/course/3084/18400

https://advancedwebranking.com/html/

https://www.w3schools.com/

이제 코딩을 시작하기에 앞서 만들었든 기획서를 보자.

이런 모양의 웹페이지는 한 번에 만들수 없고, 조각조각 구현하며 전체적으로 완성해 나가야 한다.

이번에는 붉은색으로 표시된 부분을 먼저 작업 한다.

1.html에 빨간 박스에 들어갈 내용을 저장한 후 웹브라우저를 리로드 한다.

여기 내용에서 '프로덕트가 만들어지는 과정에대해 모르는 내가 기획이라는 것을 해도 될까'? 라는 부분이 중요한 내용이라는 생각이 들어 강조하기 위해 글씨를 진하게 표시하고 싶다.

 <strong>과 </strong>으로 진하게 표시하고 싶은 구간을 감싸주면 다음과 같이 글씨가 강조가 된다.

처음으로 태그를 사용한 결과이다. 이는 절대 사소한 것이 아니고, 웹이 아무리 복잡해도 본질적으로는 이것을 벗어나지 않는다고 강의에서 강조를 한다.

이제 '프로덕트가 만들어지는 과정에대해 모르는 내가 기획이라는 것을 해도 될까'?에서 프로덕트를 더 중요하게 강조하고 싶어 밑줄을 치고 싶다.

<u>와 </u>로 감싸주면 프로덕트에 밑줄이 그어진다.

이렇게 웹페이지를 만드는 가장 중요한 규칙(태그)을 경험적으로 살펴봤다.

이제 이론적으로 정리를 해본다.

위의 그림에서 strong이라는 것을 HTML에서는 문법적으로 태그라고 한다.

앞에 있는 태그를 열리는 태그, 뒤에있는 태그를 닫히는 태그라고 구분해서 부르며 닫히는 태그는 태그명 앞에 /를 붙인다.

그리고 앞서의 예시

<strong>'<u>프로덕트</u>가 만들어지는 과정에대해 모르는 내가 기획이라는 것을 해도 될까?'</strong>

와 같이 태그는 중첩해서 사용할 수 있다.

HTML과 같은 언어를 만든 사람들은 언어를 만들 때 자신들이 만든 문법을 사람들이 쉽게 이해하기를 바라므로 일상에서 자주 사용하는 말 중에 문법과 비슷한 말을 찾는다.

밑줄은 underline의 u, 굵게는 strong과 같이 태그들은 일상에서 자주 쓰는 말과 비슷한 말이 대부분이다.

참고:

https://opentutorials.org/course/3084/18392

이제 코딩을 하기 위해서는 에디터(Editor)라는 프로그램이 필요하다.

각 운영체제에는 윈도(메모장), 맥(텍스트 편집기), 리눅스(gedit) 등 이미 에디터가 준비 되어 있지만 각 사용법이 다르기 때문에 github에서 만든 Atom(아톰)으로 통일한다.

아래 주소에서 프로그램을 다운로드해서 설치한다.

https://atom.io/

설치한 후 아톰을 실행하면 다음과 같은 창이 뜬다.

위의 화면에서 1번에 해당하는 부가적인 창들은 다 꺼준다.

그리고 2번 Add folders 버튼을 눌러 실습 파일을 저장할 폴더를 아톰 왼쪽에 표시되게 해야하는데, 아직 폴더를 만들지 않았으므로 먼저 윈도우 탐색기를 이용해 바탕화면에 프로젝트 폴더를 생성한다.

위와 같이 바탕화면에 '웹 만들기'라는 프로젝트 폴더를 생성하였다.

다음으로 Add folder 버튼을 눌러 생성한 프로젝트 폴더를 아톰에서 선택한다.

이제 '웹 만들기' 폴더에 1.html 파일을 생성한다.

왼쪽의 웹 만들기 폴더를 우클릭하여 새로운 파일 만들기를 선택한다.

파일 이름인 1.html을 입력하고 엔터를 누르면 다음과 같이 파일이 생성된다.

방금 생성한 파일 이름을 보면 확장자가 html인 것을 알 수 있다.

MS워드의 확장자는 doc, PDF는 pdf인거와 같이 웹 브라우저에서 볼 수 있는 웹 페이지의 확장자는 html이다.

다음으로 1.html을 웹 브라우저를 열어보자.

웹 브라우저에서 아래와 같은 단축키를 누르면 파일 선택 화면이 나온다.

• 윈도우 : Ctrl + O(알파벳)
• 맥 : Cmd + O(알파벳)

현재 1.html 파일에 작성한 내용이 없어 빈 화면이 나온다.

이제 화면에 무엇인가를 표시하기 위해 편집화면에 hello web이라고 입력하고 저장한다. (윈도우 : Ctrl + S, 맥 : Cmd + S)

그리고 웹 브라우저를 새로고침하면 다음과 같이 hello web이 출력된다.

참고:

https://opentutorials.org/course/3084/18448

https://atom.io/

이제 기획이 끝났으니 구현을 할 차례이다.

이에 앞서, 사람이 하는일과 기계가 하는일을 분리해서 생각해보고 어떤 것이 원인이고 어떤 것이 결과인지 추론해본다.

이것은 강의 전체를 통틀어서 가장 중요하다고 강조되고 있다.

위의 사진에서 오른쪽이 사람이 하는 일이면서 원인이고, 그것에 대한 결과가 왼쪽이면서 기계가 하는 일이다.

사람이 하는 일, 다시 말해서 원인을 부르는 여러 표현은 다음과 같다.

• 부호 또는 신호라는 의미의 코드(code)
• 원천이라는 뜻의 소스(Source)
• 약속이라는 의미에서 언어(컴퓨터 언어)

기계가 하는 일, 다시 말해서 결과를 부르는 여러 표현이 다음과 같다.

• 애플리케이션(줄여서, 앱)
• 프로그램
• 웹에서 결과는 웹 페이지
• 웹페이지가 모여있으면 웹사이트
• 기능이 좀 많으면 웹애플리케이션(줄여서, 웹앱)

여기서 원인인 코드를 통해서 결과를 만든다는 것이 코딩을 이해하는 핵심이다.

세상에는 C, C++, Java, JavaScript, Python, PHP, SQL 등 다양한 종류의 코드들이 있고, 코드마다 역할이 다르므로 하고자 하는 일에 따라 적당한 코드를 선택해야 한다.

그중, 웹페이지를 만드는 코드가 바로 HTML이다.

참고: https://opentutorials.org/course/3084/18445

웹을 만들기에 앞서 어떤 웹을 만들 것인지 상상하고 계획하는 과정이 필요하고, 이를 기획이라고 한다.

강의에서 코딩수업의 내용을 잘 정리 정돈할 수 있는 웹사이트를 다음과 같이 그린다.

1. 제일 위쪽에는 수업의 전체 제목을 적어봤다.
2. 왼쪽에는 수업의 목차를 적었고, 목차에는 링크가 걸려 있다. 링크를 클릭하면 링크에 해당하는 콘텐츠가 오른쪽에 표시된다.
3. 오른쪽의 상단엔 제목이 표시되고, 본문에는 제목에 대한 자세한 설명이 표시된다.

강의에서 웹페이지를 만드는 것이 남의 문제가 아닌 나의 문제라고 상상하라고 강조한다.

똑같이 해도 되지만 자신의 생각으로 정보를 채워가면서 수업을 따라간다면 수업이 보다 의미 있을 것이라고 한다.

따라서, 나는 나의 위의 예시를 응용해 나의 블로그를 웹페이지로 만들어 보려한다.

1. 제일 위쪽에는 카테고리 제목인 '웹만들기 내가 해보자'를 적는다.

2. 왼쪽에는 카테고리의 목차를 적었고, 목차에는 링크가 걸려 있다. 링크를 클릭하면 링크에 해당하는 콘텐츠가 오른쪽에 표시된다.
3. 오른쪽의 상단엔 제목이 표시되고, 본문에는 제목에 대한 자세한 설명이 표시된다.

이러한 형태의 웹사이트를 강의를 따라가며 만들려한다.

참고: https://opentutorials.org/course/3084/18437