본문 바로가기

WEB/CSS8

[CSS/JavaScript] 반응형 웹 media query, matchMedia() css media query : 화면의 종류와 크기에 따라 디자인을 적용할 수 있는 반응형 디자인의 핵심 기술!! /*화면의 크기가 760px 이상일때 적용 할 스타일*/ @media (min-width: 760px) { .slideshow{ height: 550px; width: 380px; } } JavaScript matchMedia() : 자바스크립트에서 css의 media query같이 사용할수 있는 함수 matchMedia() 의 인수로 css의 media query문법이 들어감! //화면의 크기가 760px 이상일때 적용 할 코드 if (matchMedia("screen and (min-width: 760px)").matches) { } 참고 https://blog.outsider.ne.kr.. 2020. 9. 5.
[CSS] scrollBar style적용 /*스크롤바 전체*/ ul::-webkit-scrollbar{ width: 8px; } /*스크롤바 막대*/ ul::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #000000;/*검정*/ } /*스크롤바 여백*/ ul::-webkit-scrollbar-track { background-color: #00ff0000;/*투명*/ } 적용> 출처 : codingbroker.tistory.com/66 [HTML, CSS] 스크롤바 스타일(디자인)하는 방법 - webkit-scrollbar HTML의 스크롤바(scrollbar)를 디자인하는 방법에 대해 살펴보겠습니다. 스크롤바 스타일에 관한 웹표준은 존재하지 않습니다. 다만 wekbit 브라.. 2020. 9. 5.
[CSS] box-sizing width, height 속성은 엘리먼트의 크기를 지정한다. border, padding 값을 지정하면 width 값에 +가 되어 전체크기가 달라짐. 이때 box-sizing : border-box; 을 지정하면 width, height 값이 border와 padding값을 합쳐 계산됌! 적용 전> 200px (element width) + 20px + 20px (padding) + 5px + 5px (border) = 250px 적용후> element width = 200px (기준) - padding - border 20px + 20px (padding) + 5px + 5px (border) + 150px (element width) = 200px border+padding+element 값이 설정한.. 2020. 9. 3.
[CSS] reset.css reset.css : HTML 생성시 기본으로 설정 되어있는 CSS 스타일 속성을 초기화 시켜 주기위해 사용 /* reset.css */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, t.. 2020. 9. 2.
[CSS]텍스트에 줄 긋기 /* 밑 줄 */ text-decoration : underline; /* 윗 줄 */ text-decoration : overline; /* 가운데 줄 */ text-decoration : line-through; 2020. 9. 2.
[HTML/CSS]네이버 메인화면 무작정 따라 만들어보기(레이아웃잡기 연습) HTML / CSS header 검색창 nav container Section 광고 뉴스 뉴스스탠드 언론사 언론사 언론사 언론사 언론사 언론사 언론사 언론사 언론사 언론사 언론사 언론사 언론사 언론사 언론사 언론사 언론사 언론사 오늘 읽을만한 글 메뉴2 메인글 서브글 서브글 서브글 글 글 aside 로그인 로그인 버튼 증시, 환율, 이슈 광고 쇼핑 쇼핑컨텐츠 쇼핑몰 쇼핑 쇼핑 쇼핑 쇼핑 쇼핑 쇼핑 쇼핑 쇼핑 쇼핑 footer 이벤트 이벤트 이벤트 공지사항 회사정보 aside,div,footer,header,nav,section { border: 1px solid black; } #wrap { width: 80em; height: 120em; margin: 0 auto; } #wrap > div,foote.. 2020. 8. 17.

티스토리툴바