[웹기초] 생활코딩 WEB 9 ~ WEB 18

renne 2022. 5. 1. 19:33

줄 바꿈 태그 <br> vs <p> </p>

<br>	<p> </p>
줄 바꿈 태그	단락(paragraph) 태그
단순한 줄 바꿈 기능	단락을 의미론적으로 표현하기 때문에 웹페이지를 정보로서 더 가치 있게 만든다.
원하는 만큼 입력하여 줄 바꿈을 할 수 있다.	정해져 있는 여백만큼 벌어져서 시각적 자유도가 낮다.

CSS로 <p> 태그의 낮은 시각적 자유도를 보완하는 방법

style 속성과 margin(태그와 태그 사이의 여백을 나타내는 CSS 문법)을 통해, 단락의 여백을 픽셀(px) 단위로 정교하게 조정할 수 있다.

이미지 넣기 태그 <img>

<img>태그는 여태 나온 다른 태그들과는 달리 이름만으로는 정보가 부족하다. 이때, 속성(attirbute)를 추가함으로써 태그에 의미를 부가할 수 있다.

파란형광 부분이 속성이다. src는 source의 약자로, 이미지의 주소를 입력하는 부분이다. width는 이미지의 크기를 조정한다. 이로써 이미지가 웹페이지에 추가됐다.

속성은 순서가 상관이 없으므로 위의 태그의 아래의 태그는 같은 역할을 수행한다.

부모 태그와 자식 태그

태그가 서로 포함 관계로 연관되어 있을 때, 포함하고 있는 태그를 부모 태그, 포함된 태그를 자식 태그라고 한다. HTML의 여러 태그들은 부모-자식 관계가 자주 바뀐다. 그러나 어떤 태그들은 항상 같이 다닌다.

목차 태그 <li> </li>

목차 태그는 말 그대로 목차를 만드는 데에 쓰인다. 그리고 이 목차를 그룹핑(grouping)하는 부모 태그 2가지가 있다.

웹페이지의 이름 태그 <title> </title>

파일명으로 뜨던 웹페이지의 이름을 설정하는 태그다.

메타 태그 <meta>

현재 우리가 작성하고 있는 파일은 utf-8 방식으로 저장되기 때문에, 웹브라우저도 utf-8 방식으로 파일을 읽어야 한글 글씨가 깨지는 등의 문제가 발생하지 않는다.

관용적으로 사용하는 기본 태그들

<!doctype html>: 이 문서는 html이라는 뜻의 태그. 관용적으로 사용한다.

<html> </html>: 최고위 태그

<head> </head>: 본문을 설명하는 태그들(title, meta 등)을 묶는 태그

<body> </body>: 본문을 묶는 태그

<!doctype html>
<html>
	<head>
		<title>Regulus Black</title>
		<meta charset="utf-8">
	</head>
	<body>
		Regulus Arcturus Black
	</body>
</html>

하이퍼링크 태그 <a> </a>

<a href="https://harrypotter.fandom.com/wiki/Regulus_Black" target="_blank" title="Regulus Black wiki">Regulus</a>

href=" "	연결할 사이트의 url을 입력하는 속성 (Hyperlink REFerence)
target="_blank"	연결할 사이트가 새 탭에서 열리게 하는 속성
title="Regulus Black wiki"	하이퍼링크가 걸린 글자 "Regulus" 위에 커서를 올려놨을 때 보이는 문구