게으른 개발자 되기

엘레멘트의 콘텐츠 영역은 너비와 높이로 이루어져있다. 블럭레벨 엘레멘트를 기준으로 콘텐츠의 너비(width) 속성은 텍스트나 이미지를 가리지 않고 정확하게 지켜진다. 하지만 높이(height) 속성은 텍스트의 경우 지정한 높이는 기본적인 영역으로 차지하고 있고, 콘텐츠가 지정한 높이보..

그룹 선택자 (Grouping) 그룹 선택자는 여러 태그에 같은 스타일을 지정할 때 사용하는 방법입니다. 각 엘레멘트를 콤머(,)로 구분하여, 여러 개의 엘레멘트를 열거합니다. 이 때 그룹으로 작성된 엘레멘트는 모두 같은 스타일이 적용됩니다. 위와 같이 작성하면 h1, h2, h3 엘레멘트에 같은 스..

패딩(padding)은 콘텐츠와 테두리 사이의 영역으로 배경색의 영향을 받는다. 패딩에 영역을 지정하면 테두리 안쪽의 전체 영역이 커진다. <div> 기본영역<br/> width:200px<br/> height:100px </div> <div style="padding:20px;"> 패딩 테스트<br/> widht:200px+(20px+20px)<br/> height:100px+(20p..

마진(margin)은 엘레멘트의 테두리를 감싸고 있는 깨끗한 영역이다. 마진은 해당 엘레멘트의 배경색에 영향을 받지 않으며, 부모영역의 색을 나타나게 된다. <div> 기본영역<br/> width:200px<br/> height:100px </div> <div style="margin:20px;"> 마진 테스트<br/> widht:200px<br/> heig..

아웃라인은 테두리 다음에 위치하며 마진의 안쪽의 선을 말한다. 이 때 마진의 값에 포함되며 따로 넓이를 차지하지 않는다. <div>블럭 영역</div> <div style="outline:10px solid red;">아웃라인의 위치</div> 위의 아웃라인 속성이 적용된 결과를 보면 마진(margin)영역에서 위아래의 ..

테두리는 모든 요소(인라인, 블럭레벨)에 적용되며 다음과 같은 속성을 가질 수 있습니다. border-style (테스트 선 스타일) 테두리의 선 스타일을 지정한다. 값으로는 none, dotted, dashed, solid, double 과 3D 형인 groove, ridge, inset, outset 등이 있다. none : 테두리 없음 / dotted : 점선 / dashed : 조금긴 점선..

박스모델(box model)이란 HTML 태그 엘레멘트는 모두 마진(margin), 테두리(border), 패팅(padding)를 가지고 있다고 보는 관점입니다. 박스모델은 컨텐츠의 영역을 나타내기 때문에 플로팅(float), 포지션닝(position)과 함께 레이아웃을 잡기 위해 필수적으로 알아야 하는 특성입니다. 모든 엘레멘트는 ..

블럭 레벨 엘레멘트는 너비(width)를 지정하지 않은 경우 가질 수 있는 모든 너비를 엘레멘트 영역으로 가지며, 엘레멘트 앞 뒤로 줄바꿈을 한다. 또한, 엘레멘트는 문서내 정상 흐름에 따라 위치되기 때문에 정렬을 시키기 위해서는 정렬 방법을 사용해야 한다. 엘레멘트의 텍스트 엘레멘트는 다음과 ..

block 레벨 엘레멘트를 가운데로 정렬하는 속성은 없다. 따라서 영역을 수직상 가운데로 정렬하기 위해서는 다음과 같은 방법을 사용해야 한다. 아래의 문서에서 content 영역을 수직상 가운데 정렬하는 방법은 다음과 같다. <div id="container"> <div id="content"></div> </div> ■ Display 속성을 table..

인라인 블럭 레벨 엘레멘트는 엘레멘트 영역은 블럭레벨 엘레멘트처럼 지정한 너비와 높이를 모두 가질 수 있지만, 다른 엘레멘트와는 줄바꿈을 하지 않는 성질을 가지고 있다. 즉, 영역은 블럭레벨처럼 영역을 가지고, 다른 엘레멘트와는 줄바꿈을 하지 않는 엘레멘트를 말한다. <div style="display:inli..