0033 HTMLCSS 적용하고 기본 문법 알아보기


CSSHTML 문서에 적용하는 방법은 다음의 3가지 방식이다. 

  

Inline - 개별 요소에 style 속성으로 적용

Internal - <head>의 영역에 있는 <style> 요소에 스타일 시트 설정

External - 외부의 CSS 파일을 링크로 연결하여 적용


인라인(inline) 방식HTMLstyle 속성에서 다루었기 때문에 0025 HTML style 속성(attribute) 및 배경색 설정을 참조하자. 

    

CSSHTML 문서에 적용할 때 가장 자주 사용하는 방법은 외부에 CSS 파일을 만들어서 이를 HTML 문서에 링크하는 External 방식이다. 하지만 External 방식은 나중세 살펴보고 이번에는 우리는 주로 보기 쉽고 이해하기 편한 Internal 방식으로 기본적인 CSS 문법을 익혀보자. 

    

Internal CSS를 사용하는 경우는 하나의 HTML 페이지를 꾸미는 경우다. 이는 하나의 요소만을 대상으로 꾸미는 Inline CSS와 대조된다. 

     

Internal CSS를 사용하기 위해서는 <head> 섹션에 <style> 요소를 중첩시킨다. 

    

다음과 같이 0033.html 파일을 만들어 실행해 보자. 

    

<!DOCTYPE html>

    

<html>

<head>

 <title>간단한 CSS 적용 사례</title>

 <style>

   p

       color: white;

       background-color: red;

   }

 </style>

</head>

<body>

 <p>1번 p블록 시작<br /><br />1번 p블록 끝</p>

 <p>2번 p블록 시작<br /><br />2번 p블록 끝</p>

</body>

</html>


위의 예문은 <style></style> 요소 내에 CSS를 집어넣어 사용하는 Internal CSS 사용방식을 보여준다. 작성한 예문을 실행해보면 다음과 같이 나타난다. 



위에서 작성한 CSS가 어떻게 작성되었는지 기본적인 내용들을 살펴보자.

    

다음은 <p>요소를 선택하여 배경색(background-color) 속성(property)빨간색(red)으로 선언한 규칙이다. 



이 전체를 하나의 규칙(Rule)이라고 부른다. 그리고 규칙(Rule)어떤 요소에 어떤 속성을 적용할지 결정한다. 

    

CSS에서 작성된 규칙이 어떤 HTML의 요소에 적용되는지 나타내는 것을 선택자(selector)라고 한다. 위의 예문에서는 선택자로 <p> 요소를 선택하여 모든 <p> 요소가 해당 규칙의 적용을 받아 서로 다른 2개의 <p> 요소 블록에 동일한 CSS 규칙이 모두 적용되는 것을 확인할 수 있다. 

    

현재는 <p> 요소를 선택하고 있지만, <body> 요소, <h1> 요소 등 다른 요소를 선택할 수 있고 그 외에도 id 속성, class 속성 등 굉장히 다양한 방식으로 선택이 가능하다(나중에 자세히 살펴보자.). 

    

중괄호({ })로 감싸져 있는 부분 안에는 속성(property)속성값(value)이 위치한다. 속성속성값콜론(:)으로 연결되어 있고 여러 개의 속성값이 하나의 속성(property)에 적용되는 경우는 다음과 같이 공백으로 속성값을 구분한다. 

    

border: 10px solid white;


속성(property)속성값(value)은 합쳐서 하나의 단위를 이루고 이 단위를 선언(declaration)이라고 한다. 


그리고 선언(declaration)은 반드시 세미콜론(;)으로 마무리 한다. 

※ 이어지는 다음 선언이 없는 마지막 선언세미콜론(;)을 쓰지 않아도 되지만 그런 습관으로 오류가 발생할 수 있으므로 세미콜론(;)으로 마무리하는 것을 습관으로 하자.

     

여러 개의 선언(declaration)을 한 줄에 또는 여러 줄에 걸쳐서 한 번에 작성할 수 있다.

    

p { color: white; background-color: red; }


또는 


p {

    color: white;

    background-color: red;

  }


하나 또는 여러 개의 선언(declaration)들은 중괄호({ })로 둘러싸이는데 이렇게 중괄호({ })로 묶인 것선언(declaration) 블록이라고 한다. 

    

선택자중괄호 사이, 중괄호선언(declaration) 사이, 선언선언 사이에는 공백을 넣거나 줄을 바꿔 구별하는 것을 권장하는 것 같다. 실제로 공백을 넣지 않아도 작동하는 경우도 있지만 그렇지 않은 경우도 있어서 권장하는 것으로 알고 있다. 



Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:   0033 HTML에 CSS 적용하고 기본 문법 알아보기.apkg






0025 HTML style 속성(attribute) 및 배경색 설정


스타일링이라 함은 폰트, 크기, 테두리, 색깔 등을 이용하여 예쁘게 꾸미는 것을 말하고 HTML 문서를 스타일링 할 때는 CSS(Cascading Style Sheet)라는 별도의 언어체계를 이용한다.

    

이 때,  HTML개별 요소(element) 하나를 CSS를 이용하여 꾸미고 싶을 때에는 style 속성을 사용하면 된다.

   

HTMLstyle 속성은 다음과 같은 구문으로 사용된다. 

    

<태그명 style="속성:속성값;">


위 구문에서 속성CSS에서 사용하는 속성(property)이고, 속성값CSS에서 사용하고 있는 속성값(value)이다. 즉, style 속성은 개별 요소에 CSS를 적용하기 위한 속성인 것이다. 

    

따라서 이 style 속성을 다루면서 익히게 될 속성(property)속성값(value)은 모두 CSS에서도 그대로 사용할 수 있다.

    

또, 당연히 style은 모든 요소에 적용할 수 있는 전역 속성(global attribute)이다.

    

추후에 CSS를 공부하면서 상세하게 다룰 내용이지만 참고적으로 간단히 언급하면 CSS를 적용하는 것은 아래와 같이 세 가지 방법이 있는데 그 중 마지막 방법이 이 style 요소를 사용하는 방법이다.

    

하나는 <head> 요소 내부에 중첩된 <style> 요소에 CSS를 작성하는 것이다. 

둘은 <link> 요소를 이용하여 외부에서 CSS 파일을 불러 읽는 것이다.

마지막은 개별 요소에 style 속성을 부가하여 CSS를 이용하는 것이다.


보통 첫 번째와 두 번째 방법으로 CSS를 사용하지만 이러한 방법은 일괄적으로 HTML 페이지의 스타일을 설정하기 때문에 이에 대한 예외적인 스타일이 적용되어야할 요소(element)들은 개별 요소에 style 속성을 이용하여 CSS를 부여하기도 한다(이는 CSS 상속과 적용 범위의 문제이므로 나중에 다시 보도록 하자.).

    

앞서 0017 이미지를 보여주는 img 요소 02 대체할 문구 및 크기 결정에서 <img> 요소의 크기를 style 속성으로 결정하는 예문을 아래와 같이 다루면서 최근 style 속성을 사용하여 이미지의 크기를 결정하는 이유를 CSS 스타일 시트에서 일괄적으로 이미지의 크기를 조작할 때 그 적용을 피하기 위해서라고 언급한 바 있는데 이것이 바로 위와 같은 이유이다.

    

<img src="sun.jpg" style="width:100px;height:100px" alt="떠오르는 태양" />


위의 예문에서 style 속성으로 CSS 속성인 widthheight를 이용하고 있고 속성값으로 픽셀수(px)를 이용하고 있다. 



배경색(Background Color)


HTML 요소의 배경색을 결정하는 CSS 속성은 background-color 속성이다. 요소의 배경색을 이용하여 앞서 공부한 블록 요소인라인 요소의 차이점을 다시 한번 살펴보자.

       

background-color 속성은 다음과 같이 사용한다.

     

<태그명 style="background-color:색상이름;">


색상이름red, blue, purple, yellow, white, black, powderblue 등 영문의 색상이름이 그대로 적용되고 더 디테일한 색상을 다룰 때에는 색상의 일련번호로 집어넣을 수도 있다.


다음과 같이  0025.html 파일을 만들어 실행해보자.


<!DOCTYPE html>

    

<html>

<head><title>배경색</title></head>

<body style="background-color:black;">

<h1 style="background-color:red;">h1 요소</h1>

<p style="background-color:white;"

  p요소<br />

 <strong style="background-color:yellow;">중요한 텍스트</strong><br />

 <em style="background-color:purple;">강조 텍스트</em><br />

  a 요소 <a href="https://deliciouslearning.tistory.com/" style="background-color:blue;">책 씹어먹는 즐거움</a>

</p>

</body>

</html>


<body> 요소에 중첩된 각각의 요소에 전부 배경색을 다르게 설정해보았다. 그리고 실행해보면 다음과 같이 나타난다. 



블록 요소인라인 요소에 따라서 배경색이 다르게 설정되어 있는 것을 알 수 있다. 블록 요소는 해당 행의 가로폭을 전부 차지하는 요소이므로 실제 내용이 얼마 안되더라도 해당 행의 전체에 배경색이 칠해진다. 반면, 인라인 요소는 배경색이 꼭 필요한 부분으로 한정되는 것을 알 수 있다. 

    

CSS에서 사용하고 있는 다양한 속성과 속성값을 이 자리에서 전부 살펴보는 것은 적합하지 않은 것 같다. 우선 배경색만 살펴보고. 또, 다른 요소들을 다루면서 관련된 스타일 속성은 그때그때 알아보도록 하자.


Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:  0025 HTML style 속성(attribute) 및 배경색 설정.apkg





0024 블록(block) 요소인라인(inline) 요소


이제 기본적인 태그와 요소들에 대해서 상당수 알게 되었다. 그런데 요소들 화면에 표시할 때 브라우저가 하는 특이한 행동 하나가 눈에 띈다. 그것은 <body> 요소에서 <h1~6>요소, <p>, <blockquote> 요소들은 브라우저가 화면에 표시할 때 반드시 줄바꿈(linebreak)이 앞뒤로 나타나 행 전체를 차지한다. 반면, <img>, <a>, <strong>, <em>, <q> 등의 요소들은 줄바꿈 없이 나타나 행 전체를 차지하지 않고 딱 해당 요소의 내용이 차지하는 공간만큼만 공간을 차지한다. 

    

요소(element) 중에서 화면에 표시(display)될 때 항상 새로운 행에서 시작하고 요소가 위치한 가로폭을 전부 차지하는 요소블록(block) 요소라고 하고 새로운 행에서 시작하지 않고 딱 요소의 내용이 차지한 가로폭만큼만 차지하는 요소인라인(inline) 요소라고 한다. 그리고 모든 HTML 요소는 화면표시(display)를 함에 있어 블록 요소인지 인라인 요소인지가 기본값으로 설정되어 있다. 

    

가령, 다음처럼  0024.html파일을 만들어 보자.

    

<!DOCTYPE html>

    

<html>

<head><title>Block과 inline</title></head>

<body>

<h1>h1 요소</h1>

<p>

  단락을 결정하는 p요소는 위 아래로 줄바꿈이 발생한 것을 확인할 수 있다. 

 (줄바꿈)을 했지만 브라우저에는 줄바꿈을 하지 않은 것으로 나타난다. 한편 <strong>중요한 텍스트</strong>, <em>강조 텍스트</em>를 사용해도 줄바꿈은 일어나지 않고 있다. img <img src="sun.jpg"> 요소를 집어넣으면 어떨까? 하이퍼텍스트 링크인 a요소를 이렇게 넣어보자. <a href="https://deliciouslearning.tistory.com/">책 씹어먹는 즐거움</a> 이처럼 줄바꿈이 일어나지 않는 것을 확인할 수 있다. 하지만 다시 <p>p요소를 내부에 중첩킨 것</p>은 줄바꿈이 일어나는 것을 확인할 수 있다. 

</p>

</body>

</html>


<img> 요소로 웹페이지에 넣을 사진은 다음과 같다. 



그럼 다음과 같이 나타난다. 




위에 보이는 것처럼 블록 요소는 항상 앞과 뒤에 줄바꿈를 가진 것처럼 표시되며, 인라인 요소는 웹페이지에 있는 텍스트의 흐름에 포함되어 ‘라인 위에(in line)’ 나타난다.

    

블록 요소인라인 요소의 구분이 상당히 중요한 것 같다. 어떤 요소들은 구조적으로는 동일한 구조적 기능을 하지만 블록 요 인라인 요소라는 차이점만 존재하는 것 같은 요소들이 있다. 가령 앞서 0023 HTML에서 인용하기(Quotation)에서 공부한 <blockquote><q> 요소는 인용구를 블록 요소로 할 것인가 인라인 요소로 할 것인가 하는 부분이 가장 핵심적인 차이로 보인다. 

    

또, 앞으로 CSS와 함께 정말 자주 사용하게 될 <div><span> 같은 요소들은 HTML문서에서 섹션을 나누고 해당 섹션의 요소들을 묶는 컨테이너(container) 같은 기능만 하는 요소들인데 둘의 차이점은 오직 <div>블록 요소이고 <span>인라인 요소라는 것뿐이다.

    

그렇다면 왜 요소들을 블록인라인으로 구분하는 것이 중요한 것일까?

    

여기저기 뒤져본 결과로 개인적으로 추론해본건대, HTML 개발하면서, 블록 요소전체 윤곽(lay out)을 구성하고 인라인 요소 페이지를 세련되게 다듬는 식의 웹페이지 구축 방법론을 채택한 것으로 보인다. 


그리고 블록 요소 인라인 요소라는 특성 때문에 HTML에 다음과 같은 규칙들이 생기게 되었다.

    

거의 대부분 블록 요소는 내부에 블록 요소중첩(nesting)시킬 수 있다. 

거의 대부분의 인라인 요소인라인 요소를 내부에 중첩시킬 수 있다. 

거의 대부분 블록 요소는 내부에 인라인 요소중첩시킬 수 있다. 

하지만 인라인 요소는 내부에 블록 요소중첩시킬 수 없다.


또, CSS블록 요소인라인 요소를 스타일링 할 때 사용할 수 있는 속성들이 다르다. 이 부분은 추후 CSS를 다루면서 다시 다루도록 하자. 일단, 지금은 블록 요소인라인 요소가 있고, 웹페이지 구축 방법론으로 블록 요소전체 윤곽(lay out)을 구성하고 인라인 요소페이지를 세련되게 다듬는 방식을 채택했다는 점, 그리고 인라인 요소 내부에 블록 요소중첩시킬 수 없다는 점을 기억해 두도록 하자.


Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:  0024 블록(block) 요소와 인라인(inline) 요소.apkg





+ Recent posts