본문 바로가기

CSS36

CSS3 shadows 그림자효과 CSS3를 사용하여 텍스트와 요소에 그림자를 줄 수 있습니다. 사용할 수 있는 CSS는 텍스트와 박스 쉐도우 두가지가 있습니다text-shadowbox-shadow text-shadow는 텍스트에 그림자를 적용할 수 있습니다.수평 2px과 수직 2px로 가장 쉽게 적용해 보겠습니다. SHADOW EFFECTtext-shadow: 2px 2px;수직과 수평의 쉐도우는 아시겠죠? SHADOW EFFECTtext-shadow: 2px 2px blue; 쉐도우의 컬러는 수직수평 뒤에 적어주면 됩니다. SHADOW EFFECTtext-shadow: 2px 2px 5px blue; 수직 수평뒤에 쉐도우에 흐림 효과를 추가해줍니다. SHADOW EFFECTtext-shadow: 0px 0px 5px #0874c6; .. 2017. 8. 30.

CSS3 Gradient 그라데이션효과 포토샵에서나 쓸수 있었던 그라데이션 효과를 CSS만으로 웹에서 표현이 가능합니다. CSS3에서 추가된 기능으로 최신 브라우저 익스플로러 10이상 표현이 가능합니다. 따라서 하위 브라우저 버전에서는 사용이 불가능한점 참고하시고 사용해주시면 되겠습니다. 표현방식은 라인방식과 원형방식 두가지가 있습니다. 라인방식이 많이 쓰이긴 하지만 필요에 따라 원형도 사용되기도 합니다. 하지만 하위 브라우저들 때문에 많이 사용하기 껄끄러운면도 많습니다. linear-gradient > 일반적인 라인방식 두개의 컬러를 지정하여 지정영역만큼 그라데이션이 표현됩니다. radial-gradient > 원형방식으로 지정영역만큼 그라데이션이 표현됩니다. repeating-linear-gradient > 같은 라인방식이지만 구간반복으로.. 2017. 8. 10.

CSS3 Colors(RGBA) 컬러와투명도 CSS3 Colors 컬러와투명도 (color and opacity) CSS3는 색상 영문이름(white), 16진수(#FF0000), RGB색상(255,255,255)을 지원합니다. CSS3를 지원하지 않는 브라우저는 당연히 사용하지 못합니다. 크롬 4.0버전이상 익스플로어 9.0이하는 아무리 해당 CSS를 입력한다고 한들 CSS자체를 인식하지 못하기때문에 아쉽지만 브라우저 업데이트하는 방법밖에는 없습니다. 구형 익스8같은경우는 해킹요소나 지원하지 않는 속성들이 많아 사용하지 않는 추세입니다. 그래도 접속통계같은걸 보면 아직도 있긴합니다. 저는 보통 디자인을 할때 16진수로 외워서 사용하곤 합니다. 기본적인 컬러값들을 인식하고 나면 어느정도 값만 변경해주면 되기때문인데요. rgb도 그렇게 어렵지는 않습.. 2017. 8. 3.

CSS3 Media Queries 미디어쿼리-반응형페이지만들기 요즘은 PC,태블릿,모바일등 각종기기를 통한 인터넷접속이 일상생활화가 되어가고 있는가운데 아직까지도 PC버전 모바일버전 따로 작업하는 사이트, 쇼핑몰들이 너무나도 많습니다. 물론필요에 의해서 따로 작업하는게 도움이 될 때도 있습니다만. 작업자에게는 너무나도 큰 고통과 두번의 작업을 거쳐야하는 불편함이 많습니다. 그래서 모든 기기에 빠르게 맞춰 대응할 수 있도록 만들어 진것이 미디어쿼리입니다. 물론 미디어쿼리도 반응형을 생각해서 디자인해야하고 CSS도 복잡해 질 수 있다는 단점이 있지만 PC따로 MOBILE따로 작업하는것보단 훨씬 빠르고 간편하다는 것입니다. 먼저 해상도에대해 간단하게 짚고넘어가보겠습니다. 크롬 요소검사쪽으로가면 위와같이 해상도 탭이 있는데요. 다음과 같은 종류를 나타냅니다. 4K-2560.. 2017. 7. 30.

css3 box-sizing 박스코딩의 기본 디자인을 다 해놓고 나면 코딩에 앞서 다음과 같은 일들이 많이 벌어져 고민을 항상 많이 했었던 부분이죠. 내용물 내용물 내용물 각 박스가 200px이고 패딩이 10px 보더가 있다면 다음과 같이 되는데요 실질적으로 사이즈는 1+10+200+10+1 = 223이 됩니다. div {width:200px; height:50px; padding:10px; border:1px solid #ccc} 그래서 200에서 22를 뺀 178을 width 값을 줘야 실질적으로 디자인된 200px에 맞게 코딩이 됐었죠.. 그래서 이 부분을 보완하기 위한 css3 새로운 속성이 있는데요. 바로 박스사이징입니다. box-sizing:border-box padding과 border를 width에 포함하여 계산해서 웹에 적용시켜줍니.. 2017. 6. 26.

css3 background-size 기존 css에서 추가된 css3추가 속성인 background-size에 대해서 알아봅시다. 기존에 백그라운드 이미지를 사용하였을때 정렬 및 위치만 사용할수 있었는데 background-size 이 속성을 추가하여 더욱 편리한 백그라운드를 사용할 수 있는데요. 우선 다음과 같은 속성이 있습니다. auto 기본값. 배경 이미지의 너비와 높이가 포함되어 있습니다. lenth 배경 이미지의 너비와 높이를 설정합니다. 첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다. 하나의 값만 주어지면 두 번째 값은 "auto"로 설정됩니다. percentage 부모 요소의 백분율로 배경 이미지의 너비와 높이를 설정합니다. 첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다. 하나의 값만 주어지면 두.. 2017. 6. 25.

이전 1 다음

티스토리툴바