본문 바로가기

Publishing62

css2sass css2sass.herokuapp.com/ 2020. 11. 25.
체크리스트 웹표준관련 업무수행시 체크해야하는 확인 사항들로 내부체크리스트와 외주 대행업무 전달시 함께 지켜져야 하는 CP가이드의 체크리스트가 통합적으로 정리되어 있습니다. 체크리스트 표 항목 CP 내부 확인 비고 웹표준 (필수) HTML validator 통과했는가? O O (필수) CSS validator 통과했는가? O O 코딩컨벤션 (필수) Cross Browsing 되는가? Web(Window) IE11 O O IE10 O O IE9 O O IE8 O O FF/Chrome/Safari/Opera (최신) O O Web(Mac) FF/Chrome/Safari/Opera (최신) O O Mobile(Android) Android 4.1 O O Android 4.3 O O Android 4.2 O O Androi.. 2020. 11. 11.
Image Guide 이미지 타입 선택 프로젝트 종류에 따른 이미지 타입표 종류 PC web Mobile web Mobile App GIF 기본 사용 가능 X JPG 컬러수 많거나 운영성 이미지일 때 운영성 이미지일 때 X PNG-8 X 기본 반투명효과 없고 컬러가 적을 때 PNG-24 반투명효과가 있을 때에만 사용 컬러 수 많거나 반투명효과가 있을 때 기본 이미지 스프라이트 O O X PC Web 기본 포맷은 GIF를 사용한다. JPG는 인물이나 실사 이미지와 같이, 색 변화 및 그라데이션이 풍부한 경우 및 운영성 이미지에 주로 사용한다. JPG로 저장 시 압축률 관리 - 일반 저장 시(File->Save) : 압축률 10/12 이상으로 저장할 것. - Save for web 기준 : Original 혹은 JPG Quali.. 2020. 11. 11.
Naming Guide 다양하고 많은 사람이 개발에 참여할 때 작업 효율화를 위해 가장 중요한 것 중의 하나가 바로, 사전에 약속한 규칙에 따라 이름을 정하는 것입니다. 본 Naming Guide는 크게 "Naming 규칙"과 "Prefix/Subfix/Suffix 정의" 두 부분으로 나뉩니다. 먼저 Naming 규칙에서는 CSS와 HTML 및 각종 파일, 디렉토리들의 공통된 네이밍 규칙에 대해 정리합니다. 그리고 Prefix/Subfix/Suffix 규칙에서는 다양한 개발환경에 대비한 예약단축어들을 소개하며 이를 조합하는 방식에 대해 설명합니다. prefix/subfix/suffix 정의 후보자 접두사를 의미하는 것으로, 앞부분에 사용하며, 주로 형태를 나타내는 데 사용된다. ex) tab_notice, tbl_product.. 2020. 11. 11.
IR 기법 IR 기법은 이미지 대체텍스트 제공을 위한 CSS 기법으로 다양한 CSS 기법을 사용하여 이미지 대체텍스트를 제공할 수가 있으며, 이 중에 널리 알려진 기법들을 소개하고자 한다. Daum은 이러한 여러 가지 기법 중에서 Phark Method와WA IR 기법을 주로 사용하여 대체텍스트를 제공해주고 있다. Phark Method (권장) 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로(-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법 CSS button {display:block;width:49px;height:36px;margin:0;padding:0;border:none;background:url(btn_search.gif) no-repe.. 2020. 11. 11.
CSS Convention CSS 가이드 CSS 데이터를 로딩할 경우 @import 방식은 사용하지 않는다. (일부 브라우저에서 이미지 로딩 후 적용되기 때문에) external방식에서는 charset 표기한다. @charset "utf-8" CSS 데이터는 섹션의 경우 head 상단에 공통부분(common.css)과 콘텐츠부분(해당서비스.css)으로, 간단한 콘텐츠의 경우 하나의 css 파일로 로딩될 수 있도록 권장한다. z-index 값 적용 가이드 z-index 수치 간격은 10단위로 적용 스니펫에서는 z-index를 기본값(10)으로 지정하고, 해당 서비스마다 z-index를 재정의해서 사용 페이지 단위에서 1000을 넘는 경우는 발생하지 않음 팝업레이어의 경우는 1000부터 시작 전사공통인 서제스트인 경우는 9999로 유.. 2020. 11. 11.
HTML Elements 전역 구조화 Element class Attribute 사용은 하지 않는다.XHTML dtd 사용시에는 다음과 같이 XML namespace 및 lang attribute를 선언해준다 meta, title, link, style, script 순으로 Element 를 선언한다 문서의 기본 인코딩 및 뷰포트 등을 선언한다. (뷰포트는 모바일 서비스의 경우에만 선언)현재 페이지의 제목을 선언한다.rel, type, href 순서로 attribute를 선언한다 하위에 선언이 되는 CSS는 Element보다 1depth 들여쓴다 body Element에는 다른 attribute를 사용하지 않는 것을 원칙으로 한다. 제목, 문단, 구분선 Element Heading 의미 : HTML 구조상 문서 내부의 컨텐츠 제.. 2020. 11. 11.
HTML Grammar 일반 (X)HTML/CSS/SCRIPT 분리 문서의 내용과 디자인과 행동을 분리한다. 분리하는 목적은 CSS와 javascript 없이도 문서를 이용할 수 있게 하는데 있다. 정확한 문서 구조 준수 문서의 기본 구조는 다음과 같이 해당페이지의 기본정보를 포함하는 head와 본문을 포함하는 body를 갖는다. (해당 페이지 본문) HTML5 ... DTD 및 인코딩DTD란? 브라우저에게 웹페이지의 문서종류를 알려주는 선언문으로, 해당 문서의 최상단에 선언한다. DTD는 브라우저가 올바른 화면표시(Rendering)를 하기 위해 반드시 필요하다. DTD를 사용하면 브라우저들의 렌더링을 표준에 맞춰 렌더링을 하게끔 하기 때문에 다양한 환경에서 상호 운용성을 보장할 수 있다. DTD 기본 형식 블록요소, 인라인.. 2020. 11. 11.
HTML Convention DOCTYPE 문서타입에 (X)HTML의 버전과 문서형을 지정하는데, 다양한 플랫폼 지원을 위해 XHTML 1.0 , 하위 브라우져 호환성을 위해 Transitional 모드를 권장하고 있다. (Transition 모드를 사용하더라도, 웹표준 준수율의 향상을 위해 가급적 Strict 모드의 문법을 사용하는 것을 권장함) 시스템 식별자를 명시하여 Standards 모드 방식으로 지원해야 하나 예외적으로 메일, 개별카페, 개별블로그 등의 UCC영역에 해당하는 서비스는 과거 비표준 태그 허용을 위해 Quirks 모드로 지원할 수 있다. HTML5 권장 XHTML HTML 일반 문서 제목 각 페이지마다 서로 다른 규칙으로 사용중인 문서 제목 ( 태그) 규칙을 일원화함으로써, 서비스 통일성을 높이고 사내 검색 엔.. 2020. 11. 11.
dd DOCTYPE html> flex : css ul { background: lightpink; } li { display: block; width: 100px;height: 100px; margin: 10px; text-align: center; line-height: 100px; background: #fff; } flex .flex-1 { display: flex; } 1 2 3 .flex-2 { display: flex; flex-direction: column; } 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3.. 2020. 10. 20.
웹폰트 만들기 m.blog.naver.com/PostView.nhn?blogId=designondo&logNo=220915027585&proxyReferer=https:%2F%2Fwww.google.com%2F CSS web font 웹폰트 ttf, eot, woff 만들고 설치 사용하기 시작하기 전 알아두기!CSS3의 @font-face는, CSS2에서 부터 존재해 온 규칙이 있다고 합니다. 우리가... blog.naver.com 시작하기 전 알아두기! CSS3의 @font-face는, CSS2에서 부터 존재해 온 규칙이 있다고 합니다. 우리가 흔히 웹폰트라 부르는 Embedded Open Type(.eot)포맷의 라이센스로 인해 해당 포맷을 지원하는 유일한 웹브라우저인 인터넷 익스플로러에서만 사용했습니다. 그러나,.. 2020. 10. 8.
이미지 해상도 분기대응 해상도에 맞춰 이미지를 분기대응해야 한다. 이미지를 1배, 2배, 3배로 이미지 제작 후 아래와 같이 코딩합니다. /* 1배 이미지 분기대응 */ .img_g {display:inline-block;overflow:hidden;background:url(https://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(.. 2020. 10. 5.
사이트 기본 setting html5 기본 레이아웃 주메뉴 바로가기 본문 바로가기 로그인 바로가기 회사이름 하나 하나-1 하나-2 하나-3 하나-4 둘둘둘둘둘 둘-1 둘-2 둘-3 둘-4 셋셋셋 셋셋셋-1 셋셋셋-2 셋셋셋-3 셋셋셋-4 넷넷넷 넷넷넷-1 넷넷넷-2 넷넷넷-3 넷넷넷-4 넷넷넷-5 넷넷넷-6 넷넷넷-7 다섯 다섯-1 다섯-2 타이틀 회사로고 공통 스타일시트 크로스브라우징을 위해 각 태그관련 속성을 초기화 시켜주는 CSS로 PC와 Mobile에서의 환경을 고려하여 각각 reset.css를 정의하고 있다. 각 서비스 개편시 해당 reset.css를 활용하여 초기화시켜준다. 그리고 기능적으로 공통적으로 사용되는 속성은 global 클래스네임을 정의하여 선택적으로 사용한다. 1. 아래 주소에서 reset.css를 다운 받.. 2020. 8. 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.. 2020. 8. 5.
Naming Guide prefix/subfix/suffix 정의후보자 접두사를 의미하는 것으로, 앞부분에 사용하며, 주로 형태를 나타내는 데 사용된다. ex) tab_notice, tbl_product 등 기본 프리픽스는 형태별로 통일한다. 서브 프리픽스가 필요한 부분은 underscore로 구분하여 표기한다 (line / line_dot) 프리픽스 리스트에 한해 subfix, suffix에서 축약형 네이밍 사용한다 (이외 네이밍은 의미전달 가능하도록 기재) - prefix 2개 이상 중복 시 기능적인 prefix가 맨 앞부분에 위치할 수 있도록 한다. - 단독사용 클래스는 지양하며 prefix를 조합한 형태로 작성한다. 예외:fst, lst, hide, onon 클래스인 경우, 단일 특정요소에 상태변화 클래스를 적용한다면 .. 2020. 8. 5.
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.. 2020. 8. 4.
회원가입 폼 http://flato.kr/work/2000n/s503_write.html 이천시동행누리센터 동서양의 아름다운 정원을 품은 이천시동행누리센터으로 여러분을 초대합니다. flato.kr 2020. 7. 24.
input password에 텍스트가 보이지 않을 경우 input[type=password] { font-family: 'Malgun Gothic'; } 2020. 4. 19.
미디어쿼리 @media screen and (min-width:1280px) and (max-width:1599px) { } @media screen and (min-width:1024px) and (max-width:1279px) { } @media screen and (min-width:780px) and (max-width:1023px) { } @media screen and (min-width:640px) and (max-width:779px) { } @media screen and (min-width:480px) and (max-width:639px) { } @media screen and (max-width:479px){ } 2020. 4. 10.
유용한 css js 라이브러리 WAW.js https://wowjs.uk/ wow.js — Reveal Animations When Scrolling wowjs.uk CSS3Animate https://jackonthe.net/css3animateit/ CSS3 Animate It Examples - Animate Elements on Scroll Sequencing If you want to have a set of animations start one after the other then you can set a sequence time in ms using "data-sequence" then define the order with "data-id". It Works! This animation will start 500ms a.. 2020. 3. 31.
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 를 초과하게됩니다 . 이를 염두에두고 다음은 사이트 탐색을위.. 2020. 3. 30.
SASS(SCSS) 컴파일 하는 방법 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 JavaScript engine. nodejs.org 안정적, 신뢰도.. 2020. 3. 18.
CSS Transitions CSS 전환을 사용하면 지정된 기간 동안 속성 값을 부드럽게 변경할 수 있습니다. CSS 전환 효과를 보려면 아래 요소 위로 마우스를 이동하십시오. CSS 이 장에서는 다음과 같은 속성에 대해 설명합니다. transition transition-delay transition-duration transition-property transition-timing-function 2020. 2. 28.
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.. 2020. 2. 26.
CSS 2D Transforms Transforms CSS 변환을 사용하면 요소를 이동, 회전, 크기 조절 및 기울일 수 있습니다. 2D 회전 브라우저 지원 표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다. 브라우저 별 접두사 일부 구형 브라우저 (IE 9)는 2D 변환 속성을 이해하기 위해 특정 접두사 (-ms-)가 필요합니다. div { -ms-transform: rotate(20deg); /* IE 9 */ transform: rotate(20deg); /* Standard syntax */ } CSS 2D 변환 방법 CSS transform속성을 사용하면 다음과 같은 2D 변형 방법을 사용할 수 있습니다. translate() rotate() scaleX() scaleY() scale() skewX() s.. 2020. 2. 26.
CSS Layout - Overflow CSS overflow속성은 너무 커서 영역에 맞지 않는 내용의 내용을 제어합니다. #overflowTest { background: #4CAF50; color: white; padding: 15px; width: 50%; height: 100px; overflow: scroll; border: 1px solid #ccc; } This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed d.. 2020. 2. 25.
CSS Box Model div { width: 300px; border: 15px solid green; padding: 50px; margin: 20px; } 모든 HTML 요소는 상자로 간주 될 수 있습니다. CSS에서 "상자 모델"이라는 용어는 디자인과 레이아웃에 대해 이야기 할 때 사용됩니다. CSS 상자 모델은 본질적으로 모든 HTML 요소를 둘러싸는 상자입니다. 여백, 테두리, 패딩 및 실제 내용으로 구성됩니다. 아래 이미지는 박스 모델을 보여줍니다. 요소의 너비와 높이 모든 브라우저에서 요소의 너비와 높이를 올바르게 설정하려면 상자 모델의 작동 방식을 알아야합니다. 중요 사항 : CSS를 사용하여 요소의 너비 및 높이 특성을 설정하는 경우 컨텐츠 영역 의 너비 및 높이 만 설정하면 됩니다. 요소의 전체 크기를 계산.. 2020. 2. 25.
CSS Padding CSS Padding padding속성은 정의 된 테두리 내에서 요소 내용 주위에 공간을 생성하는 데 사용됩니다. padding-top padding-right padding-bottom padding-left div { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } div { padding: 25px 50px 75px 100px; } 패딩 및 요소 너비 CSS width속성은 요소 내용 영역의 너비를 지정합니다. 내용 영역은 요소의 패딩, 테두리 및 여백 내부의 부분입니다 ( 상자 모델 ). 따라서 요소에 지정된 너비가 있으면 해당 요소에 추가 된 패딩이 요소의 총 너비에 추가됩니다. div { wi.. 2020. 2. 25.
CSS Margins CSS Margins margin속성은 정의 된 경계 외부에서 요소 주위에 공간을 만드는 데 사용됩니다. CSS를 사용하면 여백을 완전히 제어 할 수 있습니다. 요소의 각 측면에 대한 여백을 설정하는 속성이 있습니다 (위쪽, 오른쪽, 아래쪽 및 왼쪽). p { margin: 70px } 이 요소의 여백은 70px입니다. CSS에는 요소의 각 측면에 대한 여백을 지정하는 속성이 있습니다. margin-top margin-right margin-bottom margin-left p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; } 모든 여백 속성은 다음 값을 가질 수 있습니다. auto-브라우저가 마진을 계.. 2020. 2. 25.
CSS width/height CSS 높이와 너비 설정 height및 width특성 요소의 높이와 폭을 설정하는 데 사용된다. 높이 및 너비 속성에는 패딩, 테두리 또는 여백이 포함되지 않습니다. 패딩, 테두리 및 요소의 여백 내부 영역의 높이 / 너비를 설정합니다. CSS 높이 / 폭 값 height및 width속성은 다음과 같은 값을 가질 수 있습니다 : auto-이것이 기본값입니다. 브라우저는 높이와 너비를 계산합니다 length -높이, 너비를 px, cm 등으로 정의합니다. % -포함 블록의 높이 / 폭을 퍼센트로 정의 initial -높이 / 너비를 기본값으로 설정 inherit -높이 / 너비는 부모 값에서 상속됩니다 div { height: 200px; width: 50%; background-color: powderb.. 2020. 2. 24.