저번 포스팅에서 매우매우매우매우 단순한 구조의 HTML 형태를 만들었다.
HTML 구성(head, body) | 아무것도 모르고 시작하는 코딩
이번에는 TAG에 대해서 알아보겠다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>제목입니다</title>
</head>
<body>
안녕하세요
</body>
</html>
위에서 <>안에 들어있는 것들이 TAG 이다. 그리고 위의 식은 기본식이기 때문에 tag명을 바꿀 수 없다.
(<!DOCTYPE html>는 tag가 아니라 "이 문서는 html 형식을 사용합니다"라는 의미이다.)
<html> tag : 웹 페이지의 시작과 끝을 표시하는 태그
<head> tag : 웹 페이지의 정보, 외부 파일들을 링크할 때 쓰는 태그
<body> tag : 실제 표시되는 내용
<meta> tag : 문자 인코딩 방식(<meta charset="UTF-8"> : 유니코드를 인코딩 하는 방식인데 한글이나 영어를 컴퓨터가 이해할 수 있는 0과1로 표현할 때 ㄱ=0001 ㄴ=0010 ㄷ=0101 뭐 이런식으로 변환해라 이런말이다. 잘 몰라도 지장 없다)
<title> tag : 문서의 제목이다. 브라우저에 탭을 보면 웹페이지마다 탭에 적힌 글씨가 다를껀데 그게 제목이다
위 까지가 지정되어 있는 tag 명이다. 그리고 TAG는 <여는태그 속성명="속성값">내용</닫는태그> 이런 식으로 작성한다.
위에 <html lang="en">은 html tag이고 언어(lang)은 en(영어)를 쓰라는 말이다.
(닫는 태그가 없는 경우도 있다)
이제 지정되어 있지 않은 자주 쓰는 tag를 알려주겠다.
<div></div>
컨텐츠를 묶을 때 사용합니다.
보통 <div class=“wrap”> 이런식으로 클래스명을 정해서 이 클래스에 특정 속성을 정해주려고 하는 경우가 많아요.
<a>
anchor 닷의 a를 쓴건데 웹페이지나 외부 사이트를 연결할 때 사용합니다.
<a href=“링크주소”>내용</a> 이렇게 쓰는데 href는 hypertext reference입니다. 웹 화면에서 ‘내용’ 글씨를 클릭하면 링크 주소로 이동합니다.
<script></script>
이건 자바스크립트 코드를 넣을 때 이 스크립트 태그 사이에 넣습니다.
<link>
외부 파일을 연결할 때 사용합니다.
<head></head>사이에 넣습니다.
<img>
<img src=“이미지 경로”> 이렇게 씁니다. 경로는 웹페이지에 있는 경로일수도 있고, 내컴퓨터에 저장된 이미지일수도 있습니다.
<span></span>
div처럼 컨텐츠를 구분할 때 사용합니다. 두 개의 차이라면 div는 div를 여러개 썼을 때 문단 문단 문단 줄바꿈이 되는데 span은 옆으로 붙습니다. 그리고 div는 박스형태로 영역을 감싸는데 span은 줄단위로 영역이 설정됩니다.
<p></p>
paragraph 문단의 약자입니다. div랑 마찬가지고 같은 내용을 div 태그랑 p태그랑 사용했을 때 출력되는 결과물을 똑같습니다. 하지만, 개념적으로 div는 컨텐츠 구분을 위한 목적이라면 p는 문장을 쓸 때 단락을 구분하는게 목적입니다
<li></li>
<ul>이랑 <ol>안에서 각 항목을 나열할 때 씁니다. ul은 unorderlist고 ol은 orderlist입니다. 각각 출력되는 값이 ol은 값 앞에 1. 값 2. 값 3. 값 이렇게 순서가 나오고 ul은 ㆍ값 ㆍ값 ㆍ값 으로 나옵니다.
<style></style>
스타일 정보를 적는 곳입니다
<br>
태그가 삽입된 위치에서 줄이 바뀝니다
<h1>~<h6>
h6까지 있는데 제목 태그입니다. h1 글씨가 제일 크고 h6가 제일 작습니다.
<input>
사용자가 직접 정보를 입력하는 부분을 만들 때 사용합니다.
ex)로그인 박스
<button></button>
버튼 모양을 만듭니다. 기능을 하려면 함수를 적용해야 합니다
예를 들어 위의 예시에서 body tag안에 있는 "안녕하세요"라는 문자를
<body>
<div>안녕하세요</div>
</body>이런식으로 div tag 안에 넣는다. 혹은
<body>
<p>안녕하세요</p>
</body>이렇게 p tag로 묶어도 된다. 사실 a,b,c,d 아무 문자를 써도 작동하는데는 문제가 없지만, 협업을 할 때 가독성이 좋도록 미리 자주쓰는 tag 명을 정해놓은거라고 보면 된다.
이 이외에도 많은 tag명들이 있다. 여러분은 구글에서 'html 태그'라고만 검색해도 무수히 많은 태그명들을 볼 수 있다. 그때 그때 검색해서 사용하면 된다. 다만 검색시 중요한 점은 'html'이라고 붙여줘야 한다는 것이다. 태그 뿐 아니라 나중에 필요한 코드를 검색할 때, 'html 짝수 확인 코드', 'javascript 짝수 확인 코드', '파이썬 짝수 확인 코드' 이런식으로 어떤 언어에서 어떤 내용이 필요한지 정확하게 검색하는게 중요하다.
공감 부탁 드려요 :)
'아무것도 모르고 시작하는 코딩' 카테고리의 다른 글
| meta viewport 태그 | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.01 |
|---|---|
| HTML 로그인 박스 만들기 | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.01 |
| HTML 구성(head, body) | 아무것도 모르고 시작하는 코딩 (0) | 2020.07.31 |
| HTML이란? | 아무것도 모르고 시작하는 코딩 (0) | 2020.07.31 |
| 웹페이지란? | 아무것도 모르고 시작하는 코딩 (0) | 2020.07.30 |