가상설렉터
-
CSS정리이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 31. 03:55
지금까지 배웠던 CSS를 한 눈에 정리해 보도록 하겠습니다.제일 먼저, 1. CSS-syntax, 문법에 대해 배워보았고, 2. CSS-HTML연결을 시켜 보았습니다. 그 다음, 3. 박스모델(마진, 패딩)에 대해 알아보았습니다. 그리고 4. 포지션(static, fixed, relative, absolue)를 배웠고, 5. 디스플레인(block, inline-block, inline)에 대해서 살펴보았습니다. 6. 박스를 나열하는 방법인 flex와 7. class로 따로 명명하지 않았지만 지칭하는 방법, 가상설렉터(type, nth child 등)와 마지막으로 8. element states(hover, active, focus, visited)를 배웠습니다.
-
CSS 설렉터, Pseudo Selectors, 가상설렉터이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 29. 04:55
이번시간은 레이아웃이 복잡할 때 쉽고 유용하게 쓰이는 selector, 설렉터에 대해 배워 보도록 하겠습니다. Pseudo-selector를 배우기 전에, container안에 3개의 box를 만들고, password, 비밀번호를 입력할 수 있는 입력창과 submit, 입력을 누를 수 있는 입력창을 만들어 주면, 아래와 같이, 크롬에서 확인 할 수 있습니다. 여기서, submit, 입력 버튼을 선택하고 싶다면, class 이름을 준 다음, 배경색을 지정해 줄 수 있습니다. 예를 들어, 클래스 이름은 class="submit"과 같이 설정하고, background-color=red와 같이 지정할 수 있습니다. 혼자 작업할 때는 위와 같이 작업하더라도, 별다른 문제가 생기지 않지만, 팀으로 일할 때는 혼란을..