[HTML] #2-1 HTML 파헤치기 1 : 기본 문법, 문자(색상, 크기, 특수문자), 외부자료연결하기

1. 선물은 잘 포장해야지!

누군가에게 선물을 줄 때 선물만 달랑 주는 것보단 목적에 맞게 선물을 포장하고 담아서 주면 감동이 두배가 되는 법이다. 또한 전달하는 나의 마음을 포장에 더 담아낼 수도 있는 것이다.

그리고 앞선 1-1에서 말했듯 HTML은 Frontend단, 그러니까 포장을 하는 개념이라 생각하면 된다.

이 Frontend단에 해당되는 문법은 주로 Web Browser를 통해 출력이 되는 것을 목적으로 한다.

웹 브라우저의 종류는 많지만 우리는 우선 크롬 브라우저에 출력하는 것을 목표로 하려 한다.

이 웹 브라우저에 출력을 하기 위해 기본적인 문법이 필요한데 이 문법이 HTML, CSS이다.

이 두 문법을 활용하여 크롬 브라우저에 원하는 화면을 출력하는 것을 이 배움의 첫번째 목적으로 한다.

물론 높은 수준의 Frontend 기술을 공부하지는 못한다.

그것보다는 뼈대를 세우는 방법을 배워보려한다.

* 더 배우고 싶은 분야의 다양한 정보를 얻고 싶다면 한국산업인력공단에서 운영하는 NCS 학습모듈에 들어가서 여러 정보들을 얻는 것도 추천한다. https://ncs.go.kr/index.do

NCS 국가직무능력표준, NCS 블라인드채용

NCS 메인에서 국가직무능력표준(National Competency Standards) 및 블라인드 채용에 대한 다양한 정보와 유용한 컨텐츠를 만나 보세요

www.ncs.go.kr

학습모듈에서 '화면 설계'를 검색하여 나온 학습모듈 중 '화면 설계' pdf 내용 중 일부를 발췌했다.

** 또 HTML의 기본 문법 정보를 알기 위해서 아래의 사이트도 참조하자.

https://www.w3schools.com/html/default.asp

HTML Tutorial

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com:443

2. HTML 기본 문법

우선 비주얼 스튜디오를 실행하여 'new text file'을 클릭하여 새로운 파일을 만들었다.

1) HTML 기본 규칙

우선 HTML을 본격적으로 시작하기 전에 알아두어야 할 기본 규칙을 알아두자.

01) Hyper Text Markup Language의 줄임말이다. 여기서 Hyper Text는 한 화면에 빼곡히 적힌 글자들을 보이지만 글자가 아닌 경우도 있기에 Text가 아니라 Hyper Text라고 부르는 것이며 그것들을 Markup하는 언어가 HTML인 것이다.
02) HTML은 웹페이지(홈페이지)를 작성할때 사용하는 문법이다.
03) 확장명 .html 저장한다.
04) HTML문서는 웹브라우저(크롬,엣지,파이어폭스)에서 출력한다.
05) HTML명령어를 Tag라 한다.
06) 태그는 대소문자를 구분하지 않는다.
07) <>기호 안에 명령어를 쓴다.
08) 여는 태그(<**>)와 닫는 태그(</**>)로 구성되어 있다.
09) 엔터(줄바꿈)을 허용하지 않는다.
10) 공백은 1칸만 허용한다.

위의 내용들은 꼭 기억하고, 또 용어에 익숙해지는 것이 필요하다.

결국 HTML은 결국 문서다.

안에 들어간 이미지와 글자, 모든 것들이 문서 안의 Hyper Text로 기록이 된다.

이제 HTML의 기본 구조에 대해서 알아보자.

2) HTML의 기본 구조

먼저 HTML은 <html>로 시작해서 </html>로 끝이 난다.

그 후에 <head>, <body> 순으로 작성이 된다.

추가로 첫 문장에 lang="ko"라고 적히면 이 HTML 문서는 한국어로 작성될 거라 알리는 것이다.

아래의 예시가 html의 기본 골자이다.

<html lang="ko">
  <head></head>
  <body>

  </body>

</html>

* 언어에 익숙해지는 방법은 설명을 최대한 달아두는 것이다. 이것을 주석이라고 하는데 HTML은  으로 표현한다. 내용 안에 원하는 말을 집어넣으면 된다.

사실 head 부분에는 들어갈 것들이 정해져있고, body 부분이 가장 핵심이다.

우선 아래의 예시와 같이 내용을 채워놓고 크롬 브라우저를 통해 출력해보았다.

<html lang="ko"> 
  <head>   
  <title>환영합니다</title>   

  </head>

  <body>   

  

무궁화 꽃이 피었습니다

  </body>     

</html>

위의 내용을 출력한 게 바로 아래 이미지이다.

출력된 결과물을 보면 title에 적힌 것이 상단 탭에 적혀있고, body에 적혀 있는 것이 페이지 안에 출력되고 있다.

우리가 이렇게 출력을 할 때 신경을 써야할 것이 있다면 크로스 브라우징(cross browsing)이다.

내가 출력한 화면이 크롬에서만 출력되는 것이 아니라 엣지, 사파리, 핸드폰, 데스크톱 등의 화면에서 각기 출력될 것들을 신경써주어야 하는 것이다.

그래서 이 문서의 가장 앞에 <!DOCTYPE html>을 붙인다.

이는 태그는 동일하지만 브라우저에 표시하는 방식(랜더링)은 각각 다르기 때문에 표준화된 방식으로 랜더링을 하겠다는 표현이다.

여기까지 모든 내용을 적은 결과물은 아래와 같다.

- 최종 결과물 -

<!DOCTYPE html>


<html lang="ko">   

  <head>   

  <title>환영합니다</title>   

  </head>

  <body>   

  

무궁화 꽃이 피었습니다

  </body>     

</html>

3. 텍스트 삽입하기

1) 텍스트 넣고 줄 바꿈 해보기

이제 다양한 텍스트를 삽입해보자.

우선 텍스트를 삽입하기에 앞서 blank 페이지를 만들어두려한다.

기본 골자는 언제나 동일하기에 미리 만들어두고 복사해서 사용하기 위함이다.

자, 이제 본격적으로 <body>안의 내용을 채워보려한다.

우선 html은 엔터(줄바꿈)을 할 수 없다.

그래서 줄바꿈을 뜻하는 명령어가 따로 있다.

그것이 바로 <br>이다.

<br>은 굳이 닫는 태그를 쓰지 않아도 되지만 또 쓰려면 <br/>로 따로 표기해주기도 한다.

있어도 없어도 상관이 없다.

? 근데 주소가 왜이래 ?
file:///C:/java202207/frontend/html/03_%EA%B8%80%EC%9E%90%EB%AA%A8%EC%96%91.html

우리가 흔히 알고 있는 웹 사이트의 주소는 http://와 같은 형식으로 시작된다.
이 주소를 URL이라는 용어라고 부르는데 지금 출력하는 크롬 브라우저의 주소는 http://와 같은 형식으로 출력되지 않는다.
나만 볼 수 있는 문서란 뜻이다.

이를 남들에게 보여주려면 프로토콜부터 만들고, 서버를 구비하여서 사람들이 볼 수 있게 작업을 해야 한다.
cafe24와 같은 곳에서 하는 작업이 이런 작업이다.

2) 특수문자 넣어보기

<를 입력하면 html은 계속 무언가의 명령어를 만들어내려한다.

나는 '<'라는 특수문자를 사용하고 싶을 뿐인데!!(억울)

또한 여러 번의 띄워쓰기도 불가능 하다.

그래서 html은 각각의 특수문자들이 명령어로 규정되어서 그 명령어를 집어넣어야지 특수문자로 출력이 된다.

특수문자가 배당된 각각의 명령어를 다 외우는 건 어렵지만 그래도 자주 쓰는 특수문자는 잘 알아둘 필요가 있다.

아래 목록을 살펴보며 눈으로 익혀두자.

특수문자
	공백(스페이스)
&nlt;	<
&ngt;	>
&	&
"	"
'	'

3) 글자 크기와 형태 변환

글자의 크기는 <h1>부터 <h6>까지로 표현할 수 있다.

당연히 <h1>로 시작하면 </h1>로 닫아야 한다.

h1이 가장 크고 h6이 가장 작다.

그리고 h1로 글자 크기를 수정해서 삽입하면 자동으로 줄바꿈이 된다.

그런데 이것으로 표현하는 글자 크기보다 더 작거나 큰 글자를 출력하고 싶다면 어떻게 해야할까?

CSS를 사용하거나 포토샵과 같은 디자인 툴로 텍스트를 이미지화 하여 삽입하여야 한다.

또 아래와 같이 글자의 형태를 변경할 수도 있고, 모양을 삽입할 수도 있다.

<strong> : 굵게

<u> : 밑줄

<i> : 기울이기

<hr> : 수평선

4) 옵션 부여하기

태그에 옵션을 부여할 수도 있다.

그럴 땐 속성명="속성값"으로 표현해준다.

에를 들어 수평선의 길이를 수정하고 싶다면 아래와 같이 표현할 수 있다.

<hr width="50px"> 
<hr width="50%"> 
<hr width="50">

절대적 크기란 px라는 단위를 붙여줌으로 기본 pixel 단위의 50 pixel 만큼 수평선의 길이를 그리게 한다.

상대적 크기란 웹사이트의 크기에 맞추어 절반의 크기로 수평선을 그리게 한다(반응형 웹사이트가 이런 식으로 표현된다).

이 크기에 대한 더 자세한 정보를 확인하려면 아래의 사이트로 들어가보자.

https://www.w3schools.com/css/css_font_size.asp

CSS Font Size

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

4. 색상 표현하기

HTML에서 색상을 표현하는 방법은 다양하다.

색상의 이름, 색상에게 부여된 16진수, RGB함수 등등이다.

이를 알기 위해선 우선 수의 체계를 가볍게 알고 넘어가야 한다.

- 2진수 : 0 1

- 8진수 : 0 1 2 3 4 5 6 7 8

- 10진수 : 0 1 2 3 4 5 6 7 8 9 10

- 16진수 : 0 1 2 3 4 5 6 7 8 9 a b c d e f

여기에서 색상을 숫자로 표현할 때 16진수가 사용이 되는 것이다.

이 색상들의 코드 등을 확인하기 좋은 사이트를 하나 걸어둔다.

https://www.w3schools.com/colors/default.asp

Colors Tutorial

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

기존에는 <font>라는 명령어를 사용하여 색깔을 표현했는데 이상하다, 비주얼 스튜디오가 font라는 명령어를 자동완성 하지도 않고 쓰자 빨간색으로 표현해버린다. 지금은 쓰지 않는 폰트라는 뜻이다.

그럼 어떻게 색깔을 표현해야할까, 색깔은 이제 CSS로 이동해서 색을 표현한다.

물론 html에서 색을 표현하기 위해 지금은 사용하기로 하자.

색깔을 표현하는 방법은 흔히 아래와 같은 세 가지 방식으로 표현된다.

1) 색깔의 이름 : color="red"

2) 색깔의 16진수 코드 : color="#ff0000"

3) 색깔의 RGB 함수 : color="rgb(255,0,0)"

5. HTML로 외부 파일 불러오기

1) 이미지 불러오기

<img src="경로명+파일명">으로 이미지를 불러올 수 있다.

* src : source

이 명령어도 <hr>과 같이 닫는 표시를 붙이지 않아도 되는 명령어다.

3school을 참고하여서 닫는 표시를 붙여야 할지 아닐지 확인하면 된다.

- 상대경로(현재 문서가 저장되어있는 폴더를 기준으로. 여기서는 /frontend/html 경로 기준.)

images/ 현재 폴더 안에서 하위 폴더 images

./images/ 현재 폴더 안에서 하위 폴더 images

../images/ 현재 폴더의 상위 폴더 images

../../images/ 현재 폴더의 상위의 상위 폴더 images

- 절대경로

웹프로젝트를 만든다고 가정했을 때 홈디렉터리(root)를 기준으로 하라는 뜻이다.

2) 이미지 속성 조정하기

위에서와 마찬가지로 이미지의 속성도 변경할 수 있다.

이는 절대적 크기, 상대적 크기에 따라 변환시킬 수 있다.

<img src="../images/k1.png">
  <hr>
  <img src="../images/k2.png">

  <hr>

  <img src="../images/k3.png" width="150px" height="100px">

  <hr>

  <img src="../images/k4.png" width="50%" height="50%">

  <hr>

  <img src="../images/k5.png" width="150px"> 

  <hr>

3) 미디어 불러오기

미디어는 크게 음악, 영상 등의 것들이 혼합되어있는 매체를 말한다.

주 확장자는 .mp4 / .avi / .mp3 / .ram 등 여러가지가 있다.

먼저 음악을 불러오기 위한 명령어는 크게 두가지로 나뉘는데 HTML5로 넘어오면서 바뀐 명령어를 주로 사용한다.

하지만 여전히 과거의 명령어를 사용하는 곳도 있기 때문에 과거에 자주 쓰던 명령어도 기록해둔다(실제로 사용하진 않을 것이다).

- Old version(비추천)

- HTML5 version(추천)

<br>

<source src="../music/checktocheck.mp3

</audio>

<hr>

위의 코드를 사용하여 출력한 화면, 좋아하는 가수인 김수영의 check to check 노래를 사용하였다.

비디오를 불러오는 것도 비슷하다.

대신 비디오는 영상 파일이기 때문에 크기 조절도 가능하고 영상이 시작되기 전 처음 띄울 이미지 파일도 정할 수 있다(like 썸네일).

명령어는 아래와 같다.

<video width="350" height="300" poster="../music/crayonpop.jpg" controls>
<source src="../music/crayonpop.mp4">
</video>

* 예시로 크래용팝의 노래를 사용하였다.

비디오의 가로(width)와 세로(height)를 정하고 썸네일(poster)도 정한 뒤 controls로 컨트롤러를 배치한다.

그리고 source로 영상 파일을 불러온다.

저작자표시 비영리 동일조건

'⁂ HTML > : 기본 익히기' 카테고리의 다른 글

[HTML] #3-1 블럭(block!) 1 : 블럭이 뭐야? (0)	2022.07.28
[HTML] #2-4 HTML 파헤치기 4 : 폼의 속성 (0)	2022.07.28
[HTML] #2-3 HTML 파헤치기 3 : 폼 만들어보기 (0)	2022.07.28
[HTML] #2-2 HTML 파헤치기 2 : Frame, Table (0)	2022.07.27
[HTML] #1-1 HTML이 뭐야? (0)	2022.07.26

'⁂ HTML > : 기본 익히기' 카테고리의 다른 글

티스토리툴바