WEB/CSS 16

[CSS] Media Query에서 Screen과 Only Screen의 차이점

CSS의 미디어 쿼리 @media를 작성하는 경우 웹페이지에서 두가지 코드 타입을 볼 수 있습니다. 바로 @media screen 그리고 @media only screen입니다. 과연 이 둘의 차이점은 무엇이고 왜 다르게 사용하는 걸까요? 그 이유에 대하여 알아보고자 합니다. # Example 1 @media screen (min-width: 1024px) { color: #000; } # Example 2 @media only screen (min-width: 1024px) { color: #fff; } ! @media only screen과 @media screen의 차이점먼저 해당하는 두 코드를 사용했을때 각각의 화면에 나타나게 될 결과는 동일합니다. 하지만 차이점은 무엇일까요? 이 부분에 대하여 ..

WEB/CSS 2019.05.01

Box-Shadow

박스 주위에 그림자 적용시에 box-shadow 속성을 사용합니다. 입체적으로 보이는 모양이 보기에도 좋아보입니다.box-shadow 속성아래와 같이, box-shadow 속성은 4 개의 숫자와 색상 값을 지정합니다..shadow { -moz-box-shadow: 3px 3px 3px 3px #999; -webkit-box-shadow: 3px 3px 3px 3px #999; box-shadow: 3px 3px 3px 3px #999; }첫 번째 값수평 방향의 그림자 오프셋 길이를 나타냅니다. 양수 값을 지정하면 오른쪽에, 음수 값을 지정하면 왼쪽에 그림자가 생깁니다.두 번째 값수직 그림자 오프셋 길이를 나타냅니다. 양수 값을 지정하면 박스 아래에, 음수 값을 지정하면 박스 위에 그림자가 붙습니다.세 번..

WEB/CSS 2018.06.07

[CSS] Vertical Align

Category CSS TutorialCSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다.text-align: center;요소의 가로 가운데 정렬은 margin 속성을 이용합니다.margin-left: auto; margin-right: auto;그렇다면 다음처럼 세로 정렬을 가운데로 하려면 어떻게 해야 할까요?여러 가지 방법이 있는데, 그 중 세 가지를 소개해드립니다. 세 방법 모두 아래의 결과를 만듭니다.방법 1 - padding 속성 이용하기바깥쪽 요소에 padding 속성을 추가해서 세로 정렬을 가운데로 할 수 있습니다. CSS | Coding Factory .a { border: 1px solid #444444; width: 500px; padding: 100px 0p..

WEB/CSS 2018.01.24