전체 글(120)
-
[Component] 간단한 헤더 만들기
상단바(.top-banner)와 헤더(.header-area)가 분리되어있다. 상단바의 경우 top-banner로 배경과 회색선을 가진 영역을 만들어준 후 ban-wrap로 max-width:1440px,padding:8px 0을 주어 표현의 영역을 작성하였다. 헤더의 경우 header-wrap의 max-width를 1400px로 주고, header-wrap 안의 두가지 개체(logo, gnb-wrap)를 일렬로 정렬하기 위해 두 개체 모두 float:left를 사용하였다. gnb-wrap같은 경우는 width에 calc연산을 주어 로고의 너비만큼의 px를 제한 100%를 차지하게 하였다. #gnb의 경우 자식 개체로 .menu를 가지고 있는데, menu에 display 속성을 주고 menu > li에 ..
2024.01.20 -
[JQuery] 특정 단어가 포함된 행의 색깔 바꾸기
John Resig George Martin Malcom John Sinclair J. Ohn
2024.01.15 -
[HTML/CSS] 뷰포트 중앙정렬하기 2024.01.03
-
[HTML/CSS] em과 rem
HTML 제목태그 문단태그 CSS html { font-size: 20px; } body { font-size: 1rem; /* 20px (html(루트)에 대한 등배단위) */ } .box01 { font-size:10px; } .box01 span { font-size:3em; /* 30px (부모태그에 대한 등배단위) */ }
2023.12.02 -
[HTML/CSS] 체크박스 커스텀
HTML CSS input[type="checkbox"] { appearance: none; width: 26px; height: 26px; background: url(../../images/common/check_default.png) no-repeat; cursor: pointer; } input[type="checkbox"]:checked { background-image: url(../../images/common/check_checked.png); }
2023.11.29 -
[웹접근성] 적절한 대체 텍스트 제공
오류사례 1. 텍스트 이미지에 대체 텍스트가 제공되지 않은 경우 오류사례2. 불충분한 대체 텍스트를 제공한 경우 오류사례3. 대체텍스트가 오타로 표기된 경우 Home > 사이트맵 Home > 사이트맵 오류사례4. 이미지 버튼에 대체 텍스트를 제공하지 않은 경우 오류사례5. 불릿 이미지에 대한 대체 텍스트를 제공하지 않은 경우 2012년 함께 누리는 일자리 한마당 2012년 함께 누리는 일자리 한마당 2012년 함께 누리는 일자리 한마당 2012년 함께 누리는 일자리 한마당 2012년 함께 누리는 일자리 한마당 2012년 함께 누리는 일자리 한마당 2012년 함께 누리는 일자리 한마당 2012년 함께 누리는 일자리 한마당 오류사례6. 의미 없는 이미지에 대체텍스트를 제공한 경우 오류사례7. longdesc..
2023.11.28