알콜뭉뭉이랜드

HOME 회사소개 인사말 회사연혁 비전 CI/Bi 오시는길 메뉴3 참고자료 http://www.designersol.co.kr/study/452

참고자료 http://www.creativecolorschemes.com/resources/free-color-schemes/pink-tone-color-scheme.shtml

div나 table 안에 이미지를 넣다 보면 뜻하지 않게 공백이 생기는 경우가 있습니다. 이미지 공백은 왜 생기는 것일까? 이미지는 인라인 요소인데요, 인라인 요소를 사용하면 보이지 않는 라인 박스(행 박스)를 생성합니다. 이 박스 안의 내용을 수직 정렬할 때 두 가지 방식이 존재합니다. 인라인 요소의 수직 정렬 1. 비표준 모드(IE7이하, doctype 선언하지 않은 문서): 박스의 border bottom에 맞추어 정렬 2. 표준 모드(doctype 선언한 문서): baseline에 맞추어 정렬 [방법 1] 인라인 요소(이미지)를 블록 요소로 만들기 인라인 요소로 인해 생성된 박스의 수직 정렬이 문제이므로, 인라인 요소를 블록 요소로 만듭니다. [방법 2] 인라인 요소의 기준선을 bottom에 맞추..

W3C의 규격에 의거하여 CSS 코드를 작성하더라도, 각각의 웹 브라우저마다 웹 페이지가 다르게 출력되는 문제가 있습니다. 이러한 문제는 브라우저들이 CSS 규격을 조금씩 서로 다르게 해석하고 출력할 뿐더러, 몇몇 규격은 전혀 출력하지 못하기 때문에 발생합니다. 이처럼 브라우저가 CSS를 W3C 규격과 다르게 출력하거나, 전혀 출력하지 못하는 문제를 CSS 출력 버그(CSS Rendering Bug)라고 합니다. CSS 출력 버그는 표준을 준수하여 웹 페이지를 제작할 때 가장 큰 걸림돌이 됩니다. W3C 규격 외에도 각각의 웹 브라우저들의 CSS 출력 현황에 대해서도 이해해야 하며, 이러한 버그들을 잡는 방법까지 파악해야 하기 때문입니다. IE7, FF1~2, Opera9, Safari처럼 최근에 출시된..

브라우저의 기본 글꼴크기(1em/100%)를 기준으로한 글꼴 비교표 pointspixelsemspercent글꼴 6pt글꼴 8px글꼴 0.5em글꼴 50%글꼴 7pt글꼴 9.5px글꼴 0.55em글꼴 55%글꼴 7.5pt글꼴 10px글꼴 0.6em글꼴 60%글꼴 8pt글꼴 11px글꼴 0.7em글꼴 70%글꼴 (기준) 9pt글꼴 (기준) 12px글꼴 (기준) 0.75em글꼴 (기준) 75%글꼴 10pt글꼴 13px글꼴 0.8em글꼴 80%글꼴 10.5pt글꼴 14px글꼴 0.85em글꼴 85%글꼴 11pt글꼴 15px 글꼴 0.95em글꼴 95%글꼴 12pt글꼴 16px글꼴 1em글꼴 100%글꼴 13pt글꼴 16.5px글꼴 1.05em글꼴 105%글꼴 14pt글꼴 19px글꼴 1.1em글꼴 110%글꼴..

구글 Noto 한국어 글꼴을 웹에서 마음껏! 작성자: 신정식, 소프트웨어 엔지니어 및 폰트 비저너리 훈민정음 반포 569돌을 맞이해서 자그마한 선물을 마련했습니다. 작년 7월에 발표한 Noto Sans CJK 글꼴을 이제 여러분의 웹 사이트에서도 마음대로 쓸 수 있습니다. Noto Sans CJK 글꼴 패밀리 가운데 한국어 전용인 Noto Sans KR을 Google Fonts Early Access를 통해 제공합니다. Noto Sans KR은 현대 한국어 뿐 아니라, 옛한글도 완벽하게 지원하고 총 6가지 굵기(weight) 중에 마음대로 골라 쓸 수 있습니다. 구글은 웹과 인터넷에서 한글을 보다 아름답고 다양하게 표현할 수 있도록 많은 노력을 기울여 왔습니다. 그 일환으로 국내 글꼴 제작사가 만든 여러..

표준 . Standard -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* future proofing */ -khtml-border-radius: 10px; /* for old Konqueror browsers */ 개별설정 . Individual Corners -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 30px; -moz-border-radius-bottomleft: 0; -webkit-border-top-left-radius: 10px; -webkit-border-top-r..

. 큰 이미지를 작게해서 반복하기 . 이미지 늘이기 . 작은 이미지를 크게하기 . 특별한 값: "contain"과 "cover" CSS 이미지 비율유지, 최대크기로 cover CSS 이미지 비율유지, 최대크기로 crop /* Keywords syntax */ background-size: cover; background-size: contain; /* One-value syntax */ /* the width of the image (height set to 'auto') */ background-size: 50%; background-size: 3em; background-size: 12px; background-size: auto; /* Two-value syntax */ /* first value:..

CSS에서는 글꼴 크기를 지정할 때 font-size 속성을 사용합니다. 사용 예 p { font-size: 1em; } 속성값은 다음과 같습니다. 절대값 : 고정된 크기. 장치에 따라 크기를 조절할 수 없음. px, pt, cm 등의 단위로 지정하거나 xx-small, x-small, small, medium, large, x-large, xx-large 중에서 선택 medium은 기본값으로 12pt=19px=13m=100% *구 IE 버전의 경우, small이 기본값이라 doctype을 선언해주어야 medium이 기본값으로 나옵니다 DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML) 상대값 : 상대적인 크기. 장치에 따라 크기 조절이 가능함. em, %, smal..