관리 메뉴

새로운 시작, GuyV's lIfe sTyle.

Part 8. 웹 - 프런트엔드 (2) - HTML 실습 본문

ⓟrogramming/웹프로그래밍 제대로 배우기

Part 8. 웹 - 프런트엔드 (2) - HTML 실습

가이브 2020. 2. 6. 00:18

이전 Part 에서 HTML의 특징과 사용법(태그명, 속성명, 속성값)을 알아봤는데요. 이제 HTML실습을 해보도록 합시다.

 

잠깐, HTML을 쓰기 전에 꼭 이해하셔야 되는 것이 있습니다. (지극히 제 생각입니다만)

지금 다루고 있는 HTML의 태그는 웹사이트에서 접속자에게 보여주게 되는거죠? 정보를 제공받는 사람에게 HTML은 "의미 전달을 최우선 목적"으로 합니다.

다시 말하면, 브라우저가 태그를 적용한 결과는 브라우저 재량인데요. 앞에서 써본 <b>태그를 적용하면 글자에 진한 효과를 주게 되죠. 그리고 태그 중에는 <strong>태그가 있습니다.

음.. 진하기 강도가 좀 다른가요? ^^

정리하자면, 브라우저에서 태그가 적용된 화면에서는 <b>태그와 <strong>태그는 동일하게 진하게 적용된 효과겠지만, 글자 자체를 진하게 하고자 쓰는 태그인 "<b>"와 문단에서 특정 부분을 강조하고자 쓰는 "<strong>"태그는 의미가 다르죠. 

다음은 어떤 홈페이지에 들어갔더니 나오는 내용입니다.

 

우리집으로 찾아오는 방법을 말씀드릴게요.

학교에서 직진하다가 우산박사라는 가게를 지나서 빵집 가게를 끼고 돌면 지하로 내려가는 길이 보이고, 조금 더 걸어들어오시면 좌측에 글자가 어서오세요라고 굵게 글자가 적혀있는 우체통이 보이는 빨간집입니다.

 

위 문장에는 총 3개의 진하게 처리된 글자가 있는데요. 문맥상으로 보면 첫번째 진한 글자인 "직진"과 두번째 "빵집"은 글을 쓴 사람이 강조하고자 하는 느낌이 강합니다. 그리고 세번째로 진한 글자인 "어서오세요"는 굵게 글자가 적혀있는 우체통이라 했으니, 진짜 글자가 진한 어서오세요라는 글자를 말하고자 하는 거죠. 이 의미가 맞다면, 태그로 의미있게 잘 사용했다고 하면 다음처럼 되겠습니다.

 

우리집으로 찾아오는 방법을 말씀드릴게요.

학교에서 <strong>직진</strong>하다가 우산박사라는 가게를 지나서 <strong>빵집</strong>가게를 끼고 돌면 지하로 내려가는 길이 보이고, 조금 더 걸어들어오시면 좌측에 글자가 <b>어서오세요</b>라고 굵게 글자가 적혀있는 우체통이 보이는 빨간집입니다.

 

** 결론: 태그가 적용되어 사람눈에 보이는 것보다 실제 어떤 태그로 의미 부여를 했는지가 중요하다.

(제 생각이지만) 이 의미를 알고 웹을 공부하면 처음부터 제대로 태그를 잘 알고 사용하시게 될 것이라 믿습니다.

 

HTML은 기본 구조가 있는데요. (이건 규칙이기 때문이 숙지하여야 됩니다)

 

<html>

</html>

 

HTML태그로 모두 다 감싸줍니다.

그리고 html 태그내에는 head 와 body 두 가지가 있습니다.

 

<html>

  <head>

  </head>


  <body>

  </body>


</html>

 

<head> 안에는 <title>이 있구요.

<html>

  <head>
  
	<title>가이브의 홈페이지</title>
        
  </head>


  <body>

  </body>


</html>

 

<body> 안에는 컨텐츠가 들어갑니다.

 

<!DOCTYPE html>
<html>

  <head>
  
	<title>가이브의 홈페이지</title>
        
  </head>


  <body>
    
    <h1>인사말</h1>

    <p>안녕하세요.
    가이브는 원숭이섬의 비밀 주인공인 guybrush 이름에서 따왔으며,
    나우누리 한글 아이디 제한이 4자라서 GuyV 로 줄였고,
    한글로는 가이브라고 씁니다.<br>
    오늘도 건강한 하루를 보내시기 바랍니다.</p>
      
    <h1>오늘의 날씨</h1>

    <p>오늘은 날씨가 화창하네요. 오전은 맑고 오후도 맑아요. 내일은 흐릴 예정입니다.</p>
    
    <h1>오늘의 명언</h1>
    
    <p>벼는 익을수록 고개를 숙인다.</p>
    
    <h1>유용한 사이트 모음</h1>
    
    <ul>
        <li>구글 검색엔진 <a href="http://google.com" target="_blank">열기</a></li>        
        <li>페이스북 <a href="http://www.facebook.com" target="_blank">열기</a></li>           
    
    </ul>

    
    <h1>블로그</h1>  
    <p>
        <p>
        첫글입니다~<br>
        오늘도 좋은 하루 보내세요!<br>
        좋은 정보를 얻어가시기를 바래요!
        </p>


    </p>
    


  </body>


</html>

 

이런 식으로 HTML을 이용하여 방문자에게 유용한 정보를 제공해줄 수 있습니다. 기술적인 요소보다 얼마나 유용한 정보를 제공하느냐가 좋은 홈페이지의 기준이 될 수 있습니다. 덤으로 사용성도 편리하면 더 좋겠네요.

무엇이든지 자주 써봐야 익숙해집니다. 사실 제작이라는게 없는 것을 있게 만드는 행위라서, 선듯 "내 홈페이지를 만들자~"라고 해도 어떤 컨덴츠를 넣어야될지 막막한 경우가 많습니다. 아마, 아직 필요성을 느끼지 못해서 그렇거든요. 목적이 없기도 하고요. 그러니 창작이 어렵다면 어디든 좋으니 다른 사이트들을 닥치는대로 따라해보세요. (사이트의 소스보기를 하지 않고 만들어보시는게 좋겠죠?) 그리고 혹시나 길을 걷다 우연히 뭔가 좋은 아이디어가 있으면 이제 홈페이지를 만들어보는 것입니다.

다른 사이트들 만큼 이쁘지 않다고요? 도메인을 가지고 서비스를 할 정도면 이미 경험이 출중한 선배들이 제작했을테니 너무 기죽지 마시기 바랍니다. 우리는 이제 막 시작했으니까요.

 

HTML에서 중요한 것을 다시 정리하면, 웹사이트(홈페이지)에서 정보를 표현하는 것 중 가장 기본이 되는 방법이고, 그 방법으로 태그를 이용하는데 태그를 사용하는 방법을 꼭 숙지하시기 바랍니다. 태그의 종류도 알면 좋지만, 태그명(엘리먼트 - element), 속성(어트리뷰트 - attribute), 속성값(어트리뷰트 밸류 - attribute value)을 자유롭게 사용할 수 있어야지 레퍼런스를 보더라도 읽을 수 있겠죠.

 

 

이번 시간은 여기까지입니다.

 

 

반응형
Comments