Record

1단 메뉴에 이어서 2단 메뉴를 만들어보자. 만들어 볼 UI는 아래 사진과 같다. 우선 스스로 짠 코드 부터 ! html 웹툰 요일별 장르별 작가별 연도별 작품별 블로그 지식백과 건강백과 동물백과 밀리터리 음식백과 곤충백과 인물백과 조류백과 카페 css @charset "utf-8"; @font-face{ font-family: 'Noto-Sans-R'; src: url(../font/NotoSansKR-Regular.otf) format('OpenType'); } @font-face{ font-family: 'Noto-Sans-L'; src: url(../font/NotoSansKR-Light.otf) format('OpenType'); } body{ font-family: Noto-Sans-L; } ..

탭 탭은 사전적 의미로 색인표 또는 식별표라는 뜻을 가지고 있다 참조용 데이터를 색인표 또는 인덱스라고도 부릅니다. 탭 UI는 인덱스카드와 유사하게 여러 문서 또는 패널을 하나의 창에 두고 전환하여 볼 수 있도록 한 인터페이스 탭과 네비게이션은 비슷하지만 다르다. 네비게이션은 탭을 누르면 다른 화면으로 이동 하는 역할이지만 탭은 화면이동 없이 선택한 탭과 연관된 콘텐츠가 보이는 형식이다. 위 사진과 같은 모양을 많이 보았을 것이다. 각 탭의 제목이 있고 그 제목에 해당하는 내용들이 아래에 나오는 형식이다. 홈페이지를 만들다보면 굉장히 자주나오는 부분이고, 메뉴와 더불어 은근히 만들기 쉬우면서도 어렵다(?) 거기에 접근성까지 +가 된다면 더더욱 어려워지는 것들 중 하나다. 먼저 스스로 작성한 코드를 보자...

메뉴 / navigation / 내비게이션 메뉴는 콘텐츠를 분리하고 체계화시킨 후 이를 연결시켜서 방문자들이 웹사이트를 이용할 수 있도록 하는 체계이다. 홈페이지에서 제일 중요하고 은근히 어려운 메뉴 부분이다. 종류도 다양하다. 1단 메뉴 2단메뉴 전체 슬라이드 다운 메뉴 메가 메뉴 메뉴 자체의 종류도 있고, 배치가 어디되는지에 따라 좌측 메뉴 우측 메뉴 상단 메뉴로 나뉘고 이미지 메뉴 플래시 메뉴 텍스트 메뉴 정말 다양하고 그만큼 방법도 무궁무진하다. 이번에는 간단하지만(?) 은근히 어려운 메뉴바를 만들 것이며 처음으로 1단 메뉴바를 만든다. html 메일 카페 소프트웨어 지식백과 영화 html은 간단한 편이다. 전체를 감싸는 div를 선언하고 그 안에 ul / li로 메뉴를 작성하였다. 가끔 ul 안..

fixed 레이아웃 자주 쓰는 레이아웃이며 header가 고정이 되어 따라오는 형태를 띄는 레이아웃이다. 2가지 형태의 레이아웃을 실습한다. 1. 상단이 고정되어있고 컨텐츠 길이가 늘어나면 푸터도 밀려나는 형태 2. 상단 하단이 모두 고정되어있고 컨텐츠 길이가 늘어나면 스크롤이 생기는 형태 예제코드를 살펴보자 html / 1번,2번 공통사용 header content footer css / 1번 적용 , 2번 주석 풀기 @charset "utf-8"; /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1..

2단 레이아웃은 header 과 footer를 제외하고 content 부분에 우측 부분에 aside를 두어서 두개로 나누어진 레이아웃이다. 구현은 float를 사용하는 방법과 table / table-cell을 사용하는 방법 2가지가 있다. ====== float 사용 ====== html header content aside footer container이라는 section으로 하나로 묶어주고 그 안에 컨텐츠영역과 aside영역을 구분해 놓았다. css @charset "utf-8"; /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet..

* 이 글은 부스트코스 웹 UI제작에 있는 강의 내용을 토대로 정리/분석한 글입니다. 레이아웃 레이아웃은 책이나 신문, 잡지 등의 출판물에서 글이나 그림을 효과적으로 정리하고 배치하는 일을 뜻하는 출판용어 이와같이 웹사이트를 제작할때 메뉴, 컨텐츠, 부가정보 등과 같은 구성요소들을 필요한 곳에 위치하여 사용자가 효과적으로 웹사이트를 이용할 수 있게 배치하는 작업 종류 1. 1단 레이아웃 가장 기본이 되는 레이아웃 헤더/콘텐츠/푸터 영역이 직렬로 연결된 형태를 가지고 있다. 2. 다단 레이아웃 3. 고정 레이아웃 4. 그 외 다양한 레이아웃 1단 레이아웃 부터 실습해보자 . html 헤더 콘텐츠 푸터 전체를 감싸는 wrap 와 각 header , content, footer이 들어가는 공간을 만들었다. c..

http://jsfiddle.net/chunyong/5kd8nkyg/ 웹접근성에 맞는 탭메뉴 - JSFiddle - Code Playground jsfiddle.net 구글에서 검색가능한 위 접근성 메뉴를 참조하여 나름의 해석과 공부한 흔적입니다. 접근성 탭메뉴 제작시 도움이 될까 하여 공유합니다. 위 코드를 기반하여 만들었으며 뺄꺼빼고 넣을꺼 넣고 해석할거 해석하고 ! 해서 수정하였습니다. 감사합니다. JQuery 버전은 3.5.1 을 사용하였습니다. html 공지사항 › 이것은 첫 번째 탭의 공지사항 목록 입니다. 2010.12.24 › 공지사항 더보기 보도자료 › 이것은 두 번째 탭의 보도자료 목록 입니다. 2010.12.24 › 이것은 두 번째 탭의 보도자료 목록 입니다. 2010.12.24 › ..

Magnific Popup jquery 플러그인 중 사진 팝업을 쉽고 빠르고 유용하게 만들 수 있는 플러그인 입니다. 데모와 사용방법은 url 링크 해놓겠습니다. https://dimsemenov.com/plugins/magnific-popup/

전체코드를 첨부 파일로 넣어 두었다. 백그라운드 이미지를 사용하였으며, 그 이미지의 양이 방대하기 때문에 대체텍스트로는 한계가 있다. 이를 대응하기위해 전체 시멘틱태그에 맞게 html을 작성하고 그에 알맞게 css를 정의 하였다. a링크는 이미지에 대응하여야 되기 때문에 영역을 살려놓았다. * 부스트코스 UI 교육을 듣고 개인적으로 정리한 내용입니다.

IR 기법 Imgae Replacement (이미지 리플레이스먼트) 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것을 말한다. 웹접근성으로 이미지 태그에 alt 속성에는 대체텍스트를 입력 해 주어야 한다. 하지만, 배경 이미지로 처리한 의미 있는 아이콘, 로고 또는 대체 텍스트가 너무 긴 이벤트 페이지는 어떻게 처리해야 할까 ? 일단 작은 이미지를 많이 사용하는 것 보다는 스프라이트 이미지라고 해서 큰 이미지에 여러 버튼들을 정리해 두고, 그 버튼들을 포지션으로 불러오는 경우가 많고 그 때문에 백그라운드 이미지를 사용하는 경우가 많다. 예시 : https://s.pstatic.net/static/www/img/uit/2020/sp_main_b46ce0.png 네이버 기준으로 보면 백그라..