Daily coding
HTML : Basic 1 - font / div 본문
<font> : 문자열 속성을 지정하는 태그
<div>
div:범위를 설정으로 묶을 수 있는 테이블, 자체만으로는 의미가 없음
안에 들어간 콘텐츠를 한꺼번에 속성을 설정하기 위해 묶음
어느 특정 지역을 설정해둘 때 많이 사용한다.
div 안의 div 사용 가능
< div style="border-style: solid; -> 테두리선 실선으로
border-color: blue; -> 테두리선 색
margin-left: 20px; -> 마진(테두리 바깥쪽 여백)
padding-top: 30px; -> 테두리 안쪽 여백
background-color: yellow"> -> 테두리 안쪽 색깔
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- font : attribute : size(크기, 기본크기는 3), color, -->
+
<font size="1" color="blue">폰트크기 1, 폰트컬러 blue</font>
<br>
<font size="2" color="#ff0000">폰트크기 2, 폰트컬러 red</font>
<br>
<font size="3">폰트크기 3</font>
<br>
<pre>
JYP엔터테인먼트 측 역시 ““확인 결과 두 사람은 연예계 선후배로 친하게 지내오다
<font size="4" color="red">최근 호감을 갖고 만나는 사이가 됐다”라고 밝혔다.</font>
</pre>
<!-- div:범위를 설정으로 묶을 수 있는 테이블
자체만으로는 의미가 없다. 예시 -> <div>안녕하세요</div>
안에 들어간 콘텐츠를 한꺼번에 속성을 설정하기 위해 묶음
어느 특정 지역을 설정해둘 때 많이 사용한다.
div 안의 div 사용 가능
-->
<div align="center">
<font size="6">6크기의 폰트</font>
<p>단락태그</p>
</div>
<div style="border-style: solid; border-color: blue;
margin-left: 20px; padding-top: 30px;
background-color: yellow">
<h1>여기가 h1태그 입니다.</h1>
<p>여기가 p태그 입니다.</p>
</div>
<!--
<div style="border-style: solid; -> 테두리선 실선으로
border-color: blue; -> 테두리선 색
margin-left: 20px; -> 마진(테두리 바깥쪽 여백)
padding-top: 30px; -> 테두리 안쪽 여백
background-color: yellow"> -> 테두리 안쪽 색깔
-->
</body>
</html>'Front-end > Client' 카테고리의 다른 글
| HTML : Basic 1 - img (0) | 2020.01.02 |
|---|---|
| HTML : Basic 1 - Anchor (0) | 2020.01.02 |
| HTML : Basic 1 - Tag안에 사용할 수 있는 Tag (0) | 2020.01.02 |
| HTML : Basic 1 - Attribute와 Property (0) | 2020.01.02 |
| HTML : Basic 1 - 구조 및 기본 태그들 (0) | 2020.01.02 |