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 파일 오타 수정



0017 이미지를 보여주는 <img /> 요소 02 대체할 문구 및 크기 결정


3. 대체할 문구를 설정하는 alt 속성


alt 속성은 이미지를 대체하는 문구(alternate text)를 부여하기 위한 속성이다. 만약, 어떠한 이유로든지 웹페이지에 이미지를 표시되지 않으면 이 문구가 대신 화면에 나타난다.

    

alt 속성은 다음과 같이 작성한다. (간단한 예제 파일: img요소alt속성test.html)

    

<img src="images/sun.jpg" alt="떠오르는 태양"/>


이미지로 아름답게 꾸민 웹페이지가 항상 예쁘게 보이는 것은 아니다. 특히, 이미지를 사용할 경우 웹페이지의 용량이 커지기 때문에 느린 인터넷 속도, 열악한 디바이스 등으로 인하여 웹페이지를 제대로 볼 수 없을 때가 있다. 특히 시각장애인의 경우 스크린 리더기로 읽어 웹페이지를 보지 않고 듣는데 이미지로 꾸며진 웹사이트는 이러한 스크린 리더기에 장애로 작용한다. 

   

이러한 문제점 때문에 웹페이지에 이미지가 나타나지 않거나, 혹은 스크린 리더기로 이미지를 읽기 위하여 HTML5부터는 <img /> 요소에 alt 속성을 필수적으로 부여하도록 되었다.

    

sun.jpg 파일을 불러오지 못할 경우 아래와 같이 alt 속성으로 부여한 대체 문구가 나타나는 것을 볼 수 있다.

   



4. 이미지 크기 조절


이미지를 웹페이지에 집어넣으려면 이미지 크기를 조절하는 것이 필수적이다. 어떤 사진은 너무 크고 어떤 그림은 너무 작을 수 있기 때문이다. 

    

일단은 전통적으로 <img /> 요소에 widthheight 속성을 다음과 같이 부여해 크기를 조절해왔다.

     

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


이 때 widthheight 속성의 속성값은 항상 픽셀(px)의 수이다.

    

이미지의 크기를 특정하지 않으면 웹페이지 레이아웃이 제멋대로이고 이미지가 웹페이지에 로딩되면서 웹페이지가 요동치는 현상이 발생하게 되므로 되도록이면 항상 크기를 특정하도록 하자.

    

뒤에 언급하겠지만 브라우저는 HTML로 작성된 페이지를 먼저 보여주고 이미지는 그 크기에 따른 공간만 남겨놓고 뒤에 따로 이미지를 로딩하여 이미지를 보여주게 된다. 즉, 페이지의 레이아웃을 만들었다가 이미지를 받은 후 이를 다시 조정하는 것이다. 

    

따라서 크기가 결정된 이미지를 웹페이지에 집어넣으면, 브라우저는 이에 맞추어 페이지 레이아웃을 만들 수 있게 된다. 하지만 HTML에서 이미지 크기가 결정되지 않으면 브라우저는 페이지에서 이미지를 보여주기 전에 임의로 이미지의 크기를 결정하게 되고 실제 이미지가 페이지에 로딩되면서 그 크기의 변화로 웹페이지가 출렁거리게 되는 것이다.

    

최근에는 CSS 스타일을 적용하는 sytle 속성을 이용하여 다음과 같이 이미지의 크기를 조절할 수 있다.

    

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


최근에 <img /> 요소에 style 속성을 이용하여 이미지의 크기를 결정하는 까닭은 각각의 <img /> 요소에 style 속성으로 이미지의 크기를 규정해놓으면 추후에 배울 CSS의 스타일 시트에서 일괄적으로 이미지의 크기를 조작할 때 그 적용을 받지 않을 수 있기 때문이다.


Anki 파일


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


Ankilog 파일:   0017 이미지를 보여주는 img 요소 02.apkg





+ Recent posts