728x90 반응형 CSS/CSS 기초62 [CSS] text-shadow 다양하게 적용하기 p.p1{ text-shadow: 5px 5px #ccc; /* 오른쪽 5px 아래 5px #ccc로 그림자 */ } p.p2{ text-shadow : 5px 5px 5px #ccc; /* 오른쪽 5px 아래 5px 번짐 5px #ccc로 그림자 */ } p.p3{ text-shadow: 1px 1px #ccc, 2px 2px #ccc, 3px 3px #ccc,4px 4px #ccc,5px 5px #ccc; /* 오른쪽 1~5px 아래 1~5px #ccc로 그림자 여러개 적용 */ } p.p4{ text-shadow : 0 1px #ccc, 0 2px #ccc, 0 3px #ccc, 0 4px #ccc, 0 4px #ccc; /* 오른쪽 0 아래 1~4px #ccc로 그림자 여러개 적용 */ } p.p.. 2019. 6. 4. [CSS] @media 이용해 인쇄용 CSS 보통 반응형 웹을 제작하기 위해 CSS에 @media 를 이용해 screen 사이즈에 따라 다르게 CSS를 지정해줍니다. @media 로는 screen 뿐만아니라 print 즉 인쇄물에도 지정할수 있습니다. 아래와 같이 지정한다면 해당 선택자는 화면에서는 잘 보이지만, 화면을 출력할 경우에는 출력되지 않습니다. @media print { 선택자 { display:none; } } screen - 모니터 화면 print - 인쇄 speech - 화면낭독기 all - 기본값으로 모든 장치에 적용됨 2019. 5. 30. [CSS] :target 가상클래스 선택자 a의 href의 값이 #id 또는 url에 id 값이 포함되어있는 경우 #id명:target{ } 으로 CSS를 선언해 준다면 a를 클릭했을때 #id에 css가 적용된다. click id="main" See the Pen target by gahyun (@gahyun) on CodePen. 다른선택자 [CSS] - [CSS] css를 쓰다보면 알아야하는 가상선택자 2019. 5. 29. [CSS]css 계산 calc() 함수 다음과 같은 상황에서 쓸 수 있다.. 1줄에 3개씩 배치하고,, margin 값을 10px 주고싶을 때 3개가 배치되려면 하나의 width 값은 33.333%가된다. margin 10px을 주면 3개가 한줄에 배치될수 없고, width 값을 줄이면 원치않는 빈공간이 생기거나 화면의 크기 변화에 따라 다른 결과가 보여질 수 있다. 이때 calc을 이용해 쉽게 계산할 수 있다. 아래와같이 width: calc(33.333% - 10px); width의 값을 calc 계산을 통해 전체 width 의 33.333% 에서 10px을 뺀 값을 준다 그리고 margin을 주면 쉽게 한줄에 원하는 만큼 배치할 수 있다. See the Pen calc()함수 by gahyun (@gahyun) on CodePen. 2019. 5. 28. 이전 1 2 3 4 5 6 7 ··· 16 다음 728x90 반응형