본문 바로가기 메뉴 바로가기

윈컴이의 컴퓨터 이야기

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

윈컴이의 컴퓨터 이야기

검색하기 폼
  • All (57)
    • Apple (9)
    • 블로그 (1)
    • 프로그래밍 (0)
    • 윈도우 7 (21)
      • 윈도우 7 팁 (12)
      • 윈도우 7 테마 (9)
  • 방명록

css (7)
IE6, IE7에서 display:inline-block 속성 사용하기

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

카테고리 없음 2016. 7. 25. 19:07
CSS의 :before,:after 선택자를 활용하여 구분선을 만들어보자

: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차 발행

카테고리 없음 2016. 7. 25. 19:05
CSS3 Text-Shadow (텍스트 그림자)

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, -..

카테고리 없음 2016. 7. 15. 23:02
CSS3 Box-Shadow (박스 그림자)

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;} 콤마(,)를 사용하여 여러개의 그림자를 추가할 수 있습..

카테고리 없음 2016. 7. 15. 21:24
CSS 기초 강좌 - 7강. CSS Box Model(박스모델)이란?

출처 : 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 (왼쪽, 오른쪽 여백..

카테고리 없음 2012. 1. 7. 21:24
CSS 기초 강좌 - 6강. 알록달록 배경이미지를 지정해보자.

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

카테고리 없음 2012. 1. 3. 22:24
CSS 기초 강좌 - 5강. Font 속성 : 글자 제어

혹시 예전에는 폰트를 설정하려면 이렇게 쓰시지 않으셨나요? 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..

카테고리 없음 2011. 12. 30. 16:01
이전 1 다음
이전 다음
최근에 올라온 글
  • [Next.js] getStaticProps, g⋯
  • Vercel에 커스텀 도메인 연결하기
  • [Swift] IteratorProtocol
  • [Swift] 범위 연산자
최근에 달린 댓글
  • 이거 시작버튼이 않바뀌어요 어떻게 해요? 빠른 답변 주⋯
  • 너무 좋네요. 역시 원컴이님!^-^
  • 너무 좋아요!!! 감사합니다.
  • 낚시글인줄 알았는데 잘 되는군요. 다만 압축풀고 실행해⋯
글 보관함
  • 2022/12 (8)
  • 2016/11 (1)
  • 2016/08 (1)
  • 2016/07 (29)
  • 2014/09 (1)
  • 2014/05 (1)
Total
2,012,482
Today
14
Yesterday
24

Blog is powered by Tistory / Designed by Tistory

티스토리툴바