복습일지 01

뭐든 배우고나서 방치하면 까먹는 법, css 만드는 것도 익숙해질 겸 부트스트랩으로 가져오던 폼을 직접짜면서 복습하기로 하였다.

 

첫날. 

이미지와 같이 점보트론, 포스팅 박스, 카드가 들어가 있는 페이지를 따라 그렸다.

 

회사에서 시간날때마다 짬짬히 적어넣는거라 진도에 맞춰서 복습하지는 못하지만, 모양데로 따라그리는 기분이라 재미있다.

 

모양을 다 만들고나면 스크립트/DB 관련 내용도 복습하기 위해 적용시켜 볼 생각이다.

 

흥미로웠거나 새로 알게된 점.

 

버튼은 cursor를 통해 마우스 오버시 표시되는 포인트를 변경 할 수 있다.

<Script>
	cursor: pointer;
</script>

button:hover, input:focus 등 의사클래스(라고 부르나보다) 를 알게되었다. 

keyframe을 이용한 애니메이션을 적용할 수 있게되었다.

 

from~to 로 적어서 표현했지만, from~75%~to 등 %를 이용하여 키프레임 지정 가능

영상 제작을 공부한 적이 있어 키프레임 개념은 쉽게 이해할 수 있었다.

 button:hover{
            background-color: #2a75c0;
        }
        button:focus{
            animation-name: btfocus;
            animation-duration: 0.08s;
            animation-fill-mode: forwards;
        }
        @keyframes btfocus {
            from{
                outline: none;
                box-shadow: 0 0 0px 0pt #7ac3ff;
            } to{
                outline: none;
                box-shadow: 0 0 1px 2pt #7ac3ff;
              }
        }

 inputbox 모양을 만들 때 시간이 가장 오래 걸렸는데, 

클릭시 outline이 발생하고, 이 아웃라인은 애니메이션 효과까지 있었다. 이 모양 만들다가 위 내용을 전부 알게됨...

@keyframes infocus {
            from{
                border: 1px solid #4996ee;
                border-radius: 4px;
                outline: none;
                box-shadow: 0 0 0px 0pt #8cb1ef;
            } to{
                border: 1px solid #4996ee;
                border-radius: 4px;
                outline: none;
                box-shadow: 0 0 1px 2pt #7ac3ff;
              }
        }

 

이렇게 작성했는데, 정직하게 outline을 solid로 주려하니 굉장히 어색한 박스가 나왔다.

구글링을 열심히 해보니 box-shadow를 이용하여 더 이쁘게 만들 수 있다고 해서 사용해보았다!

<script>
	.outline{
    	box-shadow: 1 2 3px 4pt green;
        1,2 = position / 3px = blur / 4pt = size / green = color
        }
</script>

 

간단 메모... 블러없이 사이즈만 조절해서 outline처럼 사용 할 수 있다. 기억해두자

 

첫날은 요까지 만들고나니 지쳐버렸음... 내일 마저 해봐야겠다!

 

첫 주차 강의에 있던 페이지를 따라그리는 중....

 

CSS 의사 클래스   의사 클래스설명 출처: http://tcpschool.com/css/css_selector_pseudoClass

:link	사용자가 아직 한 번도 해당 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 모두 선택함. (기본 상태)
:visited	사용자가 한 번이라도 해당 링크를 통해서 연결된 페이지를 방문한 상태를 모두 선택함.
:hover	사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 모두 선택함.
:active	사용자가 마우스로 링크를 클릭하고 있는 상태를 모두 선택함.
:focus	초점이 맞춰진 input 요소를 모두 선택함.
:checked	체크된(checked) 상태의 input 요소를 모두 선택함.
:enabled	사용할 수 있는 input 요소를 모두 선택함.
:disabled	사용할 수 없는 input 요소를 모두 선택함.
:target	현재 활성화된 target 요소를 모두 선택함.
:in-range	특정 범위 내의 값을 가지는 input 요소를 모두 선택함.
:out-of-range	특정 범위를 벗어나는 값을 가지는 input 요소를 모두 선택함.
:read-only	readonly 속성을 가지는 input 요소를 모두 선택함.
:read-write	readonly 속성을 가지지 않는 input 요소를 모두 선택함.
:required	required 속성을 가지는 input 요소를 모두 선택함.
:optional	required 속성을 가지지 않는 input 요소를 모두 선택함.
:valid	유효한 값을 가지는 input 요소를 모두 선택함.
:invalid	유효하지 않은 값을 가지는 input 요소를 모두 선택함.
:first-child	모든 자식(child) 요소 중에서 첫 번째에 위치하는 자식(child) 요소를 모두 선택함.
:last-child	모든 자식(child) 요소 중에서 마지막에 위치하는 자식(child) 요소를 모두 선택함.
:nth-child	모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함.
:nth-last-child	모든 자식(child) 요소 중에서 뒤에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함.
:first-of-type	모든 자식(child) 요소 중에서 첫 번째로 등장하는 특정 요소를 모두 선택함.
:last-of-type	모든 자식(child) 요소 중에서 마지막으로 등장하는 특정 요소를 모두 선택함.
:nth-of-type	모든 자식(child) 요소 중에서 n번째로 등장하는 특정 요소를 모두 선택함.
:nth-last-of-type	모든 자식(child) 요소 중에서 뒤에서부터 n번째로 등장하는 특정 요소를 모두 선택함.
:only-child	자식(child) 요소를 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택함.
:only-of-type	자식(child)  요소를 특정 요소 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택함.
:empty	아무런 자식(child) 요소도 가지지 않는 요소를 모두 선택함.
:root	문서의 root 요소를 선택함.
:not(선택자)	모든 선택자와 함께 사용할 수 있으며, 해당 선택자를 반대로 적용함.
:lang(언어)	특정 요소를 언어 설정에 따라 다르게 표현할 때에 사용함.