자바와 오라클 공부는 잠시 멈추고 이제 프론트엔드의 언어를 공부하게 되었다.
사실 학원 기간동안에 자바하나 완전하게 익히기도 어렵긴 하지만 학원에서는 지금 완벽하게 공부한다는 것보다는 어떤식으로 공부해야하는지 또 기본적인 개념에 대해 탄탄하게 배워간다는 느낌으로 공부하고 있기에 아쉬움은 독학으로 달래기로 하며 HTML에 대해 입문하게 되었다.
작년 4학년 2학기 프로젝트로 웹 서버와 라즈베리파이를 이용한 게임을 만들었었다.
간단한 게임을 서버로 돌리는 것이었는데 결국에는 대실패....
실패의 원인은 프론트 그 중에서도 html과 자바스크립트에 대한 기초적인 이해가 부족해서였다.
서버의 구현까지는 해왔지만 이를 어떻게 담아서 사용자 화면에 보여줘야하는지에 대해 아주 무지했기에 결국 화면 구성에서 실패했었던 기억이 있다.
이에 대해 의욕을 다지며 공부하도록 하겠다.
HTML이란 www문서를 작성하는 마크업 언어이다.
웹 브라우저를 통해 사용자에게 보여지는 문서의 형식을 규정하는 언어란 뜻이다.
웹페이지는 HTML,CSS,Javascript로 구성되는데 특히 HTML과CSS는 연관이 크다.
현재는 HTML버전중에서도 HTML5를 거의 사용하며 가끔 HTML4를 쓰는 곳도 있다고는 한다.
HTML의 기본 구조는 태그로 구성된 계층적 구조를 갖는데 형제요소,자식요소,조상,부모요소등이 있다. 이 부분은 자바에서의 상속 개념과 비슷하다고 할 수 있다.
맨 처음에는 문서타입을 정의하고 <!DOCTYPE> html문서의 시작을 알리며 html~/html 헤드 사이에 문서의 메타데이터를 정의하고 head~/head 바디를 통해 내용을 나타낸다.body~/body
이 처럼 HTML은 태그로써 이루어져있는데 이러한 태그는 속성이름,속성,속성값으로 이루어져 있다.
이런 태그들에 대해 얼마나 잘 이해하고 활용하는지 배치에 대해 어떻게 신경써야 하는지에 따라 그 페이지의 퀄리티가 차이가 나는것 같다.
기초적인 예시 몇개와 몇가지 태그에 대해 보고 마치도록 하려한다.
<h1> h1 태그 예제</h1>
<h2> h2 태그 예제</h2>
<h3> h3 태그 예제</h3>
<h4> h4 태그 예제</h4>
<h5> h5 태그 예제</h5>
<h6> h6 태그 예제</h6><h?> ?는 1~6까지 숫자가 들어갈 수 있고 6으로 갈 수록 화면에서의 글씨가 작아진다.
<p> p 태그 : 문단을 정의 한다.</p>
<p> p 태그와 p 태그 사이는 약간의 공백이 생긴다.
(br 태그 두번과 유사)
</p>p태그는 문단을 정의한다.
br 태그는 줄을 바꾸는데 HTML은 엔터로 줄바꿈이 일어나지 않아 필수적으로 알아야 한다.
hr태그는 수평선 태그로 선을 그어준다.
<hr color="blue">
<hr width="50%" align="center">
<hr size="5" width="50%" align="right">
<hr noshade="noshade" size="5" width="50%">이런식으로 그어지는 줄에 다양한 속성을 부여할 수 있다.
block태그와 inline태그가 있는데
이는 코드의 주석에 설명을 적어놨으므로 코드로 붙이겠다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>
<h3> block 태그와 inline 태그</h3>
<p> - block 태그 </p>
<p>
한줄을 차지하는 태그로 항상 새로운 줄에서 시작(화면 전체 가로폭 사용)<br>
width,height,margin,padding 속성 지정 가능
block 태그에 inline 태그 포함가능<br>
주요 block 태그 : div,h1~h6,p,ol,ul,table,form 등
</p>
<hr>
<p> -inline 태그 </p>
<p>
다른 요소와 나란히 배치<br>
content 요소 만큼 폭 차지<br>
width,height는 무시<br>
margin,padding은 좌우만 적용<br>
inline 태그 뒤에 공백(엔터 포함)이 있으면 4px 정도의 공백이 생김<br>
주요 inline 태그 : span,a,img,input,select,textarea,button 등
</p>
<hr>
<h3> block 태그 예</h3>
<p style="background: yellow;">자바</p><p style="background: #00FF00">스프링</p>
<p style="width: 200px; background: gray;">웹</p>
<p style="background: blue;">CSS</p>
<hr>
<h3> inline 태그 예</h3>
<span style="background: yellow;">자바</span> <span style="background: #00FF00">스프링</span>
<span style="width: 200px; background: gray;">웹</span>
<span style="background: blue;">CSS</span> <span style="background: red">ORACLE</span>
<hr>
</body>
</html>또한 여러간의 공백이 있어도 하나로 처리하기 때문에 공백을 여러번 주고싶다면
를 사용해야 한다. <나>을 표현하고 싶다면 <,>를 사용하면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
#header{ /* id selector */
font-size: 17px;
font-family: 궁서체;
color: blue;
}
.box1{ /* class selector */
border:3px solid gray;
width: 300px;
text-align: center;
padding: 10px;
}
.box2{
border: 1px solid red;
width: 300px;
height: 50px;
padding: 10px;
}
</style>
</head>
<body>
<h3 id="header">속성</h3> <!-- id 속성 -->
<!-- title,class 속성 -->
<div title="웹" class="box1">웹프로그램이란 ? </div>
<hr>
<div class="box1">HTML 이란 ?</div>
<hr>
<div class="box2" contenteditable="true"></div>
<hr>
<p>data-*속성 : 개발자가 임의의 속성을 html에 추가할때 사용</p>
<ol>
<li data-subject="java">자바</li>
<li data-subject="spring">스프링</li>
<li data-subject="android">안드로이드</li>
</ol>
</body>
</html>이런식으로 클래스를 만들어 속성을 부여할 수 있으며 border는 선의 크기 width는 박스의 넓이,height는 높이 padding은 내용과 테두리 사이의 여백을 뜻하는데 여백관리가 잘 안되면 화면이 아예 깨지기에 주의해야한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>
<h3>포멧팅 관련 태그</h3>
<p>b 태그 : 진하게</p>
<b>진하게 한잔</b>
<b style="font-weight: 600">진하게</b>
<hr>
<p>em/ i태그 이텔릭체</p>
<p>이탤랙</p>
<em>이탤릭</em>
<hr>
<p>pre 태그 : 서식설정 태그</p>
<pre>
서식이 설정된 텍스트를 표현하는데 사용
입력된 그대로의 상태로 보여줌
공백,탭,엔터등을 그대로 보존
단, 글자크기는 변함
</pre>
<hr>
<p>sub, sup 태그 : 아래, 위 첨자</p>
<p>
log<sub>2</sub>5<sup>3</sup>
</p>
</body>
</html>이러한 첨자 태그와 슈퍼스크립트 태그 서식설정 태그도 있다.
오늘은 도입부인 만큼 간단하고 당분간은 간단한 예제가 주를 이룰텐데 기초부터 차근차근 쌓아 갈 수 있도록 노력해야겠다. 이만!
