우리가 인터넷 창을 켜서 뭔가를 보거나 검색하려고 할 때, 등장하는 그 화면의 모습을 구현하는 것이 HTML입니다. 실질적으로 눈으로 확인하는 부분이기 때문에 간결하고 명료하게 화면을 꾸미는 것이 중요하겠죠?
크게 <head>와 <body>부분으로 나눌 수 있겠는데, 실제 내용을 입력하는 부분은 <body>입니다. <head>는 선언부로, 어떻게 encoding되었는지 (ex. UTF-8, <meta charset = "UTF-8">) 적고 <title>제목을 적을 수 있습니다. 이 곳에 적은 부분은 추후에 인터넷 브라우저에서 켰을 때 제일 상단에 아래와 같이 보여집니다.
<head> <!-- 선언부(js, css) -->
<meta charset="UTF-8">
<title>제목입니다</title>
</head>
HTML이란 Hyper Text Markup Language의 약자로, 말 그대로 텍스트를 화면에 표시하는 언어입니다. tag로 구성이 되어있으며 기본 형식은 <태그명> 문자열 </태그명> 과 같습니다. 이와 함께 알아둬야 하는 약자를 정리하고 가겠습니다.
URL : Uniform Resource Locator
HTTP : Hyper Text Transfer Protocol 전송규약
URL은 도메인과 헷갈릴 수 있는데, 도메인은 해당 서버의 주소를 뜻하고(ex.www.naver.com) URL은 우리가 가고자 하는 특정 웹사이트에 도달하기 위한 전체 경로를 보여준다고 보면 됩니다. returnURL=%2Fmanage%2Fposts%2F 이런식으로 여러 기호가 섞인 URL 많이 보셨을 것 같습니다. 그러니 URL이 프로토콜과 도메인이 합쳐진 것으로 더 포괄적인 개념이라고 보면 되겠죠. 우리가 사용하는 인터넷은 DNS(Domain Name Server)를 통해서 도메인을 받고 그것의 IP주소를 조회하여 해당하는 IP주소의 사이트를 던져주게 됩니다.
1.<heading> <h></h>
<!-- heading -->
<h1>H1 TAG</h1>
<h2>H2 TAG</h2>
<h3>H3 TAG</h3>
<h4>H4 TAG</h4>
<h5>H5 TAG</h5>
<h6>H6 TAG</h6><h1>이 제일 크게 나오고 , <h6>가 제일 작습니다. 헤딩의 경우 1~6까지만 있으며 더 크거나 작은 것은 없습니다.
폰트의 크기를 내가 원하는만큼 크게 하거나 작게 하려면 그럼 어떻게 해야할까요? style에서 폰트 사이즈를 만져주면 됩니다.
<h1>h1 tag font 기본</h1>
<h1 style = "font-size : 200%"> h1 tag font 200% </h1>
<h1 style = "font-size : 150%"> h1 tag font 150% </h1>
<h1 style = "font-size : 100%"> h1 tag font 100% </h1>위와 같이 제일 큰 <h1>을 기준으로 실습을 해보겠습니다. h4가 100%로 중간 크기이며 h1은 200%로 xx-large가 됩니다. 그렇다면 출력했을 때 모습을 보면 어떨까요?
위에 캡쳐를 보면 폰트 사이즈를 지정해주지 않은 첫 번째 줄과 두 번째 줄의 크기가 일치합니다. 이는 기본이 200%라는 증거가 되겠죠? 그런다음 150%, 100% 이렇게 줄여주면 확실히 줄어드는 것을 볼 수 있습니다. 그렇다면 h4가 100%이고, h1이 200%인데 그럼 h4의 200%는 h1과 사이즈가 같을까요? 실험해보겠습니다.
<h1 style = "font-size : 200%"> h1 tag font 200%</h1>
<h4 style = "font-size : 200%"> h4 tag font 200%</h4>역시 똑같네요~
<h1 style = "color : blue"> h1 tag color blue </h1>
<h2 style = "background-color : 00ff00"> h2 tag background color green</h2>
<h3 style = "font-family : verdana"> h3 tag font verdana</h3>위에서 폰트 사이즈를 바꿔줬던 것처럼, 글자의 색을 바꾸거나, 형광펜 효과를 주거나, 아예 폰트 자체를 바꿀수도 있습니다. 색 같은 경우에는 그냥 blue나 green으로 써줄수도 있지만 16진수로 표현해줄수도 있습니다. 빛의 3원색은 빨간색, 파란색, 녹색이죠, 그런 경우에 색들을 조합해서 원하는 색을 뽑아낼 수 있습니다. 빨간색이나 파란색은 직관적이라서 red, blue 이렇게 쓰면 되니까 쉬운데 예를 들어 내가 표현하고 싶은 색이 물을 탄 듯한 핑크색이라면 단순히 pink라고 쓴다고 해서 표현이 되지 않겠죠, 그래서 16진수로 표현하는 것이 도움이 됩니다.
폰트의 크기와 색을 함께 바꿔볼까요?
<font size = "1" color = "blue"> Hello font</font>
<br>
<font size = "2" color = "#ff0000">Hello font</font>
<br>
<font style = "color : blue">Hello font</font><font> 태그를 활용하면 여러가지 폰트가 바뀌는 것을 쉽게 확인할 수 있습니다. 이 태그를 이용하여 글자의 크기, 색, 글씨체를 정할 수 있습니다. 폰트의 기본 사이즈는 3입니다. 즉 세 번째 줄에서 사이즈를 건드리지 않은 그 사이즈가 본래의 기본 사이즈인것이죠. 첫 번째 줄에서는 1로 사이즈를 줄였고, 세 번째 줄에서는 2로 줄였습니다.
다음으로는 오늘자 뉴스를 하나 골라 실습을 해보도록 하겠습니다.
2.<paragraph><p></p>
<!-- paragraph -->
<p>더불어민주당 송영길 대표가 2일 조국 전 법무부 장관의 도덕성 논란과 관련해</p>
<p>수위 높은 사과 메시지를 내놓으며 '조국사태' 의 돌파구를 모색하고 나섰다.</p>이런식으로 패러그래프를 잡아주면
이렇게 한 줄씩 단락이 생겨서 출력됩니다. 줄 하나하나가 1 paragraph가 되는 것이죠.
3.<pre-formatted><pre></pre>
<!-- pre-formatted -->
<pre>
송 대표는 이날 민심경청 대국민 보고회에서 "좋은 대학 나와 좋은 지위, 인맥으로 서로 인턴 시켜주고 품앗이하듯 스펙 쌓기를 해 주는 것은
법률에 저촉되지 않더라도 수많은 청년에게 좌절과 실망을 주는 일이었다"며 사과했다.
</pre>위에 태그의 뜻처럼 pre-formatted, 즉 사용자가 미리 만들어놓은 포맷 그대로 출력하게끔 하는 것입니다.
'HTML , CSS > 기초 HTML' 카테고리의 다른 글
| Eclipse로 HTML 실습을 위한 기본 설정 및 Tomcat 설치하기 (0) | 2021.06.02 |
|---|
