2024. 12. 12. 12:23ㆍFullStack Steps/HTML Practicing
게임 개발을 하다가 풀스택까지 시도하게 될 줄은 몰랐다.
풀스택이라고 하면 너무 거창하지만 지금 내딛는 한 발이 더 큰 미래로의 시작이길 바라는 마음으로 HTML을 공부한 내용을 기록해보려고한다.
작자는 VSC IDE를 통해 HTML을 공부하였음을 알리며 포스팅을 시작하겠다.
먼저 HTML이 무엇인지 부터 알아보고 시작하도록 하겠다.
HTML은 무엇일까? HTML이란 Hyper Text Markup Language를 의미한다.
. Hyper Text : 하이퍼 링크를 통해서 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트
. Markup : (콘텐츠를) 표시하다.
. Language : 언어
위와 같이 하이퍼 링크를 통해 다른 문서로 접근하여 내용을 사람의 언어로 표현해주는 언어를 HTML이라고 한다.
밑은 HTML의 간단한 특징들을 나열한 글이다.
. Hyper Text란 특정 글자나 버튼을 눌러서 다른 사이트로 이동하게 되는데 이런 문서들을 칭하는 말이다.
. HTML는 콘텐츠를 표시하는 방법으로 웹페이지를 만들게된다.
. 사람과 웹브라우저 사이에서 사용하는 언어
. 웹사이트를 만들기 위해서 개발자가 할 일은 HTML 코드로
. 웹페이지에 어떤 내용을 표기할지 HTML문서를 만드는 일이다.
. 완성된 코드를 웹브라우저에서 로딩하게되면 웹페이지가 만들어 진다.
. HTML 코드가 웹브라우저를 통해서 해석되고 표현되는 과정을 렌더링이라고 한다.
HTML의 문서를 만드는 방법은 다음과 같다.
. HTML 문서는 파일의 확장자가 html이다.
. HTML파일을 만들거나 수정하려면 텍스트 편집기를 사용해야 한다
(대표적인 텍스트 편집기 : Brackets, VScode 등)
. 결과를 확인하기위해서는 웹브라우저를 사용해야 한다.
(대표적인 웹브라우저 : 크롬, 파이어폭스, 엣지, 사파리 등
HTML은 언어이다.
. 우리가 한국어, 영어 등으로 사람들과 소통하기위해서는 해당 언어의 문법에 맞는 표현을 사용해야 하듯
HTML 언어를 목적에 맞게 사용하기 위해서는 HTML의 문법에 맞는 표현을 사용해야 한다.
. HTML의 문법은 딱 한가지 태그(tag)만 기억하면 된다.
. 태그란? : HTML코드에서 정보(컨텐츠)를 정의하는 형식
# tag (시작과 끝)
. 태크는 <>과 </> 기호를 사용하여 컨텐츠의 시작과 끝을 표시한다.
. 각 태그는 콘텐츠를 감싸며 태그명은 콘텐츠의 성격과 의미를 나타낸다.
EX) <태그명>이곳에 콘텐츠를 기입한다.<태그명/>
# tag (단일 태그)
. 태크는 <>과 </> 기호를 사용하여 컨텐츠의 시작과 끝을 표시하지만
. 경우에 따라 시작과 끝을 구분할 필요가 없는 태그도 존재한다. 이를 단일 태그라고 한다.
. 단일 태그는 콘텐츠를 감쌀 필요가 없기 때문에 콘텐츠를 감쌀 필요가 없다.
EX) <태그명/>
# tag (속성)
. 속성은 태그의 부가적인 기능을 정의하는 것이다. (선택사항)
. 속성은 시작 태그의 내부에서 정의한다. <태그명 속성명="속성값" 속성명="속성값" 속성명="속성값"> </>
. 속성의 개수는 특별한 제한이 없다.
. 태그명과 속성 또는 속성과 속성사이에는 공백(space)으로 구분하며 값은 큰따옴표안에 작성해야 한다.
EX)
<태그명 속성명="속성값"></태그명>
<태그명 속성명="속성값" />
<font color="red" size="7">안녕</font>하세요
# HTML (주석처리)
. 주석은 사람에게는 보이지만 웹브라우저에게는 보이지 않는 코드이다.
. 주로 코드에 대한 메모를 남기기 위한 용도로 사용된다.
EX) <!-- 해당코드 안의 모든 코드는 처리되지 않는다. -->
자 이제 본격적으로 VSC를 이용한 HTML을 작성해보자!
<!DOCTYPE html> // 문서의 첫 부분에서 유형을 지정하는 단일 태그
// HTML은 시간이 흐르면서 버젼이 변경되었는데,
// 현재 표준으로 사용되는 HTML5 버전을의 문서를 의미
<html lang="en">
// 문서 유형을 지정한 후 실제 문서가 시작되고 끝나는 것을 나타내는 태그
// <html> 태그부터 HTML 문서가 시작되고 </html>에서 HTML문서가 끝난다.
// 요소 콘텐츠와 텍스트가 포함된 모든 요소 속성에 대한 기본 언어(language)를 지정
<head>
// 웹브라우저 화면에는 보이지않지만 웹브라우저가 알아야할 정보들을 입력시 사용되는 태그
<meta charset="UTF-8">
// 문자 인코딩 및 문서 키워드 등에대한 정보를 기입하는 단일 태그이다.
// (한글등 세계의 모든 언어를 사용하기위해서는 UTF-8을 사용해야 한다.
// ASCII를 사용하면 한글이 깨져서 표현된다.)
// meta : 웹 페이지에 대한 메타데이터를 포함하는 태그
// charset : 브라우저에게 어떤 문자를 인코딩에 사용하는지 알려주는 속성
// UTF-8 : 전 세계 거의 모든 언어를 번역할 수 있는 문자 인코딩
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// name : 이 속성은 charset, http-equiv 속성 외 문서 레벨 수준의 메타데이터를
// 나타낼 때 사용, 메타데이터의 이름과 값을 쌍으로 지정할 수 있음
// viewport : 화면 상의 화상 표시 영역, 데스크탑과 모바일은 뷰포트 차이가 있음
// content : 뷰포트의 크기를 조절하기 위한 속성
// width=device-width : 브라우저 너비를 장치 너비에 맞추어 표시함
// initial-scale=1.0 : 1.0은 100%와 동일하다. 뷰포트의 초기 배율을 나타냄
<title>document</title>
// title : 화면에서 표시되지는 않지만, 브라우저의 제목 표시줄이나 페이지 탭에
// 보이는 제목으로 사용,
// 시각장애인을 위한 스크린 리더에서도 읽을 수 있어 HTML 문서에서
// 필수적으로 제공해야 하는 정보
// document : title의 제목
</head> // /head : head 태그를 닫겠다는 뜻
// / : 태그의 끝을 알려줄 때 사용
<body> <!-- 실제 브라우저 화면에 표시될 내용을 입력하는 태그
body 태그에는 아래의 태그들이 포함될 수 있다.
*텍스트를 표시하는 태그
*이미지를 표시하는 태그
*각종 사용자 인터페이스를 나타내는 태그
태그안에 태그가 포함되면 포함 관계를 알려주기위해서 들여쓰기를 사용한다.
-->
</body>
</html> // 3번 라인의 html 태그를 닫음
필자는 앞으로 위 소스처럼 주석을 적극적으로 사용하려 할 것이다. 주석이 많으면 많을수록 다른 사람은 내 코드를 훨씬 쉽게 이해할 수 있고 이는 동료들에게 더 빨리 인정 받을 수 있는 가장 좋은 방법 중 하나이다. 물론 훝날 이 코드를 다시 볼 나에게도 엄청난 도움이 될 수 있다.
아무튼 위의 내용은 처음 VSC를 켜고 !를 누르면 자동 완성 해주는 팝업이 하나 뜨는데, 그것을 선택하면 이렇게 자동완성 된다. 물론 주석은 필자가 사이트를 뒤져가며 한 땀 한 땀 작성했다.
그렇다면 가장 처음 작성된 코드는 브라우저에서 작동이 될까?
위는 크롬 브라우저를 통해 위의 소스를 실행 한 내용이다.
이제 기본적인 프레임은 알았으니 화면에 인사를 출력해보자!!
먼저 위 그림에 적어 놓았던 tilte의 제목인 Document! 이걸 바꿔보자!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>여기가 제목이래!!</title>
// Document에서 여기가 제목이래!! 로 바꿔준 모습이다
</head>
<body>
</body>
</html>
주석이 너무 지저분해져서 전부 지우고 title의 제목만 변경해보았다 과연 제목이 잘 바뀌었을까?
아주 잘 바뀐 걸 확인할 수 있다.
이제 본격적으로 화면에 인사를 출력해보자!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
</head>
<body> // HTML 문서의 내용(contents)을 나타내는 태그
</body> // body를 닫음
</html>
body에 달았던 태그를 기억하는가? 여기에는 위의 주석 대로 HTML 문서의 내용을 나타내주는 태그다.
따라서 우리가 body 태그 사이에 무언가를 적어주면 화면에 표시될 것이다.
반갑습니다!!!를 출력해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
</head>
<body>
반갑습니다!!
</body>
</html>
자 우리는 처음으로 우리가 만든 html에 문자를 출력해보았다.
내친김에 다른 언어도 써보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
</head>
<body>
반갑습니다!!<br>
Nice to meet you!!<br>
嬉しいです<br>
Encantada<br>
</body>
</html>
자 출력이 되긴했는데 우리의 의도와는 다르게 줄 바꿈이 일어나지 않았다.
왜 그럴까?
HTML의 모든 요소는 기본적으로 inline 또는 block 디스플레이 속성을 가지고 있다. 이는 요소가 브라우저에서 렌더링될 때 다른 요소와의 배치 방식에 영향을 미친다.
자세한 이야기는 다음 시간에 하기로 하고 우리가 작성한 인사말 전부 기본적으로 텍스트 콘텐츠이다. 브라우저는 이를 inline 요소로 렌더링하기 별도로 줄바꿈을 하지 않는다.
따라서 줄바꿈을 위해서는 br 태그를 사용해야 한다.
br 태그란 텍스트에서 줄을 바꾼다는 목적의 줄바꿈(line break)을 나타낸다.
따라서 코드를 조금만 수정하면 우리가 원하는 결과를 얻을 수 있다.
다음은 수정한 코드이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
</head>
<body>
반갑습니다!!<br>
Nice to meet you!!<br>
嬉しいです<br>
Encantada<br>
</body>
</html>
자 위와 같이 원하는대로 결과가 출력되는 것을 확인할 수 있었다.
다음 시간에는HTML의 텍스트 표시 방법과 태그의 구분(Block VS Inline)에 대해 알아보도록 하겠다!
참고 자료
'FullStack Steps > HTML Practicing' 카테고리의 다른 글
| HTML의 컨테이너 태그와 전역 속성 (1) | 2024.12.13 |
|---|---|
| HTML의 링크 태그 (0) | 2024.12.13 |
| HTML에서 이미지와 동영상 그려보기 (2) | 2024.12.13 |
| HTML에서 목록 표시하기 (0) | 2024.12.13 |
| HTML의 텍스트 표시 방법과 태그의 구분(Block VS Inline) (2) | 2024.12.12 |