왜 영역을 나눠야할까?
지난번 포스팅에선 HTML 문서 내, 필요한 줄마다 CSS를 적용하여 보았다.
하지만 그런 방식으로 CSS를 적용하는 사례는 드물고 통상 HTML문서 내 영역들을 분류, 혹은 지정하여 CSS를 적용하는 방법이 일반적이다. 그렇다면 왜 문서 내 영역들을 지정하는 방식을 주로 사용하는 것일까?
극단적인 예를 들어보자.
웹에서 불러들인 글이 하나 있다. 굉장히 긴 글이고, 문단(=단락)은 30개 가량이며 첫문단과 마지막 문단의 글자체, 굵기 등 디자인 속성이 동일하다. 나머지 28개 문단은 각 7개씩 소설 / 에세이 / 시 / 수필의 4개 장르로 이루어지며, 장르 별 디자인 속성은 동일하나 장르 간 디자인 속성은 완전히 다르다. 또한, 각 소설의 경우 명대사 부분에 붉은색 글자, bold체에 밑줄이 들어가는 디자인 속성을 부여하고 있다. 28개 문단은 소설 --> 에세이 --> 시 --> 수필 --> 다시 소설의 순서로 구성된다.
위와 같은 글을 HTML로 작성할 때 필요한 줄마다 CSS를 매번 적용시키는 방식으로 작성한다고 상상해보자.
아니, 상상하지 말자. 정신 건강에 해로울 것 같다.
이처럼 많은 경우 웹문서 작성에 있어 반복적인 작업을 피하여 문서 작성의 효율성을 높일 필요가 있다.
이럴 때, 동일한 디자인 속성을 지닌 문단들을 글의 순서와 상관없이 한꺼번에 선택하여 원하는 디자인 속성을 적용하거나 혹은 사후 다시 편집할 수 있다면 훨씬 용이하지 않을까?
결국 반복과 편집의 용이성, 즉 사용자의 편의를 위해 HTML문서의 영역을 나눠 CSS를 적용하는 방식이 일반화되었다.
영역을 나누는 방법
그렇다면, HTML 문서 내 영역을 나누는 방식에는 어떠한 것들이 있을까?
우리는 먼저 "나눈다"라는 개념에 대해 자세히 들여다봐야 한다. "나눈다"는 것은 어떠한 것을 그 외의 것과 구분할 수 있으며 때에 따라 그것만 선택할 수 있음을 뜻 한다. 다시말해 나눈다라는 행위는 '구분' 과 '선택' 이라는 두 가지의 요소로 이루어진다고 할 수 있다.
CSS를 적용할 때에도 마찬가지다. 우리는 HTML의 특정 영역이 그 외 다른 부분과 다르다는 것을 표시하여 '구분' 해야한다.
이때 다름을 표시하기 위해 아래 세가지의 방식을 사용할 수 있다.
1. 클래스 : 지정하고자하는 영역의 여는 태그 오른쪽 꺽쇠(>) 전에 클래스 이름을 입력한다. 입력 형식은 아래와 같다.
- 입력 예시) <p class="클래스 이름 아무거나"> ----- </p>
2. 아이디 : 지정하고자하는 영역의 여는 태그 오른쪽 꺽쇠(>) 전에 아이디 이름을 입력한다. 입력 형식은 아래와 같다.
- 입력 예시) <p id="아이디 이름 아무거나"> ----- </p>
3. 사용자 지정 : 컨텐츠의 일부를 사용자가 지정한 이름이 사용된 여는 태그와 닫는 태그로 감싼다. 형식은 아래와 같다.
- 입력 예시) <p> 임의의 콘텐츠. <special>여기가 사용자 지정 콘텐츠 영역</special>여기는 아님 </p>
구분의 예시
아래는 HTML 문서 내부의 <p> 문단들을 위에서 언급한 방법을 통해 구분한 문서이다.
<!DOCTYPE html>
<html>
<head>
<title>
CSS 1st test
</title>
</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>
클래스와 아이디를 각각 하나의 문단에 적용할 수도, 또 동일한 문단에 클래스와 아이디를 동시에 적용할 수도 있음을 기억하자.
이번 포스팅에서는 이렇게 HTML 문서의 <p> 문단들을 구분해보았다. 다음 포스팅에서는 구분한 문단들을 선택하여 디자인 속성을 부여해보도록 하겠다.
#html #CSS #CSS 선택자 #html class #html id # id class
'HTML' 카테고리의 다른 글
| [HTML,CSS] 외부의 CSS문서를 HTML문서로 읽어들여보자 (0) | 2021.05.16 |
|---|---|
| [HTML,CSS] HTML 문서의 구역을 나눠서 CSS를 적용해보자(2) (0) | 2021.05.07 |
| [HTML,CSS] 웹문서에 style을 입히다, CSS (0) | 2021.04.29 |
| [HTML] 본격적인 문서 작업을 위한 HTML tag (0) | 2021.03.22 |
| [HTML] padding을 입은 div 사이엔 간격(margin)이 필요해 (0) | 2021.03.19 |
댓글