Skeleton의 세상

nput 박스를 클릭 했을떄 나오는 테두리 색상 변경하기 input:focus { outline:2px solid #d50000; } input 박스를 클릭 했을떄 나오는 테두리 색상 없애기 input:focus { outline:none; }

FlexBox가 무엇일까요? 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델입니다 flex-direction row row는 기본적으로 왼쪽(start) 가 기준이 됩니다. 사이즈에 따라 오른쪽 그림과 같이 나옵니다 row-reverse reverse는 기본적으로 오른쪽(end)가 기준이 됩니다. 사이즈에 따라 오른쪽 그림과 같이 나옵니다 column column은 위아래를 기준으로 움직입니다. column-reverse column은 위아래를 기준으로 움직입니다. 기본적으로는 이렇게 있는데요. 이제 코드와 결과를 보면서 알아봅시다 .flexBox { width: 100%; height: 100px; display: flex; align-items: cent..

1. vh vertical height 의 약자로써 브라우저의 총 높이를 /100 한 값이 1vh입니다. 예를 들어 높이가 1000px 이라고 쳤을때 /100을 하면 1vh는 10px로 계산됩니다 2. vw vertical width 의 약자로써 브라우저의 총 넓이를 /100 한 값이 1vw입니다. 높이와 마찬가지로 넓이가 1280px 일때 /100 하면 1vw는 12.8px로 계산됩니다. 이렇게 두종류로 반응형 웹을 만들때 브라우저의 크기에 맞추어 CSS를 적용합니다. 이는 부모의 영향을 받지않고 브라우저 높이와 넓이에 직접적으로 영향을 받습니다

CSS에서 사용할 수 있는 단위들은 여러가지가 있는데요 rem, vh, vw, vmin, vmax, ex, ch중 이번 포스팅은 rem만을 알아봅시다. rem rem은 root em의 약자입니다. 먼저 rem을 알아보기전 em을 알아볼까요? remClass 위와 같은 html을 만들었다고 가정해 봅시다. body { font-size: 10px; } .remClass { font-size: 1.5em; } 그다음 CSS를 이렇게 만들었다고 가정한다면 어떤값이 em에 포함이 될까요? 계산을 해보면 다음과 같습니다. body의 font-size인 10px * remClass의 font-size인 1.5 즉 10px * 1.5 = 15px이 적용되는 것이죠. 간단하게 설명을 해보았는데 생각해보면 간단합니다! ..

line-height란 행간을 의미합니다. 행간이란 무엇이냐 행간(leading)은 각 글줄들 사이에 적절한 공간이라 할 수 있습니다. 이러한 행간과 같은 표현을 CSS에서는 line-height 를 사용하여 글줄 사이의 수직 여백을 조정할 수 있습니다. 간단하게 코드부터 살펴볼까요? /* 1. normal 값 사용 */ p { line-height: normal; } /* 2. inherit(상속)값 사용 */ p { line-height: inherit; } /* 3. 퍼센트값 사용 */ p { line-height: 120%; } /* 4. 길이 단위 값(px, em 등) 사용 */ p { line-height: 20px; } p { line-height: 20em; } /* 5. 숫자 값(단위 표..

미디어 쿼리란? 미디어에게 질문하고 감지하여 웹사이트를 변경하는 기술입니다 스타일에 사용하면 됩니다. 사용 방법은 일반 CSS 사용방법과 다르지 않지만 한가지를 더 적어주어야 합니다. @media only and (max-width: 560px) { } 위와 같은 코드가 추가되어야 합니다. (max-width: 560px) 이렇게 적혀있는 부분에 조건을 적어서 조건에 맞을때 동작하도록 만들 수 있습니다. 좀더 크게 보여드리겠습니다. style에 이렇게 적은뒤 HTML에 .test-box를 만든뒤에 브라우저를 한번 줄였다가 늘였다가 해보세요!

가변 그리드를 이용하여 반응형 박스를 만들어 보겠습니다. 보통은 .test-box { width: 100px; height: 100px; background-color: red; } 이런식으로 고정한 너비를 사용하는 경우가 많습니다. 하지만 이는 반응형을 만드는데 적합하지 않은 방법입니다. .test-box { width: 100%; height: 100px; background-color: red; } px을 %로 바꾸었을 뿐인데 결과를 보시면 많이 다릅니다. 브라우저의 너비에따라 박스의 너비가 변화되는걸 알 수 있습니다. 이것이 반응형 웹의 기본적인 시작점이라 볼 수 있습니다. 가변그리드에는 공식이 존재하는데 이 공식을 간단히 설명하자면 (가변 크기로 만들 박스의 가로너비 / 가변 크기로 만들 박스를..

반응형 웹이 등장한 배경은 다음과 같습니다. 스마트폰, 태블릿PC가 세상에 등장하면서 우리는 컴퓨터를 보는 시간보다 스마트폰을 보는 시간이 늘어났습니다. 그에 따라 웹페이지들은 휴대폰에도 사이즈를 지원해야했고 기존의 웹은 스마트폰에 맞지 않았습니다. 때문에 페이지를 모바일용으로 따로 제작해야하는 번거로움이 생겨나기 시작했고 이를 해결하기 위하여 나온것이 반응형 웹입니다. 반응형 웹은 PC, 태블릿, 모바일 등 다양한 사이즈에 최적화된 웹사이트를 제공해줍니다. 그렇다면 굳이 반응형을 써야하는 이유가 뭘까? 유지보수 모바일 점유율 마케팅 검색엔진 미래 지향적 크게 5가지로 볼 수 있습니다. 유지보수 PC버전, 모바일 버전 이렇게 두가지를 관리하고 수정해야했지만, 반응형 웹은 모든 버전을 하나의 HTML과 C..

슬롯머신처럼 돌아가는 애니메이션을 한번 구현해볼까요 이런 슬롯머신 보면 그림들이 위로 쫘르르르르륵 올라가죠! 그걸 한번 애니메이션으로 구현해 보려합니다 @keyframes slide { 0% {margin-top: 0;} 10% {margin-top: -50px;} 20% {margin-top: -100px;} 30% {margin-top: -150px;} 40% {margin-top: -200px;} 50% {margin-top: -250px;} 60% {margin-top: -300px;} 70% {margin-top: -350px;} 80% {margin-top: -400px;} 90% {margin-top: -450px;} 100% {margin-top: -500px;} } 위와같이 keyfram..

아주 간단하게 할수있습니다~ bacground-color:rgba(25,25,25,0.5); rgba를 사용하여 알파값을 50%로 줍니다 a는 0~1 의 값을 사용합니다~