해당 게시물은 생활코딩 HTML 을 정리한 내용 입니다.
출처: 생활코딩(https://opentutorials.org/course/2039)
[목차]
1. 기술소개
- HTML 정의
- HyperText : 하이퍼텍스트를 가장 중요한 특징으로 하는
(문서와 문서가 링크로 연결되어 있다)
- Markup : 마크업이라는 형식을 가진
(태그로 이루어져 있다)
- Language : 컴퓨터 프로그래밍 언어
2. 기본문법
- 예제
<h1>오늘의 명언</h1>
우리 모두는 <strong>자신의 힘</strong>으로 발견한 내용을 가장 쉽게 익힌다.(도널드 커누스)
- 설명
- strong 태그: 텍스트를 굵게 표시합니다.
- h 태그: h는 heading을 의미하며 제목을 나타냅니다.
그리고 h1~h6까지 존재 합니다.
3. 하이퍼텍스트와 속성
- 예제
<h1>오늘의 명언</h1>
우리 모두는 <strong>자신의 힘</strong>으로 발견한 내용을 가장 쉽게 익힌다.
(<a target="_blank" href="https://ko.wikipedia.org/wiki/%EB%8F%84%EB%84%90%EB%93%9C_%EC%BB%A4%EB%88%84%EC%8A%A4" title="전설적인 프로그래머">도널드 커누스</a>)
- 설명
- a 태그: a는 anchor의 약자, 링크를 설정합니다.
- href 속성: 링크의 주소(URL)를 설정합니다.
- target 속성: 링크를 클릭 시, 어떻게 열지를 설정 합니다.
속성 값을 _blank로 지정하면 새로운 탭에서 창을 엽니다.
-title 속성: 링크에 마우스를 롤오버 했을 때, 표시할 텍스트를 지정합니다.
4. 태그의 중첩과 목록
- 예제
<ol>
<li>기술소개</li>
<li>기본문법</li>
<li>하이퍼텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>
</ol>
<ul>
<li>최진혁</li>
<li>최유빈</li>
<li>한이람</li>
<li>한이은</li>
</ul>
- 설명
- 태그라는 것은 태그 안에 또 다른 태그가 존재할 수 있습니다.
- li 태그:list의 약자, 목록을 만드는 태그입니다.
- ol 태그: ordered list의 약자, 순서가 있는 목록을 만드는 태그입니다.
- ul 태그: unordered list의 약자, 순서가 없는 목록을 만드는 태그입니다.
5. 문서의 구조
- 예제
<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>
본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.
</body>
</html>
- 설명- html 태그: html 문서임을 의미하는 태그입니다.
- head 태그: 웹페이지의 본문 이외의 정보를 모아 놓는 태그입니다.
head 태그 내에서 정의되는 태그 2가지를 배웠습니다. (title, meta 태그)
- title 태그: 웹 브라우저의 탭 제목에 표시되는 텍스트를 지정하는 태그입니다.
- meta 태그: charset 속성을 이용하여 문자열 세트를 지정할 수 있습니다.
- body 태그: 웹페이지의 본문을 의미하는 태그입니다.
'HTML' 카테고리의 다른 글
| 생활코딩 HTML 정리 (6~10) (0) | 2020.01.09 |
|---|
댓글