1. HTML과 태그들

HTML과 CSS

1. HTML과 태그들

char1ey 2022. 10. 20. 20:14

1. HTML

2. 브라우저

3. HTML의 구성

3.1. 태그(tag)
3.2. 태그의 속성(property)
3.2.1 절대주소와 상대주소

3.3. 블럭(block)과 인라인(inline)

4. 많이 사용하는 태그

4.1 많이 사용하는 태그
4.2 속성 부여가 필요한 태그
4.3 시멘틱(semantic) 태그

1. HTML

- Hyper Text Mark_up Language

- Mark_up 언어라고도 하며 꺾쇠(<, >)로 이루어진 언어를 뜻한다

- 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 알 수 있다

- 특별한 언어가 아닌 텍스트구조로 이루어져 메모장으로도 코드를 작성해 구현할 수 있으나, 효율이 떨어져 vscode와 같은 에디터들을 사용한다.

2. 브라우저

- 일반적으로 웹사이트를 열게 해주는 도구 (ex. 크롬, 사파리, 엣지, 파이어폭스 등등)

- HTML을 해석하여 시각화(렌더링)해주는 도구

- 크게 URL을 쓰는 주소창 부분(네트워크 영역)과 웹사이트가 보여지는 부분(렌더링 영역)으로 나뉜다

- F12를 누르면 보고있는 페이지의 HTML구조를 확인할 수 있다

3. HTML의 구성

3.1 태그(tag)

- 꺾쇠(<., >)로 구성 되어있으며 꺾쇠안의 내용을 포함하여 엘리먼트(element) 또는 태그(tag)라고 한다

- 태그는 반드시 여는 태그(< >)와 닫는 태그(</ >)로 구성되어야한다. 하지만, <input/>, <img/> 등의 예외적인 태그들도 있다.

- HTML은 <head>부분과 <body>부분으로 나뉜다

- 엘리먼트 안에는 다른 엘리먼트가 들어갈 수 있다

ex)

<html>
    <head>
    	<title>
		웹사이트	
        </title>
    </head>
    <body>
	Hello, World!
    </body>
</html>

3.2 태그의 속성(property)

- <태그 속성 = "속성값">의 구조를 가진다.(추후에 배우게 될 querystring의 형태와 같다)

- 한 태그에 여러속성을 부여할 수 있다

- 닫는태그가 없는 태그들은 주로 속성값들이 굉장히 많다

ex)

<a href="http://char1ey.tistory.com" id="char1ey">블로그</a>

<link href="./221020/public/css" rel="stylesheet" type="text/css"/>

3.2.1 절대주소와 상대주소

- 절대주소: 파일의 위치를 가장 상위 디렉토리부터 파일이 있는 하위 디렉토리까지의 위치를 나타낸다

- 상대주소: 기준이 되는 디렉토리부터 원하는 파일이 있는 디렉토리 까지의 위치를 나타낸다.

▶ 위의 href의 속성값에서 "."은 자기자신의 위치를 뜻하고, /은 각 요소를 구분해준다.

즉, "./221020/public/css"는 현재폴더 > 221020폴더 > public폴더 > css폴더 순으로 나타냄을 의미한다.

3.3 블럭(block)과 인라인(inline)

- 모든 엘리먼트는 블럭(block)과 인라인(inline)으로 구분할 수 있다

- 블럭(block)은 사용하는 줄의 공간을 모두 차지한다

- 인라인(inline)은 사용하는 공간만큼만 차지한다

ex) 블럭속성인 div와 인라인속성인 span을 다음과 같이 작성하고 브라우저에 구현하면 다음과 같이 나타난다

<div>1</div>
<div>2</div>
<span>3</span>
<span>4</span>

3 4

4. 많이 사용하는 태그

4.1 많이 사용하는 태그

- <h1~h6> 보통 제목에 많이 사용하며 <h1>가 가장 크고 갈수록 작아진다

- <div> 영역을 구분해주는 태그로 가장 많이 사용된다

- <span> <div>와 마찬가지로 영역을 구분해 주지만 인라인(inline)속성을 가진다

- <a> 속성을 부여하여 링크를 연결하는 태그

- <ul> unordered list의 약자이며, <li> 태그를 사용하기 전에 사용하여 <li> 태그를 묶어주는 역할을 한다

- <li> <ul>태그 안에 사용하며 list를 뜻하며 <ul> 영역 안에 리스트를 표현해준다

- <select> 말그대로 선택할 수 있는 박스를 표현하며 선택할 내용은 자식 태그로 <option>을 주어 내용을 적어야 한다

- <option> 주로 <select>, <optgroup>, <datalist>의 자식 태그로 쓰이며 하나의 항목을 나타낸다

- <i> 글꼴을 기울여준다

- <button> 단추를 만들어주는 인라인 속성의 태그

4.2 속성 부여가 필요한 태그

- <img/> "src="의 값으로 이미지의 경로를 지정하며, "alt=" 값은 이미지를 설명하거나, 나타나지 않을때 대신한다

- <input/> "type="의 값으로 "text", "password"를 사용하고 "radio"사용시 "checked="에 "checked"를 부여하면, radio 단추가 선택된 상태로 렌더링된다

4.3 시멘틱(semantic) 태그

- <header>, <nav>, <main>, <section>, <aside>, <footer> 등의 태그들은 <div>와 기능의 차이는 없으나 브라우저나 개발자로 하여금 해당 태그가 사용된 의미를 명확히 하는 태그들이다. 즉, 직접 내용을 보지않더라도 그 내용을 추측할 수 있게끔 하는 태그들이다.