카테고리 메뉴 만들기 카테고리 메뉴는 사용자에게 세부 메뉴 항목을 보이기 쉽게 한다. 구현하고자 하는 카테고리 메뉴는 아래와 같다. 위와 같은 카테고리 메뉴를 만들기 위해서 다음과 같이 태그를 구성한다. <div class="left"> <dl> <dt><img src="group_open.gif" />접근관리</dt> <dd>IP정책</dd> <dd>로.. HTML& CSS/CSS 2011.01.06
마우스 커서(cursor) 스타일 속성 ■ 마우스 커서(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 HTML& CSS/CSS 2011.01.04
네비게이션 바(Navigation bar) 만들기 ■ 네비게이션 바 만들기 네비게이션 바는 많은 웹 사이트에서 사용하는 있는 메뉴바 방식으로 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></.. HTML& CSS/CSS 2011.01.04
CSS를 사용한 3단 레이아웃 예제 CSS로 레이아웃을 잡을 때 사용하는 엘레멘트는 <div>와 <span>이다. <div>는 블럭 레벨 엘레멘트이고 <span>은 인라인 레벨 엘레멘트이다. 이 두 엘레멘트와 기본 HTML 엘레멘트를 사용해 레이아웃을 잡는다. ■ 레이아웃의 모양 ■ HTML 태그 구성 <div class="container"> <div class="header">헤.. HTML& CSS/CSS 2011.01.04
CSS을 사용하여 레이아웃(layout) 잡기 테이블로 레이아웃을 잡는 것보다 CSS를 사용하여 레이아웃을 잡는 것이 좀 더 어렵다. 이유는 테이블 방식은 영역의 너비나 높이를 지정하고 셀을 통해 레이아웃을 잡지만 CSS는 각 영역의 흐름에 따라 영역을 배치하여 레이아웃을 잡기 때문에 영역이 쌓이는 흐름에 대해 알아야 레이아웃을 잡을 수 .. HTML& CSS/CSS 2011.01.04
웹 접근성 - 대체 텍스트 기법 대체 텍스트 기법 웹 접근성을 높이기 위해서는 이미지 사용을 자제해야 합니다. 텍스트는 문자 인코딩 방식을 따르며 문서 리더기가 쉽게 읽어줄 수 있습니다. 하지만 이미지는 비트코드로 되어 있으며 이미지의 내용을 문서 리더기는 해석할 수 없습니다. 이런 이유로 접근성을 높이기.. HTML& CSS/HTML 2009.12.07
필드셋,레전드,ul, li, 라벨을 사용한 입력폼 만들기 ■ 입력폼의 태그 구성 <fieldset> <legend>기본정보</legend> <ul> <li><label>이름</label><input type="text" /></li> <li><lable>나이</label><input type="text" /></li> </ul> </fieldset> ■ 출력 결과 이 입력폼에 CSS를 사용하여 좀 더 편하게 볼 수 있게 바꿔줍니.. HTML& CSS/CSS 2009.12.03
웹 접근성 - 웹 접근성(Web Accessiblility) 웹 접근성은 정상인을 넘어 장애인도 편하게 웹 정보에 접근할 수 있는 방법을 제공하자는 방법론입니다. 문서 해독기가 해석할 수 없는 이미지나 스크립트로 컨트롤 되는 다양한 이벤트들을 쉽게 접근하고 문서의 가독성을 높이고자 하는 노력의 일환입니다. 웹 접근성 준수 사항 텍스.. HTML& CSS/HTML 2009.12.01
고급 - position 속성 CSS에서 position 속성은 엘레멘트의 위치를 지정할 때 사용한다. 이 때 top, bottom, left, right 속성을 사용하여 포지션을 지정할 수 있는데, 포지션을 지정하기 위해서는 먼저 포지션 방법을 설정해 주어야 한다. postion 속성을 사용하면 다른 엘레멘트로 다른 엘레멘트를 감출 수도 있고, 열거 .. HTML& CSS/CSS 2009.10.18
고급 - 엘레멘트 영역의 너비(width)와 높이(height) 엘레멘트의 콘텐츠 영역은 너비와 높이로 이루어져있다. 블럭레벨 엘레멘트를 기준으로 콘텐츠의 너비(width) 속성은 텍스트나 이미지를 가리지 않고 정확하게 지켜진다. 하지만 높이(height) 속성은 텍스트의 경우 지정한 높이는 기본적인 영역으로 차지하고 있고, 콘텐츠가 지정한 높이보.. HTML& CSS/CSS 2009.10.18