윈컴이의 컴퓨터 이야기

IE6, IE7에서 display:inline-block을 사용하면 block 요소로 인식합니다. 이때 다음과 같은 핵을 쓰면 해결할 수 있습니다. div{display:inline-block;*display:inline; zoom:1;}

:before, :after은 CSS의 가상 요소입니다. CSS3에서는 ::before, ::after로 사용합니다. 예제1111 222 333미리보기 1111 222 333여기에 :before 혹은 :after를 이용해서 각 항목을 구분할 수 있는 디자인을 만들 수 있습니다.예제 1 - after a:after{content:" | "} 미리보기 1111 222 333예제 2 - last-child를 이용하여 마지막 구분자 없애기 a:after{content:" | "} a:last-child:after{content:"";} 미리보기 1111 222 333 이 글은...2012.09.17 14:04 첫 발행2016.07.25 19:05 수정 및 2차 발행

CSS3에 추가된 text-shadow 속성은 텍스트에 그림자 효과를 표시합니다. text-shadow text-shadow: (오른쪽) (아래) (블러) (색상); 지원 브라우저 IE8 이하를 제외한 대부분의 브라우저에서 지원합니다. 미리보기 예제 1 Text-Shadow 1 Text-Shadow #shadow_1 {text-shadow:1px 1px #ccc;} 예제 2 Text-Shadow 2 Text-Shadow 2 #shadow_2 {text-shadow:-2px -2px 3px #333;} 예제 3 Text-Shadow 3 Text-Shadow 3 #shadow_3 {text-shadow:0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -..

CSS3에 추가된 box-shadow 속성은 박스에 그림자 효과를 표시합니다. box-shadow box-shadow: [inset] (오른쪽 위치) (아래 위치) (블러) (색상); 지원 브라우저 IE8 이하를 제외한 대부분의 브라우저에서 지원합니다. 미리보기 기본 box-shadow 1 Text-Shadow 2 #shadow_1 {box-shadow: -10px 10px 10px #ccc;} 흐림없이 box-shadow 2 Box-Shadow #shadow_2 {box-shadow:10px 10px #ccc;} 안쪽 그림자 Box-Shadow 3 Box-Shadow 3 #shadow_3 {box-shadow: inset 0 0 5px #888;} 콤마(,)를 사용하여 여러개의 그림자를 추가할 수 있습..

출처 : http://www.w3schools.com/css/css_boxmodel.asp 모든 HTML 요소는 박스로 생각하면 됩니다. CSS에서디자인과 레이아웃 얘기를 할 때, 용어 '박스 모델"이 사용됩니다. 박스 모델은 우리가 다른 요소와 관련 요소와 공간 요소 주위에 테두리를 삽입하실 수 있습니다.아래의 이미지는 상자 모델을 보여줍니다 Width(너비)와 Height(높이)는 어떻게 정해질까? width:250px; padding:10px; border:5px solid gray; margin:10px; 이렇게 CSS가 되어있다고 생각해보면, 너비는 아래와 같이 됩니다. 250px (너비) + 20px (왼쪽, 오른쪽 패딩) + 10px (왼쪽, 오른쪽 테두리) + 20px (왼쪽, 오른쪽 여백..

background-color : 배경색 지정 배경색을 지정하는 속성입니다. 색상 이름이나 코드 값을 넣을 수 있습니다. 예제) body {background-color:#eeeeee;} #wincomi {background-color:skyblue} background-image : 배경 이미지 지정 배경 이미지를 지정하는 속성입니다. 이미지 경로를 입력하시면 됩니다. 이미지 경로는 url(“~~”)로 입력합니다. 예제) body {background-image:url(“./images/wincomi_bg.jpg”);} background-repeat : 배경 이미지가 반복되는 방법 배경이 반복되는 방법을 지정하는 속성입니다. 아래 중 하나를 입력하시면 됩니다. 패턴일 경우에는 repeat을 쓰시면 됩..

혹시 예전에는 폰트를 설정하려면 이렇게 쓰시지 않으셨나요? Font 속성 물론 이렇게 쓰셔도 되지만, 웹 표준에 맞지 않습니다. CSS 기초 강좌 5강 - Font 속성 : 글자 제어 1. 글자 크기를 설정하는 속성 font-size:x x에는... pt - 글자크기를 포인트 단위로 표시 1포인트는 1/72인지이며 가장 많이 사용되는 단위 em - 기준 글꼴 문자의 높이를 기준으로 글꼴크기를 지정 % - 기준 글꼴 문자의 크기에 대한 %단위로 글꼴 크기를 지정 px - 글꼴의 크기를 픽셀 단위로 표시 2. 글자 두께를 설정하는 속성 font-weight:x x에는... normal - 아무것도 주지 않습니다. : 미리보기 bold, bolder - 굵게 : 미리보기 3. 글꼴을 설정하는 속성 font-f..