<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test013.html</title>
<style type="text/css">
p {font-size: 9pt; color: red;}
p:first-line {font-size:25pt; color: blue;}
</style>
</head>
<body>
<div>
<h1>가상 요소 적용 실습</h1>
<hr>
</div>
<p>문단 태그를 활용하여 내용을 작성하고 있다.
이 태그 내부에 기술된 내용은 엘리먼트 선택자의 영향을 받고 있는 상황이다.
하지만, 이 영역 안에서도 상황에 따른 스타일 적용이 가능하다.
첫 라인의 텍스트는 글자색이 파란색이고, 글꼴 크기는 25pt 이다.
둘째 라인의 텍스트부터는 글자색이 빨간색이고, 글꼴 크기는 9pt 가 된다.</p>
</body>
</html>
Test014 - 가상 요소 적용 관찰 실습2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test014.html</title>
<style type="text/css">
p {font-size: 9pt; color: red;}
p:first-letter {font-size: 25pt; color: blue;}
</style>
</head>
<body>
<div>
<h1>가상 요소 적용 실습</h1>
<hr>
</div>
<p>first-letter 가 적용된 첫 번째 글자만 영향을 주게 되며,
나머지 글자에는 적용되지 않는다.</p>
</body>
</html>
Test015 - 기타 css 문법 관찰 - 영문에만 적용되는 스타일 존재
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test015.html</title>
<style type="text/css">
h2 {font-style: oblique;}
/* 아래는 영문에만 적용되는 스타일 */
p {font-variant : small-caps;}
p.pt {font-size: 15pt;}
p.percent {font-size: 150%;}
p.cm {font-size: 1cm;}
</style>
</head>
<body>
<div>
<h1>CSS 기타</h1>
<hr>
</div>
<div>
<h2>글자를 이렇게 만드는 속성이구나...</h2>
<p>Japan agreed to allow Korean experts to conduct an on-site inspection
at the now defunct Fukushima nuclear power plant ahead of the planned release of treated water
into the Pacific Ocean, President Yoon Suk Yeol said after his bilateral summit with the
Japanese leader Sunday. </p>
<p>"I hope that meaningful measures will be taken in consideration of our people's call
for a science-based, objective inspection," Yoon said in a joint press conference alongside
Japanese Prime Minister Fumio Kishida at the Yongsan presidential office in central Seoul, addressing such worries.</p>
</div>
<br><br>
<div>
<p class="pt">나는 글자 크기가 15pt 입니다.</p>
<p class="percent">나는 글자 크기가 150% 입니다.</p>
<p class="cm">나는 글자 크기가 1cm 입니다.</p>
</div>
</body>
</html>
Test016 - 글자 간격 지정 관찰 실습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test016.html</title>
<style type="text/css">
p.test1 {letter-spacing: 0.5em; font-size: 14pt}
p.test2 {letter-spacing: 1.0em; font-size: 14pt}
p.test3 {letter-spacing: 1.5em; font-size: 14pt}
</style>
</head>
<body>
<div>
<h1>글자 간격 지정 실습</h1>
<hr>
</div>
<div>
<p>기본적인 글자 간격 확인</p>
<p class="test1">글자의 간격(자간)을 별도로 설정한 영역의 표현</p>
<p class="test2">글자의 간격(자간)을 별도로 설정한 영역의 표현</p>
<p class="test3">글자의 간격(자간)을 별도로 설정한 영역의 표현</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test018.html</title>
</head>
<body>
<div>
<h1>CSS 를 활용한 대소문자 지정 실습</h1>
<hr>
</div>
<div>
<span style="text-transform: capitalize;">Flowers make our rooms cheerful.
→ capitalize 의 경우</span>
<br><br>
<span style="text-transform: none;">Flowers make our rooms cheerful.
→ none 경우</span>
<br><br>
<span style="text-transform: uppercase;">Flowers make our rooms cheerful.
→ uppercase 의 경우</span>
<br><br>
<span style="text-transform: lowercase;">Flowers make our rooms cheerful.
→ lowercase 의 경우</span>
<br><br>
</div>
</body>
</html>
Test019 - 색상 적용 관찰 실습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test019.html</title>
<link rel="stylesheet" type="text/css" herf="style/colorStyle.css">
</head>
<body>
<div>
<h1>색상 적용 실습</h1>
<hr>
</div>
<div>
<h2>color 에 관하여...</h2>
<span>color 속성은 html 을 비롯하여 css 에서도
아주 많이 사용하는 속성이다.</span>
<p>사용 방법은 RGB Hex 값(#RRGGBB) 형식으로 지정할 수도 있고<br>
css 에서 지원하는 16가지 색상의 이름을 바로 적용할 수도 있다.</p>
</div>
</body>
</html>
@charset "UTF-8";
p
{
color: lime;
}
h2
{
color: #7bdfdf;
}
/* css 파일 별도 생성 시 컬러 피커 및 실제 색상값도 확인가능하다. */
728x90