HTML

주연·2024년 2월 28일

HTML
Hyper Text Markup Language
웹 브라우저에 표시되는 웹 페이지를 만들어달라고 컴퓨터에게 요청하는 언어

간단한 연습..

메모장에 아무 글을 적고 a.html(확장자명 html)으로 모든 파일 형식으로 저장
-> 클릭하면 웹페이지 열림

<h2>오늘의 명언</h2>

<strong>가비지타임</strong>은 짱이다
(최애는 <a href="https://namu.wiki/w/%EC%A0%84%EC%98%81%EC%A4%91" target="_blank" title="요~준수">전영중</a>)

이렇게 치면 다음과 같은 페이지가 열림

여기서
< h2> < /h2> (제목)
< strong> < /strong> (강조, 글자 두껍게)
< a> < /a> (anchor 약자, url 연결시 사용)
은 태그

href, target, title은 속성
href: 하이퍼 참조
target="_blank" : 새로운 창 열리게 함
title: 조그만 툴팁으로 내용 미리 표시

*속성의 순서는 상관없음

태크의 중첩

li: list
ul: unordered list
ol: ordered list

*태그안에 태그가 존재할 수 있음

문서의 구조

<html>
<head>
<title>HTML-가비지타임 소개</title>
<meta charsest="utf-8">
</head>

<body>
<h1>HTML</h1>
<ol>
  <li>지상고</li>
  <li>원중고</li>
  <li>조형고</li>
  <li>장도고</li>
</ol>

<h2>제목의 유래</h2>
'가비지타임'은 농구에서 이미 승패가 결정이 난 시간대를 의미하며, 이때는 체력 안배를 위해 주전 선수들을 빼고 교체 선수들을 투입시킨다. 

<h2>작가의 인터뷰</h2>
작가의 인터뷰에 따르면 가비지타임은 모두가 포기하는 시간대인데 그 때 나오는 역전이 제일 멋지다고 생각해서 지었다고 한다.
</body>
</html>

  1. < title> < /title>: 상단의 페이지를 표시하는 글씨를 바꿔줌


  2. < meta charsest="utf-8">: 한글이 깨지지 않게 해줌

html 태그 (가장 상단)
head와 body 태그

  • body 태그: 본문에 해당되는 태그
  • head 태그: body 태그 외 내용, 문서의 내용은 아니지만 문서를 설명해주는, 그 문서의 제목이나 저자, 문서 저장 방법 등을 담고 있는 태그

DOCTYPE

= Document Type

브라우저에게 어떠한 표준을 따르고 있는 태그라고 알려줌.

html5 에 접어들면서 < !DOCTYPE html>으로 단일화
< !DOCTYPE html>이거 가장 맨 위에 써주면 됨

Tag

< br>: html new line tag
< p>< /p>: html paragraph tag 문단

  • css 를 이용하면 정교하게 제어 가능

< img width="100%" src="coding.jpg">
이미지 띄우기, src= 이미지파일 이름 width = 크기

profile
공부 기록

0개의 댓글