[CSS] 글자, 공백, 문장 관련 스타일 속성

글꼴 관련 스타일 속성

font-family

: 글꼴 관련 스타일 속성 - 글꼴을 속성값으로 설정한다.
→ 글꼴은 나열이 가능하며, 순차적으로 적용된다.

font-family 속성이 생략되거나 속성값으로 설정된 글꼴이 없는 경우에는 클라이언트 플랫폼(OS)의 기본 글꼴을 사용한다.
때문에 클라이언트마다 다른 글꼴이 사용되어 출력된다는 문제점이 발생한다.

<title>CSS</title>
<style>
body { 
	/* font-family */ 
	font-family: "sans-serif", "궁서체", "맑은 고딕";  
}
</style>
</head>
<body>
	<h1>글꼴 관련 스타일 속성</h1>
	<hr>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
</body>

웹폰트(WebFont)

웹서버에 저장된 글꼴파일을 클라이언트에게 제공하여 사용하는 기능
웹폰트는 방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관 없이, 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트이다.
모든 클라이언트가 동일한 글꼴을 사용할 수 있도록 웹폰트를 제공한다.

글꼴파일
: ttf(OS에서 사용하는 글꼴파일), woff(IE9 이상,크롬,사파리 등에서 사용 가능), eof(IE8 이하,크롬,사파리 등에서 사용 가능)

@font-face

글꼴파일을 클라이언트에게 제공하기 위한 시스템 속성
모든 클라이언트에게 동일한 글꼴을 제공할 수 있도록 한다.
웹 브라우저에게 해당 서체를 다운로드할 것을 알리면서 사용할 수 있게함으로써, 컴퓨터에 설치된 폰트만을 사용해야했던 제약이 없어지게 되었다.
- font-family: 글꼴파일을 구분하기 위한 식별자(글꼴의 이름)를 속성값으로 설정한다.
- src: url 함수를 사용하여 글꼴파일의 URL 주소를 속성값으로 설정한다.

*구글에서 제공하는 웹폰트 사이트: https://fonts.google.com/

Google Fonts

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

fonts.google.com

<title>CSS</title>
<style type="text/css">
@font-face {
	font-family: "NanumBarunGothic";
	src: url("/web/css/fonts/NanumBarunGothic.woff"); 
}

body {
	font-family: "NanumBarunGothic";
}
</style>
</head>
<body>
	<h1>글꼴 관련 스타일 속성</h1>
	<hr>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
</body>

font-size

글자 크기에 대한 스타일 속성 - 기본크기 : 16px
속성값(단위) : px(기본), pt, em, %, 키워드(small,medium,large 등)
- 글자 크기 관련 키워드는 medium(16px)를 기준으로 1.2배씩 증가 또는 감소한다.
- em : M 문자의 폭을 기준으로 설정된 글자 크기 단위 - 반응형 웹디자인에서 많이 사용한다.
  → http://pxtoem.com 사이트 참조해 글자 크기 비교 가능

font-style : 글자의 기울기에 대한 스타일 속성 - normal(기본),italic
font-variant : 알파벳에 대한 스타일 속성 - normal(기본),samll-caps(소문자를 작은 크기의 대문자로 변환한다.)
font-weight : 글자 굵기에 대한 스타일 속성 - 100~900(기본 : 400), 키워드(normal, bold 등)

font : 글자 관련 모든 스타일 속성값을 설정할 수 있다.
→ 주의사항 : 글꼴을 설정하지 않으면 적용되지 않는다.

<title>CSS</title>
<style type="text/css">
.font1 { 
	font-size: 14px; 
}

.font2 {
	font-size: 20px;
	
	font-style: italic;
}

.font3 {
	font-size: xx-large; 
	
	font-variant: small-caps; /*소문자를 작은 크기의 대문자로 변환*/
}

.font4 {
	font-size: 1.5em; 
	
	font-weight: bold; 
}

.font5 {
	font: italic 700 200% "궁서체"; 
}

</style>
</head>
<body>
	<h1>글자 관련 스타일 속성</h1>
	<hr>
	<p class ="font1">글자 관련 스타일 속성-1(Font Style Attribute)</p>
	<p class ="font2">글자 관련 스타일 속성-2(Font Style Attribute)</p>
	<p class ="font3">글자 관련 스타일 속성-3(Font Style Attribute)</p>
	<p class ="font4">글자 관련 스타일 속성-4(Font Style Attribute)</p>
	<p class ="font5">글자 관련 스타일 속성-5(Font Style Attribute)</p>
	
</body>

글자 간격 관련 스타일 속성

letter-spacing
: 문자와 문자 사이의 간격을 설정하기 위한 스타일 속성 - 단위 : px, em, % 등

word-spacing
: 단어와 단어 사이의 간격을 설정하기 위한 스타일 속성 - 단위 : px, em, % 등

line-height
: 줄간격을 설정하기 위한 스타일 속성 - 단위 : px, em, % 등

font 스타일의 속성에서 [글자크기/줄간격] 속성값 사용이 가능하다.

font: 30px/60px "궁서";

<title>CSS</title>
<style type="text/css">
.gab {
	font-size: 30px;
}

.gab1 {
	letter-spacing: 0.1em;
}

.gab2 {
	word-spacing: 0.5em; 
}

.gab3 {
	line-height: 50px; 
}

.gab4 {
	font: 30px/60px "궁서";
}
</style>
</head>
<body>
	<h1>글자 간격 관련 스타일 속성</h1>
	<hr>
	<p class="gab">Java Programming</p>
	<p class="gab gab1">Java Programming</p>
	<p class="gab gab2">Java Programming</p>
	<hr>
	<h2>HTML5<br>CSS3</h2>
	<h2 class="gab3">HTML5<br>CSS3</h2>
	<h2 class="gab4">HTML5<br>CSS3</h2>
</body>

공백(Space) 관련 스타일 속성

HTML 문서의 다수의 공백은 하나의 공백으로 처리되어 출력된다.

white-space

역할1 ) 공백처리에 대한 스타일 속성
역할2 ) 박스모델의 폭보다 큰 태그내용 처리에 대한 스타일 속성
속성값 : normal(기본- pre-line), pre, nowrap, pre-wrap
- pre-line : 다수의 공백을 하나의 공백으로 처리하여 출력하고, 박스모델보다 큰 태그내용은 자동 줄바꿈 처리하여 출력한다.
- pre : 다수의 공백을 그대로 출력하고, 박스모델보다 큰 태그내용은 자동 줄바꿈 없이 그대로 출력한다.
- → 태그내용이 박스모델의 폭을 벗어나 출력 처리된다.
- nowrap : 다수의 공백을 하나의 공백으로 처리하여 출력하고, 박스모델보다 큰 태그내용은 자동 줄바꿈 없이 그대로 출력한다.
- pre-wrap : 다수의 공백을 그대로 출력하고, 박스모델보다 큰 태그내용은 자동 줄바꿈 처리하여 출력한다.

<title>CSS</title>
<style type="text/css">
div {
	margin: 5px;
	/* 태그내용이 박스모델의 폭보다 큰 경우 자동 줄바꿈 처리되어 출력된다. */
	width: 200px;
	border: 1px solid red; 
}

.space1 { white-space: pre-line; } 

.space2 { white-space: pre; } 

.space3 { white-space: nowrap; }

.space4 { white-space: pre-wrap; }  


</style>
</head>
<body>
	<h1>공백(Space) 관련 스타일 속성 </h1>
	<hr>
	<!-- HTML 문서의 다수의 공백은 하나의 공백으로 처리되어 출력 -->
	<div class="space1">웹표준(HTML + CSS5 + JavaScript)를    이용한     웹사이트     만들기</div>
	<div class="space2">웹표준(HTML + CSS5 + JavaScript)를    이용한     웹사이트     만들기</div>
	<div class="space3">웹표준(HTML + CSS5 + JavaScript)를    이용한     웹사이트     만들기</div>
	<div class="space4">웹표준(HTML + CSS5 + JavaScript)를    이용한     웹사이트     만들기</div>
</body>

문장(텍스트) 관련 스타일 속성

direction

문장 쓰기 방향에 대한 스타일 속성
속성값 : ltr(왼쪽에서 오른쪽 - 기본설정), rtl(오른쪽에서 왼쪽)

text-align

문장 정렬에 대한 스타일 속성
속성값 : left(기본값), right, center, justify(양쪽정렬)

text-shadow

문자의 그림자 효과에 대한 스타일 속성
속성값 : 가로 세로 범짐 색상

overflow

박스모델의 폭을 벗어난 문장에 대한 처리와 관련된 스타일 속성
속성값 : visiable(기본값) - 그대로 출력 처리, hidden - 숨김 처리, scroll - 스크롤 처리

text-overflow

숨겨진 문장에 대한 처리와 관련된 스타일 속성
속성값 : clip(기본값) - 잘라내기, ellipsis - [...] 기호를 사용하여 출력

text-decoration

문장에 대한 선(Line) 관련 스타일 속성
속성값 : none(기본값),underline, line-through, overline

text-indent

문장 들여쓰기 관련 스타일 속성 - 문장 앞부분에 여백이 발생한다.

text-transform

문장(알파벳 문자) 변형 관련 스타일 속성
속성값: none(기본값), uppercase(대문자로), lowercase(소문자로), capitalize(첫 문자만 대문자로)

<style type="text/css">
div {
	margin: 15px;
	width: 500px;
	border: 1px solid red; 
}

/*direction*/
.dir1 { direction: ltr; }
.dir2 { direction: rtl; }

/*align*/
.align { width : 150px; } 
.align1 { text-align: left; }
.align2 { text-align: right; }
.align3 { text-align: center; }
.align4 { text-align: justify; }  

/* text-shadow */ 
.shadow {
	font-size: 30px;
	font-weight: bold;
	color: gray;
	text-shadow: 3px 3px 3px #000; /* 가로 세로 범짐 색상 */
}

/* overflow */
.overflow {
	width: 200px;
	white-space: nowrap; /*태그내용(문장)이 박스모델의 폭을 벗어난 상태로 출력 처리*/
}

.overflow1 { overflow: hidden; } 
.overflow2 { overflow: scroll; }

.overflow3 { 
	overflow: hidden;
	text-overflow: ellipsis; 
}
/* text-decoration */  
.deco1 { text-decoration: underline; }
.deco2 { text-decoration: line-through; }
.deco3 { text-decoration: overline; } 

/* text-indent */
.in1 { text-indent: 20px; }
.in2 { text-indent: 30px; }
.in3 { text-indent: 40px; } 

/* text-transform */
.tran1 { text-transform : uppercase; }
.tran2 { text-transform : lowercase; }
.tran3 { text-transform : capitalize; } 
</style>
</head>
<body>
	<h1>문장(텍스트) 관련 스타일 속성</h1>
	<hr>
	<div class="dir1">브라우저에 출력될 아주 중요한 내용입니다.</div>
	<div class="dir2">브라우저에 출력될 아주 중요한 내용입니다.</div>
	<hr>
	<div class="align align1">브라우저에 출력될 아주 중요한 내용입니다.</div>
	<div class="align align2">브라우저에 출력될 아주 중요한 내용입니다.</div>
	<div class="align align3">브라우저에 출력될 아주 중요한 내용입니다.</div>
	<div class="align align4">브라우저에 출력될 아주 중요한 내용입니다.</div>
	<hr>
	<div class="shadow">HTML5와 CSS를 배우고 있습니다.</div>
	<hr>
	<div class="overflow overflow1">HTML5와 CSS를 배우고 있습니다.</div>
	<div class="overflow overflow2">HTML5와 CSS를 배우고 있습니다.</div>
	<div class="overflow overflow3">HTML5와 CSS를 배우고 있습니다.</div>
	<hr>
	<div class = "deco1">웹프로그램은 Servlet 또는 JSP를 이용하여 작성합니다.</div>
	<div class = "deco2">웹프로그램은 Servlet 또는 JSP를 이용하여 작성합니다.</div>
	<div class = "deco3">웹프로그램은 Servlet 또는 JSP를 이용하여 작성합니다.</div>
	<hr>
	<div class="in1">문장에 관련된 파일 속성을 공부중입니다.</div>
	<div class="in2">문장에 관련된 파일 속성을 공부중입니다.</div>
	<div class="in3">문장에 관련된 파일 속성을 공부중입니다.</div>
	<hr>
	<div class="tran1">Css3가 끝나면 JavaScript를 배울 예정입니다.</div>
	<div class="tran2">Css3가 끝나면 JavaScript를 배울 예정입니다.</div>
	<div class="tran3">css3가 끝나면 javascript를 배울 예정입니다.</div>
</body>

목록 관련 스타일 속성

list-style-type

목록에 대한 블릿 또는 순서값과 관련된 스타일 속성
속성값
- none : 블릿 또는 순서값을 미제공한다. (출력하지 않는다.)
- 속성값(블릿) : disc(기본), circle(원), square(사각형) 등
- 속성값(순서값) : decimal(기본), lower-alpha, upper-alpha, lower-roman, upper-roman 등

list-style-image

블릿 대신 사용될 이미지를 제공하기 위한 스타일 속성
속성값 : url 함수를 사용하여 이미지 파일의 URL 주소를 설정

list-style-position

목록 출력 위치 관련 스타일 속성
속성값 : inside(들여쓰기), outside(밀어쓰기)

list-style

: 목록 관련 모든 스타일 속성값 설정

<title>CSS</title>
<style type="text/css">
ul li {
	/* list-style-type */
	list-style-type: square;
	
	/* list-style-image */
	list-style-image: url("/web/css/images/bullet.png"); 
	
	/* list-style-position */
	list-style-position: inside; 
}

ol li {
	/* list-style */
	list-style: upper-roman inside; 
}
</style>
</head>
<body>
	<h1>목록 관련 스타일 속성</h1>
	<hr>
	<ul>
		<li>비순차 리스트-1</li>
		<li>비순차 리스트-2</li>
		<li>비순차 리스트-3</li>
	</ul>
	<ol>
		<li>순차 리스트-1</li>
		<li>순차 리스트-2</li>
		<li>순차 리스트-3</li>
	</ol>
</body>

글자색 관련 스타일 속성

color

글자색 관련 스타일 속성
속성값
- 색 관련 키워드 - red, green, blue 등이 존재
- 색에 대한 16진수 표기법 - #RGB 또는 #RRGGBB 형식으로 표현 가능
- rgb 함수를 사용하여 색 표현 - rgb(RED:0~255, GREEN:0~255, BLUE:0~255)
- hsl 함수를 사용하여 색 표현 - hsl(색상:0~360, 채도:0~100%,명도:0~100%)
- rgba 함수를 사용하여 색 표현 - rgba(RED:0~255, GREEN:0~255, BLUE:0~255, 투명도:0.0(투명)~1.0(불투명))
- hsla 함수를 사용하여 색 표현 - hsla(색상:0~360, 채도:0~100%,명도:0~100%,투명도:0.0(투명)~1.0(불투명))

<title>CSS</title>
<style type="text/css">
div {
	margin: 20px;
	font-size: 24px;
	font-weight: bold;
}
/* color */ 
/*색 관련 키워드 - red, green, blue 등*/
.color1 { color: red; }
/*색에 대한 16진수 표기법 - #RGB 또는 #RRGGBB */ 
.color2 { color: #00FF00; } 
/* rgb 함수를 사용하여 색 표현 - rgb(RED:0~255, GREEN:0~255, BLUE:0~255) */ 
.color3 { color: rgb(0, 0, 255); } 
/* hsl 함수를 사용하여 색 표현 - hsl(색상:0~360, 채도:0~100%,명도:0~100%) */
.color4 { color: hsl(200, 100%, 50%); }
/* rgba 함수를 사용하여 색 표현 - rgba(RED:0~255, GREEN:0~255, BLUE:0~255, 투명도:0.0(투명)~1.0(불투명)) */ 
.color5 { color: rgba(0, 0, 255, 0.5); } 
/* hsla 함수를 사용하여 색 표현 - hsla(색상:0~360, 채도:0~100%,명도:0~100%,투명도:0.0(투명)~1.0(불투명)) */
.color6 { color: hsl(200, 100%, 50%, .5); }

</style>
</head>
<body>
	<h1>글자색 관련 스타일 속성</h1>
	<hr>
	<div class="color1">글자색 관련 스타일 속성을 배우고 있습니다.</div>
	<div class="color2">글자색 관련 스타일 속성을 배우고 있습니다.</div>
	<div class="color3">글자색 관련 스타일 속성을 배우고 있습니다.</div>
	<div class="color4">글자색 관련 스타일 속성을 배우고 있습니다.</div>
	<div class="color5">글자색 관련 스타일 속성을 배우고 있습니다.</div>
	<div class="color6">글자색 관련 스타일 속성을 배우고 있습니다.</div>
</body>

저작자표시

'학원 > 복기' 카테고리의 다른 글

[CSS] 박스모델(BoxModel) 관련 속성 (0)	2023.05.30
[CSS] 배경 관련 스타일 속성 (0)	2023.05.30
[CSS] 선택자(Selector) (0)	2023.05.28
[CSS] CSS 언어란? / style 태그 / CSS의 상속 / HTML 문서에 스타일 시트를 적용하는 방법 (0)	2023.05.28
[HTML] 제출이벤트 / label태그 / textarea 태그 / select 태그 / datalist 태그 / fieldset 태그 (0)	2023.05.28

개뿌

[CSS] 글자, 공백, 문장 관련 스타일 속성

글꼴 관련 스타일 속성

font-family

웹폰트(WebFont)

글자 간격 관련 스타일 속성

공백(Space) 관련 스타일 속성

white-space

문장(텍스트) 관련 스타일 속성

direction

text-align

text-shadow

overflow

text-overflow

text-decoration

text-indent

text-transform

목록 관련 스타일 속성

list-style-type

list-style-image

list-style-position

list-style

글자색 관련 스타일 속성

color

'학원 > 복기' 카테고리의 다른 글

티스토리툴바

[CSS] 글자, 공백, 문장 관련 스타일 속성

글꼴 관련 스타일 속성

font-family

웹폰트(WebFont)

글자 간격 관련 스타일 속성

공백(Space) 관련 스타일 속성

white-space

문장(텍스트) 관련 스타일 속성

direction

text-align

text-shadow

overflow

text-overflow

text-decoration

text-indent

text-transform

목록 관련 스타일 속성

list-style-type

list-style-image

list-style-position

list-style

글자색 관련 스타일 속성

color

'학원 > 복기' 카테고리의 다른 글

'학원/복기' Related Articles

티스토리툴바