css style 다르게 적용하는 법
css style sheet
글꼴 적용
font-family: '글꼴';
<style>
태그{
}
<style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 스타일 다르게 적용하는 법 -->
<!-- css style sheet -->
<style>
/* h1적용 */
h1{
font-family: 'Times New Roman', Times, serif;
font-size: 30pt;
color: green;
}
/* h2적용 */
h2{
font-family: '궁서체';
font-size: 30pt;
color: green;
}
</style>
</head>
<body>
<h1>Have a nice day</h1>
<h2>오늘은 비오는 목요일</h2>
</body>
</html>실행창
http://192.168.0.86:5500/day0713/ex03_textStyle.html
글꼴 적용2
flot
flot: left 왼쪽 가로로 정렬/ clear: both 해주면 해제 안해주면 해제x
clear: both
flot: left 정렬 해주고 아래로 쓰여짐
list-style: none
순서 없애기 (글 앞에 점/숫자 아무것도 없게하기)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=>, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-family: '나눔고딕';
}
/* flot: left 옆으로 정렬 clearbot 해줘야 아래로 다시 정렬가능 */
li{
list-style: none;
}
</style>
</head>
<body>
<h1>나라별 치즈의 종류</h1>
<ul>
<li><img src="../html_img/cheese1.png"></li>
<li><img src="../html_img/flag01.jpg"</li>
<li>브리치그,까망베르 치즈등</li>
</ul>
<ul>
<li><img src="../html_img/cheese2.png"></li>
<li><img src="../html_img/flag02.jpg"</li>
<li>체다,모짜렐라 치즈등</li>
</ul>
<ul>
<li><img src="../html_img/cheese2.png"></li>
<li><img src="../html_img/flag02.jpg"</li>
<li>부라타,블루 치즈등</li>
</ul>
</body>
</html>글꼴 적용3
link 연결
- 구글 폰트 검색
- Google Fonts: Browse Fonts 접속
- 원하는 폰트 클릭
- select ~~~ + 클릭
- 오른쪽 위에 view selected families 클릭
- link에 있는 주소 헤드에 넣기
- family 앞이 폰트 이름 (Nanum+Gothic+Coding 에서 +지우고 띄어쓰기)
- font-family: '폰트 이름';
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">float
가로로 정렬(left/right 방향선택)
float: left;border
테두리 선 만들고 굵기 정해서 색입히기
border: 1px solid gray;margin
바깥 쪽에 공간 주는 것
기준 오른쪽에 10px만큼 공간 띄어줌
margin-right: 10px;border-radius
테두리 선 동그랗게 만들어줌-크기가 클 수록 더 동그맇게
border-radius: 20px;hover
in/out 합쳐짐 마우스 올리면 색 바뀜
cursor
버튼위에 마우스 올리면 손가락으로 바뀜
box-shadow
3방향만 주고 색 넣어서 그림자 표현
li:hover{
background-color: blueviolet;
color: white;
box-shadow: 5px 5px 5px gray;
cursor: pointer;
}원문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=>, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">">
<title>Document</title>
<style>
li{
list-style: none;
/* float 가로로 정렬 */
float: left;
width: 150px;
height: 50px;
/* 태두리 색 */
border: 1px solid gray;
text-align: center;
line-height: 50px;
/* 바깥에 공간 주는 것 margin */
margin-right: 10px;
background-color: azure;
font-size: 25px;
font-family: 'Cute Font';
/* 둥글게 만듦 */
border-radius: 20px;
}
/* hover in/out 합쳐짐 마우스 올리면 색 바뀜 cursor 버튼위에 마우스 올리면 손가락으로 바뀜*/
/* box-shadow 3방향만 주고 색 넣어서 그림자 표현 */
li:hover{
background-color: blueviolet;
color: white;
box-shadow: 5px 5px 5px gray;
cursor: pointer;
}
</style>
</head>
<body>
<h3>ul을 이용 간단메뉴</h3>
<br>
<ul>
<li>Home</li>
<li>샵소개</li>
<li>게시판</li>
<li>방명록</li>
<li>오시는길</li>
<li>Q&A</li>
</ul>
</body>
</html>
백엔드 개발자로서 성장해 나가는 성현이의 블로그~