공부/웹 UI 개발
웹 - 0 아래 조건을 만족하는 레이어 팝업과 딤드 배경을 제작한다. 팝업 내의 텍스트가 길어지면 팝업 창이 세로로 길어지도록 처리 버튼은 하단 고정 팝업창 너비 : 300px 팝업창 높이 : 최소 200px 텍스트 여백 : 50px 30px 30px 버튼 높이: 50px, 하단 고정 딤드 배경 : #000, 투명도 30% 팝업 타이틀 팝업 텍스트 영역 예 아니오 @charset "UTF_8"; .popup { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .popup_layer { position: relative; width: 300px; min-height: 150px; padding-bottom: 50px; background-color: #..
팝업은 특정 영역의 위치에 특정 사이즈의 레이어(창)를 특정 시점에 노출하는 것을 의미한다. 팝업에는 크게 Popup, Modal, Alert 세가지 종류로 나뉜다. 각각 새창(일반 팝업), 레이어 팝업, 알림(시스템 팝업)을 뜻한다. 일반 팝업과 레이어 팝업은 아래와 같은 차이가 있다. 일반 팝업 레이어 팝업 보여주는 방식 새창 열기 숨겨져있던 마크업 요소 보여주기 파일 새로운 html, css 동일한 html, css 진입 방법 a 태그 (팝업이 고유의 주소를 지님) button 태그 (현재 페이지의 일부) 팝업 위치 window 기준 viewport 기준 노출 여부 브라우저 옵션으로 노출을 막을 수 있음 스크립트 로딩만 가능하다면 노출 디자인적인 통일성과 사용자에게 노출 될 확률이 높다는 이유로 요..
표 - 0 표 - 1 / 표 접근성 표 - 2 / 표와 position 표 - 3 / 표의 border 속성 앞서 설명한 표의 특성을 잘 이해하고 테이블 태그로 만드는 가장 대표적인 UI인 달력을 만들어 보자. 이번 달이 아닌 날에는 dimmed 처리 한다. 기념일은 다른 색으로 표현한다. 휴일은 빨간 색으로 표현한다. 음력 1일과 15일은 우측 상단에 dimmed 처리해서 나타낸다. 오늘에 해당하는 날짜에는 border를 다른 색으로 처리하고 background 컬러도 다른 색으로 처리한다. 달력 일 월 화 수 목 금 토 30 1 국군의 날 2 3 개천절 4 5 6 7 8 9 한글날 음 9.1 10 오늘 11 12 13 14 15 16 17 18 19 20 21 22 23 음 9.15 24 25 26 ..
표 - 0 표 - 1 / 표 접근성 표 - 2 / 표와 position 테이블 렌더링이 되는 방식과 테이블 레이어를 확인하고 원하는 디자인대로 표를 꾸밀 수 있도록 한다. 테이블 렌더링 thead, tbody, tfoot로 이루어진 테이블과 셀의 border 컬러를 상하좌우 모두 다르게 설정해서 "border-collapse: separate;" 속성과 "border-collapse: collapse" 속성을 비교해보자. - border-collapse: separate 테이블 요소의 선이 모두 잘 보이는 것을 확인할 수 있다. separate의 경우 table, thead, tfoot, tbody 순으로 렌더링된다. - border-collapse: collapse table 태그에 적용된 검은색 선과..
표 - 0 표 - 1 / 표 접근성 테이블은 브라우저마다 렌더링하는 방식이 모두 다르기 때문에 크로스브라우징이 어려운 태그 중 하나이다. 아래의 코드는 table, tr, td 각 요소에 "position: relative;"를 적용할 경우, 셀 안의 "position: absolute;"인 요소가 어디에 위치하게 되는지 확인해본 것이다. td에 relative tr에 relative table에 relative div에 relative table { border: 1px solid #000; table-layout: fixed; width: 100%; height: 150px; border-collapse: collapse; } .td_relative { border-color: red; } .tr_r..
표 - 0 테이블 태그 역시 스크린리더가 올바르게 읽을 수 있도록 th, td에 속성을 추가해 주어야 한다. scope 모든 제목 셀(th)에는 scope 속성을 추가해서 어떤 내용 셀(td)에 대한 것인지 알려주어야 한다. scope의 값으로는 "col, row, colgroup, rowgroup"을 사용할 수 있는데, 같은 열의 제목에는 col을, 같은 행의 제목에는 row 값을 추가하면 된다. - th scope = "col / row" Delivery slots: Monday Tuesday Wednesday Thursday Friday 09:00 - 11:00 Closed Open Open Closed Closed 11:00 - 13:00 Open Open Closed Closed Closed 제..
표를 만들때는 보통 테이블 태그를 사용한다. 다른 태그들 보다 사용하는 방법이 조금 복잡하고, 테이블 태그만의 고유 속성과 렌더링 방식 때문에 크로스 브라우징이 까다로운 편이다. 레이아웃의 구성이 테이블 태그로 표현할 수 있다 해도 레이아웃을 테이블 태그를 사용해서 구현하면 안된다. 그리고 표로 만들어진 UI라도 리스트 태그와 같이 다른 태그로 표현 가능하면 굳이 테이블 태그를 사용하지 않아도 된다. 테이블 태그로 표를 표현한 예시 사이트 네이버 스포츠(순위, 팀 경기수 등을 표로 나타냄) 부스트코스의 강의 내용을 정리한 포스트입니다. https://www.boostcourse.org/web344 웹 UI 개발 부스트코스 무료 강의 www.boostcourse.org
이미지 리스트 - 0 이미지 리스트 - 1 / 이미지 리스트 정렬 이미지 리스트 - 2 / 텍스트 말줄임 이미지 리스트 - 3 / 이미지 액자 효과 이미지 리스트 - 4 / 이미지 리스트 제작 이미지 리스트 - 5 / 아이콘 상태 변경 이미지 리스트 - 6 / 마우스 오버 시 버튼 노출 아이콘 상태 변경, 마우스 오버 시 버튼 노출 예제를 활용해서 제작한 이미지 리스트에 추가 기능을 넣어본다. 추가할 기능은 아래 이미지와 같다. TOP100 8.21 오전 9시 ~ 오전 10시 기준 (재생수, 재생시간, 좋아요) 랭킹1 3위 상승 산악스키 오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이 좋아요99,999 랭킹2 3위 하락 산악스키 오스트리아 최대의 산악..
이미지 리스트 - 0 이미지 리스트 - 1 / 이미지 리스트 정렬 이미지 리스트 - 2 / 텍스트 말줄임 이미지 리스트 - 3 / 이미지 액자 효과 이미지 리스트 - 4 / 이미지 리스트 제작 이미지 리스트 - 5 / 아이콘 상태 변경 이미지에 마우스를 올려 놓을 때 특정 버튼이 노출되는 동작을 구현하는 방법을 예제를 통해 알아본다. 99 x 99 x .box { position: relative; width: 100px; height: 100px; } .box + .box { margin-top: 30px; } .img_link { position: relative; display: inline-block; width: 100px; height: 100px; } .alert { position: abs..
