김철용 기록소

이미지 리스트 - 0 이미지 리스트 - 1 / 이미지 리스트 정렬 이미지 리스트 - 2 / 텍스트 말줄임 이미지 리스트 - 3 / 이미지 액자 효과 이미지 리스트 - 4 / 이미지 리스트 제작 어떤 상태에 따라(클래스의 존재 여부 등) 아이콘의 이미지가 변경되는 코드를 예제를 통해 알아보자. 첫째 둘째 셋째 .change { float: left; padding: 10px; text-align: center; } .change::after { display: block; width: 100px; height: 100px; content: ""; border: 1px solid gray; background-color: pink; } .up:after { background: url(https://i.na..

이미지 리스트 - 0 이미지 리스트 - 1 / 이미지 리스트 정렬 이미지 리스트 - 2 / 텍스트 말줄임 이미지 리스트 - 3 / 이미지 액자 효과 이미지 리스트를 만들기 위한 여러 예제들을 참고해서 간단한 이미지 리스트를 제작해본다. TOP100 8.21 오전 9시 ~ 오전 10시 기준 (재생수, 재생시간, 좋아요) 산악스키 오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이 산악스키 오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이 산악스키 오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이 국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개의 ..

이미지 리스트 - 0 이미지 리스트 - 1 / 이미지 리스트 정렬 이미지 리스트 - 2 / 텍스트 말줄임 위 이미지에서 썸네일의 외곽에 보이는 border와 dimmed된 배경이 이미지 액자 효과이다. 예제를 통해 이미지 액자 효과를 구현하는 방법을 알아본다. .img_wrap { position: relative; width: 200px; height: 134px; } .img_wrap::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; border: 1px solid rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.15); } .img_wrap { position..

이미지 리스트 - 0 이미지 리스트 - 1 / 이미지 리스트 정렬 위 이미지에서 빨간 네모 박스 안에 텍스트가 ...으로 표시되어 있는 것이 텍스트 말줄임이다. 예제를 통해 이 텍스트 말줄임을 어떻게 구현하는지 알아본다. 가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하 가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하 가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하 @charset "UTF-8"; p { width: 200px; background-color: yellow; font-size: 16px; line-height: 20px; } .elip1 { overflow: hidden; text-overflow: ell..

이미지 리스트 - 0 예제 코드를 통해 이미지 리스트를 정렬하는 방법을 알아본다. 90x90 90x90 90x90 48x48 48x48 48x48 48x48 48x48 48x48 48x48 48x48 48x48 48x48 @charset "UTF-8"; html, body, ol { margin: 0; padding: 0; } ol { list-style: none; font-size: 12px; line-height: 14px; text-align: center; } .main_wrap { background-color: silver; } .main_list { width: 300px; margin: 0 auto; padding: 20px 0; } .main_list li { float: left; w..

이미지 리스트는 이미지와 함께 압축된 정보를 제공하여 콘텐츠를 미리 보여주는 역할을 한다. 예시 네이버 영화(영화홈 영화 목록) 네이버 TV(영상 썸네일) 부스트코스의 강의 내용을 정리한 포스트입니다. https://www.boostcourse.org/web344 웹 UI 개발 부스트코스 무료 강의 www.boostcourse.org

본문 탭은 메인 영역 또는 aside 영역에서 많이 사용되고 있는 UI 요소 중 하나이다. 탭과 내비게이션은 서로 비슷하지만 차이가 있다. 사용자가 탭 또는 내비게이션 메뉴를 클릭했을 때 내비게이션의 경우 다른 페이지로 이동한다. 하지만 탭의 경우에는 선택한 메뉴와 연관된 콘텐츠가 페이지 이동 없이 나타나게 된다. 예시 네이버 웹툰(실시간 인기웹툰 부분) 네이버 호텔(인기호텔 부분) 실습 아래 조건에 맞는 탭을 제작. 3개의 탭 목록, 탭 패널 탭 목록의 간격은 모두 동일 선택된 탭 목록은 선택 시 볼드 처리 및 하단 라인 제거 탭 패널 박스 영역 최소 높이 적용 탭 패널 상단 라인 제거 탭 패널 콘텐츠 선택 시 볼드 처리 인기순 조회순 날짜순 인기순 콘텐츠 1. 서울~런던 30분 만에 도착…장거리 로켓..

메뉴 - 0 메뉴 - 1 / 1단 메뉴 본문 2단 메뉴는 메인 메뉴와 서브 메뉴로 구성되어 있다. 실습 아래 조건을 만족하는 2단 메뉴를 제작 메인, 서브 메뉴를 가지는 2단 가로 메뉴 메인, 서브 메뉴는 가로 중앙 정렬 처리 메인 선택 메뉴는 볼드, 컬러 변경 처리 서브 선택 메뉴는 볼드, 컬러 변경 처리, 하단 라인 추가 처리 웹툰 요일별 장르별 작가별 연도별 작품별 블로그 지식백과 건강백과 밀리터리 음식백과 동물백과 카페 /*menu2.css*/ @charset "UTF-8"; body { font-family: '나눔고딕', NanumGothic, Dotum, '돋움', sans-serif; } body, ul, ol, li, div, a { margin: 0; padding: 0; } ul, o..

메뉴 - 0 본문 1단 메뉴는 메뉴의 형태 중 가장 간단한 형태이다. 실습 아래 조건을 만족하는 1단 메뉴를 제작. 5개의 항목을 갖는 가로 메뉴 메뉴의 간격은 모두 동일 선택 메뉴는 볼드 처리 메뉴 활성화 시 배경색과 폰트 컬러 변경 메일 카페 소프트웨어 지식백과 영화 /*menu1.css*/ @charset "UTF-8"; body { font-family: '나눔고딕', NanumGothic, Dotum, '돋움', sans-serif; } body, ul, ol, li, div, a { margin: 0; padding: 0; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } nav { max-width: 700..