개인 공부용 블로그

스타일 정보 메인/서브 리스트 - 랭크 상승: 15px/#f82850, 랭크 하락: 15px/#1996ff, 랭크 유지: (텍스트 미노출) 메인 리스트 - 순위 폰트: 40px/#fff, 좋아요 폰트: 14px/#fff 서브 리스트 - 순위 폰트: 22px/#3c3c3c, 좋아요 폰트: 14px/#3c3c3c 서브 리스트 - 재생시간 폰트: 11px/#fff, 재생시간 배경색: #000(투명도 70%) 세부디자인 메인, 서브 리스트: 순위, 좋아요, 아이콘 추가 서브리스트: 마우스 오버시 나중에 보기 아이콘 노출 상단 이미지 디자인하기 1. 웹접근성 향상을 위한 .hidden처리 2. infor_wrap으로 묶은 뒤 .infor의 동위관계로 .rank로 랭킹과 순위 표시 HTML 랭킹1 위 상승3 산악스..

만들어볼 최종 실습 이미지 메인이미지 삽입 HTML TOP100 8.21 오전 9시 ~ 오전 10시 기준(재생수, 재생시간, 좋아요) 이미지에 약간 어두운 액자효과 넣기 상위 부모에 position으로 위치를 잡고 :after를 통한 효과 넣기 content: '';을 넣어 빈공간을 만들어주어야 한다. CSS .img_box { position: relative; } .main_list .img_box:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ''; background-color: rgba(0,0,0,0.2); border: 1px solid rgba(0,0,0,0.05); } 이미지 위에 글씨 삽입 이미지 안에..

Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis animi quae corrupti recusandae, veniam ratione error. Distinctio maiores placeat quae neque, reprehenderit est fuga corrupti autem ipsam aliquam adipisci nemo! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et assumenda accusantium praesentium consequuntur totam recusandae, suscipit, nam, cumque perferendis tenetur sed v..

스타일 정보 메인/서브 리스트 - 전체 가로 너비: 1000px 메인 리스트 - 메인 이미지: 322x215, 배경색: #ececec, 외곽선: 1px/solid/#000(투명도 5%) 메인 리스트 - 카테고리 폰트: 14px/#fff, 제목 폰트: 18px/#fff 서브 리스트 - 서브 이미지: 188x141, 외곽선: 1px/solid/#000(투명도 3%) 서브 리스트 - 카테고리 폰트: 12px/#7ba7df, 제목 폰트: 15px/#090909 90*90 90*90 90*90 48*48 48*48 48*48 48*48 48*48 48*48 48*48 48*48 48*48 48*48 @charset "UTF-8"; html, body, ol { margin: 0; padding: 0; list-s..

스타일 정보 탭목록 높이: 50px 폰트: 16px / #999, 라인: 1px / #eee (오버/활성화 시) 폰트: 16px / bold / #000 탭패널 높이(min): 350px, 라인: 1px / #eee 탭패널 콘텐츠 폰트: 14px / #333 (1줄 말줄임) (오버시) 폰트: 14px / bold 인기순 조회순 날짜순 CSS를 통해 버튼을 꾸며준다. @charset "UTF-8"; /* 기본 스타일 */ body { font-family: '나눔고딕', NanumGothic, Dotum, '돋움', sans-serif; font-size: 14px; line-height: 16px; } body, ul, ol, li, div, a, button { margin:0; padding:0; }..

레이아웃 : 책, 신문, 잡지 등의 출판물에서 글, 그림을 효과적으로 정리하고 배치하는 일을 뜻하는 출판용어 웹사이트 제작시 메뉴, 컨텐츠, 부가정보 등과 같은 구성요소들을 필요한 곳에 위치하여 사용자가 효과적으로 웹사이트를 이용할 수 있게 배치하는 작업을 일컫는다. 레이아웃의 종류 1단 레이아웃 상단 고정 레이아웃 상,하단 고정 레이아웃 2단 레이아웃 3단 레이아웃 다단 레이아웃 1단 레이아웃 레이아웃 종류 중 가장 기본이 되는 레이아웃, 단순하고 쉽다. 하나의 행으로 이루어진 레이아웃 형태 상단, 중단, 하단으로 구성되어 있는 것이 일반적이다. 다단레이아웃 콘텐츠 영역이 2개 또는 그 이상의 행으로 나눠진 레이아웃을 행의 갯수에 따라 2단 레이아웃, 3단 레이아웃으로 부른다. 📌float을 이용한 2..