⁂ CSS
[CSS] #5-1 미디어쿼리(Media Queries)
1. 미디어쿼리? 다양한 디바이스들이 웹브라우징을 지원하면서 어느 때는 데스크톱 화면, 어느 때는 테블릿 화면, 어느 때는 핸드폰 화면에 페이지를 출력해야하는 경우가 늘었다. 그러면서 반응형 웹디자인이라는 개념이 생겼다. 어느 화면에서도 반응하여 디자인의 구성을 적용하는 것 말이다. 이것의 가장 기본이 되는 것이 바로 CSS의 미디어 쿼리(Media Query)이다. 쿼리, 구글에 검색해보니 '질문'이라는 뜻이라고 알려준다. 즉, 미디어 쿼리는 미디어에 대한 무언가를 요청하는 것이다. 어느 때? 화면 크기가 달라졌을 때 그에 맞춰서 미디어도 표현해달라고 하는 요청 말이다. 보통은 스마트폰, 태블릿, PC 화면 이렇게 3개의 화면으로 구분해주며 화면 크기가 변할 때 스타일을 바뀌도록 해서 반응형 웹을 구현..
[CSS] #4-3 skew 알아보기
1. Skew Skew는 기울기를 주는 명령어이다. 먼저 임의로 글자들을 만들어보자. 만들때 지금까지 사용했었던 여러가지 속성들을 추가하면서 만들었다. C S S 3 이제 여기에 기울기를 주려고 한다. 기울기를 주는 방법은 #4-2에서 rotate를 사용했던 것과 동일하다. h1>span:nth-child(even){ transform: skewY(-20deg); } h1>span:nth-child(odd){ transform: skewY(20deg); } nth-child의 속상값이 처음 보는 것들이다. even은 짝수번째 있는 자식들 / odd는 홀수번째 있는 자식들에게 적용한다는 뜻이다. 코드를 적용시키면 아래처럼 보인다.
[CSS] #4-2 Transform으로 버튼 만들어보기
1. 버튼을 만들어보자! 마우스를 손에 올리면 색이 바뀌는 버튼을 만들려고 한다. 아래와 같은 순서로 만들어보자. 1) 버튼의 기본 칸 만들기 menu라는 이름을 가진 한 블럭을 만든 뒤 그 블럭을 버튼처럼 사용하려 한다. 이때 버튼처럼 테두리도 동그랗게 깎아보았다. 2) 커서 만들기 마우스를 올렸을 때 커서가 화살표에서 포인터로 변하게 하려한다. 아래와 같은 코드를 #menu의 스타일 안에 추가하였다. cursor: pointer; 3) 마우스를 올렸을 때 색깔 바뀌기 #menu:hover{ background-color: orange; } 마우스를 올렸을 때 배경 색깔이 바뀌게 하는 것에 대한 명령어로 hover를 사용했다. 그리고 그 안에 색깔을 지정해주면 마우스를 갖다 대자 색이 변한다. 4) 버..
[CSS] #4-1 CSS의 display 알아보기
1. 움직이고, 돌리고, 변환하고 개인적으로 CSS를 공부하다보니 파워포인트로 PPT를 만드는 것이 생각난다. 처음엔 하나의 페이지에 글씨를 쓰는 것으로 끝나지만, 도형을 넣고, 이미지를 넣는다. 그 후로는 하이퍼링크로 인터넷 주소도 넣고, 영상이나 음악도 넣는다. 넣어져있는 것들을 앞으로, 뒤로 밀면서 순서도 바꾸기도 한다. 그리고 마지막으로 만지는 부분이 있다. 애니메이션과 같은 디자인 적인 부분이다. #4에서 함께 알아볼 것은 위에서 언급한 것처럼 요소들을 움직이게 하거나, 변형하거나, 변경시키는 것을 CSS에서 가능하다. 그리고 이 방법을 알기 위해선 display라는 개념을 알아야 한다. display는 요소를 화면에 어떻게 보이게 할 것인가를 결정해주는 것이다. 아래의 예시를 보면서 displ..
[CSS] #3-4 레이아웃 4 : z-index 속성
1. z-index 속성 레이아웃이 여러가지가 있을 때 어떤 레이어부터 띄워놓을 것인지 결정하기 위해 사용하는 속성이다. 쇼핑몰 등에 들어가면 홈페이지를 열자마자 뜨는 팝업창을 본적 있다. 사실 그것들은 팝업보다는 하나의 레이어일 확률이 높다. 팝업은 차단을 당할 수도 있기 때문이다(무서운 사람들...). 그래서 하나의 레이어를 가장 상위에 노출시키는 것이 대부분인데, 이런 작업을 하도록 도와주는 것이 바로 z-index 속성이다. 참조 : https://www.w3schools.com/css/css_z-index.asp CSS Layout - The z-index Property W3Schools offers free online tutorials, references and exercises in a..