블록 요소의 흐름(float) 일반적인 블록 요소의 흐름을 줄 바꿈입니다. <div style="background-color:#22ff11; ">div1</div> <div style="background-color:#aaffaa; ">div2</div> <div style="background-color:#aaff00; ">div3</div> 위 코드는 아래와 같은 결과를 나타냅니다. [일반적인 블록 요소의 흐름] float 속성을 사용하여 흐.. HTML& CSS/CSS 2012.05.16
인라인 요소의 너비와 높이 인라인 요소도 너비와 높이가 모두 반영됩니다. <span style="background-color:#22ff11; width:100px; height:100px;">span1</span> <span style="background-color:#aaffaa; ">span2</span> 위 코드의 결과는 아래와 같습니다. [인라인 요소에 너비와 높이를 준 경우] 블록 요소와 마찬가지로 min-width 속성과 min.. HTML& CSS/CSS 2012.05.16
블록 요소의 너비와 높이 블록 요소는 너비와 높이가 모두 반영됩니다. <div style="background-color:#22ff11; width:100px; height:100px;">div1</div> <div style="background-color:#aaffaa; ">div2</div> 위와 같이 div1에 높이와 너비를 지정하면 반영되 출력되는 결과는 아래와 같습니다. [너비와 높이지 지정된 블록 요소 예] 하.. HTML& CSS/CSS 2012.05.16
<div>태그, <span>태그 각각의 특성(블럭 요소와 인라인 요소) 레이아웃에 사용되는 <div> 태그 <div> 태그는 블럭(block) 요소로 다른 블럭 요소와 줄바꿈이 일어납니다. <div style="background-color:#22ff11">div1</div> <div style="background-color:#aaffaa">div2</div> 위 태그의 결과는 다음과 같이 나타납니다. [div 태그의 특성을 알아보는 예] 한 줄.. HTML& CSS/CSS 2012.05.16
텍스트 text-align 텍스트의 정렬 방식을 결정합니다. h1 { text-align:center; } h2 { text-align:left; } h3 { text-align:right; } text-decoration 텍스트를 수식하는 방법을 결정합니다. h1 { text-decoration:overline; } h2 { text-decoration:line-through; } h3 { text-decoration:underline; } h4 { text-decoration:blink; } text-indent 단락의 첫 번째 라인의 .. HTML& CSS/CSS 2012.05.15
배경(background) background-attachment 배경 이미지가 어떻게 고정되는지 나타냅니다. body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; } 위 설정은 배경 이미지가 반복되지 않고, 위치는 고정되어 나타납니다. background-attachment 속성에 사용할 수 있는 값은 scroll, fixed, inherit 값이 있습.. HTML& CSS/CSS 2012.05.15
폰트 폰트 속성은 폰트명, 두께, 사이즈, 스타일을 지정합니다. font-family 폰트는 다중 지정이 가능합니다. 브라우저에서 첫 번재 지정된 폰트가 없다면 다음 폰트를 사용합니다. 하나의 이상의 폰트를 지정할 때는 컴머를 사용하여 폰트를 구분합니다. p { font-family:"Times New Roman", Times, serif; } font.. HTML& CSS/CSS 2012.05.15
<meta> 태그 <meta> 태그는 HTML 문서의 메타데이터(데이터를 위한 데이터)를 설명합니다. <meta> 태그는 문서의 메타 데이터를 제공하며, 페이지에는 표시되지 않습니다. 모통 페이지 설명, 키워드, 문서의 제작자, 마지막 수정일 등등 메타 데이터를 제공합니다. <meat> 태그는 항상 <head> .. HTML& CSS/HTML 2012.05.15
XHTML - DTD(Document Type Definitions) 아래 예제는 일반적인 XHTML 문서를 나타낸다. 아래의 예제에서 보듯이 문서는 제일 처음 <!DOCTYPE>이라는 문서 선언이 나오 는데 문서 선어에 대해 알아보자. 문서선언(DTD, Document Type Definitions)는 SGML의 웹 페이지에 사용된 문서 문법을 나타낸다. 즉, 문서의타입을 지정하는 규칙을 열거.. HTML& CSS/HTML 2012.04.25
XHTML - 모듈(Module) HTML 과 마찬가지고 웹 개발에 필요한 태그요소를 모듈이라는 형식을 통해 제공하고 있습니다. 모듈의 종류는 아래와 같습니다. 즉, 태그를 큰 틀에서 묶어서 하나의 모듈이라고 보는 형식을 취합니다. ※참고) 위에서 설명하는 모듈중에 deprecated* 모듈은 사용을 금지하는 모듈입니다. HTML& CSS/HTML 2012.04.25