오늘 간단하게 배운 HTML 문법을 정리해보고자 한다. 프로그램은 ATOM을 사용했다.
HTML의 <h1>
<h1> This is heading </h1>
<h2> This is heading </h2>
<h3> This is heading </h3>
<h4> This is heading </h4>
<h5> This is heading </h5>
<h6> This is heading </h6>
HTML의 <h1>은 글의 크기를 조절. 1부터 6까지의 숫자를 넣을 수 있다. 기억해야 할 점은 1이 가장 큰 폰트 크기로 커질수록 글자가 작아진다.
HTML의 <br>, <p>, <style>
Hypertext mark up Language. <br>HTML elements are the building blocks of HTML pages.
Hypertext mark up Language. <p>HTML elements are the building blocks of HTML pages.</p>
Hypertext mark up Language. <p style="margin-top:45px;">HTML elements are the building blocks of HTML pages.</p>
1번 코드 : ATOM에서 줄바꿈을 해도 HTML에서 반영되지 않는다. 줄 바꿈을 하기 위해서는 바꾸려는 문단 앞에 <br>를 넣어줘야 한다.
2번 코드 : 문단 전체를 단락을 나누기 위해서는 <p> </p> 태그를 사용하면 된다. p 태그가 웹페이지를 좀 더 정보로서 가치 있게 만든다.
3번 코드 : CSS 기능을 사용해서 좀 더 세부적으로 조정할 수 있다. p 태그 사이에 style="margin-위치:xxpx;을 넣어주면 위치를 좀 더 정교하게 조정이 가능하다.
HTML의 <img>
<img src="coding.jpg" width="100%">
HTML에 이미지를 삽입시킨다면 위와 같은 코드를 삽입.
src = source의 줄임말. 위와 같이 이미지를 불러오고 width를 사용해 크기 조정. %로 할 경우 페이지에 맞춰서 보임. src와 width의 순서는 크게 중요하지 않음
HTML의 <ul>, <li>, <ol>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<li>는 텍스트의 목차를 나눠줌. <li> 코드를 사용하기 위해서는 <ul> 코드를 함께 사용.
li는 반드시 ul코드를 가지고 있고 ul코드는 반드시 자식코드를 가지고 있다.
만약 숫자로 변경하고 싶다면 <ul>을 <ol>로 변경하면 숫자로 변경됨. ol은 ordered list의 약자
HTML의 <title> <meta> <body> <html> <!doctype html>
<title>명코딩</title>
<meta charset="utf-8">
<body> </body>
<head> </head>
<html> </html>
<!doctype html>
1번 코드: 타이틀이라는 코드로 감싸주게 되면 웹페이지의 제목을 사용자에게 알려줄 수 있음
2번 코드: <meta charset="utf-8">은 한국어를 출력할 수 있도록 만드는 코드 character + set
3번 코드: body 코드는 본문을 나타내는 코드로 사람 사이의 약속. 나타내는 효과는 없으나 코드를 보기 편하기 때문에 표시해준다.
4번 코드: 본문을 설명하는 태그는 head 코드. 이것 또한 사람 사이의 약속
5번 코드: 처음과 끝을 포함하는 태그
6번 코드: 관용적 코드
한경 컨센서스의 홈페이지 코드를 보면 동일하게 작성되어 있다.
HTML의 <a>
<p><a href="https://blog.naver.com/mhmh779"
target="_blank" title="html5 specification">Hypertext Markup Language (HTML)</a>
<a> 코드 사이에 href="링크주소"를 넣으면 홈페이지에서 클릭할 시 링크 주소로 이동함.
만약에 새 탭이 열리게끔 이동시키고 싶다면 target="_blank"를 입력. 링크에 마우스를 가져다 놨을 때 어떤 링크인지 보여주고 싶다면 title="보여주고 싶은 내용"을 입력
'프로그래밍 > HTML' 카테고리의 다른 글
| HTML 문법을 활용한 마라톤 제출 양식 코드리뷰 (0) | 2022.05.23 |
|---|---|
| 파이썬의 상속(Inheritance), 다형성(Polymorphism), 가시성(Visibility), decorate (0) | 2022.05.17 |