전체 글

[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..

[CSS] #3-3 레이아웃 3 : float 속성, clear 속성

1. float, 레이어를 배치하자 한 웹페이지의 레이아웃을 정한다는 것은 위와 같은 속성들을 연합하여 사용한다는 뜻이다. 속성 설명 position 배치 방법을 지정 float 레이어를 왼쪽 또는 오른쪽 위치 지정할 때 사용하며 수평을 기준으로 정렬한다. 요소가 부모요소 기준으로 왼쪽 또는 오른쪽에 배치할 때 지정한다. clear float 속성을 해제 z-index 레이어 순서를 정함 이 중에서 position은 3-2에서 함께 알아보았고 이번 3-3에서는 float 속성을 알아보려 한다. float는 '뜨다'라는 단어이다. 그래서 '웹 페이지에서 이미지와 텍스트를 어떻게 띄워서 배치할 것인가'라는 의미를 담아 사용하는 속성이며 흔히 '부유한다(=float)'라는 표현을 사용한다. 한번 사용한 flo..

[CSS] #3-2 레이아웃 2 : position 속성(Static, Absolute, Relative, Fixed, Sticky)

1. Static 스태틱(static)은 고정되었다는 의미이다. 레이아웃의 가장 기본되는 형태이며 수직으로만 배치된다. 그리고 문서의 흐름에 맞추어 요소들을 배치시킨다. 적용시키는 코드는 아래와 같다. style="position: static;" 이 스태틱은 문서의 기본적인 형태를 그대로 표현하기 때문에 굳이 주지는 않는다. 스태틱이 적용된 코드를 살펴보자. position:static 가장 기본 수직으로만 배치 문서의 흐름에 맞추어 배치 출력된 화면을 보다시피, 코드의 순서 그대로 화면에 출력된 것을 확인할 수 있다. 그리고 이 요소들의 현 위치가 아래에서도 계속 말할 요소들의 '원래 위치'이다. position은 이 원래 위치에서 어떻게 요소들을 움직이게 할 것인가를 결정하는 명령어라고 이해하면 된..