💬 class 선택자 ◾ 마침표(.) 다음에 클래스 이름 지정 ◾ 문서 안에서 여러 번 반복할 스타일이라면 클래스 선택자로 정의
💬 id 선택자 ◾ 파운드(#) 다음에 id 이름 지정 ◾ 문서 안에서 한 번만 사용한다면 id 선택자로 정의
💬 group 선택자 ◾ 쉼표(,)로 구분해 여러 선택자를 나열 ◾ 같은 스타일을 사용하는 선택자를 한꺼번에 정의
💡 글꼴 관련 스타일
💬 font-family ◾ 웹 문서에서 사용할 글꼴 지정 💬 font-size ◾ 브라우저에서 지정 or 상관없이 글자 크기를 지정 ◾ 상대적인 글자 크기를 지정 ◾ 백분율(%)로 표시
◾ px, pt 단위가 가장 많이 사용된다.
💬 font-style ◾ 글자를 이탤릭체로 표시하는 속성 💬 font-weight ◾ 글자 굵기를 조절하는 속성 💬 웹 폰트 ◾ @font-face 속성 사용 ◾ 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시켜 사용하는 글꼴이다. 💬 웹 폰트 업로드해서 사용하기 - 웹 폰트 파일 준비 ◾ eot 파일, woff 파일 ◾ 기존 ttf 파일을 변환해서 사용할 수도 있음 - 다운로드하기 전에 사용자 시스템에 있는지 확인 ◾ local(글꼴이름) - (IE8 이하 고려해야 하면 eot 파일 선언) - woff 파일 선언 - 용량이 큰 ttf 파일을 마지막에 선언
💬 구글 폰트 ◾ https://fonts.google.com/ 로 접속 ◾ 한글 폰트 검색 ◾ Link 항목에 있는 소스 복사 & 글꼴 이름 기억 ◾ 웹 문서의 <style> 태그 안에 붙여넣음 ◾ font-family 속성에서 웹 폰트 글꼴 이름 사용
📃 글꼴 관련 스타일 사용하기
<style>
body {
font-size:20px;
}
h1 {
font-family:바탕;
font-size:3em;
}
.accent {
font-size:150%;
font-weight:800;
}
.italic {
font-style:italic;
}
</style>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아<span class="accent">레드향</span>이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로</p>
<p class="italic">일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
💡 텍스트 관련 스타일
💬 color 속성 ◾ 글자 색 지정 ◾ 16진수 값이나 rgb 값, hsl 값, 색상 이름 중에서 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>불릿 바꾸기</title>
<style>
ul {
list-style: none;
/* 불릿 없앰 */
margin-left: -30px;
/* 왼쪽 여백 줄임 */
}
li {
background-image: url("지도.png");
/* 배경 이미지 파일 */
background-repeat: no-repeat;
/* 배경 이미지 반복 안함 */
background-position: left center;
/* 배경 이미지 위치 */
padding-left: 50px;
/* 왼쪽 패딩(박스 모델) */
line-height: 40px;
/* 줄간격 */
}
</style>
</head>
<body>
<h1>회사</h1>
<ul>
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
</body>
</html>
📃 외부 스타일 시트
📝 sample.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="default.css" />
</head>
<body>
<h1>This header is 36 pt</h1>
<h2> This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body>
</html>
📝 default.css
body {
background-color: yellow;
}
h1 {
font-size: 36pt;
}
h2 {
color: blue;
}
p {
margin-left: 50px;
}
댓글