HTML/CSS 기초 - 타입선택자, 블럭 요소(Block Element)와 인라인 요소(Inline Element)

웹페이지는 HTML(Hyper Text Markup Language)이라는 언어와 CSS(Cascading Style Sheet)라는 두가지 웹프로그래밍 언어로 주로 만들어집니다. HTML은 컨텐트(Content)를 담당하고 CSS는 프리젠테이션(Presentation)을 담당합니다. 뭔가 발표할때 프리젠테이션을 하게 되는데 적당히 글씨만 쳐서 올리면 보는 사람이 즐겁게 보지 않기 때문에 색상도 넣고 배경색도 넣고, 테두리도 만들게 됩니다. 이러한 작업을 웹페이지에서는 CSS가 담당합니다. 

웹페이지에서는 태그를 사용하여 컨텐트의 특성을 정합니다. 제목은 <h1>~<h6>태그를 사용하고 문장은 <p>태그를 사용하죠. 아주 많이 쓰는 태그입니다. html에서는 이러한 태그를 요소(Element)라고 합니다. 요소에는 블럭요소와 인라인요소가 있습니다. CSS에서 스타일을 정할때 여러가지 타겟을 선택하는 방법이 있는데 그중에 하나가 HTML의 요소를 대상으로 스타일을 선언하는 방식을 Type Selector(타입 선택자, 또는 태그 선택자)라고 합니다. 

1. 태그의 중요성

태그는 기본적으로 고유의 특성이 있습니다. <h1>태그는 크기를 정하지 않아도 제목용 태그이기 때문에 기본적으로 글자가 크게 나옵니다.

 
위에서 보듯이 <h1>~<h6>태그는 크기가 순차적으로 작아지지만 굵기는 bold로 나오게 됩니다. 하지만 <p>태그는 기본적으로 아무런 스타일이 없습니다. html코드만 사용하던 시절에는 이런 식으로 글자의 크기를 정했지만 CSS를 사용하면서 글자의 크기는 원하는대로 정합니다. 즉 기본적으로 정해진 글자의 크기같은 스타일은 완전 무시합니다. h1 태그라해서 나온 글자의 크기가 마음에 들지 않기 때문에 수정하는 것입니다. 반대로 h6의 태그라 해도 CSS에서 글자의 크기를 정하면 정한대로 크기가 나오게 됩니다. 그만큼 html에서의 고유의 특성은 의미가 없습니다. 다만 중요한 것은 검색엔진이 이러한 h태그를 중요시 한다는 것이죠. 그것도 순서대로 정렬된 의미있는(Semantic) html페이지를 아주 좋아합니다. 즉 h1태그 다음에 소제목이 나오면 h2태그를 쓰고 그다음 소제목이 나온다면 h3를 쓰는등 이 태그를 중요시해서 사용하면 검색엔진이 마음에 들어하므로 검색 상위로 갈 가능성이 많아집니다.

2. 블럭요소와 인라인요소

블럭요소는 웹페이지에서 페이지의 좌우 공간을 다 차지한다고 해서 블럭요소라고 합니다. 이곳 을 클릭하면 아래의 화면이 나오는 웹페이지로 이동합니다. 이곳은 HTML과 CSS를 배울 수 있는 가장 좋은 사이트입니다.

원래의 화면에서 1과 같이 입력하고 2의 Edit and Click Me 버튼을 클릭하면 3과 같이 h1태그의 글자배경이 회색으로 나옵니다. 이것은 화면이 늘어나거나 줄어들어도 화면 좌우 끝까지 공간을 차지합니다. 왜 배경색을 넣었느냐하면 공간을 다 차지하는 것을 보여주기 위해서입니다. 이러한 블럭요소의 좌우에는 다른 요소가 들어갈 수 없다는 의미입니다. <p>태그도 마찬가지로 블럭요소입니다. 좌우에 공간이 부족하면 아래로 줄이 내려가죠. 이와는 반대로 인라인요소라는 것은 블럭요소에 속해서 포함되는 요소입니다.

이번에는 <p>태그에 대해서 테두리를 입력하고 <p>태그 안의 단어 only에 <span>이라는 태그를 삽입하고 배경색상을 정했습니다. 그런다음 버튼을 클릭하니 <p>태그에 테두리가 만들어졌고 only라는 글자는 배경이 빨간색으로 됐습니다. 이 <span>태그가 인라인요소입니다. 이처럼 인라인요소는 블럭요소에 포함되어 일부의 글자에 특성을 부여할 때 사용됩니다. 

3. 블럭요소와 인라인 요소의 속성변경

그러면 이러한 블럭요소와 인라인요소는 항상 변함이 없느냐하면 CSS를 사용하면 변경이 가능하므로 블럭요소가 인라인요소가 될 수 있고 인라인요소는 블럭요소가 될 수 있습니다. 그러니 HTML태그의 기본적인 특성이 여기서도 CSS에 의해서 무참히 무너지게 되는 것이죠. 

이번에는 속성을 h1태그에는 display:inline; 으로 span태그에는 display:block;으로 입력하고 버튼을 클릭했습니다. h1의 글자는 글자가 있는 공간만큼만 배경이 나오고 span태그의 글자는 화면 좌우를 다 채우고 있습니다. 이처럼 요소의 원래의 특성이 CSS에 의해 변경될 수 있습니다.

4. 블럭요소와 인라인요소의 종류와 용도

블럭요소나 인라인요소나 서로 변경이 가능하기 때문에 어떤 요소가 블럭요소이고 인라인요소인지 알필요가 없다고 생각할 수도 있겠지만 태그의 기본적인 성질을 파악해야 나중에 편집도 가능하고 문제점을 빨리 찾을 수도 있습니다. 

블럭요소:

<div> : 일반적으로 사용하는 다른 요소를 담을 수 있는 상자입니다.

<h1> … <h6> 제목으로 사용됩니다.

<p> 문단에 사용됩니다.

<ul>, <ol>, <dl> 비슷한 종류의 항목을 나열할때 사용합니다.

<li>, <dt>, <dd> 위 항목의 세부항목을 나열할때 사용합니다.

<table> 테이블형테의 데이터 나열에 사용합니다.

<blockquote> 삽입문에 사용합니다.

<pre> 특수형태의 글자를 보존할때 사용합니다.

<form> 글양식이 있고 글입력내용을 데이터베이스에 저장할때 사용합니다.

인라인요소:

<span> : 일부 글자에 대해서 스타일을 정할때 사용합니다.

<a> 링크를 걸때 사용합니다.

<strong> 글자를 볼드체로 두껍게 만들때 사용합니다.

<em> 글자를 이탤릭체로 기울어지게 만들때 사용합니다.

<img /> 이미지를 삽입할 때 사용합니다.

<br> 빈줄을 만들때 사용합니다.

<input> 글입력란을 만들때 사용합니다.

5. 블럭요소를 이용하여 제목글 장식하기 

이글의 번호가 메겨진 항목에 블럭요소인 <h3>태그를 이용하여 밑줄과 다른 장식을 만들어봅니다.

글쓰기 창에서 제목으로 사용할 글자를 정하고 화면 우측 상단에서 HTML앞에 있는 체크박스에 체크하면 HTML편집창으로 갑니다. 1처럼 제목에 <h3>태그를 달아줍니다. 시작태그만 달아서는 안되고 마감태그도 붙여줍니다. 마감태그를 빼면 시작태그 이후로 다 스타일이 적용되므로 엉망이 됩니다.

 

관리자 센터에서 HTML/CSS편집을 클릭하고 style.css창에서 공통레이아웃 항목을 찾습니다. 적당한 부분에 위와같이 코드를 삽입합니다. 나눔고딕웹폰트를 사용하지 않으면 이 폰트 부분은 생략해도 됩니다. padding-left는 글자가 좌측에서 10픽셀만큼 우측으로 이동합니다. font-weight는 볼드체로 만듭니다. 컬러는 글자의 색상입니다. border-bottom은 밑줄로 1픽셀에 실선으로 색상은 짙은 파란색입니다. border-right는 우측테두리인데 30픽셀을 주면 한쪽 테두리만 주기 때문에 테두리라기 보다는 네모 박스형태로 나타납니다. border에 대해서는 나중에 별도의 글이 있게 됩니다. 이렇게 설정하고 저장하면 본문에서 <h3>태그를 적용한 것은 모두 위의 스타일을 적용받게 됩니다. 이처럼 한곳에만 스타일을 선언하면 모든페이지에 적용이 됩니다. h3앞에 .article을 넣은 것은 다른 곳에도 h3를 사용하는 곳이 있을 수 있기 때문에 이것을 넣으면 본문에 있는 h3태그에만 한정한다는 의미가 되므로 본문의 h3태그를 가진 제목에 대해서만 적용이 되므로 한정할 수 있게 됩니다. 이런 부분도 나중에 다 자세히 나오게 됩니다.

test2.html