＊반짝이는＊이끌림

[생활코딩] WEB1(HTML_06) 문서의 구조와 슈퍼스타들 본문

Computer/Web

[생활코딩] WEB1(HTML_06) 문서의 구조와 슈퍼스타들

2kkeullim 2020. 4. 16. 23:49

* Windows 운영체제 기준으로 작성되었습니다.

* 중간 쯤에 나오는 vs code에서 UTF-8로 인코딩 옵션을 변경하는 부분 주의해주세요!! (전 처음 시도했을 때 실패했기 때문에 실패 용으로 남겨두었습니다 :<) 사진 첨부는 따로 하지 않았지만 성공하는 법도 기록해 두었으니 그 부분 보고 참고해주세요!!

 

§ 문서의 구조와 슈퍼스타들 → Click!

 

지금까지 만든 웹 페이지에 제목을 붙여봅시다. <title></title> 태그를 활용하면 제목을 붙일 수 있습니다.

<title>"제목"</title>

title 즉 제목은 바뀌었지만 실제 파일 이름 1.html은 바뀌지 않은 것을 볼 수 있습니다.(오른쪽 vs code 부분 참조) 제 웹페이지에선 안 그러지만 일부 페이지에선 한글이 깨져 보이는 경우도 있다고 합니다. 그럴 때에는 utf-8형식으로 인코딩하라는 코드를 작성해주면 됩니다. 여기서 char(character)은 문자, set은 집합을 의미합니다^^

<meta charset="utf-8">

utf-8형식으로 인코딩했더니 도리어 글이 깨졌네요;;;; 무슨 일인가 싶어 제 vs code 창을 보니 제 html코드는 EUC-KR 형식으로 인코딩을 하고 있었습니다. 그래서 위의 meta tag를 euc-kr로 바꿔보았다.

<meta charset="euc-kr">

그랬더니 다시 원래대로 글이 잘 나오는군요...! 개인적으로 EUC-KR보다 UTF-8형식의 인코딩을 많이 사용하기에 vs code상의 한글 인코딩 양식을 UTF-8로 변경해주고자 합니다. vs code 에서 F1 버튼을 누른 후 encoding으로 검색!

저렇게 두 가지 인코딩하여 다시 열기, 인코딩하여 저장 버튼이 뜨고, 저 같은 경우에는 인코딩하여 다시 열기를 클릭했습니다.

 

주의!!!! 인코딩 옵션 변경하는 부분에서 무조건 인코딩하여 저장 버튼을 클릭하셔야 합니다!! 저 같은 경우에는 인코딩하여 다시 열기를 클릭해서 글자가 깨졌습니다ㅠ 글자가 깨지면 원래 작성하였던 내용들이 싹 날아가니 꼭! 꼭! 인코딩하여 파일 열기로 클릭하세요~!! (전 인코딩하여 다시 열기를 했었기 때문에 아래부분에서 글자가 깨진 과정들을 보여드릴게요ㅠ 절대 따.라.하.지.마.세.요!ㅠㅠ)

 

현재 적용되어 있는 EUC-KR 바로 밑에 UTF-8형식이 위치해 있네요. UTF-8 클릭!

심각한 일이 일어났습니다....한글이 다 깨져버렸네요ㅠㅠ EUC-KR, UTF-8 둘 다 많이 들어본 파일 인코딩 형식이지만 차이를 정확하게 모르고 있어 이번 기회에 알아보고자 찾아보았습니다.

 

EUC-KR 완성형 방식, 완성된 단어가 있어야만 표현이 됨
UTF-8 조합형 방식, 자음, 모음으로 나누어져 저장 → 조합을 통해 글자가 완성되어 표현

 

UTF-8의 확장성이 훨씬 좋기 때문에 일반적으로 EUC-KR 형식보다 UTF-8 형식을 선호하는 것 같습니다. chrome의 경우 55버전 이후부터 "자동 인코딩 감지" 기능이 사용되었기 때문에 인코딩을 직접 지정하는 메뉴를 삭제하였다고 합니다. 그래서 강제로 인코딩 형식을 바꾸어주기 위해 확장 프로그램을 깔아보았습니다. (Internet explorer의 경우 마우스 우클릭으로 쉽게 인코딩 형식을 변경 가능합니다.) 그러면 마우스 우클릭을 통해 UTF-8형식으로 인코딩을 변경 가능합니다.

제 실력이 부족해 아직까진 vs code와 chrome에서 utf-8을 사용하긴 어려울 것 같아 default setting인 euc-kr로 사용하도록 하겠습니다. 앞에서 글자들이 전부 깨졌기 때문에 새로운 글(시)을 하나 가져와봤습니다. 아래의 시는 예전에 저를 위한 시로 추천받았던 시입니다. 한 번 감상해보시죠!

<title>아무르 강가에서 / 박정대</title>

<h2>아무르 강가에서 / 박정대</h2>

<img src = "gang.jpg" width="25%">

<p>그대 떠난 강가에서
<br>나 노을처럼 한참을 저물었습니다.
<br>초저녁 별들이 뜨기엔 아직 이른 시간이어서, 낮이
<br>밤으로 몸 바꾸는 그 아득한 시간의 경계를
<br>유목민처럼 오래 서성거렸습니다.</p>

<p>그리움의 국경 그 허술한 말뚝을 넘어 반성도 없이
<br>민가의 불빛들 또 함부로 일렁이며 돋아나고 발 밑으로는
<br>어둠이 조금씩 밀려와 채이고 있었습니다. 발 밑의 어둠</p>

<p>내 머리 위의 어둠, 내 늑골에 첩첩이 쌓여 있는 어둠
<br>내 몸에 불을 밝혀 스스로 한 그루 촛불나무로 타오르고 싶었습니다.</p>

<p>그대 떠난 강가에서
<br>그렇게 한참을 타오르다 보면 내 안의 돌멩이 하나
<br>뜨겁게 달구어져 끝내는 내가 바라보는 어둠 속에
<br>한 떨기 초저녁별로 피어날 것도 같았습니다.</p>

<p>그러나 초저녁별들이 뜨기엔 아직 이른 시간이어서
<br>야광나무 꽃잎들만 하얗게 돋아나던 이 지상의 저녁
<br>정암사 젹멸보궁 같은 한 채의 추억을 간직한 채
<br>나 오래도록 아무르 강변을 서성거렸습니다.
<br>별빛을 향해 걷다가 어느덧 한 떨기 초저녁별로 피어나고 있었습니다.</p>

<br>[출처] 아무르 강가에서 / 박정대 (::문학동네::)

이렇게 출력됩니다. 여기서 위의 <title>, <meta>부분과 아래 본문 부분은 구분을 해주어야 합니다. 그래서 아랫 부분을 <body></body> 태그로 묶어봅시다! 또한 <body>를 설명하는 <title>과 <meta>부분을 <head>

</head> 태그로 묶어줍시다. html의 모든 태그는 <head> 태그, <body> 태그 이 둘 중 하나의 아래에 위치하게 됩니다. 또한 <head>와 <body> 태그를 감싸는 단 하나의 최고위층 태그는 <html></html>이며, 관용적으로 <html> 태그 위에 html 문서라는 뜻으로 <!doctype html>이라고 작성해줍니다.

<!doctype html>
<html>
  <head>
  	"본문을 설명하는 부분"
  </head>
  <body>
  	"본문 내용"
  </body>
</html>

완성된 모습입니다!

<!DOCTYPE html>
<html>
    <head>
        <title>아무르 강가에서 / 박정대</title>
        <meta charset="euc-kr">
    </head>

    <body>
        <h2>아무르 강가에서 / 박정대</h2>
        <img src = "gang.jpg" width="25%">
        <p>그대 떠난 강가에서
        <br>나 노을처럼 한참을 저물었습니다.
        <br>초저녁 별들이 뜨기엔 아직 이른 시간이어서, 낮이
        <br>밤으로 몸 바꾸는 그 아득한 시간의 경계를
        <br>유목민처럼 오래 서성거렸습니다.</p>

        <p>그리움의 국경 그 허술한 말뚝을 넘어 반성도 없이
        <br>민가의 불빛들 또 함부로 일렁이며 돋아나고 발 밑으로는
        <br>어둠이 조금씩 밀려와 채이고 있었습니다. 발 밑의 어둠</p>

        <p>내 머리 위의 어둠, 내 늑골에 첩첩이 쌓여 있는 어둠
        <br>내 몸에 불을 밝혀 스스로 한 그루 촛불나무로 타오르고 싶었습니다.</p>

        <p>그대 떠난 강가에서
        <br>그렇게 한참을 타오르다 보면 내 안의 돌멩이 하나
        <br>뜨겁게 달구어져 끝내는 내가 바라보는 어둠 속에
        <br>한 떨기 초저녁별로 피어날 것도 같았습니다.</p>

        <p>그러나 초저녁별들이 뜨기엔 아직 이른 시간이어서
        <br>야광나무 꽃잎들만 하얗게 돋아나던 이 지상의 저녁
        <br>정암사 젹멸보궁 같은 한 채의 추억을 간직한 채
        <br>나 오래도록 아무르 강변을 서성거렸습니다.
        <br>별빛을 향해 걷다가 어느덧 한 떨기 초저녁별로 피어나고 있었습니다.</p>

        <br>[출처] 아무르 강가에서 / 박정대 (::문학동네::)
    </body>
</html>

현재까지 완성된 코드입니다!! 전 인코딩하여 저장 버튼으로 다시 클릭해 UTF-8로 인코딩 형식을 변경하였습니다! 혹시 저처럼 인코딩하여 다시 열기를 클릭해 글자가 깨지셨던 분들은 새로운 파일은 만든 후 인코딩하여 저장 클릭해서 인코딩 옵션 바꿔주세요!

저작자표시 비영리 변경금지

'Computer > Web' 카테고리의 다른 글

[생활코딩] WEB1(HTML_08) 웹사이트 완성  (0) 2020.04.17
[생활코딩] WEB1(HTML_07) HTML 태그의 제왕  (0) 2020.04.17
[생활코딩] WEB1(HTML_05) 부모 자식과 목록  (0) 2020.04.16
[생활코딩] WEB1(HTML_04) 최후의 문법 속성과 img  (0) 2020.04.16
[생활코딩] WEB1(HTML_03) 줄바꿈  (0) 2020.04.16
'Computer/Web' Related Articles more
Comments