07. 텍스트를 표현하는 다양한 스타일
- 글꼴 관련 스타일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
body{
font-size: 20px; /* 전체 글자 크기 */
}
h1 {
font-family: 바탕; /* 글꼴 */
font-size: 3em;/* 글자 크기 px/em*/
/*color : orange; 색상 */
}
.accent {
font-size:150%; /* 글자 크기 */
font-weight: 800; /* 글자 굵기 400이 기본*/
}
.italic{
font-style: italic; /* 글자 스타일 */
}
</style>
</head>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로</p>
<p class="italic">일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>
</html>
- 웹 폰트
웹 폰트 : 사용자 시스템에 설치되어 있지 않는 폰트를 사용할 때 폰트의 정보를 웹 서버에 올려놓고 사용자가 웹 사이트에 접속했을 때 폰트의 정보까지 함께 다운 받도록 하는 방법
구글 폰트 사용하기
<style>
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gugi&display=swap');
body{
font-size: 20px; /* 전체 글자 크기 */
}
h1 {
font-family: "Gugi", sans-serif;
font-weight: 400;
font-style: normal;
</style>
- 웹에서 색상 표현하기
color : orange;
- 텍스트 스타일
- 목록 스타일
list-style-type(list-style)
<style>
.book1 {
list-style-type:none; /* 불릿 없앰 내비게이션 만들때 사용*/
}
.book2 {
list-style-type: upper-alpha; /* 알파벳 대문자 */
}
</style>그외 : square, 등
- 표 스타일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>표 스타일</title>
<style>
table {
caption-side: bottom; /* 표 캡션 위치 bottom,top*/
border:1px solid black; /* 표 테두리는 검은 색 실선으로 */
border-collapse: collapse; /*테두리 한줄로 합치기 */
}
td, th {
border:1px dotted black; /* 셀 테두리는 검은 색 점선으로 */
padding:10px; /* 셀 테두리와 내용 사이의 여백 */
text-align:center; /* 셀 내용 가운데 정렬 */
}
th{
background-color: aqua; /*th부분만 색 넣기*/
}
</style>
</head>
<body>
<h2>상품 구성</h2>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>갯수</t>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
</table>
</body>
</html>
08. 레이아웃을 구성하는 CSS 박스 모델
- 블록 레벨 요소(p,h 등)와 인라인 레벨 요소(span)
- 박스 모델_콘텐츠 영역
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
div {
margin-bottom:20px;
}
.box1 {
width:200px; /*너비 */
height:100px; /* 높이*/
padding:20px;
border:10px solid #ccc;
}
.box2 {
box-sizing: border-box; /*보더박스까지 합쳐서 계산 */
width:200px;
height:100px;
padding:20px;
border:10px solid #00f;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
- 박스 모델_테두리
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
h1 {
padding-bottom: 5px;
border-bottom: 3px double rgb(75, 70, 70); /* 아래쪽 테두리만 3px짜리 회색 두줄 실선, 그냥 실선은 solid*/
}
p {
padding: 10px;
border: 3px dotted blue; /* 모든 테두리를 3px짜리 파란 점선 */
border-radius: 10px /*꼭짓점 둥글게, 퍼센트로도 가능 5%*/
}
</style>
</head>
<body>
<h1>박스 모델</h1>
<p>박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테두리(border), 그리고 여러 박스 모델 간의 여백인 마진(margin) 등의 요소로 구성되어 있습니다. </p>
</body>
</html>
이미지도 꼭짓점 둥글게 만들기 가능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
#circle {
border-radius:50%; /* 테두리를 원으로 */
}
</style>
</head>
<body>
<img src="images/photo.jpg">
<img id="circle" src="images/photo.jpg">
</body>
</html>
- 박스 모델_마진, 패딩
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델 - 마진</title>
<style>
div {
width:200px;
height:100px;
display:inline-block;
border:1px solid #222;
}
#margin1 {
margin:50px;
}
#margin2 {
margin:30px 50px
}
#margin3 {
margin:30px 20px 50px
}
#margin4 {
margin:30px 50px 30px 50px;
}
#margin5{
margin-right:20px;
}
</style>
</head>
<body>
<div id="margin1"></div>
<div id="margin2"></div>
<div id="margin3"></div>
<div id="margin4"></div>
<div id="margin5"></div>
</body>
</html>
- 목록을 사용해 내비게이션 만들기
display 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS display 속성</title>
<style>
* {
box-sizing: border-box;
}
nav ul {
list-style:none;
}
nav ul li {
display:inline-block; /*형태는 인라인레벨 요소를 사용하되 각 요소를 블록레벨처럼 사용*/
padding:20px;
margin:0 20px;
border:1px solid #222;
}
</style>
</head>
<body>
<nav>
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>
</nav>
</body>
</html>
float 속성 : 웹 요소를 떠있게 만드는 속성
clear 속성 : floating 해제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
div {
padding:20px;
margin:10px;
}
#box1{
background:#ffd800;
float:left; /* 왼쪽으로 플로팅 */
}
#box2 {
background: #0094ff;
float:left; /* 왼쪽으로 플로팅 */
}
#box3 {
background: #00ff21;
}
#box4 {
background:#a874ff;
clear:left; /* 플로팅 해제 left, right, both*/
}
</style>
</head>
<body>
<div id="box1">박스1</div>
<div id="box2">박스2</div>
<div id="box3">박스3</div>
<div id="box4">박스4</div>
</body>
</html>
float 속성을 사용해 3단 레이아웃 만들기
css
* {
margin:0; /* 브라우저 기본 마진 리셋 */
padding:0; /* 브라우저 기본 패딩 리셋 */
box-sizing: border-box; /* 테두리까지 포함해서 박스 모델 너비로 계산 */
}
#container {
width:1200px; /* 내용 전체의 너비 */
margin:20px auto; /* 내용을 화면 가운데 배치하도록 좌우 마진을 auto로 */
}
#header{
width:100%; /* 부모 요소의 너비와 똑같게 */
height:120px; /* 헤더의 높이 */
background-color:#acacac;
}
#left-sidebar {
width: 250px; /* 사이드바의 너비 */
height:600px; /* 사이드바의 높이 */
background-color:#e9e9e9;
float: left; /* 왼쪽으로 플로팅 */
}
#contents {
width: 800px; /* 본문의 너비 */
height:600px; /* 본문의 높이 */
background-color:#f7f7f7;
float: left; /* 왼쪽으로 플로팅 */
}
#right-sidebar {
width: 150px; /* 사이드바의 너비 */
height:600px; /* 사이드바의 높이 */
float: left; /* 왼쪽으로 플로팅 */
background-color:#e9e9e9;
}
#footer {
width:100%; /* 부모 요소의 너비와 똑같게 */
height:100px; /* 푸터의 높이 */
background-color:#888888;
clear:left; /* 플로팅 해제 */
}
<!DOCTYPE html>
<html lang="ko">
<head>
<title>CSS 레이아웃 - 3단 레이아웃</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/3column-result.css">
</head>
<body>
<div id="container">
<header id="header">
<h1>사이트 제목</h1>
</header>
<aside id="left-sidebar">
<h2>사이드바</h2>
</aside>
<section id="contents">
<h2>본문</h2>
</section>
<aside id="right-sidebar">
<h2>사이드바</h2>
</aside>
<footer id="footer">
<h2>푸터</h2>
<footer>
</div>
</body>
</html>
- 웹 요소의 위치 지정하기 : position
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 위치 속성</title>
<style>
*{
margin:0; /* 마진 초기화 */
padding:0; /* 패딩 초기화 */
}
p {
width:300px; /* 너비 - 300px */
border:1px solid #ccc; /* 테두리 - 1픽셀 회색 실선 */
padding:10px; /* 네방향 패딩 10px */
}
#pos1{
position:absolute; /* 포지셔닝 - absolute */
left:50px; /* 왼쪽에서 50px 떨어지게 */
top:50px; /* 위쪽에서 50px 떨어지게 */
}
#pos2 {
position:absolute; /* 포지셔닝 - absolute */
right:100px; /* 오른쪽에서 100px 떨어지게 */
top:100px; /* 위쪽에서 100px 떨어지게 */
}
#pos3 {
position: absolute; /* 포지셔닝 - absolute */
left:100px; /* 왼쪽에서 50px 떨어지게 */
bottom:100px; /* 아래쪽에서 100px 떨어지게 */
}
</style>
</head>
<body>
<p id="pos1">Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua laboris cupidatat anim in non officia aliquip excepteur fugiat labore.</p>
<p id="pos2">Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Commodo veniam sit quis nisi ea. Ipsum do aliqua nostrud laboris elit duis adipisicing id Lorem qui. Labore dolor ipsum enim incididunt. Velit qui cillum sunt labore incididunt duis aute Lorem nulla et. Sint commodo aute amet laboris ullamco exercitation Lorem dolore veniam ut reprehenderit incididunt. Laborum nulla eiusmod cillum irure anim aute.</p>
<p id="pos3">Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Incididunt adipisicing enim laboris voluptate.</p>
</body>
</html>
position: ;
static - 소스 작성 순서대로 배치
relative - 소스 작성 순서대로 배치 & 위칫값 지정 가능
fixed - 위칫값 지정 & 고정
absolute - 소스 위치와 상관없이 위칫값 지정 ( 부모 요소의 relative 위치가 기본점)
CSS
* {
box-sizing: border-box;
margin:0;
padding:0;
}
#contents {
background:url("../images/bg.jpg") no-repeat;
background-size:cover;
width:800px;
height:500px;
margin:0 auto;
position:relative; /*absolute의 기준으로 relative 사용*/
}
h1 {
color:#fff;
font-size:120px;
text-shadow: 2px 3px 0 #000;
position:absolute;
right:100px;
bottom:100px;
}
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS position 속성</title>
<link rel="stylesheet" href="css/position-3.css">
</head>
<body>
<div id="contents">
<h1>CSS3</h1>
</div>
</body>
</html>
'Do it! HTML+CSS+자바스크립트 웹 표준의 정석' 카테고리의 다른 글
| HTML+CSS+자바스크립트 <자바스크립트 기본 문법> (0) | 2024.03.09 |
|---|---|
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석HTML+CSS+자바스크립트 <이미지와 그라데이션 효과로 배경 꾸미기 ~ CSS 고급 선택자> (0) | 2024.03.09 |
| HTML+CSS+자바스크립트 <입력 양식 작성하기 ~ CSS의 기본> (1) | 2024.02.05 |
| HTML+CSS+자바스크립트 <웹 개발 시작하기 ~ 웹 문서에 다양한 내용 입력하기(2)> (1) | 2024.02.03 |