채소의 코딩세상

앞서 배운 transformation에서는 마우스를 갖다 대야만 효과를 확인해볼 수 있었다. 마우스를 대지 않고도 애니메이션 효과를 줄 수 있는 방법은 없을까? 물론 있다. 다음의 코드를 보자. 코드를 보면 @keyframes라는 부분이 보인다. 이 부분이 바로 애니메이션효과를 정의하는 부분이다. 자세히 살펴보자. @keyframes CuteSugar { from { transform: rotateY(0); } to { transform: rotateY(360deg); } } 구조가 보이는가? @keyframes 뒤에 애니메이션 이름을 정의하고 밑에 원하는 효과를 적으면 된다. 사용은 다음과 같이 쓰면 된다. img { border: 5px solid black; border-radius: 10%; an..

transformation은 한 요소를 변형시킬 수 있다. 다음의 코드를 보자. 참고로 이미지 파일은 아무거나 사용하면 된다. img라는 요소에 transformation효과를 넣어주었다. 결과를 확인해보자. 보다시피 이미지가 회전하였음을 확인할 수 있다. rotateX(), rotateY(), rotateZ()함수에 의하여 x축 방향으로 30도, y축 방향으로 50도. z축 방향으로 10도로 회전한 것이다. 이처럼 CSS만을 가지고 3D의 영역까지 컨트롤 할 수 있다. rotate말고도 수많은 transformation이 있다. 코드를 다음과 같이 수정해보자. img { border: 5px solid black; border-radius: 10%; transform: scaleX(3); } 그리고 결..

예전에는 애니메이션 효과를 주려면 자바스크립트를 이용했어야 했다. 하지만 요즘에는 CSS만으로도 애니메이션 효과를 주는 것이 가능하다! 다음의 코드를 보자. a { color: wheat; background-color: tomato; text-decoration: none; border-radius: 5px; font-size: 55px; } a:hover { color: tomato; background-color: wheat; } 아직 transition을 쓰지 않은 코드이다. 결과를 확인해보자. 처음에는 위와 같다가 마우스를 갖다대면 아래 이미지로 변한다! 서서히 변하지 않고 갑작스럽게 휙 바뀌는 모습이다. 그럼 이에 애니메이션 효과를 주고 싶다면 어떻게 코드를 짜야 할까? 스타일 시트의 a태그에..

CSS에서도 변수를 사용할 수 있다는 사실을 알고 있는가? 다음의 코드를 보자. Life's not all gloom and despondency. website 여기서 --main-color이 변수다. CSS에서 변수를 쓰는 방법은 --를 먼저 써주고 변수이름을 써줘야 한다. 그리고 빈 공간이 있다면 -로 채워야한다. 따라서 --main-color라고 변수를 써준 것이다. 그리고 이 변수를 사용하려면 var(변수명)을 써주면 된다. 결과를 확인해보자. p태그와 a태그에 스타일이 적용되어 색이 바뀌었음을 확인할 수 있다!

우리가 앞서 배운 Pseudo Selector은 :(콜론)이 1개였다. 이번에는 콜론이 2개인 Pseudo Selector를 알아볼 것이다. 1. ::placeholder 다음의 코드를 보자. placeholder의 색을 yellogreen이 되도록 코드를 짜본 것이다. 결과를 확인해보자. 정말 placeholder의 색이 바뀌었다! 따라서 ::placeholder는 placeholder의 특성만 스타일링 하고 싶을 때 사용함을 알 수 있다. 2. ::selection 코드를 다음과 같이 작성해보자. Life's not all gloom and despondency. ::selection은 어떤 효과를 가져다 줄까? 백문이 불여일견이라고 직접 확인해보자. 다음과 같이 글씨를 마우스로 드래그하여 선택하니깐..

개발자 도구에서 확인할 수 있는 가장 중요한 selector는 state이다. 웹페이지에서 F12를 누르고 개발자 도구를 들어가서 확인해보자. 우측하단의 :hov를 눌러 확인해보면 다음과 같은 창이 뜬다. 위에 뜬 것이 state이다. 하나씩 살펴보자. 1.active 다음의 코드를 보자. 그리고 결과를 확인해보자. 박스를 마우스로 눌러보면 색이 바뀌는 것을 알 수 있다. active는 마우스를 클릭했을 때 적용됨을 알 수 있다. 2.hover 스타일 코드를 다음과 같이 살짝 바꿔보자. input:hover { background-color: tomato; } active대신 hover을 써줬다. 그리고 나서 결과를 확인해보자. 박스 위에 마우스 커서를 갖다대면 색이 바뀌는 것을 알 수 있다. hover..

html을 다루다 보면 부모 태그 안에서 자식 태그를 찾아 스타일을 적용해야하는 일이 있을 수 있다. 다음의 코드를 보자. hello Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod commodi et sequi ipsam odio dolorem. inside 그리고 결과를 확인해보면 div안에 있는 모든 span에 스타일이 적용되었음을 확인할 수 있다. 우리가 코드에서 주목해야할 부분은 'div span'인데 이는 div밑에 있는 모든 span에 스타일을 적용시켜주겠다는 의미가 된다. div 바로 밑에 있는 span에만 스타일을 적용하는 방법도 있다. 위 코드에서 'div span'부분을 다음과 같이 수정해보자. div > span { te..

우리가 코딩을 하다보면 좀 더 세부적으로 엘리먼트를 선택해야 할 일이 있다. 이 때 사용하는 것이 Pseudo Selector이다. 다음의 코드를 보자. 5개의 div블록을 만들고 맨 위에 있는 블록은 red색, 맨 아래에 있는 블록은 teal색이 되도록 Pseudo Selector를 이용해 만들어 보았다. 결과를 확인해보자. 원하는 대로 색깔이 바뀌었다! 물론 class나 id를 만들어서 색을 바꿔줄 수도 있겠지만 html코드를 변경해줄 필요가 없어 이 방법이 훨씬 낫다. Pseudo Selector는 종류가 엄청나게 많다. 하나 더 사용을 해보자. hello hello hello hello hello 이번에는 nth-child를 이용해 2번째 자식 엘리먼트를 선택에 세부조작을 해주었다. 참고로 괄호에..

웹사이트를 제작하다 스크롤을 내려도 특정 박스를 고정시켜야 할 일이 있다. 이때 사용하는 것이 fixed이다. fixed는 element가 처음 생성된 자리에 고정시킨다. 다음의 코드를 보자. 보다시피 아래 박스에 fixed를 적용하였다. 그리고 결과를 확인해보면 정말 스크롤을 내려보아도 아래 박스는 제자리에 고정되어 움직이지 않는다. 이번엔 아래 박스에 top: 100px를 추가해보자. #different { width: 350px; top: 100px; background-color: wheat; position: fixed; } 그리고 결과를 확인해보면 보다시피 노란색 박스가 초록색 박스 위로 올라가 있다. 즉 완전히 다른 레이어가 된 것이다. fixed로 고정을 시킨 상태에서 top, left, ..

PC, 스마트폰, 태블릿 등등 다양한 디바이스들이 웹브라우저를 지원하면서 화면의 크기에 따라 유연하게 컨텐츠를 조절하는 기술이 더욱 중요하게 되었다. 이를 가능하게 하는 기술이 바로 미디어쿼리(Media Query)다. 다음의 코드를 보자. Sugar 위 코드에서 보다시피 미디어쿼리의 기본문법구조는 다음과 같다는 것을 알 수 있다. @media (조건) { 스타일 } 이제 좁은화면 스타일링을 해보자. 휴대폰처럼 작은화면에서만 'SUGAR'라는 단어가 보이도록 하고 싶다면 위 코드처럼 min-width 조건문을 넣어주면 된다. min-width : 1200px는 screen width > 1200px라는 부등식과 같다. 즉, 1200px보다 화면이 커지는 순간 diplay : none을 적용한다. 직접 코..