Record

부스트코스의 예제를 바탕으로 실습한 부분입니다. html LOGO gnb menu MENU1 MENU2 MENU3 MENU4 MENU5 MENU6 MENU7 MENU8 타이틀을 길게 써보도록 하겠습니다. 썸네일보다 길게 타이틀입니다. 타이틀입니다. 타이틀입니다. 타이틀입니다. 타이틀입니다. 타이틀입니다. 타이틀입니다. 타이틀입니다. 타이틀입니다. Copyright © NAVER Corp. All Rights Reserved. css @charset "UTF-8"; /* a 전체 데코레이션 삭제 */ a{ text-decoration: none; } /* float해제를 위한 overflow 선언 */ header{ overflow:hidden; background-color: pink; padding: ..

html 기본형 filename... 이미지형 css @charset "utf-8"; body{ padding: 50px; } h1{ margin: 50px 0 20px; font-size: 20px; font-weight: bold; } .file_form{ position: relative; display: inline-block; width: 250px; height: 38px; line-height: 38px; border: 1px solid limegreen; } .file_form::after{ content: '파일찾기'; position: absolute; right: 0; bottom: 0; width: 70px; height: 38px; line-height: 38px; text-ali..

html 체크 박스 이미지 체크 박스 체크박스 체크박스 라디오 체크 박스 선택1 선택2 선택3 css @charset "utf-8"; /* 움직이는 ON/OFF 버튼 */ .check_wrap{ margin: 100px; } .check_form, .check_form2, .radio_form{ margin: 20px; } .check_form input, .check_form2 input, .radio_form input{ position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; opacity: 0; } .check_form label::before{ content: ''; display: block; position: a..

구글에서 레이어팝업 키워드로 검색시 이미지 부분에 처음 나오는 레이어 팝업을 만들어보자. html So implement your design and place content here! If you want to close modal, please hit "Esc", click somewhere on the cereen or use special button. Avgrund on Github Twitter Dribbble CLOSE css @charset "utf-8"; /* 전체 컨텐츠 길이 */ .content{ height: 3000px; } /* 전체를 감싸고 있는 div에 fixed 부여 함으로 써 content의 길이가 길어져도 dimmed가 배경에 100% 깔릴 수 있게 함 */ .layer..

위와 같은 달력의 UI를 만들어보자. 실질적으로 작동하는 달력은 아니다. 하지만 접근성에 따라 제작하였고 FE나 퍼블리셔를 꿈꾸거나 공부하시는 분은 꾸미는 방법을 알아야하니 시작하자. 전체코드 html calendar 일 월 화 수 목 금 토 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 27 28 29 30 31 1 2 3 css .blind{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px 1px 1px 1px); /* IE6, IE7 */ clip:rect(1px, 1px..

기존에 작성하였던 썸네일 이미지 목록에서 순번과 상승 / 찜을 추가해보겠습니다. 완료 이미지는 아래와 같습니다 . 순번을 넣고 상승 / 하향 / 유지 / 찜목록 등을 추가하겠습니다. 기존 코드에서 추가하는 코드로 진행하였습니다. html TOP100 8.21 오전 9시 ~ 오전 10시 기준 (재생수, 재생시간, 좋아요) 산악스키 오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이 ♡ 99,999 산악스키 오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이 ♡ 99,999 산악스키 오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이 ♡ 99,999 99:99..

오늘 만들어 볼 이미지 목록 리스트. 은근히 이런 목록도 자주 쓰이는 마크업 중에 하나이다. 원래 만들 수 있었으나 두줄 말줄임은 오늘 처음 해본것이다. 구글 검색하면 두줄 / 세줄말줄임 모두 하는 방법이 나오니 잘 검색해보자 ! html TOP100 8.21 오전 9시 ~ 오전 10시 기준 (재생수, 재생시간, 좋아요) 산악스키 오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이 산악스키 오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이 산악스키 오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이 국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개..

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 안..