언어

간단한 HTML 문법

수타. 2023. 8. 7. 15:05

위 글은 유튜버 생활코딩 님의 영상들을 보고 제가 필요하다고 느낀점들을 정리한 글입니다.

출처: https://www.youtube.com/watch?v=tZooW6PritE&list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb&index=1 

 

HTML 

HTML이란 HyperText Makeup Language의 약자

 

'< >'  , '</ >' (Tag)

태그 문자는 그 태그들로 감싼 문장을 설명합니다. 설명하고자 하는 문장이 끝난뒤에 '/'를 붙인 태그를 붙여 그것이 끝났음을 명시합니다.

  • <title>, </title> : '제목'을 나타내는 태그입니다.
  • <meta charset='utf-8'> : '문자규칙' 즉 인코딩 방법에 대한 태그 입니다.
  • <body>, </body> : '본문'을 나타내는 태그 입니다.
  • <head>. </head> : 바디 즉 본문을 설명하는 태그 입니다. 즉 맨위의 'tilte'태그와, 'meta'태그는 'head'태그 안에 놓여야 하며, 나머지 본문에 들어가는 태그들은 'body'태그 안에 들어가야 합니다. 즉 HTML에 있는 모든 태그는 'head'태그 아니면 'body'태그 둘 중에 하나 아래에 놓이게 됩니다. 이는 문법적인 요소가 아닌 '약속'입니다.
  • <html>, </html> : 'head'태그와 'body'태그를 감싸는 최고위층 태그 입니다. 그 보다 위에 관용적으로 이 문서가 html문서이다 라는것을 나타내기 위해 <!doctype html>을 씁니다.
  • <strong> , </strong> : 흔히 '진하게' 또는 '굵게'로 알고 있는 태그입니다. 감싼 문장이 굵게 바뀝니다.
  • <i>, </i> : 'itallic' 의 약어로 감싼 문장을 기울여서 표시하는 태그입니다.
  • <u>, </u> : 'underline'의 약자로 감싼 문장에 '밑줄'을 칩니다.
  • <h1>,</h1> ~ <h6>,</h6> : 'headings'의 약자로 '제목'이라는 의미를 가지며, 뒤의 숫자가 1부터 6까지 글씨의 크기가 작아지는 방향으로 바뀝니다. 예시로 위에 'HTML'과 'TAG' 가 'h2'로 꾸민 것이며 , 위 아래로 줄 바꿈을 해줍니다.
  • <br> : 'break' 또는 'break line'의 약자로 '줄바꿈'을 해줍니다. 이때 끝맺는</br>이 없는 이유는 줄바꿈이라는 시각적인 의미만 가지고 있기 때문에, 감쌀필요가 없습니다. 물론 </br>을 사용해도 똑같이 줄바꿈이 됩니다.
  • <p> , </p> : 'paragraph'의 약어로 '단락'이라는 의미입니다. 감싼 문장의 위아래로 줄바꿈을 두번하여 한줄의 빈공간을 가시적으로 만들어 그 문장이 단락임을 알려줍니다. 그 문장 앞뒤로 <br><br>을 붙인것과 시각적으로는 동일한 효과를 가지고 오지만, html코드를 볼때 그 문장이 가진 의미 파악, 가시성 등이 다르기 때문에 필요하며, 이는 다른 태그들의 사용이유와도 같습니다.
  • <img> : image즉 이미지를 첨부할 수 있는 태그이며, 이때 어떤 이미지 인지 모르기 때문에 속성(attribute)을 알려주어, 이미지를 나타냅니다. src, 즉 source이고 이후에 이미지 주소를 입력하면 이미지를 첨부할 수 있습니다. width 속성은 너비를 뜻하며, 이때 정수가 아닌 '100%'를 입력하면 이미지를 화면 크기로 맞출 수 있습니다. ex)<img src  = 'dog.jpg' width = '100%'>
  • <ol>,<ul>,<li> : 각각 Ordered list, Unordered list, List 의 약자입니다. '목차'를 나타낼 때 사용하는  태그이며, 흔히 부모자식 리스트라고 불리우는데 목차의 숫자 지정 여부에 따라 나뉩니다, 쉽게 아래 예시로 이해할 수 있습니다. 
<ol>
    <li>css</li>
    <li>html</li>
    <li>javascript</li>
</ol>

위 코드 결과

 

<ul>
    <li>css</li>
    <li>html</li>
    <li>javascript</li>
</ul>

.위 코드 결과

  • <table>,<tr>,<td> = table은 '표'라는 뜻이며, 'tr', 'td' 는 각각 'table row' , 'table data'를 의미합니다. 각각 행, 열 을 의미하며, 아래 예시로 이해할 수 있습니다. 'table'의 'boarder'속성은 표의 선들의 종류를 나타냅니다.
<table border="1"> 
    <tr>
        <td>head</td>
        <td>1</td>
    </tr>
    <tr>
        <td>eyes</td>
        <td>2</td>
    </tr>
    <tr>
        <td>fingers</td>
        <td>10</td>
    </tr>
</table>

위 코드 결과

  • <a> , </a> : 링크를 나타내는 태그이며, 'anchor' 즉 정보의 바다의 정박한다는 비유적인 의미로 'a'가 쓰였습니다. 기본 attribute로 'href' 즉 'hypertext reference'가 있으며, 뒤에 연결시켜주고 싶은 링크주소를 넣으면 됩니다. 이때 원래탭에서 바로 열리게 되는데, 이때 새 탭에서 열리게 하고 싶다면 'target' 속성에 "_blank"를 넣어주면 되고, 'title'속성을 통해 그 창의 제목을 정할 수 있습니다. ex) <a href='naver.com' target='_blank' title='네이버'>네이버 링크</a>
    물론 주소에 인터넷 주소 뿐 아니라 html주소등을 입력해 웹을 링크시켜 웹사이트를 만들 수도 있습니다.
  • <div> ,</div> : 'division'의 약자로 레이아웃을 나누는데 주로 사용됩니다. 특별한 기능을 가지고 있지않고 가상의 레이아웃을 설계하는데 주로 쓰이며, 주로 CSS와 연동하여 쓰입니다.
  • <span>, </span> : 'span' 즉 '폭'이라는 뜻이며 'div'태그와 역할 및 기능이 동일하지만 다른점은 'div'태그는 줄바꿈이 되지만 'span'태그는 줄바꿈이 되지 않는다는 점입니다.
  • <form>, </form> : '입력양식'을 의미하는 태그입니다. 컴포넌트가 많으므로 아래 예시를 통해 한번에 보겠습니다.
<form>
	<p>
		<strong>아이디</strong>
		<input type="text" name="name" value="아이디 입력">
	</p>
	<p>
		<strong>비밀번호</strong>
		<input type="password" name="password" value="비밀번호 입력">
	</p>
	<p>
		<strong>성별</strong>
		<input type="radio" name="gender" value="M">남자
		<input type="radio" name="gender" value="F">여자
	</p>
	<p>
		<strong>응시분야</strong>
		<input type="checkbox" name="part" value="eng">영어
		<input type="checkbox" name="part" value="math">수학
	</p>
	<p>
		<input type="submit" value="제출">
	</p>
</form>

 

저작자표시 (새창열림)