Publishing 78

이미지 해상도 분기대응

해상도에 맞춰 이미지를 분기대응해야 한다. 이미지를 1배, 2배, 3배로 이미지 제작 후 아래와 같이 코딩합니다. /* 1배 이미지 분기대응 */ .img_g {display:inline-block;overflow:hidden;background:url(http://m1.daumcdn.net/svc/image/U03/common_icon/527B1A970370F60001) no-repeat 0 0;text-indent:-9999px} /* 2배 이미지 분기대응 */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .img_g {background-image:url(..

Publishing/CSS3 2020.10.05

사이트 기본 setting

setting 사이트 보기 flato.kr/study/!setting/ 아래 라이브러리 적용 scss swiper line-awesome bootstrap google font scrollUp include 오류 : header를 include 하면 focus가 안먹음... ㅜㅜ 추후 해결... setting 파일 다운로드 github.com/eehd80/setting eehd80/setting Contribute to eehd80/setting development by creating an account on GitHub. github.com html5 기본 레이아웃 주메뉴 바로가기 본문 바로가기 회사이름 하나 하나-1 하나-2 하나-3 하나-4 둘둘둘둘둘 둘-1 둘-2 둘-3 둘-4 셋셋셋 셋셋셋-..

Publishing/HTML 2020.08.11

Image Guide

이미지 스프라이트 운영성 이미지 성격이 아닌 아이콘 또는 장식을 위한 이미지 요소들은 스프라이트 기법을 활용하여 파일의 Size, Request 최소화를 도모한다. 이미지 타입 선택 프로젝트 종류에 따른 이미지 타입표종류PC webMobile WebMobile AppGIFJPGPNG-8PNG-24이미지 스프라이트 AppGIFJPGPNG-8PNG-24이미지 스프라이트 종류 PC web Mobile Web Mobile App GIF 기본 사용 가능 X JPG 컬러수 많거나 운영성 이미지일 때 운영성 이미지일 때 X PNG-8 X 기본 반투명효과 없고 컬러가 적을 때 PNG-24 반투명효과가 있을 때에만 사용 컬러 수 많거나 반투명효과가 있을 때 기본 이미지 스프라이트 O O X PC Web 기본 포맷은 GI..

Publishing/CSS3 2020.08.05

Event Page 코딩하기

https://www.melon.com/event/ticket/index.htm?gubunId=&keyword=&pageIndex=0 멜론과 멜론티켓의 꿀케미 혜택! 멜론 GOLD이상 누구나! 멜론티켓 예매수수료 무료! 음악이 필요한 순간, 멜론 www.melon.com 멜론 VIP 혜택관 오직 멜론 VIP만을 위한 특별한 문화 혜택 Melon x Melon 티켓 MVG 멜론과 멜론티켓의 슈퍼꿀케미파워! 멜론 GOLD 이상, 누구나! 예매 횟수 제한없이, 무제한! 정말 쉬운 방법으로, 간편하게! 멜론 티켓 수수료 무료 0원 정말 쉬운 헤택받는 방법! 보고 싶은 공연을 클릭하면 결제 시 자동으로 수수료 무료 혜택 제공! Tip 아래에서 꿀잼공연 추천해드릴게요~ 뮤지컬 〈모차르트!〉 10주년 기념공연 202..

Publishing/HTML 2020.08.04

SASS 기본

sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com 중첩 HTML 을 작성할 때 분명히 중첩되고 시각적인 계층 구조가 있음을 알게 될 것입니다. 반면에 CSS 는 그렇지 않습니다. Sass를 사용하면 HTML 의 동일한 시각적 계층 구조를 따르는 방식으로 CSS 선택기 를 중첩시킬 수 있습니다 . 지나치게 중첩 된 규칙은 유지하기 어려울 수 있고 일반적으로 나쁜 관행으로 간주 될 수있는 CSS 를 초과하게됩니다 . 이를 염두에두고 다음은 사이트 탐색을위..

Publishing/CSS3 2020.03.30

SASS(SCSS) 컴파일 하는 방법

sass는 css 코딩을 쉽게 할 수 있도록 도와줍니다. sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com SASS(SCSS)를 컴파일하기 위해선 node-sass를 설치해야 하고 node-sass를 설치하려면 node.js가 필요합니다. 아래 순서로 설치해주세요~ 1. node.js 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaSc..

Publishing/CSS3 2020.03.18

CSS 3D Transforms

3D Transforms CSS는 3D 변환도 지원합니다. 아래 요소 위로 마우스를 이동하여 2D와 3D 변환의 차이점을 확인하십시오. 2D 회전 3D 회전 CSS 3D 변환 방법 CSS transform속성을 사용하면 다음 3D 변형 방법을 사용할 수 있습니다. rotateX() rotateY() rotateZ() rotateX () 메서드 이 rotateX()방법은 주어진 각도에서 X 축을 중심으로 요소를 회전시킵니다. #myDiv { transform: rotateX(150deg); } rotateY () 메서드 이 rotateY()방법은 주어진 각도에서 Y 축을 중심으로 요소를 회전시킵니다. #myDiv { transform: rotateY(130deg); } rotateZ () 메서드 이 rot..

Publishing/CSS3 2020.02.26
티스토리 친구하기