Home
Top

006 CSS 공부(2) 폰트 스타일

Daily Study/Web Dev

2021. 1. 14.

반응형
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>font / text</title>
	<style>
		/*body {font-family: '돋움',dotum,Helvetica,sans-serif;}*/
		body,h1,h2 {font-family: 'Malgun Gothic',Helvetica,sans-serif;
			font-size: 12px;}
		/*앞에서부터 적용되는데 보는 사람 컴퓨터에 없으면 다음 폰트로 적용*/
		/*serif 바탕체 sans-serif 돋움체 cursive 필기체 monospace 고정폭*/
		h1 {font-size: 2.4em;
			letter-spacing: .1em;
			/*letter-spacing 자간*/
			text-transform: uppercase;
			/* uppercase | lowercase | capitalize 첫 글자만 대문자*/
			background-color: lime;}
		h1 small {font-size: .5em;
					background-color: lime;
					vertical-align: baseline;}
					/* top | middle | baseline | bottom 
						0을 기준으로 n px 값으로 적용할 수도 있음*/
		h2	{font-variant: small-caps;
		/*font-variant small-caps 소문자 대신 작은 대문자 쓰기*/
			font-size: 2em;
			color: #ffb69f;
			text-decoration: overline;}
		/* underline밑줄 | overline윗줄 | line-through취소선 | none원래 있던거 없앨때*/
		address {font-style: normal;}
		/* normal | italic | oblique */
		.lead {font-size: 1.2em;
				font-weight: bold;
		/* bold | bolder | 600 | 700 | 800 |900 */
		/* normal | lighter | 100 | 200 | 300 | 400 | 500 */
				word-spacing: 1em;}
				/*단어와 단이 사이 간격*/
		.text {line-height: 1.6em;
				text-align: center;
				text-indent: 1em;}
		/* left | center | right | justify(양쪽정렬) */
		/*줄 간격*/
				/*white-space: nowrap;*/
	</style>
</head>
<body>

	<div id="wrap">
		<h1>style example <small>sample</small></h1>
		<h2>Style Example (font-variant)</h2>
		<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing, elit. Eius, ducimus.</p>
		<p class="text">Lorem ipsum dolor sit, amet consectetur adipisicing, elit. Laboriosam consequuntur ab ratione amet. Consequuntur, alias, libero! Laboriosam officia numquam saepe quidem officiis distinctio sed qui doloribus placeat! Eaque accusantium magni ea distinctio pariatur odio aspernatur beatae nam, est, culpa voluptatum nemo tempore totam assumenda, ducimus sapiente soluta qui fugiat consectetur corporis maxime ratione dignissimos vero. Incidunt, doloremque perspiciatis minus perferendis suscipit molestiae, qui in voluptas sapiente blanditiis neque inventore quam id fugiat aperiam, quae odio, architecto. Accusantium, sint placeat blanditiis eligendi saepe reprehenderit aliquam exercitationem quae tempore laborum dicta impedit labore dolores, facere natus cum accusamus corporis, eum, consequatur voluptatibus!</p>
		<hr>
		<address>Lorem ipsum dolor, sit amet consectetur, adipisicing elit.</address>
	</div>
	
</body>
</html>

 

 

 

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>@font-face</title>
	<style>
		@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap');
		@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat+Alternates:wght@500&family=Raleway:wght@200&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;}
        h1 {font-family: 'Great Vibes', cursive;}
        .lead {font-family: 'Raleway', sans-serif;}
        .lead2 {font-family: 'Montserrat Alternates', sans-serif;}
		.noto2 {font-family: 'Noto Serif KR', serif;
				font-weight: 200;}
		.noto3 {font-family: 'Noto Serif KR', serif;
    			font-weight: 300;}
    	.noto4 {font-family: 'Noto Serif KR', serif;
    			font-weight: 400;}
    	.noto5 {font-family: 'Noto Serif KR', serif;
    			font-weight: 500;}
    	.noto6 {font-family: 'Noto Serif KR', serif;
    			font-weight: 600;}
		.noto7 {font-family: 'Noto Serif KR', serif;
				font-weight: 700;}
		.noto9 {font-family: 'Noto Serif KR', serif;
    			font-weight: 900;}
       .nanum {font-family: Ngothic,sans-serif;}
	</style>
</head>
<body>
	
<h1>@font-face</h1>
<p class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet reprehenderit voluptas atque qui, reiciendis adipisci eius eveniet libero veritatis voluptatem molestias, et, ex dolorem nesciunt, quidem optio expedita molestiae incidunt.</p>
<p class="nanum">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet reprehenderit voluptas atque qui, reiciendis adipisci eius eveniet libero veritatis voluptatem molestias, et, ex dolorem nesciunt, quidem optio expedita molestiae incidunt.</p>
<p class="lead2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur praesentium mollitia cumque quam. Adipisci, iusto. Itaque, eius recusandae quis deserunt fuga corrupti, delectus voluptatem autem sunt? At animi, culpa a?</p>
<p class="nanum">가나다라마바사 레드벨벳</p>
<p class="noto2">가나다라마바사 레드벨벳</p>
<p class="noto3">가나다라마바사 레드벨벳</p>
<p class="noto4">가나다라마바사 레드벨벳</p>
<p class="noto5">가나다라마바사 레드벨벳</p>
<p class="noto6">가나다라마바사 레드벨벳</p>
<p class="noto7">가나다라마바사 레드벨벳</p>
<p class="noto9">가나다라마바사 레드벨벳</p>

</body>
</html>

fonts.google.com/

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

구글 웹 폰트에서 폰트들을 선택해서 css에서 바로 로딩해서 사용할 수 있는 코드를 얻을 수 있음.

외부에서 연결하려면 링크

내부에서 연결하려면 임포트 하면 됨.

 

스타일 윗부분에서 로딩하고

클래스나 아이디에 걸어주면 끝.

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>word-break, white-space</title>
	<style>
	body {font-family: 'Malgun Gothic',sans-serif;
			font-size: 16px;}
	.content, .content2, .content3 {width: 500px;
				border: 3px solid black;}
	/*word-break : break-all; (단어가 너무 길면 알아서 잘라줌 하이픈 없는 하이프네이션)*/
	.content p {word-break: break-all;}
	.content2 p {text-align: justify;}
	.content3 p {text-align: justify;
				word-break: break-all;}
	/*white-space : nowrap; (줄 안바꾸고 쭉 쓰게 만들기)*/
	/*white-space : pre; (아래 적은대로 그대로 보여지게*/
	/*white-space : pre-wrap; (아래 적은대로 쓰되 너무 길어서 밖으로 나가는건 안으로 넣어줌*/
	/*white-space : pre-line; (아래 적은대로 쓰고 앞 공백도 다 당겨줌)*/
	.white1 {width: 600px;
			border: 2px solid black;
			white-space: pre;}
	.white2 {width: 600px;
			border: 2px solid black;
			white-space: pre-wrap;}
	.white3 {width: 600px;
			border: 2px solid black;
			white-space: pre-line;}
	</style>
</head>
<body>

<div class="content">
	<p>Loremipsumdolorsitametconsecteturadipisicingelit.Alias,minusverooditrepellendus,similiquequibusdamvel,inventorefacilisprovidensedatofficia,onsequaturabhisapienteidllo,necessitatibus,possimus.</p>
</div>
<div class="content2">
	<p>Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Nam perspiciatis quaerat officia consequuntur beatae dicta quibusdam! Eos nisi delectus nihil, vero excepturi odio! Esse, iure commodi voluptatibus labore inventore tempora blanditiis itaque quidem. Labore, praesentium. Nisi magnam excepturi, nam, in, nulla quis id vitae quas cumque, voluptatum quo cupiditate dicta velit error quaerat pariatur! Quos laborum quo, natus eos odio consequuntur, expedita fugit cumque repudiandae nulla vitae dolore, veniam saepe quis accusamus. Consectetur obcaecati mollitia, ratione itaque praesentium ad nostrum minus, libero aut aliquid. Libero, aspernatur! Labore, quod vel explicabo? Sed et repellat magnam officia nemo cumque ducimus quia est.</p>
</div>
<div class="content3">
	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe vitae libero consequatur commodi possimus itaque quos corrupti eius odit sit voluptatum veritatis, architecto esse facilis tempore unde facere ipsam maiores temporibus voluptatem nobis adipisci accusantium autem. Illo unde sed dolore deleniti, optio. Necessitatibus, dicta in aut earum! Commodi repellat nihil, quos ex libero ratione eos. Magnam doloremque quo quibusdam repudiandae libero quam eaque ipsum, adipisci, animi quasi rerum, totam repellat, neque aperiam dicta in ipsam aspernatur laboriosam eum? Dolores modi perferendis dolorem, minima consectetur, nam beatae laborum libero sit, soluta laudantium iste molestias sequi in itaque quisquam provident nisi, cumque!</p>
</div>
<hr>
<div class="white1">
	Lorem
	ipsum, dolor sit amet
	consectetur.
	Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum, vel doloremque assumenda in, dolorum error nemo dolor sit animi dolore officiis non ipsa vero possimus repellendus, ducimus eius amet impedit.
</div>

<div class="white2">
	Lorem
	ipsum, dolor sit amet
	consectetur.
	Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum, vel doloremque assumenda in, dolorum error nemo dolor sit animi dolore officiis non ipsa vero possimus repellendus, ducimus eius amet impedit.
</div>
<div class="white3">
	Lorem
	ipsum, dolor sit amet
	consectetur.
	Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum, vel doloremque assumenda in, dolorum error nemo dolor sit animi dolore officiis non ipsa vero possimus repellendus, ducimus eius amet impedit.
</div>

</body>
</html>

 

 

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>list</title>
	<style>
		.list {
			/*list-style: none;*/
		}
		.list li {background-color:lime;
					list-style-position: inherit;
					/* 부모 요소의 값을 그대로 상속받음,적용 안하면 자동으로 적용됨 */
					/*list-style-position:inside;*/
					/* 불릿을 안쪽으로 넣어줌 */
					/*list-style-position: outside;*/
					/* 불릿을 바깥쪽으로 뺌 */
					list-style-type: circle;
					/* 불릿 모양 circle | disc | square */

					/* upper-roman | lower-roman |
				        lower-greek |
				        lower-alpha | upper-alpha |
				        lower-latin | upper-latin |
				        armenian | georgian | hebrew |
				        cjk-ideographic | cjk-heavenly-stem
				        hiragana | katakana |
				        hiragana-iroha | katakana-iroha |
				        hangul | hangul-consonant (ㄱㄴㄷㄹㅁ) |*/
		}
	</style>
</head>
<body>

	<ul class="list">
		<li>Lorem ipsum dolor sit amet, consectetur.</li>
		<li>Lorem ipsum dolor sit amet, consectetur.</li>
		<li>Lorem ipsum dolor sit amet, consectetur.</li>
		<li>Lorem ipsum dolor sit amet, consectetur.</li>
		<li>Lorem ipsum dolor sit amet, consectetur.</li>
		<li>Lorem ipsum dolor sit amet, consectetur.</li>
	</ul>
	
</body>
</html>

여기까지 엊그제 낮에 공부하다가

계속 몸이 뻐근해서 잠을 잘못 잤나 했는데 몸살감기가 왔던 거라서

12일 오후, 13일 하루종일 몸져 누워있느라 공부를 못했다... 따흑

반응형

'Daily Study > Web Dev' 카테고리의 다른 글

008 CSS 공부(4) 표 관련 스타일  (0) 2021.01.25
007 CSS 공부 (3) 박스모델  (0) 2021.01.14
005 CSS 공부(1)  (0) 2021.01.11
004 HTML 공부(4)  (0) 2021.01.07
003 HTML 공부(3)  (0) 2021.01.06

티스토리툴바