본문 바로가기
HTML

HTML - Hyper Text Markup Language(1)

red_jh 2024. 5. 24. 20:10
반응형

Hyper Text = 웹페이지에 있는 링크 기능

Mrakup Language = Markup 문법 언어

 

>>> 웹 브라우저에 표시되는 웹 페이지를 만들어달라고 컴퓨터에게 요청하는 언어

- 웹브라우저에서 우측 마우스 클릭 후 페이지 소스보기 (또는 키보드 F12) 누르면 보이는 것이 HTML

 

<1960년대 말> GML (Markup 언어 시조)

-> SGML(꺽쇠등을 사용하기 시작)

-> SGMLguid(유럽 입자 물리 연구소에서 제작, 17개의 태그)

-> HTML(팀 버너스 리가 유럽 입자 물리 연구소에서 SGMLguid 에 <a>태그를 추가하여 제작) 

태그 - HTML의 가장 핵심요소

< > : 시작 태그

</ > : 종료 태그

 

태그는 시작태그와 종료태그 <> </> 먼저 입력하고, 필요한 내용을 채우는게 효율적

 

예)

 <strong>문장</strong> - 해당 문장의 글씨를 진하게 강조

<h1> 문장 <h1> - h1 은 제목(heaing)을 표시해주는 태그로써 해당 문장이 h 넘버에 맞는 크기의 제목으로 강조

                           - h 시리즈는 1 ~ 6 까지 존재함

<h1>제목 1</h1>	
<h2>제목 2</h2>	
<h3>제목 3</h3>	
<h4>제목 4</h4>	
<h5>제목 5</h5>	
<h6>제목 6</h6>

 

결과

제목 1

제목 2

제목 3

제목 4

제목 5
제목 6

(2024.05.24 기분 T-story 의 HTML 적용부분이 문제가 있는 관계로 h2 크기가 잘못 표기됨)

 

[속성]

<a></a>  (anchor) 태그로 링크 걸기

<a href="링크">문장</a> - 현재 열려있는 탭에서 링크 열기

<a href="링크" target="_blank>문장</a>  - 빈 탭(새 탭)에서 링크 열기

<a herf="링크" title="문장">문장</a> - 문장에 마우스를 올리면 "문장"의 문구로 툴 팁이 생성

 

TMI : MAC에서 편집기 활용시 "" 모양이 현실에서 사용되는 모양으로 반영될 시(에러 발생) 편집기에서

          [편집] - [대체] - [스마트인용] 을 체크 해제하면 반영된 것이 사라짐

 

<a href="https://code-jh.tistory.com/" target="_blank" title="프로그래밍의 길에 들어선 자">my story</a>

 

결과

my story

 

(_blank 를 _blink 로 실수로 입했는데도 작동이 되는 것을 확인. 관용적 해석으로 작동되는 것으로 보임)

 

[태그 중첩 활용]

<li>문장</li> - 문장을 <li>(list) 태그로 여러 개 작성시 리스트화 시킬 수 있음

 

<li>문장1</li>
<li>문장2</li>
<li>문장3</li>
<li>문장4</li>

 

결과

  • 문장1
  • 문장2
  • 문장3
  • 문장4

    • <ul></ul> - 여러개의 리스트를 객체 별로(unrodered) 작성(그룹핑)

    <ul><li>문장1~4</li><ul>

    <ul><li>문장a~d</li></ul>

    <ul>
 <li>문장1</li>
 <li>문장2</li>
 <li>문장3</li>
 <li>문장4</li>
</ul>
<ul>
 <li>문장a</li>
 <li>문장b</li>
 <li>문장c</li>
 <li>문장d</li>
</ul>

     

    결과

    • 문장1
    • 문장2
    • 문장3
    • 문장4
    • 문장a
    • 문장b
    • 문장c
    • 문장d

    (공백을 입력하지 않았음에도 객체 별로 분리된 것을 확인할 수 있음, 태그 내 태그시 들여쓰기를 통해 가독성을 챙기기)

    <ol></ol> - 리스트에 순서(ordered)를 달아줌

    <ol>
 <li>문장1</li>
 <li>문장2</li>
 <li>문장3</li>
 <li>문장4</li>
</ol>

     

    결과

    1. 문장1
    2. 문장2
    3. 문장3
    4. 문장4

    [웹페이지 최상단 사이트명 설정]

    <title>문장</title> - 웹페이지 최상단에서 확인되는 사이트명을 문장으로 설정

    <title>red_note</title>

     

    결과

    title 설정 전
    title 설정 후

    편집기 작성 과정에서 글이 깨질 경우 <meta> 태그를 활용하면 된다

    <title>문장</title>

    <meta charset="utf-8">

    을 입력해주면 깨지는 현상을 고쳐준다

     

    TMI: <title> 태그와 <meta> 태그는 해당 웹페이지의 특성을 반영시키는 것으로 위에서 작성했던 태그들(<h><a>)은

             웹페이지의 본문에 해당하지만 이 두 태그는 성격이 다르기 때문에 구역을 나눌 수 있는데 그 때 구역을 <head> 와              <body>로 나눈다.

    <head>
 <title></title>
 <meta>
</head>
<body>
 <h1></h1>
 <ol>
  <li></li>
 </ol>
</body>

     

    [문서 형식 선언(Doc-type)]

    Document type declaration - 작성한 HTML 문서가 어떤 방식으로 작성하였는지 브라우저에게 알려주는 기능

     

    표준에 따라 태그가 삭제되거나 수정 될 경우에 대해서 수월하게 처리하기 위해 사용

    현재는 Doc-type이 이 <!DOCTYPE html(버전넘버)> 로 단일화 되어 있어 문서 제일 위에 선언을 해주면 된다

    <!DOCTYPE html5>

    태그들에 링크 연결하기

    - 링크<a href="문장">를 마련하고 연결하는 것이 작업상 효율이 좋음(파일 작성 후 링크를 추가하면 중복되는 작업이 생김)

     

    우선 메인 웹페이지의 편집기(텍스트 파일)의 html_page.txt 내용

    더보기

    <h1>제목</h1>
    <ul>
     <li>문장1</li>
     <li>문장2</li>
     <li>문장3</li>
     <li>문장4</li>
    </ul>

    링크 연결 <a> 태그 추가

    <h1><a href="html_page">제목</a></h1>
<ul>
 <li><a href="1.html">문장1</a></li>
 <li><a href="2.html">문장2</a></li>
 <li><a href="3.html">문장3</a></li>
 <li><a href="4.html">문장4</a></li>
</ul>

     

    결과

    제목

    연결할 html 문서 작성

    더보기

    1.html 파일

    2.html 파일

    3.html 파일

    4.html 파일

    을 각각 만들고 내용을 채우면 <li>내에 <a> 태그로 연결될 링크를 클릭하게 되면 해당 페이지로 이동함

    (현재는 별도의 html 을 연결하지 않았기 때문에 페이지 오류만 보임)

    이상 오늘의 html 1 note 마무리

    반응형

    'HTML' 카테고리의 다른 글

    HTML - Hyper Text Markup Language(4)  (0) 2024.05.27
    HTML - Hyper Text Markup Language(3)  (0) 2024.05.25
    HTML - Hyper Text Markup Language(2)  (0) 2024.05.25

    'HTML' Related Articles

    티스토리툴바