728x90
반응형
💡 스타일과 스타일 시트
💬 CSS의 장점
◾ 스타일을 부분으로 나눠서 적용할 수 있다.
◾ text-align:center - 글자를 가운데로 정렬
💡 CSS 기본 선택자
💬 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 값, 색상 이름 중에서 사용
📃텍스트에 줄 표시하기
<body>
<h1>text-decoration 속성</h1>
<p style="text-decoration:none">none</p>
<p style="text-decoration:underline">underline</p>
<p style="text-decoration:overline">overline</p>
<p style="text-decoration:line-through">line through<p>
</body>📃 텍스트에 그림자 효과 추가하기
<style>
.shadow1 {
color: red;
text-shadow: 2px 2px black;
}
.shadow2 {
text-shadow: 10px 3px 2px #ffa500;
/* 가로, 세로 거리, 번짐 정도, 색상 지정 */
}
.shadow3 {
color: #fff;
text-shadow: 7px -7px 20px #000;
/* 가로, 세로 거리, 번짐 정도, 색상 지정 */
}
</style>
<h1 class="shadow1">HTML</h1>
<h1 class="shadow2">CSS</h1>
<h1 class="shadow3">자바스크립트</h1>📃 CSS와 박스 모델
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스 모델</title>
<style>
div {
width: 200px;
height: 100px;
display: inline-block;
margin: 15px;
border: 1px solid blue;
border-radius: 20px;
}
.box1 {
box-shadow: 2px -2px 5px 0px;
}
.box2 {
box-shadow: 5px 5px 15px 5px blue;
}
</style>
</head>
</html>
<div class="box1"></div>
<div class="box2"></div>📃 불릿 바꾸기
<!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;
}📃 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>가상클래스 선택자</title>
<style type="text/css">
div:hover {
background-color: red;
}
div:active {
background-color: blue;
}
input:focus {
background-color: purple;
}
/* 체크박스와 라디오는 배경색 지정이 안됩니다. */
input:radio {
background-color: red;
}
input:disabled {
background-color: cyan;
}
</style>
</head>
<body>
<div>여기에 마우스를 올리면 색이 변합니다.</div>
<form>
아이디 : <input type="text" name="userid"><br>
비번 : <input type="password" name="password" disabled><br>
성별 : <label><input type="radio" name="sex" value="M">남자</label>
<input type="radio" name="sex" value="F">여자<br>
<input type="submit">
</form>
</body>
</html>📃 배경 관련 속성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css background</title>
<style type="text/css">
body {
margin-left: 200px;
background: #5d9ab2 url("flower.jpg") no-repeat top left;
}
.container {
text-align: center;
}
.center_div {
border: 1px solid gray;
margin-left: 15em;
margin-right: auto;
width: 40%;
background-color: #d0f0f6;
text-align: left;
padding: 5px;
}
.list_icon {
margin-top: 5px;
width: 22px !important;
height: 20px;
background-repeat: no-repeat;
background-position: 0 -70px;
}
.calendar_icon {
margin-top: 5px;
height: 20px;
text-indent: 25px;
background-image: url("totoro.jpg");
background-position: 15em -70px;
background-repeat: no-repeat;
text-indent: 15em;
}
.cal_prev_button {
height: 20px;
background-image: url("totoro.jpg");
background-repeat: no-repeat;
background-position: 15em -100px;
left: 5px;
}
.cal_next_button {
height: 20px;
background-image: url("totoro.jpg");
background-repeat: no-repeat;
background-position: 15em -125px;
right: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="center_div">
<h1>안녕하세요.</h1>
<p>이 예제는 CSS 예제입니다. background 속성 관련 예제를 실습하고 있습니다.</p>
</div>
</div>
<p></p>
<p class="list_icon"></p>
<p class="calendar_icon">달력 아이콘입니다.</p>
<p class="cal_prev_button"></p>
<p class="cal_next_button"></p>
</body>
</html>
728x90
반응형
'Front-End > HTML | CSS' 카테고리의 다른 글
| CSS - 스타일 속성 총 정리 (0) | 2022.07.13 |
|---|---|
| CSS - 선택자 (0) | 2022.07.13 |
| HTML - 실습문제 04 (0) | 2022.07.08 |
| HTML - 입력 양식 작성하기, <form> 태그 (0) | 2022.07.08 |
| HTML - 실습문제 03 (0) | 2022.07.07 |
댓글