색상, 글자 google font 사용법, a 테그 링크 속성

FrontEnd/HTML

by H_Develop 2022. 6. 16. 17:07

색상

24비트 트루컬러 지원, 코드는 16진수로 표현, RED GREEN BLUE 색상의 혼합 비율 표현.

google.com > color picker 검색

https://htmlcolorcodes.com/ 색상 코드 잘 되어있음.

글자

정렬, 줄 간격, 폰트, 글자 크기, 글자 그림자 등 스타일 조절 가능.

속성 속성 값 의미
text-align left, center, right 글자 정렬
line-height 150%, 180%, 200% 등 줄 간격
text-decoration underline, none 글자 장식
font-family 맑은고딕, 돋음,바탕 등 글자 폰트
font-size 16px, 20pc, 30px 등 글자 크기
font-weight bold, normal 등 글자 두께
font-style italic 이탤릭체
text-shadow 3px 3px 5px #444444 글자 그림자

/* text-shadow 우측 그림자 길이, 하단 그림자 길이, 흐린 정도, 그림자 색상(회색) */

사용법 p {text-align:left;}

text-align, font-size, line-height, text-decoration, font-style, font-weight 사용

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
 body {backgroun-color : #FF337E;}
 		font-family:"돋움";}
 h3 {text-align : center;
 	font-size : 25px;}
 p {line-height : 1000%;}
 span {text-decoration : underline;
 		font-style : italic;
        font-weight : bold;}
</style>
</head>
<body>
 <h3> 배경 색상 </h3>
 <p>
 <span style="color:#C933FF">C933FF</span>
 </p>
</body>
</html>

<!--
text-align : center 텍스트-정렬 : 가운데
line-height : 100000% 라인-높이 : (맨 위 기준) 1000배 밑으로 지정
text-decoration : underline 텍스트-꾸미기 : 밑줄
font-weight:bold; font 두께 bold
font-style:italic; font 스타일 italic
font-family 폰트 설정 맑은 고딕, 돋움, 굴림, 바탕
-->

a 테그 링크 속성

<!doctype html>
<html>
<head>
<meta charset="urf-8">
<style>
 a:link {color:red;
 		text-decoration:none;}
 a:visited {color:white;
 			text-decoration:none;}
 a:hover {color:orange;
 			text-decoration:underline;}
 a:active {color:black;
 			text-decoration:none;}
</style>
</head>
<body>
 <h3>고양이 품종</h3>
 <ul>
  <li><a href="#">아메리카 쇼트헤어</a></li>
  <li><a href="#">페르시아 고양이</a></li>
  <li><a href="#">샴 고양이</a></li>
 </ul>
</body>
</html>

<!--
 a테그 링크 작업 시, #으로 지정해두면, 클릭해도 이동하지않고 사용 가능
 link	 방문 전 링크
 visited 방문 후 링크
 active  마우스를 클릭할 때
 hover	 마우스 오버 했을 때
-->

글자 font (google font 사용법)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Fascinate&display=swap" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Fascinate&display=swap');
li		{font-family: 'Fascinate', cursive;}
</style>
</head>
<body>

<h3>고양이 품종</h3>
<ul>
 <li><a href="#">아메리카 쇼트헤어</a></li>
 <!-- 작업 시, 편리하게 href="#"으로 작성, url 테그지만, 이동은 없음 -->
 <li><a href="#">페르시아 고양이</a></li>
 <li><a href="#">샴 고양이ABCDEF</a></li>
 <li>Almost</li>
</ul>
</body>
</html>
 /* 
google > link > stylesheet 를 긇어서 head에 넣거나(head 이든 어디든 상관 없음.)
google > import > style 긇어서 css에 입력 후,
CSS rules to specify families 의 css 코드 긇어서 원하는 테그에 넣어주면 된다
위에 li 테그에 넣음
head 나 css 둘중 하나를 사용.
 */

'FrontEnd > HTML' 카테고리의 다른 글

DIV (BOX, division구분) (0)	2022.06.20
Border, Margin, Padding 경계선, 테두리, 외부 내부 여백 (0)	2022.06.17
내부, 외부 style, <span> (0)	2022.06.16
Table 테이블 <table>, <tr>, <th>, <td> (0)	2022.06.15
Form 폼 (0)	2022.06.15