千字文 002 日月盈昃 辰宿列張


주의 : 아래에 포스팅된 천자문은 한학 초보가 공부하기 위하여 여러 책들을 보고 자의적으로 정리한 내용에 불과하므로 오류가 있을 수 있습니다.


천자문 전체 자료실 페이지 바로가기


1) 개별 한자 

日 - 날 일(태양)

月 - 달 월(달)

盈 - 찰 영(달이 둥글게 찬다.)

昃 - 기울 측(태양이 서쪽으로 기운다.)

辰 - 별 진

宿 - 잘 숙/별자리 수

列 - 벌일/줄 렬

張 - 베풀 장


2) 한자어

日月 - 태양과 달

盈昃 - 차고 기운다.

辰宿 - 별과 별자리

列張 - 줄지어 펼쳐진다.


3) 4자 풀이

日月盈昃 - 태양과 달은 차고 기운다.

辰宿列張 - 별과 별자리는 줄지어 펼쳐진다.


4) 8자 풀이

日月盈昃 辰宿列張 

태양과 달은 차고 기울며, 별과 별자리는 줄지어 펼쳐진다.


5) 이전 구문

天地玄黃 宇宙洪荒

日月盈昃 辰宿列張



Ankilog 학습파일


千字文 학습용 Anki 파일은 아래와 같습니다. 참고하시기 바랍니다. 


Ankilog 파일: 千字文 002.apkg


수정: 2019-04-22 오전 1:07 Anki카드 노트 유형 변경 및 카드 수 줄임(32개->26개), 상단에 주의문 첨가

수정: 2019-04-23 오전 2:54 Anki카드 노트 유형 변경 및 카드 수 줄임(26개), 상단에 주의문 첨가




천자문 전체 자료실 페이지 바로가기





千字文 001 天地玄黃 宇宙洪荒


주의 : 아래에 포스팅된 천자문은 한학 초보가 공부하기 위하여 여러 책들을 보고 자의적으로 정리한 내용에 불과하므로 오류가 있을 수 있습니다.


천자문 전체 자료실 페이지 바로가기


1) 개별 한자 

天 - 하늘 천

地 - 땅 지

玄 - 검을 현(밤하늘의 깊고 까마득한 색, 검붉은 색)

黃 - 누를 황(누런 색)

宇 - 집 우(공간)

宙 - 집 주(시간)

洪 - 넓을 홍

荒 - 거칠 황


2) 한자어

天地 - 하늘과 땅

玄黃 - 검고 누르다

宇宙 - 우주(시공간)

洪荒 - 넓고 거칠다


3) 4자 풀이

天地玄黃 - 하늘과 땅은 검고 누르다.

宇宙洪荒 - 우주는 넓고 거칠다.


4) 8자 풀이

天地玄黃 宇宙洪荒 

하늘과 땅은 검고 누르며, 우주는 넓고 거칠다.



Ankilog 학습파일


제가 공부하기 위하여 정리한 千字文 학습용 Anki 파일은 아래와 같습니다. 참고하시기 바랍니다. 


千字文 001.apkg


2019-04-22 오전 12:50 Anki카드 노트 유형 변경 및 카드 수 줄임(30개->24개), 주의문 첨가






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



0051 CSS 테두리(Border) 스타일 설정하기


다음은 CSS박스 이론에서 제시된 테두리(Border)이다.



테두리(Border)를 어떻게 다루어야 하는지 우선 테두리 스타일(border style)부터 살펴보자.

   

테두리 스타일(border style)이란 테두리를 이루는 선의 종류를 말한다.

   

CSS에서 테두리의 설정은 테두리 선의 종류를 먼저 정하고 해당 선에 두께, 색, 방향, 모서리를 설정하는 것이기 때문에 테두리 스타일이 가장 먼저 설정되어야할 기본이다. 테두리 스타일이 설정되어 있지 않으면 다른 두께, 색깔, 모서리 등의 설정 효과가 나타나지 않는다.

   

테두리의 스타일CSS에서 border-style 속성으로 제어한다. 그리고 속성값 solid, double, dotted, dashed, groove, ridge, inset, outset, none, hidden10개가 있다.


1) solid(실선)

테두리를 이루는 선이 실선이다.(그림참조)


2) double(겹선)

테두리를 이루는 선두 줄로 된 겹선이다.(그림참조)


3) dotted(점선)

테두리를 이루는 선점을 일정한 간격으로 배치한 점선이다.(그림참조)


4) dashed(대쉬선)

테두리를 이루는 선긴 점선인 대쉬선이다.(그림참조)


5) groove(홈)

테두리 선이 테두리만 페이지 안으로 파인 것처럼 음영처리된 선

ridge와 반대로 위(top)와 왼쪽(left)은 바깥쪽의 선을, 아래(bottom)와 오른쪽(right)은 안쪽의 선을 진하게 그려 그림자가 진 것으로 보여 요소의 테두리만 안으로 파인 홈처럼 보이게 한다.(그림참조)


6) ridge(액자)

테두리 선이 테두리만 페이지 밖으로 돌출된 것처럼 음영처리된 선

groove와 반대로 위(top)와 왼쪽(left)은 안쪽의 선을, 아래(bottom)와 오른쪽(right)은 바깥쪽의 선을 진하게 그려 그림자가 진 것으로 보여 요소의 테두리만 밖으로 돌출되어 나온 액자처럼 보이게 한다.(그림참조)


7) inset(오목)

테두리 선이 테두리 내부의 HTML 요소가 페이지 안으로 오목하게 들어간 것처럼 음영처리된 선

onset과 반대로 위(top)와 왼쪽(left)의 테두리는 진하게 그려 그림자가 진 것으로 보이고, 아래(bottom)와 오른쪽(right)의 테두리는 연하게 그려 밝게 노출된 것으로 보여 HTML 요소 전체가 페이지 안으로 오목하게 들어간 것처럼 보이게 한다.(그림참조)


8) outset(볼록)

테두리 선이 테두리 내부의 HTML 요소가 페이지 밖으로 볼록하게 튀어나온 것처럼 음영처리된 선

inset과 반대로 위(top)와 왼쪽(left)의 테두리는 연하게 그려 빛에 노출된 것으로 보이고, 아래(bottom)와 오른쪽(right)의 테두리는 진하게 그려 그림자가 진 것으로 보여 HTML 요소 전체가 페이지 밖으로 볼록하게 튀어나온 것처럼 보이게 한다.(그림참조)


9) none, hidden

none테두리가 없다는 것이고, hidden테두리를 숨긴다는 뜻이다. 두 가지 모두 테두리가 나타나지 않는다. 다음과 같이 선언하면 된다.

border-style: none;

border-style: hidden;


10) 테두리별로 스타일 설정하기


지금까지는 테두리 스타일을 한 번에 한 가지 스타일만 설정했다. 하지만 테두리는 상하좌우로 4개가 있고 각각에 서로 다른 종류의 선으로 설정할 수 있다. 그 설정법을 알아보자.

    

   

border-style 속성(property)에 4개의 속성값이 주어지면 위(top)에서부터 시계방향으로 적용된다.

    

아래의 선언으로 테두리 위쪽(top)은 solid(실선), double(겹선), 오른쪽(right)은 아래쪽(bottom)은 dashed(대쉬선), 왼쪽(left)는 dotted(점선)으로 설정된다.

    

border-style: solid double dashed dotted;

    

실행 결과는 다음과 같다.

   

   

    

border-style 속성(property)에 3개의 속성값이 주어지면 위(top), 좌우(left and right), 아래(bottom)로 각각 적용된다.

       

아래의 선언으로 테두리 위쪽(top)은 double(겹선), 오른쪽(right)과 왼쪽(left)은 dashed(대쉬선), 아래쪽(bottom)은 dotted(점선)으로 설정된다.

   

border-style: double dashed dotted;

    

실행 결과는 다음과 같다.

    



border-style 속성(property)에 2개의 속성값이 주어지면 위아래(top and bottom), 좌우(left and right)로 각각 적용된다.

    

아래의 선언으로 테두리 위아래(top and bottom)는 double(겹선), 좌우(left and right)는 dashed(대쉬선)으로 설정된다.

    

border-style: double dashed;

    

실행 결과는 다음과 같다.

   



지금까지 제시한 사례는 0051_테두리.html 파일에 정리되어 있으므로 참조하기 바란다.


Anki 파일


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


Ankilog 파일:  0051 CSS 테두리 스타일 설정하기.apkg

2019-01-27 AM 12:09 본문 문구 수정 및 Anki 파일 문구 수정(그림 첨가)



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



이제 암기가 가능하니 어떤 지식을 먹어야 할지 고민이다. 이는 내 경우 특히 그런데, 평생 암기가 필요한 지식들을 탐하면서 결국, 입맛만 다시고 지나갔기 때문이다. 그런데 지금은 암기하고 그 암기한 것을 하나하나 알아가면서 발전하는 즐거움에 중독될 지경이다. 


공부를 하다 보면 3종류의 공부가 있다. 수학이나 물리 같이 배울 것은 많지 않지만 익혀야할 것이 많은 공부가 첫 번째다. 공식 하나를 배우는 것은 쉽지만 그 공식을 이리 저리 응용할 수 있을 때까지 숙련시키는 것이 이런 공부의 특성이다. 암기할 것은 많지 않지만 사용경험이 많이 쌓여야 한다는 점이 특색이다. 두 번째는 암기할 것이 무진장 많고 응용할 일을 잘 없는 공부들이다. 대부분의 어학이나 생물, 역사 등 상당수의 공부가 이 암기 위주의 공부가 된다. 마지막으로는 재능으로 배우는 공부가 있다. 이건 타고나야 하는 측면이 있다. 음감이나 균형 감각이 이런 측면이다. 


암기하는 것을 싫어하고 별 다른 재능이 없던 나로서는 그저 수학 및 물리가 주된 전공일 수밖에 없었다. 하지만 그렇다고 다른 공부를 해보고 싶지 않았던 것은 아니다. 그런데 이제 암기가 가능해지면서 그동안 막혔던 가능성이 열렸다. 오래된 욕구들이 다시 올라오고 있다. 솔직히 너무 신난다. 너무 공부하고 싶은 것이 많아서 고민이다. 줄여야 한다. 무엇을 공부할까?


이제 나이가 들어서 젊은 시절처럼 첨단의 과목을 공부해서 출세하고 싶은 욕망은 많지 않다. 지금의 공부는 그저 온전히 나 자신의 발전과 성취에 맞추고 싶다. 호기심과 궁금증을 해소하고 스스로 자족할 수 있게 하는 공부를 하고 싶다. 쓸데 없는 것들을 가지치고 몇 가지를 추려보았다. 


우선, 컴퓨터 관련 소프트웨어와 하드웨어다. 이제 모든 삶은 디지털로 변환되었다. 나이 들어서 아날로그적 삶으로 가는 것도 가능하겠지만 사회를 읽고, 사람들과 의사소통하고, 개인적인 아이디어와 가치를 구현하는 것은 여전히 소프트웨어 공부가 가장 적절해 보인다. 공부가 잘 되어서 새로운 아이디어를 구현하게 된다면 그것도 좋겠지만 그렇지 않아도 그저 인터넷 포탈에서 주는 정보만 보면서 소비하는 삶에서 벗어나 좀 더 적극적인 방향으로 나아갈 수 있다면 그것도 만족스러울 것 같다. 그리고 개인적으로 여전히 IT 기술은 개인적인 삶에서 그 응용가능성이 무한해 보여 항상 이 분야를 공부하고 싶었다. 가내수공업적이고 지극히 개인적인 생산물을 만들어보고 싶다. 특히, 배우고 익힌 것들을 구현할 수 있는 최종 환경은 결국, 인터넷과 소프트웨어일 수밖에 없다는 생각이 있어, 근본적인 내공을 쌓아놓고 싶다.


두 번째는 어학이다. 국내에 번역된 도서를 읽다가 그 오역과 비문의 맛을 즐기다 보면 원문을 읽어보고 싶은 생각이 든다. 자유자재로 원서를 읽으면서 그 깊은 맛을 보고 싶다. 특히, 한문은 한글로 번역된 것을 보느니 차라리 고문으로 읽는 편이 훨씬 낫다. 그리고 영어는 정말 필요하다. 인터넷에 온갖 고급 지식이 공개된 자료 형태로 영어로 떠돌아다닌다. 공개 자료들이 국내 서점에 출간되어 있는 것을 볼 때마다 그 책값이 일종의 무지에 따라 지출하는 세금처럼 느껴진다. 게다가 그 오역은 정말 화가 난다. 게다가 미드는 자막 없이 보아야 그 참맛을 알 수 있다. 


각종, 신체 언어나 face reading, 관상 등 사람을 관찰하는 기술들을 익히는 것도 재미있을 것 같다. 지하철을 타면서 셜록홈즈 마냥 사람들을 관찰하면서 그 사람이 어떤 삶을 살고 있는지 관찰한다면 무척 재미있을 것 같다. 혹시, 사업을 하거나 사람들을 판단하는 것이 중요한 직업이라면 이런 종류의 지식을 구비해서 익혀두면 잘 속지 않을 것이고 아이를 기르거나 가정생활을 함에도 훨씬 지혜로워질 수 있을 것이기 때문이다. 사람 관련 기술은 알아 두면 세월과 함께 성숙하고 정련되면서 보석 같은 지혜로 남아 일생의 큰 무기가 되어줄 것이므로 더더욱 익혀두고 싶다.


원래, 철학을 좋아했고, 많이 읽었지만 실제로는 그 내공이 거의 없다. 그저 읽기만 했기 때문에 결국, 내 것으로 만든 것이 없기 때문이다. 어디 가서 유식한 척을 할 수는 있지만 내 삶의 일부라고 할 수 있는지는 잘 모르겠다. 세계철학사 한권쯤은 외워두고 싶다.


그 외에도 호기심을 갖고 있었던 수많은 지식들이 있다. 인공지능, 동양철학, 불교 등 공부하고 싶은 것들이 너무 많다. 이 모든 것들이 암기가 되지 않아서 그저 손가락만 물고 있던 지식들이다. 이제는 전부 익힐 수 있게 되었다. 특히 동양철학은 노후를 위해서 필요하지 않을까 싶다. 70살 이후에 할 수 있는 일을 따져보니 동양학 공부를 확장시켜 사주팔자나 관상으로 나아가는 것도 좋아 보였기 때문이다. 이 분야들은 과학의 세례를 받은 사람들이 그렇듯이 평생 그 신빙성을 의심해왔기 때문에 개인적인 호기심으로 공부해보고 싶기도 하고 나이 들어서 덕담하기도 좋은 내용이기 때문이다. 또, 나이 먹은 노인이 할 수록 오히려 더 신뢰를 받을 수 있고 결정적으로, 수익성이 좋아보이기도 한다. 한문과 동양철학 공부가 무르익으면 자연스럽게 공부해 보도록 하겠다. 


공부하는 것이 내 자신의 성취로 온전히 돌아오면서 공부가 너무 재미있어졌다. 지금은 매일매일 내 욕구와의 전쟁이다. 매일매일 공부량을 늘리고 싶어하는 자신을 다독이면서 성급하지 않도록 하느라 힘겹다. 이 블로그 쓴다고 스스로를 다독이지 않으면 통제가 되지 않을 정도로 욕구에 시달린다. 블로그에 올리기 어려운 공부내용도 많다. 책을 거의 통째로 외우다 시피 해야하는 것들은 올릴 수 없기 때문이다. 물론, 관련해서 많은 시행착오도 겪고 있다. 그런 내용들은 다시 정리해서 또 블로그로 올릴 계획이다. 이 계획표를 보니 아마도 죽을 때까지 공부해도 모자라 보이지만 이렇게 살다 가는 것도 나름 즐거울 것 같다.

+ Recent posts