[CSS] 스타일 속성

💻 Frontend/HTML&CSS

[CSS] 스타일 속성

Kyle99 2024. 8. 12. 18:00

폰트와 텍스트 속성

▶ 예제 보기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폰트와 텍스트관련 속성</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Poppins:wght@300;600;900&display=swap" rel="stylesheet">
<style>
	h1 {
		font-family: Poppins, 'Noto Sans KR' sans-serif;
		font-weight: 600;
	}
	.font {
		font : oblique small-caps bold 14px '궁서';
	}
	.em1 {
		font-weight: 600;
		font-style: normal;
		letter-spacing: 2em;
	}
	.css {
		text-indent: 50px; line-height: 200%;
	}
	.strong {
		word-spacing: 2em; text-decoration: underline;
	}
	.price {
		width: 500px;
		height: 50px;
		text-align: center;
		border: 1px solid blue;
	}
	.c_price {
		text-decoration: line-through;
	}
	.pre {
		white-space: pre;
	}
	.direction {
		width: 500px;
		margin: 0 auto;
		direction: rtl;
	}
	.shadow {
		width: 300px;
		height: 50px;
		margin: 0 auto;
		font-size: 2.5em;
		font-weight: bolder;
		text-shadow: 5px 5px 10px gray;
	}
	.overflow1 {
		width: 300px;
		border : 1px solid blue;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
</style>
</head>
<body>
	<h1>폰트와 텍스트 관련 속성(Font & Text CSS Attribute)</h1>
	<p>font는 글꼴의 다양한 속성을 
		<span class="font">한 번에 지정할 수 있는</span>
		<span class="em1">축약형</span> 속성이다.		
	</p>
	<p class="css">HTML 문서의 디자인을 담당하는 CSS는
	<strong class="strong">폰트와 텍스트 속성을 다양하게 제공하고 있다.</strong></p>
	<p class="price">그 상품의 판매가는 <strong>9,900원</strong>
		(<span class="c_price">10,000</span>)
	<div class="pre">텍스트에 공백문자를 
		처리할 수 있는 방법을 
		지정한다.</div>
	<div class="direction">텍스트의 쓰기 방향과 한글은 적용되지 않는 font-variant</div>
	<div class="shadow">텍스트에 그림자 설정하기</div>
	<p class="overflow1">font-family는 글꼴의 종류를 지정하는 속성이다. 
		만약 글꼴에 공백있는 이름이면 따옴표(‘’)로 감싸서 지정해야 한다.</p>
</body>
</html>

- h1 {font-family: Poppins, 'Noto Sans KR', sans-serif; font-weight: 600;}
구글 웹 폰트를 사용해 글꼴과 글꼴의 두께를 지정한다.
font-family에 지정한 순서대로 글꼴이 적용되는데 Poppins는 영문 전용 폰트이므로
영문은 Poppins 폰트가 적용되고 한글은 Poppins 폰트에 한글이 없으므로
다음에 지정한 'Noto Sans KR' 폰트가 적용되어 화면에 표시된다.
글꼴 이름에 공백이 있으면 글꼴 이름을 온전히 표시하기 위해서 따옴표 감싼다. (https://fonts.google.com)

- .font { font: oblique small-caps bold 14px 궁서; }
font 속성은 모든 폰트 속성을 하나로 정의하는 축약 속성이다.
font 속성에 값으로 font-style, font-variant, font-weight, font-size/line-height, font-family 순으로 지정할 수 있다.
font-size 와 font-family 는 필수 값으로 두 값 중 하나라도 지정하지 않으면 기본 값으로 설정된다. 나머지는 생략 가능하다.

- .em1 { font-weight: 600; font-style: normal; letter-spacing: 2em; }
font-weight 속성에 값은 lighter, bolder, bold 등의 값과 100 ~ 900 사이 100 단위로 글꼴의 두께를 지정할 수 있다.
letter-spacing은 글자 사이 간격을 지정

- .css { text-indent: 50px; line-height: 200%; }
텍스트 들여쓰기와 줄 간격 지정

- .strong { word-spacing: 2em; text-decoration: underline; }
텍스트의 단어 사이 간격과 밑줄을 지정

- .c_price { text-decoration: line-through; }
텍스트에 취소선 지정

- .pre { white-space: pre; }
연속하는 공백을 있는 그대로 출력 되도록 지정

- font-variant: small-caps;
텍스트를 대문자로 지정

- direction: rtl;
텍스트 쓰기 방향을 오른쪽에서 왼쪽으로 지정

- text-shadow: 5px 5px 5px gray;
텍스트에 그림자 효과 지정 - 가로 옵셋 세로 옵셋 그림자 번짐 정도 색상

- text-overflow: ellipsis;
텍스트가 잘렸다는 의미로 말줄임표(...)를 표시한다.
텍스트를 표시할 때 내용이 박스 보다 긴 경우 텍스트의 줄을 바꾸지 못하게 하고
text-overflow 속성에 ellipsis를 지정하면 말 줄임표를 표시할 수 있다.
이때 주의해야 할 점은 넘치는 텍스트의 내용을 화면에서 보이지 않게 설정해야 한다는 것이다.

- white-space: nowrap;
연속하는 공백을 한 칸으로 표시하고 내용이 길어도 줄을 바꾸지 않는다.

- overflow: hidden;
박스의 크기보다 넘치는 내용은 숨긴다.

CSS의 목록 속성

▶ 예제 보기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS의 목록 속성</title>
<style>
	body {
		font: 0.9em '맑은 고딕', "돋움" sans-serif; 
	}
	#webStandard {
		list-style-image: url(images/arrow.gif);
		list-style-position: inside;
	}
	#listJavaScript {
		list-style-type: upper-roman;
		list-style-position: outside;
	}
</style>
</head>
<body>
	<header>	
		<h1>CSS에서 목록 속성 다루기</h1>
	</header>
	<section>
		<article>
			<h3>웹 표준 도서 목록</h3>
			<ul id="webStandard">				
				<li>HTML5+CSS3+JavaScript 웹 프로그래밍</li>
				<li>HTML5와 CSS3로 웹 프로그래밍 시작하기</li>				
			</ul>		
		</article>
		<article>
			<h3>자바스크립트 도서 목록</h3>
			<ol id="listJavaScript">				
				<li>자바스크립트 완벽 가이드</li>	
				<li>모던 웹을 위한 자바스크립트</li>
			</ol>
		</article>		
	</section>
</body>
</html>

- body { font: 0.9em "맑은 고딕", "돋움", sans-serif; }
font-size와 font-family 를 지정

- list-style-position: inside;
마커(marker)를 들여쓰기 한다. 기본 값은 outside 이다.

테두리 관련 속성과 배경 이미지 속성

▶ 예제 보기

<!DOCTYPE HTML>
<html>
<head>
<title>테두리 관련 속성과 배경 이미지 속성</title>
<meta charset="UTF-8" />
<style>
	body {
		font: 0.95em '맑은 고딕', sans-serif;
		margin: 30px;
	}
	div {
		width: 600px;
		border: 10px solid #FF0033;
		border-radius: 20px;
		background-color: #6d6d6d;
	}
	p {
		background-color: #ffffff;
		line-height: 2em;
		margin: 20px;
		padding: 15px;
	}
	.round1 {
		border: 10px solid #FF9933;
		border-radius: 30px 0;
	}
	.round2 {
		border: 10px solid #FF66FF;
		border-radius: 30px 0 0 0;
	}
	.round3 {
		height: 50px;
		border-radius: 30px;
		background-image: url(images/gear_icon01.png);
		background-repeat: repeat-x;
		background-position: center;
	}
	.round4 {
		width: 50px;
		height: 50px;
		border-radius: 30px/20px;
		background-image: url(images/gear_icon01.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 50px 50px;
		opacity: 0.5;
	}
	.icon01 {
		width: 24px;
		height: 26px;
		padding: 0px;
		border-radius: 25%;
		background-image: url(images/bg_long01.jpg);
		background-repeat: no-repeat;
		background-position: -2px -89px;
	}
</style>
</head>
<body>
	<div class="shadow">
		<p class="round1">
			일월과 힘차게 행복스럽고 얼마나 내려온 쓸쓸하랴?<br/>
			이상이 공자는 역사를 하여도 위하여 끝에 같이 장식하는 것이다.<br/>
			끓는 인간이 이성은 가진 이것은 인간의 말이다.</p>
		<p class="round2">
			생생하며, 사랑의 커다란 아름다우냐?<br/>
			같이, 대중을 사라지지 보이는 인생에 유소년에게서 바이며, 약동하다.<br/>
			못할 내는 산야에 방황하여도, 생명을 밝은 것이다.</p>
		<p class="round3"></p>
		<p class="round4"></p>
		<p class="icon01"></p>
	</div>
	<p id="link">
		<a href="http://hangul.thefron.me">한글 Lorem Ipsum</a>에서 발췌</p>
</body>
</html>

border는 축약형 표현으로 테두리 두께, 선 종류, 선 색상을 한 번에 지정할 수 있다.
(border-style: solid; (dotted, dashed, double, none, hidden)) (border-width: 10px;) (border-color: #ff9933;)
테두리의 방향에 따라서 위쪽, 오른쪽, 아래쪽, 왼쪽을 개별적으로 지정할 수 있다.
(border-top, border-right, border-bottom, border-left) (border-top-width, border-right-color, border-bottom-style)

- border-radius:30px 0px;
좌 상단 우 하단에 반지름 30px의 라운드 모서리 지정

- border-radius:30px 0px 0px 0px;
좌 상단에 반지름 30px의 라운드 모서리 지정

- border-radius: 30px;
가로세로 반지름 30px 라운드 모서리 지정

- background-image: url('images/gear_icon01.png');
- background-repeat: repeat-x;
배경 이미지는 기본적으로 수평과 수직 방향으로 반복해 적용되는데
background-repeat 속성을 이용해 반복여부 또는 반복할 방향을 지정할 수 있다.

- border-radius: 30px/20px;
가로 반지름 30px 세로 반지름 20px의 라운드 모서리 지정

- background-image: url('images/gear_icon01.png');
- background-size: 50px 50px;
- background-repeat: no-repeat;
- background-position: 15px 15px;
배경 이미지의 크기와 배치하는 위치를 지정할 수 있다.

- opacity: 0.5;
opacity 속성에 0.0 ~ 1.0 사이의 값으로 불투명도를 지정할 수 있다.
0.0은 불투명도가 0으로 투명, 0.5는 불투명도가 절반으로 반투명하게 보인다.

- background-image: url('images/bg_long01.jpg');
- background-repeat: no-repeat;
- background-position: -2px -89px;
작은 이미지를 여러 개 사용할 경우 하나의 이미지로 만들어
배경 이미지로 지정하면 파일 로딩 속도를 향상시킬 수 있다.