리스트 태그 (<li></li>)
목록으로 웹페이지 표현하는 방법이다.
<li>기술소개</li>
<li>기본문법</li>
<li>하이퍼텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>
이런식으로 코딩하면
하지만, <li> 태그는 단독으로 사용되지 않는다.
예를들어 항목이 다른 글이 있다면 둘을 구별해야한다.
<ul> 태그
unordered list
grouping을 하는 것이다. (같은 성격끼리 묶고, 다른 성격은 떨어뜨려놓기)
앞서말한 것 처럼 서로 다른 성격의 항목은 줄바꿈으로 떨어뜨려놓아야한다.
예를 들어 수업과목이 객체지향프로그래밍,자료구조 수강하는 학생명이 김철수, 김영희 라면 서로 다른 두 항목을 구별해주기 위해
<ul>
<li> 객체지향 프로그래밍 </li>
<li> 자료구조 </li>
</ul>
<ul>
<li> 김철수 </li>
<li> 김영희 </li>
<ul>
<ol> 태그
ordered list
순서가 있는 리스트로 표현할 때 사용한다.
자료구조의 선수과목이 객체지향 프로그래밍이므로 객지프 -> 자구 순으로 정렬되어야 한다.
이렇게 순서가 필요할 때 <ol> 태그를 쓴다.
<ol>
<li> 객체지향 프로그래밍 </li>
<li> 자료구조 </li>
</ol>
<ul>
<li> 김철수 </li>
<li> 김영희 </li>
<ul>
<title> 태그
만약 내가 c.html 파일을 만들어주게 된다면
이런식으로 페이지 이름이 뜰것이다. 근데 뭔가 간지가 나지 않는다.
페이지 이름이 HTML-수업소개가 뜨게 하려면
<title>HTML-수업소개</title>
<meta charset="utf-8">
이런식으로 <title> 태그를 달아주면 된다.
만약 한글 인코딩이 깨지면 <meta> 태그를 달아주면된다.
그러면 title에 설정한대로 페이지 이름이 생긴다!
<head>와 <body> 태그
title과 meta 태그는 본문은 아니지만 본문을 꾸며주는 아이들이다.
이렇게 본문이 아닌 애들을 묶어주는 것이 <head> 태그이다.
반대로 본문인 애들을 묶어주는 것은 <body> 태그이다.
<head>
<title>HTML-수업소개</title>
<meta charset="utf-8">
</head>
<body>
<h1> HTML </h1>
<ol>
<li> 기술소개</li>
<li> 기본문법</li>
<li> 하이퍼텍스트와 속성</li>
<li> 리스트와 태그의 중첩 </li>
</ol>
<body>
<h2>선행학습</h2>
본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.
웹애플리케이션 만들기
위의 수업에서는 웹을 구성하고 있는 여러기술을 얕고 넓게 배웁니다. 각각의 기술들이 어떻게 관계하고 있는지를 알려드리는 것이 위 수업의 목적입니다.
<h2> 수업의 목적 </h2>
본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다.
</body>
<html> 태그
head와 body 태그를 html태그로 감싸준다.
<html>
<head>
<title>HTML-수업소개</title>
<meta charset="utf-8">
</head>
<body>
<h1> HTML </h1>
<ol>
<li> 기술소개</li>
<li> 기본문법</li>
<li> 하이퍼텍스트와 속성</li>
<li> 리스트와 태그의 중첩 </li>
</ol>
<h2>선행학습</h2>
본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.
웹애플리케이션 만들기
위의 수업에서는 웹을 구성하고 있는 여러기술을 얕고 넓게 배웁니다. 각각의 기술들이 어떻게 관계하고 있는지를 알려드리는 것이 위 수업의 목적입니다.
<h2> 수업의 목적 </h2>
본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다.
</body>
</html>
DOCTYPE
어떤 방식의 html코드로 작성됐는지 브라우저에게 알려줌.
어떤 태그는 추가되기도 하고, 없어지기도하고 의미도 달라지기도 함. --> 태그가 어떠한 약속/표준 에 따라 제정된 태그인지를 브라우저에게 알려주는 것이 DOCTYPE
현재는 <!DOCTYPE html> 태그를 사용함.
http://tcpschool.com/html-tags/doctype
'HTML > 생활코딩' 카테고리의 다른 글
| [HTML기초] 입력양식 - form (0) | 2021.11.05 |
|---|---|
| [HTML 기초] table (0) | 2021.11.03 |
| [HTML기초] p태그,br태그,img태그 (0) | 2021.10.22 |
| [HTML기초] 웹사이트 만들기 (0) | 2021.10.11 |
| [HTML 기초] 태그/ 하이퍼텍스트와 속성 (0) | 2021.09.26 |
댓글