HTML/CSS 관련 Ankilog를 올리기 시작한 것은 2017년 12월 부터였으니 대략 1년이 넘어간다. 이 1년 동안 포스팅을 성실하게 올리지는 못했지만 나름 꾸준하게 올렸다. 하지만 2019년이 되면서 HTML/CSS에 대한 Ankilog 포스팅이 막혔다. 그만 둔 것이 아니라 막힌 것이다.


 그 이유는 HTML/CSS 공부에 대한 맥락을 잃어버렸고, 오류가 많았기 때문이다. 


 우선, IT를 공부하려는 의도로 시작했는데, 정신을 차려보니 디자인을 공부하고 있었다. 내 의도는 명백히 IT 기술인데 어느새, 폰트와 조판, 색깔의 배치 등을 출판 편집 디자인 같은 것을 공부하고 있었다. 그리고 그걸 깨닫자마자 스스로 하고 있는 것이 무엇인지 헤매면서 길을 잃게 되었다.


 사람들마다 잘 맞는 공부가 있는 법이다. 그리고 나의 경우 디자인은 잘 맞는 공부가 아니다. 흥미도 관심도 없기 때문이다. 나에게 디자인이란 그저 단순하게 잘 읽히고, 잘 보이면 되는 것이지, 색깔의 배합과 여백의 크기에 관심으로 이어지지 않는다. 재능이 있는 것도 아니고 관심이나 흥미가 있는 것도 아닌 것을 공부하는 것은 고행이다. 이런 것을 공부하려면 필연적인 맥락이 존재해야 한다. 가령, 평소라면 식용 가능한 식물이 무엇인지 관심이 없겠지만 산에서 길을 잃고 식물을 채취해서 먹어야 하는 상황이라는 필연적인 맥락이 생기면 열심히 식용 가능한 식물이 무엇인지 관심을 가지게 될 것이다. 


 시험과 점수는 바로 이러한 필연적인 맥락을 부여하기 위한 기본적인 장치다. 하지만 지금 내가 하고 있는 공부는 점수나 자격증을 따기 위한 시험공부가 아니라 순수하게 즐기는 공부다. 새로운 지식을 아는 순간 그동안 이해하지 못했던 것들을 이해하게 되고 의미를 이해하게 되는 것을 즐긴다. 그런데 맥락을 잃은 순간 이 모든 지식의 즐거움이 빛바래게 된다. 맛있는 밥이 갑자기 모래처럼 씹히는 느낌이다.


 두 번째 이유는 오류가 꽤 많이 발생한다는 점이다. 나름 최선을 다해서 검증한다고 했지만, 전문가로서 공부해야할 내용을 정리해서 올리는 것이 아니라, 초보자로서 그날그날 공부한 내용을 올리고 있기 때문에 당연히 그 내용이 근시안적일 수밖에 없다. 그날 공부할 때는 옳다고 생각했던 내용들이 다른 곳에서 오류라는 점이 밝혀지거나 하는 경우가 가끔 발생한다. 


 혹은 의문점이 생겼는데 이 의문점을 해결할 수 없는 경우도 많다. 사실, 이 부분이 제일 힘들다. W3C 튜토리얼도 종종 이상한 방식으로 설명하는 것 같고, 책을 읽어보니 외국 사이트를 그대로 베낀 것도 많이 눈에 띈다. 또, HTML 버전, 실무 경력, 웹 브라우저의 종류에 따라서 이야기가 달라지는 경우도 많아 무엇을 신뢰하고 학습해야할지 잘 모르겠다. 일일이 검증을 해보려고 하는데, 검증할 사항은 너무 많고 제대로 하고 있는지 확신이 잘 서지 않기 때문에 더더욱 손을 대기가 어렵게 느껴진다. 


 원래 내 성향대로라면 좀 더 기초적인 분야로 돌아가서 이를 이해하고 다시 돌아와야 맞지만 HTML 관련 역사나 내용을 보면 더 기초적인 분야라고 할 수 있는 것이 없어 보인다. 웹에서 가장 기초적인 분야는 HTML이기 때문이다. 이 HTML을 CSS로 꾸미고 Javascript로 작동시키는 것이 웹의 기본이기 때문이다.

 

 또, IT를 처음 공부할 때는 그저 프로그래밍 언어를 공부하면 된다고 막연히 생각했다. 하지만 조금씩 공부를 하면서 프로그래밍 언어는 그저 수단일 뿐이라는 점도 알게 되었다. 프로그래밍 언어를 배운다는 것은 기본적인 제어 외에는 IT의 관련 분야를 배우는 것과 같았다. 네트워크를 프로그래밍 한다면 프로그래밍 언어도 알아야 하지만 네트워크를 이해하고 네트워크에서 조작가능한 부분과 개선할 점 등을 아는 것이 더 중요하다. 프로그래밍 언어는 그저 도구일 뿐이다. 결국, IT를 공부한다는 것은 하드웨어와 소프트웨어, 그리고 관련 분야의 토픽을 같이 공부하는 것이다.


 HTML도 마찬가지다. 결국, 웹 브라우저에 표시될 웹 사이트를 만드는 것이 기본적인 역할이다. 그리고 CSS는 그 자체로 디자인이라는 목적을 위해서 설계된 언어이기 때문에 디자인의 개념들이 CSS에 녹아들고 있는 것이다. 이것을 IT가 아닌 것이라고 규정하는 것은 적합하지 않은 것 같다. 


 HTML과 CSS를 처음 공부할 때는 이게 뭔지도 모르고 그저 필요한 기초 IT 공부라고 생각했다. 이게 웹 페이지를 구축하고 디자인하기 위한 도구라는 점을 들어서 알고는 있었지만, 이제 “정말 그렇구나.” 라고 진실로 체득하게 된 셈이다. 즉, 뒤집어 생각해보면 내가 발전했기에 오히려 길을 잃어버린 것이다.


 따라서 지금 내가 할 일은 잃어버린 맥락을 복원하고 내공을 닦는 것이다. 그 동안 블로그에 포스팅하기 위해 포스팅할 주제 위주로 내용을 파악했다면, 당분간은 웹 페이지 디자인에 관한 디자이너들의 고민과 기초적인 내용과 토픽을 읽어보고 관련 HTML과 CSS를 사용하는 방식에 대하여 조금 총체적으로 파악해보려고 한다. 맥락이 없는 공부가 고행이라면 맥락을 만들면 되는 것이다. 기본적인 내용들을 파악함으로써 평생 한번도 건드려보지 못한 영역을 맛볼 수 있게 된다면 그것도 매우 이익이다. 오히려, HTML과 CSS 공부라는 맥락으로 디자인을 조금 파는 것도 괜찮아 보인다. 그리고 그래도 영 안맞는다면 아주 기초적인 수준만 달성하고 돌아오면 될 일이다. 


 맥락을 복원하고 내공이 조금 쌓일 때까지 HTML/CSS 포스팅을 잠시 쉬어가려고 한다. 어차피, 공부는 Ankilog로 할 것이므로 결국, 다시 Ankilog 포스팅으로 돌아올 것이다. 너무 오래 걸리지는 않을 것이라고 생각한다. 

0056 HTML 요소(element)크기 계산하기


CSS박스 모델을 알았으니 이제 HTML 요소의 전체 크기를 계산할 수 있다.

    

아래의 그림을 다시 보자. 



위의 그림에서 HTML 요소너비를 좌에서 우로 순서대로 계산하면 다음과 같다. 
   

<HTML 요소전체 너비 계산>

 margin-left

+ border-left-width

+ padding-left

+ width

+ padding-right

+ border-right-width

+ margin-right

----------------------

= HTML 요소의 전체 너비


너무 기니까 간단하게 요약하면 다음과 같다. 

   

<HTML 요소의 전체 너비 계산 간단 요약>

 좌우 마진 두께

+ 좌우 테두리 두께

+ 좌우 패딩 두께

+ 내용영역 너비(width)

----------------------

= HTML 요소의 전체 너비


이번에는 위의 그림에서 HTML 요소높이를 위에서 아래로 순서대로 계산하면 다음과 같다. 
    

<HTML 요소전체 높이 계산>

 margin-top

+ border-top-width

+ padding-top

+ height

+ padding-bottom

+ border-bottom-width

+ margin-bottom

----------------------

HTML 요소의 전체 높이

   

역시 너무 기니까 간단하게 요약하면 다음과 같다. 

    

<HTML 요소의 전체 높이 계산 간단 요약>

 상하 마진 두께

+ 상하 테두리 두께

+ 상하 패딩 두께

+ 내용 영역 높이(height)

----------------------

HTML 요소의 전체 높이



그럼 실제 요소들의 높이와 너비를 직접 계산해보도록 하자.


문제 1) 다음 CSS로 설정된 <div> 요소의 너비와 높이를 계산해보자. 

    

div {

  width: 100px;

  height : 50px;

  padding: 10px;

  border: 5px solid gray;

  margin: 0px;

}


위의 <div> 요소의 너비는 130px높이는 80px이다. 계산 형식은 아래와 같다.

   

문제 1) <div> 요소너비 계산

 100px(내용영역의 너비)

+ 20px(좌우 패딩)

+ 0px(좌우 마진)

+ 10px(좌우 테두리 두께)

-----------------------

= 130px

    

문제 1) <div> 요소의 높이 계산

 50px(내용영역의 높이) 

+ 20px(상하 패딩) 

+ 0px(상하 마진) 

+ 10px(상하 테두리 두께) 

-----------------------

= 80px



문제 2) 다음 CSS로 설정된 <div> 요소의 너비와 높이를 계산해보자. 

    

div {

 width: 100px;

 height : 50px;

 padding: 20px 10px;

 border: 5px solid red;

 margin: 10px 5px;

}


위의 <div> 요소의 너비는 140px높이는 120px이다. 계산 형식은 아래와 같다.

    

문제 2) <div> 요소의 너비 계산

 100px(내용 영역의 너비) 

+ 20px(좌우 패딩) 

+ 10px(좌우 마진) 

+ 10px(좌우 테두리 두께) 

-----------------------

= 140px

    

문제 2) <div> 요소의 높이 계산

 50px(내용 영역의 높이) 

+ 40px(상하 패딩) 

+ 20px(상하 마진) 

+ 10px(상하 테두리 두께) 

-----------------------

= 120px



문제 3) 다음 CSS로 설정된 <div> 요소의 너비와 높이를 계산해보자. 

   

div {

 width: 100px;

 height : 50px;

 padding: 20px 15px 10px 5px;

 border: 5px solid blue;

 margin: 0px;

}


위의 <div> 요소의 너비는 130px높이는 90px이다. 계산 형식은 아래와 같다.

   

문제 3) <div> 요소의 너비 계산

 100px(내용 영역의 너비) 

+ 20px(좌우 패딩=15+5) 

+ 0px(좌우 마진) 

+ 10px(좌우 테두리 두께) 

-----------------------

= 130px

     

문제 3) <div> 요소의 높이 계산

 50px(내용 영역의 높이) 

+ 30px(상하 패딩=20+10) 

+ 0px(상하 마진) 

+ 10px(상하 테두리 두께) 

-----------------------

= 90px



문제 4) 다음 CSS로 설정된 <div> 요소너비높이를 계산해보자. 

    

div {

  width: 100px;

  height : 50px;

  padding: 5px;

  border: 1px solid gray;

  margin: 10px 3px 5px;

}


위의 <div> 요소너비118px, 높이77px이다. 계산 형식은 아래와 같다.

    

문제 4) <div> 요소의 너비 계산

 100px(내용 영역의 너비) 

+ 10px(좌우 패딩) 

+ 6px(좌우 마진=3+3) 

+ 2px(좌우 테두리 두께) 

-----------------------

= 118px

   

문제 4) <div> 요소의 높이 계산

 50px(내용 영역의 높이) 

+ 10px(상하 패딩) 

+ 15px(상하 마진=10+5) 

+ 2px(상하 테두리 두께) 

-----------------------

= 77px


Anki 파일


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


Ankilog 파일:  0056 HTML 요소(element)의 크기 계산하기.apkg





0055 CSS마진(Margin)패딩(Padding) 영역 설정하기


마진(Margin) 영역테두리(border) 바깥을 둘러싸고 있는 영역이고 패딩(Padding) 영역내용 영역테두리 사이에 있는 영역이다(박스모델 참조).

   

마진(Margin)패딩(Padding) 영역은 투명하고 배경을 그대로 노출하므로 오직 두께(width)만 별도로 설정한다.

    

마진(Margin) 영역두께(width)를 설정하는 CSS의 속성은 margin 속성(property)이다. 

패딩(Padding) 영역두께(width)를 설정하는 CSS의 속성은 padding 속성(property)이다. 



마진(Margin)패딩(Padding) 영역두께(width) 설정은 테두리(border)처럼 각 4방향(상하좌우) 별로 설정이 가능하다.

   

margin-top위쪽 마진의 두께(width)

margin-right오른쪽 마진의 두께(width)

margin-bottom아래쪽 마진의 두께(width)

margin-left왼쪽 마진의 두께(width)

   

padding-top위쪽 패딩의 두께(width)

padding-right오른쪽 패딩의 두께(width)

padding-bottom아래쪽 패딩의 두께(width)

padding-left왼쪽 패딩의 두께(width)


물론, 이렇게 4방향을 전부 작성하는 것이 매우 번거로우므로 보통은 단축 속성(shorthand property)marginpadding 속성(property)으로 축약하여 작성한다.

    

margin 속성과 padding 속성은 1~4개의 속성값을 가질 수 있으며, border-style마찬가지의 방식으로 적용된다. 

   

marginpadding 속성(property)에 4개의 속성값이 주어지면 각각의 속성값이 위(top)에서부터 시계방향으로 위, 오른쪽, 아래, 왼쪽으로 차례대로 적용된다.

    

margin: 10px 8px 6px 4px;

--------------------

margin-top: 10px;

margin-right: 8px;

margin-bottom: 6px;

margin-left: 4px;

    

padding: 6px 4px 2px 1px;

--------------------

padding-top: 6px;

padding-right: 4px;

padding-bottom: 2px;

padding-left: 1px;


margin과 padding 속성(property)에 3개의 속성값이 주어지면 각각의 속성값이 위(top), 좌우(left and right), 아래(bottom)로 차례대로 적용된다.

    

margin: 10px 4px 6px;

--------------------

margin-top: 10px;

margin-right: 4px;

margin-bottom: 6px;

margin-left: 4px;

   

padding: 6px 2px 4px;

는 아래와 동일하다.

padding-top: 6px;

padding-right: 2px;

padding-bottom: 4px;

padding-left: 2px;


margin과 padding 속성(property)에 2개의 속성값이 주어지면 각각의 속성값이 위아래(top and bottom), 좌우(left and right)로 차례대로 적용된다.

   

margin: 10px 4px;

--------------------

margin-top: 10px;

margin-right: 4px;

margin-bottom: 10px;

margin-left: 4px;

   

padding: 6px 2px;

--------------------

padding-top: 6px;

padding-right: 2px;

padding-bottom: 6px;

padding-left: 2px;


margin과 padding 속성(property)에 1개의 속성값이 주어지면 그 속성값이 상하좌우에 전부 적용된다. 

   

margin: 4px;

--------------------

margin-top: 4px;

margin-right: 4px;

margin-bottom: 4px;

margin-left: 4px;

   

padding: 2px;

--------------------

padding-top: 2px;

padding-right: 2px;

padding-bottom: 2px;

padding-left: 2px;


margin과 padding 속성(property)이 가질 수 있는 속성값은 길이(length) 단위다. 절대 길이와 상대 길이 단위에 대해서는 여기를 참조하기 바란다.

    

0043 CSS의 길이(length) 중 절대 길이(absolute length)

0044 CSS의 길이(length) 중 상대 길이(relative length)


margin이나 padding의 속성값으로 상대 길이(relative length)%를 쓰게 되면 부모(상위) 요소margin이나 padding 속성값의 상대 길이로 작용된다는 점을 주의하자.


Anki 파일


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


Ankilog 파일:   0055 CSS의 마진(Margin)과 패딩(Padding) 영역 설정하기.apkg




0054 CSS 내용(content)영역 설정하기-widthheight


CSS의 heightwidth 속성(property)으로 HTML 요소높이너비를 설정할 수 있다. 이 때, height와 width 속성(property)이 설정하는 것은 정확히는 박스 모델에서 내용(content) 영역의 높이와 너비를 결정하는 것이다.

    

즉, 아래의 그림처럼 박스 모델에서 내용(content) 영역의 크기를 결정한다.

    


height 속성(property)은 내용(content) 영역높이(height)를 설정한다. 

   

width 속성(property)은 내용(content) 영역너비(width)를 설정한다. 

    

보통, height와 width기본값(default)auto로 설정되어 있어, height와 width 속성을 설정하지 않으면 브라우저가 자동으로 설정한다. 

   

다음과 같이 0054.html파일을 작성하여 실행해보자. 

    

<!DOCTYPE html>

   

<html>

<head>

 <title>내용영역 너비와 높이</title>

 <style>

  div

   width: 100px;

   height: 50px;

   background-color: red;

  }

 </style>

</head>

<body>

 <div></div>

</body>

</html>


<div> 요소의 내용(content) 영역을 너비(width) 100px, 높이(height) 50px 로 설정하고 배경색(background-color)빨간색으로 설정했다.



다시 강조하지만 height와 width 속성(property)이 설정하는 것은 정확히는 박스 모델에서 내용(content) 영역의 높이와 너비따라서 요소마진(margin), 패딩(padding), 테두리(border)두께와는 전혀 상관없다. 

   

이미 앞에서 <img /> 요소의 크기를 결정할 때 style 속성으로 height와 width를 다루는 것을 0017강에서 이미 언급했다. 

    

이를 박스 모델 입장에서 본다면 <img /> 요소에서 이미지가 들어갈 내용(content) 영역의 높이와 너비를 결정한 것이다. 


Anki 파일


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


Ankilog 파일:  0054 CSS 내용(content)영역 설정하기-width와 height.apkg




0053 테두리 각각의 방향에서 설정하기 및 단축 속성(shorthand property)


앞에서, 테두리(border)와 관련하여 테두리 선의 종류(style), 두께(width), 색깔(color)을 제어하는 법을 알아보았다. 테두리 선의 종류(style)border-style, 두께(width) border-width, 색깔(color)border-color 속성(property)으로 각각 설정했다. 그런데 이 모든 속성들은 아래와 같이 테두리의 4방향 별로도 설정이 가능하다.

   

테두리 위쪽(top)border-top이다. 

위쪽 테두리종류border-top-style

위쪽 테두리두께border-top-width

위쪽 테두리색깔border-top-color

    

테두리 아래쪽(bottom)은 border-bottom이다.

아래쪽 테두리종류border-bottom-style

아래쪽 테두리두께border-bottom-width

아래쪽 테두리색깔border-bottom-color

    

테두리 오른쪽(right)은 border-right이다. 

오른쪽 테두리종류border-right-style

오른쪽 테두리두께border-right-width

오른쪽 테두리색깔border-right-color

    

테두리 왼쪽(left)은 border-left이다. 

왼쪽 테두리종류border-left-style

왼쪽 테두리두께border-left-width

왼쪽 테두리색깔border-left-color


원래, 이렇게 테두리의 4방향에 따라 각각 속성(property)을 정하는 것정석이다. 하지만 그러면 너무 번거로우므로 더 편하게 쓸 수 있도록 축약한 단축 속성(shorthand property)을 만들었는데 그것이 각각 border-style, border-width, border-color 라고 할 수 있다.

   

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

4개 속성을 축약한 단축 속성이 

border-style: solid;

이다. 

   

border-top-width: 8px;

border-right-width: 6px;

border-bottom-width: 4px;

border-left-width: 2px;

의 4개 속성을 축약한 단축 속성이 

border-width: 8px 6px 4px 2px;

이다. 

    

border-top-color: green;

border-right-color: red;

border-bottom-color: blue;

border-left-color: red;

의 4개 속성을 축약한 단축 속성이 

border-color: green red blue;

이다. 


이렇게 축약된 단축 속성이 확실히 더 편하다. 

    

그렇다면 더 편하게 해보자. border-style, border-color, border-width의 속성들을 축약한 단축 속성(shorthand property)border 속성(property)이다. 


border-style: dotted;

border-width: 5px;

border-color: blue;

의 3개 속성을 축약한 단축 속성이 

border: 5px dotted blue;

이다. 

  

border의 속성값에는 style, color, width에 해당하는 값들이 오는데 이 중 style을 제외한 colorwidth 속성값들은 제외해도 된다. color의 경우 해당 요소의 글자색(color)이, width의 경우 medium기본값(default)으로 설정되어 있어서 속성값이 주어지지 않으면 이들 기본값(default)이 적용된다. 

    

다음의 그림을 보자. 



위의 그림에서 의 경우처럼 style에 해당하는 속성값 solid가 누락되어 있을 때에는 테두리가 아예 보이지 않는다.

    

의 경우처럼 두께(width)에 해당하는 속성값이 누락되어도 여전히 동일하게 medium으로 적용되는 것을 확인할 수 있다. 이는 두께(width)를 별도로 설정하지 않을 경우 기본값(default)medium이기 때문이다. 

   

에서는 색깔(color)에 해당하는 속성값을 누락시켜 보았다. 글자색과 동일한 파란색으로 테두리의 색깔이 변하는 것을 확인할 수 있다. 이는 색깔(color)을 별도로 설정하지 않을 경우 기본값(default)해당 요소의 글자색(color)이기 때문이다. 


예제에 사용된 파일은 0053_border.html 파일을 참조하기 바란다.


border 속성으로 축약할 경우 4개 방향의 테두리를 개별적으로 설정할 수 없다. 만일, 방향별로 테두리를 별도로 설정하고 싶다면 단축 속성인 border를 사용하지 말고 border-top, border-right, border-bottom, border-right로 축약하면 된다. 축약하는 요령은 border와 완전히 동일하다.

   

border-top-style: dotted;

border-top-width: 5px;

border-top-color: blue;

의 3개 속성을 축약한 단축 속성이 

border-top: 5px dotted blue;

이다.

   

border-right-style: dotted;

border-right-width: 5px;

border-right-color: blue;

의 3개 속성을 축약한 단축 속성이 

border-right: 5px dotted blue;

이다.

   

border-bottom-style: dotted;

border-bottom-width: 5px;

border-bottom-color: blue;

의 3개 속성을 축약한 단축 속성이 

border-bottom: 5px dotted blue;

이다.

    

border-left-style: dotted;

border-left-width: 5px;

border-left-color: blue;

의 3개 속성을 축약한 단축 속성이 

border-left: 5px dotted blue;

이다.

 


Anki 파일


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


Ankilog 파일:  0053 테두리 각각의 방향에서 설정하기 및 단축 속성.apkg



수정 2019-02-10 오후 3:38  4방향별 단축속성에 대하여 첨가하고 Ankilog에도 추가함


0052 CSS 테두리 두께 설정하기


테두리 두께border-width 속성(property)으로 제어하고, border-width 속성(property)의 속성값키워드(thin, medium, thick)길이(px, em 등)가 온다.

    

테두리 색깔border-color 속성(property)으로 제어하고, border-color 속성(property)의 속성값색깔명(red, yellow 등), RGB, RGBA, HEX 코드 등이 온다. 

   

border-widthborder-color 속성(property)은 1개에서 4개까지의 속성값을 가질 수 있는데 테두리 스타일과 동일한 방식으로 작동한다. 

    


border-width와 border-color 속성(property)4개의 속성값이 주어지면 각각의 속성값이 차례대로 위(top)에서부터 시계방향으로 적용된다. 다음의 사례를 보자.

    

 border-style: solid;

 border-width: 6px 4px 2px 1px;

 border-color: black green blue red;


실행하면 아래와 같이 테두리 위쪽(top) 6px 두께의 검은 실선, 오른쪽(right)4px 두께의 녹색 실선, 아래쪽(bottom) 2px 두께의 파란 실선, 왼쪽(left)1px 두께 빨간 실선이 된다. 

   

   

   

border-width와 border-color 속성(property)3개의 속성값이 주어지면 각각의 속성값이 차례대로 위(top), 좌우(left and right), 아래(bottom)로 적용된다.  다음의 사례를 보자.

    

 border-style: solid;

 border-width: 6px 1px 3px;

 border-color: green blue red;


실행하면 아래와 같이 테두리 위쪽(top) 6px 두께의 녹색 실선, 좌우(left and right)는 1px 두께의 파란 실선, 아래쪽(bottom)3px 두께의 빨간 실선이 된다. 

   

   

   

border-width와 border-color 속성(property)에 2개의 속성값이 주어지면 각각의 속성값이 차례대로 위아래(top and bottom), 좌우(left and right)로 적용된다. 다음의 사례를 보자.

   

 border-style: solid;

 border-width: 6px 3px;

 border-color: blue red;


실행하면 아래와 같이 테두리 위아래(top and bottom)는 6px 두께의 파란 실선, 좌우(left and right)3px 두께의 빨간 실선이 된다. 

    

   

   

border-width와 border-color 속성(property)1개의 속성값만 주어지면 그 1개의 속성값이 전체 테두리에 적된다. 다음의 사례를 보자.

    

 border-style: solid;

 border-width: 3px;

 border-color: red;


실행하면 아래와 같이 전체 테두리의 선3px 두께의 빨간 실선이 된다. 

    


예제에 사용된 파일은 0052_두께와색깔.html 파일을 참조하기 바란다.


Anki 파일


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


Ankilog 파일:  0052 CSS 테두리 두께와 색 설정하기.apkg


2019-01-28 PM 11:24  Ankilog 파일 오타 수정



0050 CSS 박스 모델(box model)


CSS에서는 HTML 요소 하나하나를 네모난 박스(box)로 취급한다. CSSHTML 요소가 문단, 제목, 블록 인용구, 리스트, 리스트 항목 등 어떤 요소이든 박스로 다루어지고 <em>과 같은 인라인 요소라고 해도 마찬가지로 박스로 취급한다.

   

따라서 CSS 박스 모델(box model)이란 HTML 요소가 어떤 모양의 박스(box)인지를 제시하는 모델이다. 그리고 이 박스 모델을 알아야 HTML 요소들의 레이아웃(layout), 크기와 간격 등을 섬세하게 조절할 수 있게 된다.


HTML 요소를 이루고 있는 박스마진(margin), 테두리(border), 패딩(padding), 그리고 내용(content)으로 아래의 그림과 같이 구성된다.




각각의 부분에 대한 설명은 다음과 같다. 

내용(Content)HTML 요소의 내용이미지나 텍스트가 나타나는 영역

패딩(Padding) - 내용(content) 영역을 둘러싸고 있는 영역으로 내용(content) 영역과 테두리(border) 사이에 여백으로 사용한다. 패딩은 자신만의 고유색은 없고 투명하므로 배경이 투과되어 보인다. CSS패딩 전체 두께 혹은 어느 특별한 방향(위, 오른쪽, 왼쪽, 아래쪽)의 두께를 제어할 수 있다. 

테두리(Border) - 테두리는 패딩(Padding)과 내용(content)을 둘러싸고 있는 바깥 경계선이다. 테두리두께, , 스타일은 변경할 수 있다.

마진(Margin) - 테두리 바깥을 둘러싸고 있는 영역으로 인접한 요소 사이에 빈 공간을 추가하는 용도로 사용한다. 마진은 자신만의 고유색은 없고 투명하므로 배경이 투과되어 보인다. CSS마진 전체 두께 혹은 어느 특별한 방향(위, 오른쪽, 왼쪽, 아래쪽)의 두께를 제어할 수 있다.

Anki 파일


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


Ankilog 파일:  0050 CSS 박스 모델(box model).apkg



0049 <div> 요소<span> 요소


<div><span> 요소는 인접한 HTML 요소와 텍스트들을 묶는 역할을 하는 요소다. 인접한 요소들을 묶어 구분된 영역인 섹션을 만들어낸다는 점이 클래스 속성(class attribute)과 다르다

    

<div> 요소와 <span> 요소는 다른 HTML 요소들을 묶는 역할만 하기 때문에 보통 여러 요소들을 담는 용기(container)로 이해할 수 있다는 점에서 서로 거의 동일하다. 단지, <div> 요소는 블록 요소이고 <span> 요소는 인라인 요소라는 것이 서로 다를 뿐이다.


<div> 요소


<div> 요소는 HTML 문서에서 섹션이나 영역을 정의하는 블록 요소다.

   

<div> 요소에 아이디(id), 클래스(class) 속성(attribute) 등을 자유롭게 부여할 수 있다. 

    

다음과 같이 0049_div.html 파일을 만들어 <div> 요소를 실제 사용해보자. 

   

<!DOCTYPE html>

   

<html>

<head>

<title>div 요소</title>

<style>

#first

  background-color: red;

  color: blue;

}

#second

  background-color: blue;

  color: red;

}

</style>

</head>

<body>

<div id="first">

<h3>first섹션 제목</h3>

<p>first섹션의 문단</p>

</div>

<div id="second">

<h3>second섹션 제목</h3>

<p>second섹션의 문단</p>

</div>

</body>

</html>


실행해보면 다음과 같이 2개의 섹션으로 나누어진 HTML 문서를 볼 수 있다. 



위의 사례에서 <div> 요소는 <h3><p> 요소를 담고 있으며 아이디(id) 속성으로 구분되어 별도의 CSS를 적용하고 있다. 

<div> 요소에 담겨 있는 <h3> <p> 요소는 모두 <div> 요소에 적용된 CSS가 그대로 상속되어 적용되는 것을 확인할 수 있다.


<span> 요소


<span> 요소는 인라인 요소로 다른 인라인 요소나 텍스트들을 묶는 용도로 사용된다.

   

인라인 요소라는 점을 제외하면 <span> 요소는 <div> 요소와 동일하다. 

   

다음과 같이 0049_span.html 파일을 만들어 <span> 요소를 실제 사용해보자. 

   

<!DOCTYPE html>


<html>

<head>

<title>span 요소</title>

<style>

#first

  background-color: red;

  color: blue;

}

#second

  background-color: yellow;

  color: red;

}

</style>

</head>

<body>

<p>

span 요소는 <strong>인라인 요소</strong> <span id="first">다른 <strong>인라인 요소</strong> <em>텍스트</em>들을 묶는 용도</span>로 사용된다. <span id="second"><strong>인라인 요소</strong>라는 점을 제외하면 <strong>span 요소는 div 요소와 동일</strong></span>하다.

</p>

</body>

</html>


실행 결과는 다음과 같다. 



위의 사례에서 <span> 요소의 내부에 텍스트와 <strong> 요소, <em> 요소 등이 중첩(nesting)되어도 문제없이 작동하는 것을 확인할 수 있다. 

    

<span> 요소도 <div> 처럼 아이디(id) 속성을 이용하여 CSS를 적용하고 있는데 <div>와 마찬가지로 아이디(id), 클래스(class) 속성(attribute) 등을 자유롭게 부여할 수 있다. 


Anki 파일


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


Ankilog 파일:   0049 div 요소와 span 요소.apkg



0048 CSS로 색깔 넣기


CSS에서는 배경색(background color), 경계선(border), 글자색(text color) 등 많은 부분에 색깔이 들어간다. 따라서 이러한 색깔을 나타내는 몇 가지 방식을 살펴볼 필요가 있다.

      

CSS에서 색깔을 입력하는 방식은 색깔명(color name)RGB, HEX, HSLRGBA, HSLA6가지를 주로 말한다. 이 중에서 HSLHSLA를 제외한 나머지 4가지만 알아보자.

          


색깔명(color name)

    

CSS에서는 다음과 같이 색깔명(color name)으로 해당 색깔을 불러올 수 있다. 

     

p

  background-color: blue;

  color: yellow;

  border: lightgray;

 }

   

색깔명(color name)대소문자를 구분하지 않는다.

     

과거에는 CSS에서는 16가지 색깔명(color name)만 허용되었지만 현재는 대략 140개의 색깔명(color name)을 대부분의 브라우저에서 지원하고 있어 그 사용폭이 늘었다

        

      

RGB


색깔명(color name)은 이름을 아는 색을 사용할 경우 편하지만 1,600만 가지의 색 중 140개 정도의 색만 사용할 수 있다는 한계가 있다. 따라서 미묘한 색감을 표현하고자 하는 사람이라면 보다 나은 방법을 찾고자 할 것이다. 

     

RGB는 빛의 삼원색인 Red(빨강), Green(초록), Blue(파랑)의 세 종류의 색을 말한다. 컴퓨터 모니터, TV 등은 모두 이 RGB를 적당히 섞어서 다른 모든 색을 조합한다. 즉, RGB는 모니터가 색깔을 구현하는 원리인 셈이다.

      

CSS에서 RGB로 색깔을 구현할 때는 다음의 공식을 이용하여 RGB색을 구현한다. 

     

rgb(red, green, blue)


red, green, blue는 각각 0~255까지의 수를 가질 수 있는 인자(parameter)로 각각, Red, Green, Blue3색이 섞이는 정도를 의미한다. 

     

rgb(255, 0, 0)Red만 있고 나머지 GreenBlue가 없으므로 빨간색이다. 

rgb(0, 255, 0)Green만 있고 나머지 RedBlue가 없으므로 초록색이다. 

rgb(0, 0, 255)Blue만 있고 나머지 RedGreen이 없으므로 파란색이다. 

rgb(0, 0, 0)Red, Green, Blue의 모든 빛이 꺼졌으므로 검은색이다. 

rgb(255, 255, 255)는 RedGreenBlue 빛이 전부 켜졌으므로 흰색이다. 


red, green, blue의 인자는 0~255까지의 수 대신에 0~100%의 비율로 나타낼 수도 있다. 단, rgb 내에서 숫자%를 섞어서 쓰지 않는다. 즉, rgb(100%, 50, 20) 같이 섞어서 쓰지 않는다.

    

rgb(100%, 0%, 0%)Red100%이므로 빨간색이다.

rgb(0%, 100%, 0%)Green100%이므로 초록이다. 

rgb(0%, 0%, 100%)Blue100%이므로 파란색이다. 

rgb(0%, 0%, 0%)는 RedGreenBlue 모든 빛이 꺼졌으므로 검은색이다. 

rgb(100%, 100%, 100%)는 RedGreenBlue 빛이 전부 켜졌으므로 흰색이다.


RGB를 사용한 예는 다음과 같다. 

     

p {

 color: rgb(255, 0, 0);

 background-color: rgb(0, 255, 0);

 border: 3px solid rgb(0%, 0%, 0%);

}



RGBA


RGBA는 RGB에서 투명도를 의미하는 알파(A)를 첨가한 것이다. 

           

함수는 rgb와 거의 유사한 rgba 이고 투명도를 의미하는 α 인자(parameter)가 첨가된 것이다. 다음과 같은 공식을 사용한다. 

       

rgba(redgreenblue, alpha)


red, green, bluergb에서와 동일하고 α 0.0~1.0까지의 값을 가진다. 0은 투명, 1은 완전 불투명이다. 



HEX 코드

HEX 코드16진수로 RGB를 다음과 같이 나타내는 것을 말한다. 
   
#rrggbb

HEX 코드는 항상 #으로 시작한다.

       

HEX 코드 6개의 자리로 이루어져있는데 처음 두개(rr)는 빨간색, 다음 두개(gg)는 녹색, 마지막 두개(bb)는 파란색을 나타낸다.  

         

앞에서 RGB에서 redgreenblue 각각 0~255까지 총 256개의 수로 표현된다. 256개는 2의 8승으로 8비트에 해당하는 숫자이고 이는 16진수 2자리로 나타낼 수 있다. 즉, 다음과 같다.

    

rr은 RGB에서 0~255 사이에 있는 red 인자의 값을 16진수로 표시한 것

gg는 RGB에서 0~255 사이에 있는 green 인자의 값을 16진수로 표시한 것

bb는 RGB에서 0~255 사이에 있는 blue 인자의 값을 16진수로 표시한 것


실제 전환되는 사례는 다음과 같다. 

         

#cc6600 = rgb(204, 102, 0)

cc = 12×16 + 12 = 204

66 = 6×16 + 6 = 102

00 = 0


HEX 코드를 사용한 예는 다음과 같다. 

     

p {

 color: #ff0000;

 background-color: #00ff00;

 border: 3px solid #000000;

}


파일 용량을 미세하게 줄일 수 있어서 실무에서는 RGB보다 HEX 코드를 더 많이 사용한다고 한다. 

    
마지막으로 사람이 미세한 색깔을 전부 기억해서 그것을 HEX 코드나 RGB로 전환하기는 어렵다. 보통은 포토샵이나  colorpicker에서 원하는 색상의 RGB 값이나 HEX 코드를 따와서 사용한다. 


Anki 파일


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


Ankilog 파일:    0048 CSS로 색깔 넣기.apkg





0047 CSSFont Weight, Style, Variant


Font Weight


Font Weight글꼴의 굵기를 말한다. font-weight 속성(property)으로 다음과 같이 설정한다.

     

font-weight: normal; → 굵지 않음

font-weight: bold;   → 굵음


만일, 기본 설정이 bold이거나 부모로부터 bold를 상속받는 요소라면 해당 요소에 다음과 같은 선언을 다시 적용하여 bold를 제거할 수 있다. 

     

font-weight: normal; → 굵지 않음


이론적으로는 bolderlighter와 같은 상대적인 굵기 단위를 사용하여 상속받은 굵기보다 굵거나 얇게 만들 수 있다. 

      

혹은, 절대적인 굵기 단위100~900 사이의 숫자로 font-weight속성값을 설정할 수 있다. 하지만 대부분의 폰트들은 이렇게 다채로운 굵기로 제시되지 않고 브라우저도 잘 지원하지 않아 결국, 실무에서는 normalbold만 그 속성값으로 사용한다. 

    

다음과 같이 작성하여 0047_font_weight.html로 저장하고 실행해보자. 

            

<!DOCTYPE html>

    

<html>

<head>

<title>font weight</title>

</head>

<body>

<p style="font-weight: bold;">폰트 굵기(bold)</p>

<p style="font-weight: normal;">폰트 굵기(normal)</p>

<p style="font-weight: 100;">폰트 굵기(100)</p>

<p style="font-weight: 200;">폰트 굵기(200)</p>

<p style="font-weight: 300;">폰트 굵기(300)</p>

<p style="font-weight: 400;">폰트 굵기(400)</p>

<p style="font-weight: 500;">폰트 굵기(500)</p>

<p style="font-weight: 600;">폰트 굵기(600)</p>

<p style="font-weight: 700;">폰트 굵기(700)</p>

<p style="font-weight: 800;">폰트 굵기(800)</p>

<p style="font-weight: 900;">폰트 굵기(900)</p>

</body>

</html>


실행한 결과는 다음과 같다. 폰트 굵기 100~500까지는 normal과 동일하고, 600~900까지는 bold와 동일하게 굵게 나타나기만 하는 것을 확인할 수 있다. 




Font Style


Font Style은 보통 텍스트를 이탤릭으로 처리하기 위하여 font-style 속성(property)을 사용한다.

     

font-style 속성(property)은 세 가지 속성값을 갖는다.

            

font-style: normal; → 변화 없음

font-style: italic; → 이탤릭

font-style: oblique; → oblique는 italic과 매우 비슷



Font Variant


Font Variant font-variant 속성을 이용하여 텍스트를 작은 대문자 글꼴(small-caps font)로 할지 여부를 결정한다. 작은 대문자 글꼴(small-caps font)소문자를 전부 원래의 글꼴 크기보다 작은 대문자로 표기하는 글꼴을 말한다. 

    

font-variant: normal; → 변화 없음 

font-variant: small-caps; → 텍스트가 작은 대문자 글꼴로 나타남


작은 대문자 글꼴로 텍스트를 나타내면 다음과 같다. 

    

<p style="font-variant: small-caps;">HTML ankilog font variant</p>




Anki 파일


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


Ankilog 파일:   0047 CSS의 Font Weight, Style, Variant.apkg




+ Recent posts