[새싹x코딩온] 웹 개발자 부트캠프 과정 1주차 회고

Study/HTML & CSS

[새싹x코딩온] 웹 개발자 부트캠프 과정 1주차 회고 | HTML(1)

다니니니 2024. 5. 17. 23:55

728x90

1. 서론

HTML 에 대해 배우기
HTML 태그에 대해 배우고 사용하기

2. 본론

HTML 이란?

HTML은 Hypertext Markup Language 의 줄임말이다.

웹 페이지를 구성하는 가장 기초적인 언어라고 할 수 있다.

Hypertext : 참조(하이퍼링크)를 통해 사용자가 한 페이지에서 다른 페이지로 이동할 수 있게 하는것

웹페이지를 사용하다가 어느 문자를 클릭하면 다른 페이지로 이동하게 되는데 이 역할을 하는 텍스트를 하이퍼텍스트라고 한다.

Makeup : 문서나 데이터의 구조를 명기하는 언어

문서의 구조를 표시해주는 역할을 한다.

HTML 구조

어느 웹사이트에서나 F12를 누르면 개발자 도구라는 것이 나온다.

개발자 도구를 열면 아래와 같은 화면이 나온다.

<>안에 들어있는 저 단어는 무엇을 뜻하는 것일까? 이제부터 알아보자

<>은 태그라고 불린다

<!DOCTYPE html>

DOCTYPE 선언은 HTML문서에서 가장 먼저 선언된다.

이것은 HTML5로 문서를 작성하겠다고 알려주는 것이며 브라우저가 이것을 읽는 순간

HTML5문법으로 읽을 준비를 한다.

실제적은 HTML문서는 <html></html> 사이에 작성한다.

html에서는 lang 속성을 사용하고 lang 속성은 사용되는 언어를 지정한다. (영어는 en, 한국어는 ko)

<head> 태그

HTML문서에서 메타 데이터와 문서 정보를 정의하는데 사용하는 태그다.

메타 데이터란 데이터란 정보를 제공하는 데이터를 의미한다.

웹 브라우저에서는 출력되지 않는다.

head태그내에서 사용되는 태그는 아래와 같다.

title : 문서의 제목을 보여준다. 브라우저 탭에서 제목을 출력한다.

style : HTML 문서의 style 정보를 정의한다. css를 html 문서내에서 작성하고 싶을 때 해당되는 태그 내에서 작성한다.
link : 외부 리소스와의 연결 정보를 정의한다. 외부 css 파일을 연계할때 사용된다.
script : javascript 를 정의한다. html 문서 내에서 자바스크립트를 코딩할때 사용한다.
meta : 페이지 설명, 키워드, 저자, 화면 크기 등의 정보.

meta도 다양한 속성들이 있는데 이 중 캡쳐화면에 있는 2가지의 속성만 설명하자면

<meta charset="UTF-8">

인코딩 방식을 지정해준다.

사실상 컴퓨터는 0과 1 밖에 이해하지 못한다.

사람이 작성한 코드를 컴퓨터가 이해하는 코드로 변경해준다.

작성하지 않으면 html 파일의 글씨가 깨질 수 있다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

모바일/반응형 웹에서 인식할 수 있는 태그다.

요즘 같이 스마트폰으로 웹을 방문하는 사람들이 많은 시점에 꼭 필요한 태그다.

이를 설정하지 않으면 모바일에서 웹을 방문했을때 모바일 크기로 적용되지 않고 웹사이트가 깨질 수 있다.

이외에도 메타 태그의 속성 중에는 검색엔진에 사용되는 태그도 있는데 예를 들면 아래의 태그의 경우

검색 엔진에 제공할 내용을 적어준다.

<meta name="descriotion" content="내용">

그래서 네이버의 개발자 도구와 구글에서 네이버를 검색한 것을 보면

해당 내용이 출력된 것을 확인할 수 있다.

<body> 태그

HTML문서의 웹브라우저에 출력되는 내용 부분이다.

다양한 태그들을 사용해서 웹 페이지의 구조를 설계할 수 있다.

이제 실제로 html문서를 작성할 때 사용하는 태그들에 대해 알아보자

그 전에 html 기본 문법을 알아보자

HTML 기본 문법

중첩(Nested)

중첩이란 요소간 관계를 표현하는 단어인데 부모자식관계라고도 한다.

어떤 요소에 하위 요소가 있으면 상위요소는 "부모요소" 하위요소는 "자식요소" 라고 한다.

<body> 
  <h1>제목</h1>
  <p>본문</p>
</body>

위와 같은 html 문서가 있다고 했을때

body는 h1와 p의 부모요소다.

h1와 p는 body의 자식요소다.

(참고로 p와 h1는 형제요소다)

이 중첩 문법은 html 뿐만 아니라 다른 개발언어에서 다 사용하는 거니 잘 기억해두자

주석(Comments)

주석은 브라우저에 출력되지 않으며 개발자에게 코드를 설명하기 위해 사용한다.

HTML 태그

HTML태그는

<요소명 속성명="속성값">

이런식으로 정해져 있다.

요소는 크게 3가지로 나뉜다.

1. 빈 요소(Empty Element)

내용 없이 구조적인 기능만 하는 요소다,.

ex) <br>줄바꿈태그 / <hr>구분선태그

2. 블록 요소(Block Element)

여러가지 요소를 담는 구분구역을 감싸는 요소다,.

컨텐츠를 구분하는 요소.

기본적으로 부모 요소의 전체 너비(100%)를 차지한다,.

태그가 시작되면 무조건 줄바꿈이 일어난다.

모든 인라인 요소를 포함하거나 다른 블록 요소를 포함한다.

ex) <h1></h1>, <div></div>, <p></p>

3. 인라인 요소(Inline Element)

내용을 구분하는 요소

텍스트 혹은 이미지 크기에 맞는 필요한 공간만을 차지하는 요소다.

너비와 높이를 지정할 수 없다.

블록 요소 안에 포함되어 있는 것으로, 인라인 요소만 가질 수 있다.

ex) <a></a>, <span></span>

HTML 태그 내 속성은 태그를 보조하는 명령어다.

태그 안쪽에서 작동한다

태그마다 사용 가능한 속성이 있으며 공통으로 사용할 수 있는 속성이 있다.

<a href="링크" style="스타일" class="클래스명" id="아이디명"></a>
<!--href, style, class, id가 속성이다. -->

HTML 태그 종류

h1~h6 : 제목(heading)
p : 본문(paragraph)
br : 줄바꿈(line-break)
hr : 가로 구분선(horizontal)
ul : 순서 없는 목록(unordered list)
ol : 순서 있는 목록(ordered list)

ul와 ol 태그는 자식 요소로 li를 갖는다.

태그들 중에는 문자를 꾸며주는 태그들도 있다.

b : 굵은 텍스트 (bold 두꺼운체)
strong : 중요한 텍스트
i : 기울임꼴 텍스트(italic)
em : 강조된 텍스트(emphasize)
mark : 표시된 텍스트(노란색 글자배경)
small : 더 작은 텍스트
u : 밑줄 텍스트
del : 삭제된 텍스트(중간줄)
ins : 삽입된 텍스트
sub : 아래 첨자 텍스트
sup : 위 첨자 텍스트

요즘엔 css 로 꾸미다 보니 거의 쓰이지는 않는다.

그러나 웹 접근성으로 인해 b태그와 strong 태그를 구분해서 사용하기도 한다.

위의 꾸미기 태그를 사용한 예를 살펴보자

이미지를 넣어주는 태그 <img>

<img>는 이미지를 넣을 때 사용하는 태그다.

속성은 src와 alt 가 있다.

src : 이미지호출 경로 입력

alt : 이미지 설명(웹 접근성을 위해 어떤 이미지인지 적는 곳)

이미지 경로를 입력하는 방법에는 사용하려는 이미지 파일 경로를 직접 가져와서 입력하는 방법과 인터넷 이미지 주소를 입력하는 방법이 있다.

파일의 경로는 상대 경로와 절대 경로로 나뉜다.

- 상대 경로 : 현재 위치를 기준으로 하는 파일의 상대적인 경로

장점: 프로젝트의 위치가 바뀌어도 그대로 사용 가능

단점 : 목적 파일(이미지)의 위치가 바뀌면 상대 경로를 수정해야함

ex) ./src/img/img.png

- 절대 경로 : root(맨 처음, 최상단 주소)부터 해당 파일까지의 경로

장점 : 내 로컬 환경에서는 어느 곳에서든 접근 가능

단점 : 다른 로컬에서 절대 경로에 일치해야 접근 가능(그래서 사실상 불가능하다)

ex) C:\Users\123\Pictures

링크 태그 <a>

anchor의 약자며, 링크를 넣을 때 사용하는 태그다.

속성은 href와 target이 있다.

href : 이동할 페이지의 링크를 입력한다.

target : 링크된 문서를 열었을 때 문서가 열릴 위치를 표시한다.

_blank : 새탭으로 열기

_self(default) : 현재탭으로 열기

  <a href="https://www.naver.com/" target="_blank">네이버 바로가기</a>

위와 같이 코드를 입력하면 파란색 밑줄 링크가 나타난다.(이미 갔던 사이트인 경우는 아래와 같이 보라색으로 색이 바뀜)

3. 결론

프론트엔드 개발의 기본중인 기본 HTML에 대해 배웠다.

예전에 공부했던 내용이어서 다시 복습한다는 기분으로 즐겁게 공부할 수 있었다.

태그 종류도 은근히 있어서 아직 반절?? 정도 공부한것 같다.

웹페이지를 HTML로만 만드면 다소 투박한 느낌이 든다. 예전 2000년대 초반의 포탈 사이트들을 보는 느낌이다.

CSS 와 Javascript를 배우고 둘을 접목시켜서 멋진 웹페이지를 만들날이 벌써 기대된다.

4. Reference

1. 코딩온 강의 자료

https://www.tcpschool.com/html-tags/doctype

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

https://realzzu.tistory.com/123

"<meta charset="UTF-8" />"란? - encoding 방식, Charset

인코딩 / 디코딩 인코딩 (encoding) 사람이 읽을 수 있는 데이터를 컴퓨터가 읽을 수 있는 부호로 변환 디코딩 (decoding) 컴퓨터가 읽을 수 있는 데이터를 사람이 읽을 수 있도록 변환 Charset (문자셋)

realzzu.tistory.com

https://antstudy.tistory.com/29

html을 작성하시다 보면 영역에서 을 보셨을 거예요. 대부분 꼭 넣어야 하는 태그라고 명시를 해요. 그런데 왜 꼭 넣어야 하고 무엇을 의미할까요? 란?

antstudy.tistory.com

728x90

'Study > HTML & CSS' 카테고리의 다른 글

[새싹x코딩온] 웹 개발자 부트캠프 과정 3주차 회고 \| CSS display, animation (0)	2024.05.28
flex-shrink 를 이용한 마우스오버 효과 (0)	2024.05.28
[새싹x코딩온] 웹 개발자 부트캠프 과정 2주차 회고 \| CSS 속성 (0)	2024.05.25
[새싹x코딩온] 웹 개발자 부트캠프 과정 2주차 회고 \| CSS 선택자 (0)	2024.05.23
[새싹x코딩온] 웹 개발자 부트캠프 과정 2주차 회고 \| HTML(2) + CSS (0)	2024.05.21

현재글[새싹x코딩온] 웹 개발자 부트캠프 과정 1주차 회고 | HTML(1)

Dani's Dev TokTok