1. :hover
~:hover는 ~에 속한 코드에 마우스를 댓을때 일어나는 행동을 설정해줄 수 있다.
아래코드는box라는 클래스를 가진 구역을 가져와, 해당 구역에 transform : rotate(15deg)이라는 메소드를 적용시키도록한것이다.
transform : rotate(15deg)는 각도를 일시적으로 회전하는 것으로 deg에 따라적용되는 것이다.
더해서 transform 앞에 -- 사이에 위치한것은 운영체제에따라 자동적용이되지 않는 경우 강제로 적용시킬 수 있게 작성해둔것이다. 이러한 접두사가 붙지 않는 것을 가장 마지막에 써, 에러를 사전방지 할 수 있다.
.box:hover{
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}2. 테두리 설정하기
테두리를 설정하기 위해서는 style 태그에서 원하는 구역을 호출하여 진행하는 방법과 시작태그에 바로 적용하는 방법이 있다.
아래방법은 style태그에서 div태그에서 round클래스를 가진 구역을 가져와 1픽셀(두께)의 solid(스타일)형태로 검정색(색) 테두리를 그린것이다.
div.round{
border: 1px solid black;
}물론 테두리에도 종류가 많이 있겠지만, 하나만 더 소개하자면 구역의 테두리를 라운드로 만드는 것도있다.
border-radius를 활용하는것인데 여기서 값으로 주어지는 것은 반지름사이즈로 굴곡의 정도를 나타낸 것이다.
div.round{
border-radius: 50px;
}3. 정렬하기
정렬은 크게 두가지로 나누어 볼 수 있다.
텍스트 정렬
style태그에서 text-align을 활용하는 것이다. 이것은 '위치'라는 의미가 사용되어야하기때문에 inline 형태의 태그에서는 활용할 수 없다. 왜냐하면 inline태그의 경우 데이터가 입력된 부분만을 자신의 구간으로 설정하기때문에 위치값을 지정할 수 없기 때문이다. text-align의 값으로는 center, left, right등이 있다.
- 만약 inline 태그의 정렬을 사용하고싶다면, display를 통해 형 변환을 하여 사용할 수 있다.
구역 정렬
구역을 정렬하는 것은 정확히 말하자면 margine을 사용해 전체화면에서의 중간을 맞추는 것이라고 할 수 있다.
margin: 0 auto;의 경우 중간정렬을 위해 사용하는 통상적인 방법이라고 할 수 있다. 이는 전체 width에서의 가운데를 나타낸다.
4. 색깔 지정하기
색은 다양한 부분에 필요한 디자인 요소이다.
예를 들어
- 글자의 색을 바꿀때는 color:
- 배경의 색을 바꿀때는 background:
- 이외의 색을 바꿀때는 위치값 또는 속성값을 통해
이 색을 지정할때 크게 세가지 방법이 있다.
- 색상 입력 ex) red, blue...
- rgb(red, green, blue) : 색상을 조합해 출력
- rgba(red, green, blue, alpha) : 색상을 조합하고, 투명도(%)를 설정
특히 하위 2가지의 경우 빨강, 초록, 파랑을 조합하는 것인데, 그 조합방법도 다양하다.
- %, 숫자, 색별숫자활용(#ffffff = white) 그리고, 원하는 색을 팔렛트에서 선택하기.
