상단바(.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에 ..

HTML 제목태그 문단태그 CSS html { font-size: 20px; } body { font-size: 1rem; /* 20px (html(루트)에 대한 등배단위) */ } .box01 { font-size:10px; } .box01 span { font-size:3em; /* 30px (부모태그에 대한 등배단위) */ }

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); }

오류사례 1. 텍스트 이미지에 대체 텍스트가 제공되지 않은 경우 오류사례2. 불충분한 대체 텍스트를 제공한 경우 오류사례3. 대체텍스트가 오타로 표기된 경우 Home > 사이트맵 Home > 사이트맵 오류사례4. 이미지 버튼에 대체 텍스트를 제공하지 않은 경우 오류사례5. 불릿 이미지에 대한 대체 텍스트를 제공하지 않은 경우 2012년 함께 누리는 일자리 한마당 2012년 함께 누리는 일자리 한마당 2012년 함께 누리는 일자리 한마당 2012년 함께 누리는 일자리 한마당 2012년 함께 누리는 일자리 한마당 2012년 함께 누리는 일자리 한마당 2012년 함께 누리는 일자리 한마당 2012년 함께 누리는 일자리 한마당 오류사례6. 의미 없는 이미지에 대체텍스트를 제공한 경우 오류사례7. longdesc..

flex는 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하기 위해 사용한다. 컨테이너에 사용할 수 있는 속성은 flex-direction, justify-content, align-items가 있으며 flex-item에 사용할 수 있는 속성은 flex-grow, flex-shrink,flex-basis가 있다. flex-item에 부여할 수 있는 속성은 축약형으로 사용할 수 있는데, 다음과 같다. A B C #flex-container { display: flex; border:1px solid black; padding:10px; width: 500px; height: 100px; flex-direction: row; justify-content: space-between;..