게으른 개발자 되기

일반적인 블록 요소의 흐름을 줄 바꿈입니다. <div style="background-color:#22ff11; ">div1</div> <div style="background-color:#aaffaa; ">div2</div> <div style="background-color:#aaff00; ">div3</div> 위 코드는 아래와 같은 결과를 나타냅니다. [일반적인 블록 요소의 흐름] float 속성을 사용하여 흐..

인라인 요소도 너비와 높이가 모두 반영됩니다. <span style="background-color:#22ff11; width:100px; height:100px;">span1</span> <span style="background-color:#aaffaa; ">span2</span> 위 코드의 결과는 아래와 같습니다. [인라인 요소에 너비와 높이를 준 경우] 블록 요소와 마찬가지로 min-width 속성과 min..

블록 요소는 너비와 높이가 모두 반영됩니다. <div style="background-color:#22ff11; width:100px; height:100px;">div1</div> <div style="background-color:#aaffaa; ">div2</div> 위와 같이 div1에 높이와 너비를 지정하면 반영되 출력되는 결과는 아래와 같습니다. [너비와 높이지 지정된 블록 요소 예] 하..

레이아웃에 사용되는 <div> 태그 <div> 태그는 블럭(block) 요소로 다른 블럭 요소와 줄바꿈이 일어납니다. <div style="background-color:#22ff11">div1</div> <div style="background-color:#aaffaa">div2</div> 위 태그의 결과는 다음과 같이 나타납니다. [div 태그의 특성을 알아보는 예] 한 줄..

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 단락의 첫 번째 라인의 ..

background-attachment 배경 이미지가 어떻게 고정되는지 나타냅니다. body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; } 위 설정은 배경 이미지가 반복되지 않고, 위치는 고정되어 나타납니다. background-attachment 속성에 사용할 수 있는 값은 scroll, fixed, inherit 값이 있습..

폰트 속성은 폰트명, 두께, 사이즈, 스타일을 지정합니다. font-family 폰트는 다중 지정이 가능합니다. 브라우저에서 첫 번재 지정된 폰트가 없다면 다음 폰트를 사용합니다. 하나의 이상의 폰트를 지정할 때는 컴머를 사용하여 폰트를 구분합니다. p { font-family:"Times New Roman", Times, serif; } font..

position 속성에 absolute값을 사용하여 엘레멘트를 수직정렬하는 방법입니다. 엘레멘트의 position 속성을 absolute로 지정하고 top과 left값을 각각 50% 지정합니다. 그럼 엘레멘트는 왼쪽 상단의 모소리가 정중앙에 위치하게 됩니다. 하지만 콘텐츠의 영역이 있기 때문에 왼쪽 모소리가 정중앙에 위치하게 됩니..

CSS에서 엘레멘트를 감출 때 사용하는 방법은 두 가지가 있다. 1. visibility:hidden 을 사용하는 방법 visibility 속성을 hidden을 주는 경우 레이아웃(엘레멘트가 차지하는 영역)은 그대로 유지하면서 화면에서 엘레멘트만 숨긴다. 즉, 엘레멘트의 콘텐츠가 차지하는 영역을 그대로 유지시키고, 콘텐츠만 숨긴다..

HTML 문서에 CSS를 사용하는 방법으로는 외부 스타일을 적용하는 방법, 내부에 정의하는 방법, 엘레멘트에 직접 정의하는 방법등이 있다. 이 때 스타일이 중복될 때 어떤 스타일이 적용이 되는가를 캐스케이딩 순서라고 한다. 적용되는 순서는 다음과 같다. 인라인(inline) 스타일(가장 먼저 적용되는 스타..