개발 공부/html & css
제대로 배워보는 html과 css, 그리고 웹표준 5. 폰트~6. 배경 스타일
maxlafe
2020. 9. 10. 18:23
퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
제대로 배워보는 html과 css, 그리고 웹표준 5. 폰트 스타일
5.1 폰트와 텍스트 스타일
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: '맑은 고딕', dotum, Helvetica, sans-serif;
font-size: 12px;
}
h1 {
font-size: 2.4em;
letter-spacing: .1em;
text-transform: uppercase;
background-color: green;
}
h1 small {
font-size: .5em;
background-color: lime;
vertical-align: middle;
}
.lead {
font-weight:bold;
}
address {
font-style: normal;
}
h2 {
font-variant: small-caps;
font-size: 2em;
color : #ff0000;
text-decoration : line-through;
}
.text {
line-height: 2em;
text-align: center;
text-indent: 1em;
}
/*
서체는 serif(명조), sans-serif(고딕), cursive(필기), monospace(고정폭)
굵기는 bold | bolder | 600 | 700 | 800 | 900
normal | lighter | 100 | 200 | 300 | 400 | 500
웹 폰트에선 굵기 차이가 두드러질 수 있다.
기울기는 normal | italic | oblique
기울기가 웹 폰트의 경우 italic과 oblique가 차이 있는 경우가 있다.
font-variant에서 small-caps라고 하면, 소문자의 크기를 유지하며 소문자가 대문자로 바뀐다.
letter-spacing : 글자 간격을 띄운다.;
line-height : 줄 간격을 띄운다.;
text-align는 정렬, left | center | right | justify(양쪽 정렬)
text-decoration: 밑줄 기능, underline | overline | line-through | none;
text-indent: 들여쓰기/내어쓰기
text-transform: uppercase | lowercase | capitalize(첫 글자만 대문자);
vertical-align : 세로 정렬, top | middle | baseline | bottom; 기본적으로 0이 baseline. 숫자로도 적용 가능.
white-space: nowrap; 이라고 설정하면 자동 줄 바꿈 설정이 되지 않는다.
letter-spacing는 글자 간격, word-spacing은 단어 간격
*/
</style>
</head>
<body>
<div id="wrap">
<h1>style example <small>small sample</small></h1>
<h2>Style Example (font-variant)</h2>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, molestias?</p>
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias odit sunt labore aliquid, iste, fugiat recusandae illum animi fugit accusamus commodi minus, tempore natus voluptatem. Fugit itaque blanditiis explicabo debitis. Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Nulla provident minus exercitationem omnis dolores dolore animi praesentium, excepturi ea corporis nam explicabo libero tempore perferendis sed cumque debitis repudiandae fuga veniam est. Iure deserunt laboriosam nihil cupiditate, reprehenderit consequatur dignissimos et est natus cumque assumenda quibusdam accusamus perferendis quod eligendi!
</p>
<address>add : Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, et?</address>
</div>
</body>
</html>
5.2 @font-face와 구글폰트 적용
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* @font-face의 경우 한 폰트의 설정을 로드한다.
브라우저 별로 다른 종류 확장자 글꼴을 쓰도록 설정한다. */
/* 폰트 파일을 직접 로드하면 시간이 느리게 걸리지만,
구글 웹 폰트를 쓰면 구글에서 로드가 된다. */
/*
font-family: 'Acme', sans-serif;
font-family: 'Exo 2', sans-serif;
font-family: 'Shadows Into Light', cursive;
*/
/* 한국 폰트의 경우 earlyaccess google fonts를 치면 잘 나온다
import url에 꼭 http://는 쓰기;
*/
@import url("https://fonts.googleapis.com/css2?family=Acme&family=Exo+2:wght@200&family=Shadows+Into+Light&display=swap");
@font-face{
font-family: ngothic;
src:url(fonts/NanumGothic.eot);
src:url(fonts/NanumGothic.eot?#iefix) format('embedded-opentype'),
url(fonts/NanumGothic.woff) format('woff'),
url(fonts/NanumGothic.ttf) format('truetype')
}
body {
font-size: 20px;
}
.nanum {
font-family: ngothic, sans-serif;
}
h1 {
font-family: 'Acme', sans-serif;
}
.lead {
font-family: 'Shadows Into Light', cursive;
}
</style>
</head>
<body>
<h1>@font-face</h1>
<p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel dolore, culpa quo fugit! Repudiandae veritatis facilis quam, omnis, delectus dolore incidunt voluptatibus reprehenderit, maxime, quibusdam unde ipsum officiis velit molestiae.</p>
<p>서체는 그 웹페이지를 보는 사람의 디바이스에 해당 서체가 있어야 제대로 표현 됨.
해당 서체가 없는 경우에 그 서체를 서버에 올려서 @font-face 에 경로를 지정하면 해당 서체를 표현할 수 있음.
단, 서체의 용량이 작지 않으므로 최소한의 서체만 연결하고 대부분은 기본 서체를 지원하는 것이 좋음.
서체를 지원하는 브라우저가 각기 다</p>
<p class="nanum">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel dolore, culpa quo fugit! Repudiandae veritatis facilis quam, omnis, delectus dolore incidunt voluptatibus reprehenderit, maxime, quibusdam unde ipsum officiis velit molestiae.</p>
<p class="nanum">서체는 그 웹페이지를 보는 사람의 디바이스에 해당 서체가 있어야 제대로 표현 됨.
해당 서체가 없는 경우에 그 서체를 서버에 올려서 @font-face 에 경로를 지정하면 해당 서체를 표현할 수 있음.
단, 서체의 용량이 작지 않으므로 최소한의 서체만 연결하고 대부분은 기본 서체를 지원하는 것이 좋음.
서체를 지원하는 브라우저가 각기 다</p>
</body>
</html>
5.3 단어 깨뜨리기, 줄바꿈 지정하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>word-break, white-space</title>
<style type="text/css">
body {
font-family: 'Malgun Gothic', sans-serif;
font-size: 20px;
}
.content, .content2, .content3 {
border: 3px solid black;
width: 500px;
}
.content p {
word-break: break-all;
}
/* 단어가 불어 있을 경우(띄어쓰기가 없을 경우) 강제 줄바꿈 */
.content2 p {
text-align: justify;
}
.content3 p {
text-align: justify;
word-break: break-all;
}
.white {
white-space: pre;
width: 600px;
border: 2px solid black;
}
.white2 {
white-space: pre-wrap;
width: 600px;
border: 2px solid black;
}
.white3 {
white-space: pre-line;
width: 600px;
border: 2px solid black;
}
/* pre 태그로 줄바꿈을 사용자가 보는 텍스트 그대로 할 수 있다. nowrap은 자동 줄 바꿈 없이 */
</style>
</head>
<body>
<div class="content">
<p>Loremipsumdolorsitametconsecteturadipisicingelit.Eligendi, rationeexcepturimolestias, quisenimullamdolorquisquammaximeodioporromagnamsuntvoluptaesharum cumaliquamquaerat.Sunt,id,in!</p>
</div>
<div class="content2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi non enim soluta ab quae, tempore omnis minima veniam repellendus beatae voluptatum debitis ut obcaecati, cum delectus nemo dignissimos maxime nihil.</p>
</div>
<div class="content3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi non enim soluta ab quae, tempore omnis minima veniam repellendus beatae voluptatum debitis ut obcaecati, cum delectus nemo dignissimos maxime nihil.</p>
</div>
<hr>
<div class="white">
Lorem, ipsum, dolor sit
amet consectetur adipisicing
elit. Ipsum, fugit? Lorem ipsum dolor sit amet consectetur, adipisicing, elit. Illum, laboriosam?
</div>
<div class="white2">
Lorem, ipsum, dolor sit
amet consectetur adipisicing
elit. Ipsum, fugit? Lorem ipsum dolor sit amet consectetur, adipisicing, elit. Illum, laboriosam?
</div>
<div class="white3">
Lorem, ipsum, dolor sit
amet consectetur adipisicing
elit. Ipsum, fugit? Lorem ipsum dolor sit amet consectetur, adipisicing, elit. Illum, laboriosam?
</div>
</body>
</html>
5.4 목록 관련 스타일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* list-style: none을 하면 list 스타일이 사라짐;
list-style-position = inside | outside | inherit(상위목록 상속 받기) */
.list li {
background-color: lime;
list-style-position: inside;
list-style-type: hangul;
/* circle | disc | square */
/*
upper-roman -> ol을 안 써도 순서를 넣을 수 있음.
lower-roman
lower-greek
lower-alpha
upper-alpha
lower-latin, upper-latin 등
hangul, hangul-consonant도 추가됨!
*/
}
</style>
</head>
<body>
<ul class="list">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, molestiae?</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, molestiae?</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, molestiae?</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, molestiae?</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, molestiae?</li>
</ul>
</body>
</html>
6. 박스모델과 배경 스타일
6.1 박스모델 알아보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* boxmodels
width / height로 크기를 지정한다. 이 크기는 content의 크기이다. 웹 페이지에 표시되는 내용의 크기!
border
padding : content와 border 사이의 공간;
margin: 바깥 쪽의 여배;
*/
* {
margin: 0;
padding : 0;
}
/* 위 선택은 전체 선택자. 스타일을 초기화시킬 수 있다 */
.box {
margin: 30px;
width: 600px;
background-color: lime;
}
.box2 {
border: 5px solid black;
/* border이나 padding 크기는 content 크기 바깥에 넣어진다. 즉 원래 content 크기보다 더 크게 보인다. */
padding: 20px;
}
.box3 {
box-sizing: border-box; /* css3 */
/* border와 padding의 크기가 content 크기 안에 편입된다, 단 explorer 9 이상에서만 css3가 적용된다. */
}
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque reprehenderit iure, corrupti voluptates. Optio delectus natus, quisquam sunt ullam eaque ipsa explicabo ab rerum consectetur, quo repellat repellendus, pariatur veritatis!
</div>
<div class="box box2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque reprehenderit iure, corrupti voluptates. Optio delectus natus, quisquam sunt ullam eaque ipsa explicabo ab rerum consectetur, quo repellat repellendus, pariatur veritatis!
</div>
<div class="box box2 box3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque reprehenderit iure, corrupti voluptates. Optio delectus natus, quisquam sunt ullam eaque ipsa explicabo ab rerum consectetur, quo repellat repellendus, pariatur veritatis!
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding : 0;
}
.box {
/*display 태그를 통해 display: block으로 하면 블록 요소처럼 보이게 한다.
또한 블록을 지정하려면 div로 영역을 나누어야 한다. 인라인 태그에서 display:block;을 안한 채로 그냥 적용하면 줄마다 태그가 적용된다. */
margin: 20px;
/* padding-left: 20px; */
/* top | left | right | bottom */
padding: 20px;
background-color: lime;
border-bottom: 5px solid black;
padding: 100px 50px;
/* 앞에 지정한 것이 top과 bottom, 뒤에 있는 것이 left와 right */
/* 세 개를 지정하면 top | right left | bottom */
/* 네 개를 지정하면 top | right | bottom | left */
border-style : solid dashed;
/* 이것도 상하좌우로 다 다르게 적용할 수 있다 */
/* border-style : solid(실선) | dashed(파선) | dotted(점선) | double(두 줄) | inset(약간 들어가 보이게) | outset | ridge(뾰족해 보이게) | groove(약간 교차되어 보이게)
border-color
border-width;
위 태그들은 이미 border 태그가 적용된 뒤에 쓸 수 있다.
*/
}
/* margin은 사방 다 있을 때 아래 박스의 margin과 겹쳐져서 출력된다. 예를 들어 위 박스의 아래 마진이 30, 아래 박스의 위 마진이 40이라면 40이 표현됨 */
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque reprehenderit iure, corrupti voluptates. Optio delectus natus, quisquam sunt ullam eaque ipsa explicabo ab rerum consectetur, quo repellat repellendus, pariatur veritatis!
</div>
<div class="box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque reprehenderit iure, corrupti voluptates. Optio delectus natus, quisquam sunt ullam eaque ipsa explicabo ab rerum consectetur, quo repellat repellendus, pariatur veritatis!
</div>
<div class="box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque reprehenderit iure, corrupti voluptates. Optio delectus natus, quisquam sunt ullam eaque ipsa explicabo ab rerum consectetur, quo repellat repellendus, pariatur veritatis!
</div>
</body>
</html>
6.2 배경 스타일 알아보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: url(img/icon.png) no-repeat 90% 20px;
/* %는 브라우저의 위치 기준,
background-attachment: fixed; 로 이미지가 고정되게끔 할 수 있다. */
}
.box {
border: 3px solid black;
padding: 20px;
background: url(img/icon.png);
background-color: pink;
/* -가 있는 구체적인 태그는 밑에 써야 적용이 된다 */
/* background-repeat : repeat | no-repeat | repeat-x | repeat- y;
background-position: center center;
위와 같이 반복하지 않을 때 이미지 위치를 지정할 수 있다. (0 0)을 대입하면 left top이 된다. top, bottom, right, left, center 지정 가능.
각각 %로 0~100까지 지정 가능, center = 50%
px로도 지정이 가능한데, -로 가면 이미지가 잘려 보인다.
*/
width: 600px;
}
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, assumenda corporis nihil possimus harum explicabo minima. Laboriosam assumenda fuga consectetur voluptate molestias voluptatibus natus quidem ad minus dolores quae, enim. Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Temporibus, adipisci aspernatur saepe rerum fugiat architecto consequatur accusamus suscipit nihil illum autem. Similique, totam explicabo. Incidunt, vitae sed hic accusamus tempore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias deleniti inventore repellat dignissimos corporis reprehenderit dolores cum voluptatem eos animi porro, eum culpa maxime harum vel dolor ullam, ducimus labore?
</div>
<div class="box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, assumenda corporis nihil possimus harum explicabo minima. Laboriosam assumenda fuga consectetur voluptate molestias voluptatibus natus quidem ad minus dolores quae, enim. Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Temporibus, adipisci aspernatur saepe rerum fugiat architecto consequatur accusamus suscipit nihil illum autem. Similique, totam explicabo. Incidunt, vitae sed hic accusamus tempore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias deleniti inventore repellat dignissimos corporis reprehenderit dolores cum voluptatem eos animi porro, eum culpa maxime harum vel dolor ullam, ducimus labore?
</div>
<div class="box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, assumenda corporis nihil possimus harum explicabo minima. Laboriosam assumenda fuga consectetur voluptate molestias voluptatibus natus quidem ad minus dolores quae, enim. Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Temporibus, adipisci aspernatur saepe rerum fugiat architecto consequatur accusamus suscipit nihil illum autem. Similique, totam explicabo. Incidunt, vitae sed hic accusamus tempore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias deleniti inventore repellat dignissimos corporis reprehenderit dolores cum voluptatem eos animi porro, eum culpa maxime harum vel dolor ullam, ducimus labore?
</div>
<div class="box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, assumenda corporis nihil possimus harum explicabo minima. Laboriosam assumenda fuga consectetur voluptate molestias voluptatibus natus quidem ad minus dolores quae, enim. Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Temporibus, adipisci aspernatur saepe rerum fugiat architecto consequatur accusamus suscipit nihil illum autem. Similique, totam explicabo. Incidunt, vitae sed hic accusamus tempore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias deleniti inventore repellat dignissimos corporis reprehenderit dolores cum voluptatem eos animi porro, eum culpa maxime harum vel dolor ullam, ducimus labore?
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 600px;
padding: 20px;
border: 2px solid black;
background: url(img/bg.jpg) no-repeat 0 0;
}
.box2 {
background-size: 100% auto;
/* cover을 지정하면 자동으로 가로 세로 중 알맞은 걸로 맞추고 다른 걸 자동맞춤해 준다 */
background-clip: content-box;
/* clipping할 수 있다, 즉 content 영역에만 보이게! */
background-origin: content-box;
/* 원래는 크기 기준이 padding까지 포함하는데,
사이즈 지정 기준을 content 영역으로만 지정한다,
즉 원래 설정보다 이미지가 살짝 작아보일 수 있다 */
}
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, assumenda corporis nihil possimus harum explicabo minima. Laboriosam assumenda fuga consectetur voluptate molestias voluptatibus natus quidem ad minus dolores quae, enim. Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Temporibus, adipisci aspernatur saepe rerum fugiat architecto consequatur accusamus suscipit nihil illum autem. Similique, totam explicabo. Incidunt, vitae sed hic accusamus tempore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias deleniti inventore repellat dignissimos corporis reprehenderit dolores cum voluptatem eos animi porro, eum culpa maxime harum vel dolor ullam, ducimus labore?
</div>
<div class="box box2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, assumenda corporis nihil possimus harum explicabo minima. Laboriosam assumenda fuga consectetur voluptate molestias voluptatibus natus quidem ad minus dolores quae, enim. Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Temporibus, adipisci aspernatur saepe rerum fugiat architecto consequatur accusamus suscipit nihil illum autem. Similique, totam explicabo. Incidunt, vitae sed hic accusamus tempore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias deleniti inventore repellat dignissimos corporis reprehenderit dolores cum voluptatem eos animi porro, eum culpa maxime harum vel dolor ullam, ducimus labore?
</div>
</body>
</html>