태그의 중첩과 목록
- 컴퓨터는 내가 말 안해주면 모르는 븅신임 그런것 처럼 HTML을 하면서도 하나하나 태그 라는것을 이용해서 내가 컴퓨터 한테 말해줘야 하는데, 그 예시중 하나가 목록과 중첩임 내 마음대로 줄바꿈을 시도하면 HTML은 무시하고 한 줄로 쭉 표시하는데 이를 태그를 이용해서 해결해봄
<li>사과</li>
<li>바나나</li>
<li>포도</li>
<li>사자</li>
<li>코끼리</li>
<li>호랑이</li>-
이렇게
<li>라는걸 사용해서 줄바꿈을 함. -
근데 또 보니깐 너무 지저분함 성격이 같은 애들끼리 또 묶어보자
<ul>
<li>사과</li>
<li>바나나</li>
<li>포도</li>
</ul>
<ul>
<li>사자</li>
<li>코끼리</li>
<li>호랑이</li>
</ul> -
훨씬 깔끔하다. 여기서 알아야할게 있는데 태그 안에 태그를 쓸 수 있다는 것 이다
-
근데 여기서 내가 보니깐 너무 지저분해서 과일만 순서대로 정리 하고싶음 .
<ol> ol = ordered list 의 약자
<li>사과</li> li = list 의 약자
<li>바나나</li> ul = unordered list 의 약자
<li>포도</li>
</ol>
<ul>
<li>사자</li>
<li>코끼리</li>
<li>호랑이</li>
</ul> -
**결론 태그와 태그는 중첩되서 사용될 수 있다**
문서의 구조
<title>html - 실습</title>
<h1>HTML</h1>
<strong>매너가 사람을 만든다 </strong>
<h2>숫자의 순서</h2>
<ol>
<li>하나</li>
<li>둘</li>
<li>셋</li>
</ol>- 위 html으로 작성된 코드 들은 본문이다, 그리고 맨 위 "html - 실습" 이라고 되어있는 부분은 본문을 꾸며주는 역할을 하고있다. 지저분하니깐 본문과 꾸며주는 역할을 하는 부분을 나눠보자.
Head / Body 태그
<head>
<title>html - 실습</title>
</head>
<body>
<h1>HTML</h1>
<strong>매너가 사람을 만든다 </strong>
<h2>숫자의 순서</h2>
<ol>
<li>하나</li>
<li>둘</li>
<li>셋</li>
</ol>
</body>-
이렇게해서 head 라는 태그 부분은 본문을 꾸며주는 역할을 하는 태그 만 모아놓은곳, body 라는 태그 부분은 본문 으로 나눴다
-
시간이 지나고 만약 내가 예쁜 웹페이지를 만드려고 막 꾸미는데 예쁘게 만들거라서 태그가 엄청 들어간다, 그러면 본문과 본문을 꾸며주는 부분이 나눠지지아... 그냥 head은 대가리로 하고 body는 몸으로 하자 .. -
사용하는 이유? = 1. HTML문서 안에서 영역이 나눠지니까 구분이 쉬워지고 (걍 깔끔해짐) 2. 미리 요소들을 불러들여 프로세스(속도)를 높여줌
HTML태그
- 위에있는 head,body 태그 가 태그들 중에서 가장 큰,가장 위에 있는 태그들 이라고 하면 이 둘보다 한 단계 위에있는 태그가 있다. 바로 HTML 태그이다.
<html>
<head>
<title>html - 실습</title>
</head>
<body>
<h1>HTML</h1>
<strong>매너가 사람을 만든다 </strong>
<h2>숫자의 순서</h2>
<ol>
<li>하나</li>
<li>둘</li>
<li>셋</li>
</ol>
</body>
</html>DOCTYPE
Document Type
과거와 현재의 html태그 의 수는 많이 차이가 나는데 과거부터 지금 까지 태그의 의미,기능 등이 바뀌거나 삭제됨. html은 버전별로 지원하는 태그가 다르기 때문에 우리가 웹브라우저 한테 --한 형식의 태그야 라고 말해주는게 DOCTYPE이다.
- 버전별로 선언하는 DOCTYPE? 가 모두 다름
코딩 초보