web publishing_CSS_Basic 02

장봄·2020년 1월 6일

web publishing_CSS_Basic

목록 보기

2/3

1. FONT 속성

font-family : 글꼴.
font-size
font-style : 텍스트 기울기.

<style>
address {font-style: normal;}
</style>
...
<address>add : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, distinctio!</address>

위 코딩이 적용된 웹화면

font-variant : 소문자를 사이즈는 고정하고 대문자로 변경.

<style>
h2{font-variant: small-caps;}
</style>
...
<h2>Style Example (font-variant)</h2>

위 코딩이 적용된 웹화면

font-weight : 텍스트 진하기.
입력가능한 값 : bold | bolder | 600 | 700 | 800 | 900

<style>
.lead {font-weight: bold;}
</style>
...
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, ab.</p>

위 코딩이 적용된 웹화면

2. TEXT 속성

text-align : 정렬.
text-decoration
text-transform
uppercase | lowercase | capitalize(첫글자만 대문자)
text-indent : 들여쓰기.
letter-spacing : 글자 간격.
vertical-align
top| middle | baseline | bottom

<style>
h1 small{ vertical-align: baseline; }
</style>
...
<h1>style example <small>sample</small></h1>

위 코딩이 적용된 웹화면

word-spacing : 단어 간격.

line-height : 줄간격.

3. @font-face

서체는 그 웹페이지를 보는 사람의 디바이스에 해당 서체가 있어야 제대로 표현 됨.
해당 서체가 없는 경우에 그 서체를 서버에 올려서 @font-face 에 경로를 지정하면 해당 서체를 표현할 수 있음.
단, 서체의 용량이 작지 않으므로 최소한의 서체만 연결하고 대부분은 기본 서체를 지원하는 것이 좋음.
서체를 지원하는 브라우저가 각기 다른 확장자를 지원하므로 최소 두가지의 확장자를 지원해야 문제가 없음.

IE -> Embedded Open Type(eot)
Chrome, Firefox, Safari, Opera -> True Type Font(ttf), Open Type Font(otf)
mobileSafari -> SVG Font(svg)

4. 구글웹폰트적용

1. 구글웹폰트 사용 : https://fonts.google.com/

구글웹페이지 접속해서 서체를 선택한다.
@IMPORT에 코드를 복사해서 삽입한다.

Specify in CSS 의 값을 이용해서 폰트에 적용한다.

<style>
    	@import url('https://fonts.googleapis.com/css? family=Indie+Flower|Oswald|Raleway&display=swap');
        h1{ font-family: 'Indie Flower', cursive; }
</style>
...
<h1>@font-face</h1>

위 코딩이 적용된 웹화면

2. 구글에서 한글폰트사용 : https://fonts.google.com/earlyaccess

5. 단어 깨트리기_word-break

단어가 너무 긴 경우나 정렬을 위해 사용함.

<style>
	.content2 p{ text-align: justify; }
	.content3 p {
			text-align: justify;
			word-break: break-all;
		}
</style>
...
<div class="content2">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perspiciatis, tempora nisi ea tenetur pariatur culpa et beatae, veniam est quasi recusandae corporis laborum. Officia enim recusandae inventore modi dignissimos, fugiat hic eaque ea! Voluptatum vitae rerum, tempora delectus repudiandae ut, deleniti optio velit consequatur natus fugiat, nam temporibus cum?</p>
</div>	

<div class="content3">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perspiciatis, tempora nisi ea tenetur pariatur culpa et beatae, veniam est quasi recusandae corporis laborum. Officia enim recusandae inventore modi dignissimos, fugiat hic eaque ea! Voluptatum vitae rerum, tempora delectus repudiandae ut, deleniti optio velit consequatur natus fugiat, nam temporibus cum?</p>

위 코딩이 적용된 웹화면

6. 줄바꿈 지정 white-space

white-space : nowrap | pre | pre-wrap | pre-line

<style>
		.white1 p {
			white-space: pre;
			width: 600px;
			border: 2px solid black;
		}	
		.white2 p {
			white-space: pre-wrap;
			width: 600px;
			border: 2px solid black;
		}
		.white3 p {
			white-space: pre-line;
			width: 600px;
			border: 2px solid black;
		}
</style>
...
<div class="white1">
	<p>	Lorem 
	ipsum dolor sit amet, 
	consectetur.
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, impedit.</p>
</div>

<div class="white2">
	<p>	Lorem 
	ipsum dolor sit amet, 
	consectetur.
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, impedit.</p>
</div>

<div class="white3">
	<p>	Lorem 
	ipsum dolor sit amet, 
	consectetur.
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, impedit.</p>
</div>

위 코딩이 적용된 웹화면

7. 목록 list 관련 속성

list-style-type : 리스트 스타일 모양
none |disc | circle | squareupper-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>
.list li { background-color: pink;
			list-style-type: circle;}
</style>
...
<ul class="list">
	<li>Lorem ipsum dolor sit amet.</li>
	<li>Lorem ipsum dolor sit amet.</li>
	<li>Lorem ipsum dolor sit amet.</li>
	<li>Lorem ipsum dolor sit amet.</li>
	<li>Lorem ipsum dolor sit amet.</li>	
</ul>
```
위 코딩이 적용된 웹화면