-
HTML & Internet 1일차 (생활코딩 WEB1)HTML 2021. 8. 30. 20:25
HTML (Hyper Text Markup Lauguage)
쉽다. 중요하다. 퍼블릭 도메인이다. (저작권 X)
웹브라우저 + 에디터(윈도우-메모장, 맥-텍스트 편집기)가 필요하다
이 수업에서는 아톰(atom.io)을 사용함
에디터는
html editor / best html editor 2021
로 검색하면 다른 것도 찾을 수 있음
웹페이지 확장자는 html
웹브라우저에서 Ctrl + O로 파일 열기
저장 : Ctrl + S
태그(TAG) : <> 열리는 태그, </> 닫히는 태그
굵은 글씨 : <strong>
밑줄 : <u>
<h1~h6> : 글자가 두꺼워짐, 숫자가 클수록 크기는 작아짐
<br> : 줄 바꿈 (닫지 않는 태그) img, input, br, hr, meta 등
<p> : 단락, CSS로 단락 간격 조정 가능함
ex) <p style=“margin-top:45px;”> - p태그 위에 45px 만큼의 여백(margin)이 생김
<img> : 이미지
*태그의 이름만으로는 정보가 부족할 때가 있음 -> 속성을 사용
ex) <img src=“coding.jpg width=“100%”>
속성의 순서는 상관없음
용어를 잘 모르겠으면 사전 찾아보기
우리의 일상에 밀접한 단어일 가능성이 높음
html에서 많이 쓰이는 태그 32개
html, head, body, title, meta, div, a, script, link, img, span, p, li, ul, style, br, h2, input, h1, form, h3, nav, footer, header, iframe, butto, strong, i
unsplash 저작권 없는 이미지 사이트
부모, 자식 태그
<li> : 목록 & <ul>, <ol>
<table>, <tr>, <td>
<title> : 웹 페이지 제목
한글은 써도 그대로 출력되지 않음
지금은 utf-8 방식으로 사용되고 있기 때문에
<meta charset=“utf-8”> 사용
<body> : 본문을 묶음
<head> : 본문을 설명하는 것을 묶음
전체적인 구조
<!doctype html>
<html>
<head>
</head>
<body>
</body>
<a> : 링크(hypertext)
소스 href=“주소”
targe=“_blank” 새 탭으로 열기
title=“설명” 툴팁
'HTML' 카테고리의 다른 글
HTML & Internet 2일차 (생활코딩 WEB1) (0) 2021.08.30