게으른 개발자 되기

CSS에서 상속은 매우 중요한 역할을 합니다. HTML 문서는 집합적 트리구조로 이루어져 있습니다. 따라서 루트 엘레멘트를 기준으로 자식 엘레멘트들이 뻗어가는 구조이 문서가 구성되는 때 이 때 여러 자식 엘레멘트를 가진 부모 엘레멘트에 자식들의 기본 스타일을 지정하여 자식 엘레멘트들이 모두 ..

테이블의 테두리를 한 줄을 하기 위한 스타일 지정 방법입니다. 결과는 아래와 같습니다. 태그 구성은 아래와 같습니다. 지정한 스타일은 아래와 같습니다.

카테고리 메뉴는 사용자에게 세부 메뉴 항목을 보이기 쉽게 한다. 구현하고자 하는 카테고리 메뉴는 아래와 같다. 위와 같은 카테고리 메뉴를 만들기 위해서 다음과 같이 태그를 구성한다. <div class="left"> <dl> <dt><img src="group_open.gif" />접근관리</dt> <dd>IP정책</dd> <dd>로..

■ 마우스 커서(cursor) 스타일 속성 종류 cursor:auto cursor:crosshair cursor:default cursor:e-resize cursor:help cursor:move cursor:n-resize cursor:ne-resize cursor:nw-resize cursor:pointer cursor:progress cursor:s-resize cursor:se-resize cursor:sw-resize cursor:text cursor:w-resize cursor:wait

■ 네비게이션 바 만들기 네비게이션 바는 많은 웹 사이트에서 사용하는 있는 메뉴바 방식으로 CSS를 사용하면 다음과 같이 만들 수 있다. □ 태그 구성 <ul> <li><a href="default.asp">Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></..

CSS로 레이아웃을 잡을 때 사용하는 엘레멘트는 <div>와 <span>이다. <div>는 블럭 레벨 엘레멘트이고 <span>은 인라인 레벨 엘레멘트이다. 이 두 엘레멘트와 기본 HTML 엘레멘트를 사용해 레이아웃을 잡는다. ■ 레이아웃의 모양 ■ HTML 태그 구성 <div class="container"> <div class="header">헤..

테이블로 레이아웃을 잡는 것보다 CSS를 사용하여 레이아웃을 잡는 것이 좀 더 어렵다. 이유는 테이블 방식은 영역의 너비나 높이를 지정하고 셀을 통해 레이아웃을 잡지만 CSS는 각 영역의 흐름에 따라 영역을 배치하여 레이아웃을 잡기 때문에 영역이 쌓이는 흐름에 대해 알아야 레이아웃을 잡을 수 ..

■ 입력폼의 태그 구성 <fieldset> <legend>기본정보</legend> <ul> <li><label>이름</label><input type="text" /></li> <li><lable>나이</label><input type="text" /></li> </ul> </fieldset> ■ 출력 결과 이 입력폼에 CSS를 사용하여 좀 더 편하게 볼 수 있게 바꿔줍니..

CSS에서 position 속성은 엘레멘트의 위치를 지정할 때 사용한다. 이 때 top, bottom, left, right 속성을 사용하여 포지션을 지정할 수 있는데, 포지션을 지정하기 위해서는 먼저 포지션 방법을 설정해 주어야 한다. postion 속성을 사용하면 다른 엘레멘트로 다른 엘레멘트를 감출 수도 있고, 열거 ..

CSS float는 엘레멘트를 왼쪽이나 오른쪽으로 밀 때 사용하는 속성이다. float는 이미지에 자주 사용되며, 레이아웃을 잡을 때도 유용한다. 엘레멘트는 수평으로 흐르는데, 이 의미는 모든 엘레멘트를 왼쪽이나 오른쪽으로 흐르게 할 수 있다는 것이다. 하지만 위 아래는 흐름과는 상관이 없..