HTML UI
이번 글은 수업 시간에 작성했던 UI 작성 코드를 보며 html 태그를 하나하나 정리해보는 것이 목적이다.
코드
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
</head>
<body leftmargin="300px" , rightmargin="300px">
<h1 align="center">
<font color="red">Galaxy S</font>
</h1>
<h5 align="center"><ins>삼성 갤럭시 S 시리즈</ins></h5>
<b>목차</b>
<ol>
<li>개요</li>
<li>사양</li>
<li>
상세
<ol>
<li>기능</li>
<li>
주변기기 및 액세서리
<ol>
<li>
<font color="purple">주변 기기</font>
</li>
<li>
<font color="purple">액세서리</font>
</li>
</ol>
</li>
</ol>
</li>
<li>
출시
<ol>
<li>한국 출시</li>
<li>한국 외 지역</li>
<li>
특별한 모델
<ol>
<li>
<font color="purple">Galaxy S9 Microsoft Edition<sup>1)</sup></font>
</li>
</ol>
</li>
</ol>
</li>
</ol>
<br>
<h3>
<font color="red">1. 개요</font>
</h3>
<hr color="red"> <br>
<p>삼성전자가 2018년 2월 25일(한국 시각 2월 26일)에 공개한 안드로이드 스마트폰. 개발 코드네임은 Star.</p><br>
<h3>
<font color="red">2. 상세</font>
</h3>
<hr color="black" , size=3> <br>
<font color=blue><i>프로세서</i></font> : 삼성 엑시노스 9 Series <br><br>
<font color=blue><i>메모리</i></font> : 4 GB SDRAM
</body>
</html>실행화면
body 태그 속 요소들을 하나하나 살펴보겠다.
-
margin
body 태그의 속성으로 사용됐다. 해당 요소의 바깥으로 여백을 주는 속성이며 left, right 등 원하는 방향으로만 여백을 줄 수도 있다. 이번 코드에선 body의 좌,우에 300px만큼의 여백을 주었다. -
h1~h5, b, ins
텍스트 관련 태그들이다.
h는 제목을 표시할 때 사용한다. 숫자가 작을수록 글씨의 크기가 커진다. align은 텍스트 정렬을 위한 속성으로, 변수가 center라 가운데 정렬된다.
b는 bold 효과를 준다. 글자가 두꺼워진다.
ins는 밑줄을 쳐준다. -
font
텍스트를 꾸며주는 태그다. 속성은 size, color 등이 있으며 텍스트의 모양을 변경시킨다. -
ol, li
목록(list)를 나타내주는 태그다. 기본적인 형태는 ol(Ordered List)나 ul(Unordered List) 태그를 사용하여 목록의 틀을 잡고, 해당 요소로 li 태그를 사용하여 개별 목록을 만든다. ol과 ul의 차이점은 li 태그에 번호가 매겨지는가, 매겨지지 않는가로 나뉜다. -
hr
가로선을 그어주는 태그다. 속성을 통해 선의 사이즈나 색도 변경할 수 있다.
배우고 정리하며 느끼지만 html 자체는 상당히 직관적이고, 작성했을때 어떻게 보이게 되는지 바로 확인할 수 있어 나름 편리했다. html의 대략적인 문맥은 파악한 것 같아 css를 좀 더 중점적으로 정리해야할 것 같다.
