들어가기에 앞서..
지난 포스팅에서 HTML문서의 각 <p> 문단을 구분하여 지정할 수 있도록 class와 id를 부여해보았다. 이번 포스팅에서는 각 <p> 문단에 접근하여 디자인 요소들을 적용해보도록 하겠다.
키워드는 여전히 스타일
구분해둔 <p>문단 영역에 디자인 요소를 적용할 때에도 여전히 키워드는 "style" 을 사용한다.
다만, 이전에 필요한 영역에 바로 적용했었던 때와는 달리 이번에는 style 키워드의 위치가 <head> </head> 영역에 위치하게 된다.
<html>
<head>
<style>
<!-- 이 영역에서 html의 각 요소에 접근하여 디자인 요소를 적용한다.-->
</style>
</head>
<body>
<div style="이전에는 이런 식으로 필요한 영역에 바로 디자인 요소를 적용했었다.">
</div>
</body>
<html>
기본적인 형식
<style> </style> 영역 안에 묶이는 디자인 요소에 대한 기본적인 형식은 아래와 같다.
형식 :접근하고자하는 영역 이름 {(디자인 속성1 이름):(디자인 속성1 값); (디자인 속성2 이름):(디자인 속성2 값);}
예시 : div {margin-left:10%; width:80%}
위 예시의 의미는 html 내에 명시된 '모든' <div></div> 영역에 대해 좌측 마진을 상위 영역 폭의 10%로 적용하며, <div>,</div> 영역의 폭을 상위 영역 폭의 80%로 적용한다는 의미이다. 이때 상위 영역은 <div>,</div>를 감싸고 있는 영역을 뜻 한다.
만약 html 문서가 아래 예시처럼 작성되어 있다면 <div>의 상위 영역은 <body>가 된다.
<html>
<head>
<style>
div {margin-left:10%; width:80%}
</style>
</head>
<body>
<div>
</div>
</body>
<html>
Case 별 test 결과
이제 <head></head> 영역에서 정의되는 CSS에 대한 개념이 이해되었다면 앞서 작성한 html 문서를 불러와 각 <p> 문단에 접근해보자. Test를 위한 html 문서는 아래와 같이 작성해보았다.
<!DOCTYPE html>
<html>
<head>
<title>
CSS 1st test
</title>
<style>
div {margin-left:10%; width:80%}
p {font-weight:bold;}
sp1 {font-size:1.5em;}
.ITLC {font-style:italic;}
#CTAL {text-align:center;}
#RTAL, .CLR {text-align:right; color:red;}
sp2 {font-size:2.0em; color:black;}
</style>
</head>
<body>
<div>
<p> 일반 스타일 문단. bold 적용</p>
<p> 문단 내 특정 위치 지정. 지정 위치는 <sp1>여기</sp1>입니다.</p>
<p class="ITLC"> class적용 첫번째 문단. italic 적용</p>
<p id="CTAL"> id적용 첫번째 문단. center align 적용</p>
<p id="CTAL"> id적용 두번째 문단. center align 적용</p>
<p class="ITLC"> class적용 두번째 문단. italic 적용</p>
<p id="RTAL" class="CLR"> id와 class 적용 문단. right align & 붉은색 적용 </p>
<p id="RTAL" class="CLR"> id와 class 적용 문단 내 특정 위치 지정. 지정 위치는 <sp2>여기</sp2> 입니다.</p>
</div>
</body>
</html>
붉은색으로 표시된 내용이 적용할 디자인 속성 대한 내용이고 파란색 내용들이 디자인 적용 대상들이다.
Test 문서에서 확인할 수 있는 것처럼 html 문서의 요소인 <div>, <p> 전체에 대해 디자인 요소를 적용할 수도 있고, 점(.)을 찍어서 class를 부여한 문서 요소에 개별적으로 적용할 수도 있다. 샾(#)을 적으면 id를 부여한 문서 요소에 적용 가능하다.
class와 id를 동시에 적용할 수도, 임의의 영역( <사용자가 지정한 이름> </사용자가 지정한 이름>)을 사용자가 지정하여 그 부분에만 디자인 요소를 적용할 수도 있다.
위 test 문서를 브라우저에서 실행하면 아래와 같이 결과가 출력된다.
그럼에도 뭔가 이상하다?!
열심히 test html을 작성해보았으나 여전히 의구심이 드는 부분이 남아있다. <head></head> 영역 사이에 style 키워드를 이용해 디자인 요소를 적용하는 방법은 확실히 편리한 방법이긴 하지만 만약 문서 작성자가 사용하려고 하는 디자인 요소가 매우 많다면 어떻게 될까?
html문서에서 <head></head> 영역의 길이가 너무 장황하게 길어지는 것은 아닐까?
이러한 단점을 피하기 위해 <style></style> 영역의 내용을 다른 파일로 작성해 외부에서 읽어들이는 방법이 있다. 물론 읽어들이기 위해 <head></head> 영역에 해당 CSS문서의 주소를 링크해야한다. 다음 포스팅에서는 외부 CSS파일을 읽어들여 디자인 요소를 적용하는 방법을 다뤄보겠다.
#html #html css #css style #css class id #html class id
'HTML' 카테고리의 다른 글
| [HTML,CSS-tip] 글자와 관련된 유용한 속성 및 속성값 (0) | 2021.05.19 |
|---|---|
| [HTML,CSS] 외부의 CSS문서를 HTML문서로 읽어들여보자 (0) | 2021.05.16 |
| [HTML,CSS] HTML 문서의 구역을 나눠서 CSS를 적용해보자(1) (0) | 2021.05.04 |
| [HTML,CSS] 웹문서에 style을 입히다, CSS (0) | 2021.04.29 |
| [HTML] 본격적인 문서 작업을 위한 HTML tag (0) | 2021.03.22 |
댓글