CSS6 미디어쿼리와 적용 방법 미디어 쿼리란? 미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술입니다. @media only all and (조건문) {실행문} - @media: 미디어 쿼리가 시작됨을 표시합니다. - only: 미디어 쿼리 구문을 해석하라는 명령어입니다.(생략가능) - all: 미디어 쿼리를 해석해야 할 대상을 나타냅니다. (생략가능) > all : 모든 미디어 유형에서 사용할 CSS를 정의합니다. > print : 인쇄 장치에서 사용할 CSS를 정의합니다. > screen : 컴퓨터 스크린에서 사용할 CSS를 정의합니다. > aural : 화면을 읽어 소리로 출력해주는 장치에서 CSS를 정의합니다. > tv : TV에서 사용할 CSS를 정의합니다. > handheld : 손.. 2019. 12. 28. 레이어 팝업과 윈도우 팝업 만드는 html과 css 그리고 스크립트 레이어 팝업과 윈도우 팝업을 만들어 봅니다. html 닫기 CSS /* 레이어 팝업 */ #layer {display: none; position: fixed; left: 50px; top: 50px; width: 700px; border: 10px solid #dceff7; box-shadow: 3px 3px 10px rgba(0,0,0,0.4);} #layer img {width: 100%; display: block;} #layer .close {position: absolute; right: 20px; top: 20px; background: #0093bd; padding: 1px 6px; color: #fff;} #layer .close:hover {text-decoration: underlin.. 2019. 12. 27. [사이트 추천] 제이쿼리로 배너를 만들고 싶을 땐? Slick! 슬릭(slick)이라는 사이트를 이용하여 손 쉽게 배너를 만들 수 있습니다. https://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io 위의 사이트로 들어갑니다. get it now 버튼을 클릭하여 css파일과 js 파일을 다운로드 합니다. 이를 html 파일에 연동 시킨 후 slick 에서 요구하는 방식대로 Markup을 진행합니다. 그리고 스크립트를.. 2019. 12. 25. HTML 과 CSS로 이미지를 표현하는 방법(Img/Background/이미지 스프라이트 기법) 다음의 세 가지 방법으로 이미지를 표현 할 수 있습니다. Img 태그 - 이미지의 의미가 있을 때 Img 태그를 사용합니다. - Alt 태그를 이용해서 대체 문자를 적어야 합니다. Background 속성 - 이미지가 의미가 없을 때 background 속성을 사용합니다. - 의미가 없기 때문에 대체 문자를 적을 필요가 없습니다. - background: url(이미지 주소) center top repeat-x; - background: url(이미지 주소) no-repeat 9px(가로) 8px(세로); 이미지 스프라이트 기법(Image Sprite) - 여러 개의 이미지를 하나의 이미지로 합쳐서 관리합니다. - 위 기법을 사용하면 이미지 관리가 용이하며 웹페이지의 로딩 시간 및 용량을 줄일 수 있습니.. 2019. 12. 15. 엔티티 코드(Entity Code)의 사용 이유와 종류 정리(사이트 추천) 엔티티 코드(Entity Code)란? 엔티티 코드란 Html 문서에서 특수 문자를 입력하기 위해 사용하는 코드 입니다. 요즘은 UTF-8을 주로 이용하기 때문에 특수문자가 깨지지 않지만 W3C는 엔티티 코드가 아닌 특수 문자는 오류로 인식하기 때문에 특수 문자는 엔티티 코드로 작성하는 것이 좋습니다. 사용 빈도수가 높은 엔티티 코드 정리 엔티티 코드 문자식 표현(Entity Code) 숫자식 표현(Entity Number) > › © © © " " " & & & (공백) 엔티티 코드(Entity Code) 참고 사이트 https://entitycode.com/ Entity Code - A Clear and Quick Reference to HTML Entities Codes About EntityCod.. 2019. 12. 14. 마진(Margin)과 패딩(Padding)의 차이와 입력 방법 마진(Margin)과 패딩(Padding)의 차이 - 마진(Margin)은 보더값을 기준으로 컨텐츠의 바깥쪽에 위치한 여백을 의미합니다. - 패딩(Padding)은 컨텐츠 안쪽의 여백을 의미합니다. 자세한 내용은 아래 사진을 보면 쉽게 이해가 가능합니다. 마진(Margin)과 패딩(Padding)의 입력 방법 마진 혹은 패딩을 입력 방법에 대해 알아 보겠습니다. 기본적으로 입력 방법은 '위 -> 오른쪽 -> 아래 -> 왼쪽' 이렇게 시계 방향 순서라고 생각하시면 됩니다. 4개 값 입력 시 - 위 -> 오른쪽 -> 아래 -> 왼쪽 3개 값 입력 시 - 위 -> 오른쪽/왼쪽 -> 아래 2개 값 입력 시 - 위/아래 -> 오른쪽/왼쪽 1개 값 입력 시 - 위/아래/오른쪽/왼쪽 모두 동일한 마진 혹은 패딩값 자.. 2019. 12. 13. 이전 1 다음
