HTML의 기초와 태그로 글을 작성하는 법을 정리 해보겠습니다.
웹사이트를 제작하고 만들고 싶을 때 사용한다고 할 수 있습니다.
세상에 존재하는 모든 웹페이지는 html, css, javascript로 동작합니다.
HTML은 Hypertext Markup Language의 약자인데
Markup Language(마크업 랭기지)에 주목해주시면 됩니다.
마크업 언어는 "자료의 구조를 표현하기 위한 언어"입니다.
여기는 menu고, main이고, 여기는 footer라고 표시를 하는 것입니다.
웹페이지에 우리가 글넣고 그림넣고 박스넣고 버튼넣고 동영상을 넣고
등등의 .. 자료를 입력합니다.
기업용 홈페이지든, 우리가 많이 쓰는 유튜브 싸이트, 커뮤니티 사이트, 쇼핑몰도
여기에 해당한다고 볼 수 있습니다.
그 자료들이 어디에 배치되는지 등을
기록하기 위해 존재하는 언어가 바로 HTML이라고 보면 되겠습니다.
아무튼 여러분이 HTML 언어로 글넣고 그림넣고 하면 웹페이지가 되는 것입니다.
HTML 파일 기본 템플릿
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
|
HTML 문서는 .html로 끝나도록 저장해야만 합니다.
모든 HTML 문서는 위의 코드를 가지고 있어야 HTML 파일로 인식합니다.
그리고 index.html로 작성을 해야 브라우저가
기본으로 이것을 인식해서 읽어주게 됩니다.
<head> 내부엔 사이트 생성에 필요한 인코딩형식, 사이트제목, 필요한
CSS나 JS파일 등이 들어갈 수 있습니다.
폰트어썸이나, 부트스트랩, 제이쿼리 cdn을 넣어주게 됩니다.
<body> 내부엔 실제 웹사이트에서 보여줄 글, 그림 등을 적어주시면 됩니다.
그러면 body안에
HTML은 <태그>로 작성합니다.
<p>헬로우 월드</p> 이런 식의 태그들을 열고 꺽쇠가 표시되는 모양으로
닫은 후 내부에 글을 넣고 그림을 넣을 수 있습니다.
html 태그들은 종류가 많습니다. 암기를 할 필요는 없습니다.
용도가 매우 많이 존재를 한다는 것을 숙지하고 있스면 됩니다.
글을 작성하고 싶다면 글을 넣을 때 쓰는 태그를 사용하고,
버튼을 넣고 싶으면 버튼을 넣을 때 쓰는 태그를 사용하면 됩니다.
기본 태그 목록은 아래와 같습니다.
|
<p>글 본문</p>
<h1>글 제목</h1>
<img src="이미지 경로">
<a href="가고싶은 경로">링크</a>
<button>버튼</button>
<ul><li>리스트(언오더)</li></ul>
<ol><li>리스트(오더)</li></ol>
|
① 태그를 열었으면 </태그명>으로 닫아야합니다.
닫지 않아도 되는 태그도 몇개 존재합니다. <img>
② 특정 태그는 안에 href=" ", src=" " 이런 속성을 집어넣어서 추가정보를 작성합니다.
③ 용도에 맞는 태그를 사용해야합니다.
용도에 맞는 태그를 쓰는게 강제되는 사항은 아닙니다.
<h1>버튼</h1> 이렇게 만든 다음에 버튼처럼 만들어도 되긴 합니다.
마크업언어기 때문에 자료의 구조를 쉽게 파악할 수 있어야합니다.
그럴 때 용도에 맞는 태그 사용하는게 도움이 되고
용도에 맞는 태그를 사용하면 더욱 '웹표준'에 맞는 웹을 만들어낼 수 있습니다.
이미지를 눌렀을 때 다른 곳으로 이동하게(링크) 만들고 싶다면?
링크를 만들 수 있는 <a></a> 태그가 있습니다.
글 대신 그림을 집어넣을 수 있습니다.
| <a href="http://naver.com"> <img src=""> </a> |
위와같이 작성을 하면 됩니다.
이런 식으로 HTML은 태그 안에 태그를 넣어줄 수도 있습니다.
'프로그래밍 스터디( 공부노트 ) > HTML, CSS' 카테고리의 다른 글
| css - display : inline-block 사용하는 방법 정리하기 (0) | 2021.12.20 |
|---|---|
| css를 이용하여 그림자 그리고 레이아웃 만들기 (0) | 2021.12.20 |
| 많이 사용하는 css 속성을 정리합니다. (0) | 2021.12.19 |
| html 가운데 정렬 및 반응형 만드는 방법 , css 이용하기 - 정리 (0) | 2021.12.19 |
| css 이미지와 글자 스타일 하는 방법 정리, html 스타일 (0) | 2021.12.18 |