HTML 기초

박종호·2024년 1월 4일

frontend

FrontEnd

목록 보기

1/17

백엔드 개발자와 가장 긴밀하게 협업하는 프론트엔드 개발자와의 소통의 유용성, 현직에 대한 이해도 필수

또한 웹페이지로 보여주는데는

해상도의 차이가 너무나도 크기 때문에 이 또한 염두해야함.

그리고 기타 등등,….

이제 본격적으로 웹에 대해서

태그 (Tag)

어떤 표시를 하기 위해 붙인 꼬리표. 웹 문서에 정보를 정의해주는 형식입니다.
기본적으로 <> 시작 태그(여는 태그) </> 종료 태그(닫는 태그)의 쌍으로 구성되어있습니다.

위 사진처럼 HTML의 기본적인 요소를 확인!

<p>
	HTML은 요소 안에 
	<strong>다른 요소</strong>가 들어갈 수 있습니다
</p>

<!-- 잘못 사용된 예 -->
<p>
	HTML은 요소 안에 
	<strong>다른 요소 가 들어갈 수 있습니다
</p>
	</strong> // <p> 밖으로 태그가 나와있죠!

웹팩으로 만들어진 프로젝트!

jason패키지

만들고?

ㅇㅇ 가보자

을 닫지않고 실행했음에도 불구하고?

~~건팸화이팅~~

브라우저가 예외처리를 해버리고 보여주게된다!

💡 HTML의 경우, 오류를 알려주지 않고 웹브라우저가 임의로 결과를 보여줍니다. ’웬만한 오류는 알아서 처리해준다.’가 좋은 것 같지만, 예상치 못한, 의도하지 않은 화면이 될 수 있습니다! 이런 것을 방지하고 싶다면 마크업 검사를 진행해 주세요.

[Markup Validation Service]

Markup Validation Service

브라우저가 에러를 제공하고있어 친절하기도 하지만, 어떤 오류인지 알 수 없기때문에 오류감지에 둔감해질 위험이 있다. (IDE에서는 볼 수 있지만 모든 환경이 IDE를 쓸 수 있는건 아니기 때)

코드를 한꺼번에 검사해볼 수 있는 툴!

주석

<!-- 주석 -->

프로그램 동작에 영향을 미치지 않습니다
나, 미래의 나, 다른 개발자를 위해 설명하는 글을 적어 둡니다.
매우 중요한 기밀 사항을 적어놓는 것은 피해야 합니다.

💡 개발할 때 주석은 최소한으로 남기는 것이 좋아요! 시맨틱 태그 사용, 직관적인 클래스 명으로 코드만 봐도 이해되게 작성하면 좋겠죠? 코드로 대화하는 개발자!

…가 되면 좋겠지만 우린 아직 주니어니까!
실수 방지, 미래의 나와 혹은 나의 팀원을 위해 적당한 주석을 달기로 해요!

주석은 최대한 자세하게 남기면 좋다는 관점도 존재!

예시

태그의 시작과 끝을 적어놓기
- 이렇게 주석으로 정리해주면 중간 닫는 태그를 빠트렸을 때 오류를 체크하기 좋습니다!
- 이렇게 구분 지어 놓으면 나중에 컴포넌트 분할 할 때도 좋습니다

<!-- start -->
<!-- //end -->

<!-- from -->
<from>
	...생략...
</from>
<!-- //from -->

요런 느낌.

ex)

같은 레벨 → h1=img=div

각각 커맨드 입력키는 Tab

ex) p*3 + Tab

!Tab을 누르면 기본적인 틀이 나오는데.

!doctype html = document type

근데 왜 문서라고 할까?

html의 기원은 연구소 직원들이 1990년대 문서들을 하나의 포맷으로 정보교류를 하기위해 발명되었기 때문!

html = hyper text markup language

http라는 거대한 책 안에서 html이라는 한 페이지라고 생각해보면 쉽지 않을까?ㅎㅎ

이제 html 기본구성을 하나씩 까보자

1. `<!DOCTYPE html>`

‘이 문서는 html Living Standard 문서!’라는 의미입니다.
DTD (Document type Definition) 라고 부르며 문서의 타입에 대한 정보를 제공합니다. 해당 코드를 통해 어떤 모드로 페이지를 렌더링할지 결정합니다.

2. `<html lang="en">`

<html>태그는 HTML 문서의 루트, 최상단 요소입니다.
lang 속성을 통해 해당 페이지의 주 언어가 무엇인지 설정할 수 있습니다.
lang="**ko**",lang="**ko-KR**"

언어코드(소문자)-국가코드(대문자)

언어코드	언어	국가코드(국가)
ko	한국어	KR(대한민국), KP(북한)
en	영어	US(미국), GB(영국), PH(필리핀)
zh	중국어	CN(중국), HK(홍콩), TW(대만), Hans(간체), Hant(번체)
ja	일본어
de	독일

주 언어 설정은 검색엔진, 스크린리더, 번역 기능 제공 등에 영향을 미치게 됩니다!
스크린리더가 음성 표현에 사용할 언어를 선택할 때 도움이 됩니다.
속성값은 웬만하면 대문자 시작에 큰 따음표!

그런데 왜 국가마다 언어코드를 다르게 설정하는걸까?

스크린 리더로 읽는데, 페이지의 주 언어를 설정하는 중요한 부분이다!

3. `head`

기계가 식별할 수 있는 문서 정보(메타데이터)를 담습니다.
검색엔진을 위한 다양한 정보들이 담기는 곳입니다.
사용자에게는 title, 파비콘, viewport 정보등이 보이게 됩니다.

3-1. `meta`

메타데이터: “어떤 목적을 위해 만들어진 데이터”
검색엔진은 메타정보를 살펴보고 페이지의 다양한 정보를 가져갑니다.

charset

<meta charset="utf-8">

문자 깨짐 오류가 발생할 수 있으므로 문자 코드의 종류를 설정해 줍니다.
utf-8은 전 세계적인 언어들을 지원하도록 합니다. 그래서 어떤 언어로 작성하더라도 웹페이지를 읽을 수 있습니다. 국제적인 코드 규약입니다.
과거에는 한국어 인코딩을 위해 euc-kr 를 사용하기도 했었습니다. 영어 이외의 외국어를 표현하기에는 어려움이 있으므로 권장하지 않습니다.

http-equiv="X-UA-Compatible" content="IE=edge"(호환성)

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

브라우저 호환성을 위해 작성해줍니다. IE의 최신 표준 모드를 보여주겠다는 의미입니다.
IE의 다양한 버전(6-11) 때문에 같은 페이지도 다르게 보여지는 경우가 있었습니다.
그러한 문제를 해결하기 위해 작성해주는 코드입니다!

viewport(사용자가 보고있는 화면)

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

**width**: 뷰포트의 너비를 정의합니다. width=600 과 같이 픽셀값으로 지정할 수도 있습니다.
**initial-scale** : 페이지가 처음 로드 될 때 확대/축소 수준을 제어합니다. 최소 0.1 - 기본 1 - 최대 10

`title`

브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의합니다.
검색엔진: 인터넷을 사용하는 사용자가 제목을 보고 탐색할 페이지를 선택합니다.
페이지마다 적당한 제목이 노출되도록 개발하는 것도 중요합니다.
약 60자를 넘지 않아야 합니다. 그보다 길어지게 된다면 브라우저에서 노출되는 제목이 축소되어 보일 수 있습니다.

`link`

현재 문서와 외부 리소스의 관계를 명시합니다.
외부 스타일 시트, 폰트, 파비콘을 연결할 때 사용합니다.
빈 태그(void tag), 속성만을 포함합니다.
head 요소 내부에만 위치할 수 있습니다.
rel: relations 관계. 대상 파일의 속성을 나타냅니다
href: hyper-references 경로. 연결 시 참조할 파일의 위치를 나타냅니다.

<html>
<head>
  <!-- 스타일 시트 링크 -->
  <link rel="stylesheet" href="style.css">
  
	<!-- 폰트 링크 -->
  <link rel="stylesheet" href="font.ttf">
  
	<!-- 파비콘 링크 -->
  <link rel="shortcut icon" href="favicon.ico"> 
</head>
<body>
</body>
</html>

ㄴstylesheet = 링크의 성격

ㄴreferences = 참

블록레벨 요

블록 레벨과 인라인 요소의 분류는 HTML 명세 4.01까지 사용되었습니다.
현재 표준 HTML에서는 콘텐츠 카테고리 집합으로 대체되었습니다

block

부모 요소의 전체 공간을 차지하여 블록을 만듭니다.
언제나 새로운 줄에서 시작, 좌우 양측으로 최대한 늘어나 가능한 모든 너비를 차지합니다. = blockline 요소는 무조건 한 라인 전체를 본인이 사용한다
이전, 이후 요소 사이에 줄 바꿈이 일어납니다
페이지의 구조적 요소를 나타날 때 사용합니다
블록요소는 인라인 요소 안에 중첩 될 수 없지만, 인라인 요소는 블록 요소 안에 중첩 될 수 있습니다

인라인 요소 안에는 블록레벨요소X

BUT 블록레벨 요소 안에는 인라인 요소 O

inline

항상 블록 레벨 요소 내에 포함됩니다.
콘텐츠의 흐름을 끊지 않으며, 컨텐츠에 따라 할당된 공간만 차지합니다.
문장, 단어 같은 작은 부분에 대해서 적용됩니다.
새로운 줄을 만들지 않습니다.
width, height 크기를 지정할 수 없고, padding, border, margin 속성을 사용할 수 있지만, 상하 margin 속성은 사용할 수 없습니다!
a, label, input 등이 있습니다.

-크기를 지정하는 속성은 사용할 수 없다.

요런 작은 단어같은 데에는 inline 요소를 사용한다!

block / inline / inline-block

	block	inline	inline-block
요소 포함	인라인 요소 포함 가능	블록 요소 포함 불가
(a 태그만 가능)	-
줄바꿈	O
(세로로 쌓임)	X
(가로로 쌓임)	X
(가로로 쌓임)
width, height	O	X	O
padding	O	O	O
margin	O	△
(left,right만 적용 / top,bottom 적용 X)	O
border	O	O	O