이거 공부 했더니 어때?/HTML & CSS & JS
-
트랜지션, transition이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 2. 05:00
이번시간에는 트랜지션, transition: 이동 후 변화를 다채롭게 보여주는 효과에 대해 알아보도록 하겠습니다 먼저, span을 만들어, Text라고 쓴 후, 배경색은 초록색으로 설정하겠습니다. 그런 다음, 박스의 states, 상태가 hover 될 때, 배경색을 파란색으로 바꾸도록 하겠습니다. 마우스 커서를 Text상자로 가져가면, 배경색이 초록색에서 파란색으로 변경되는 것을 확인할 수 있습니다. 그렇다면 이번에는 글자색을 흰색으로 설정하고, 배경색을 빨간색으로 변하도록 코드를 고쳐 보겠습니다. 위와 같이 배경색이 초록색으로 빨간색으로 변화될 때, 아직까지 트랜지션, transition효과를 적용하지 않아서, 변하는 동안 어떤 애니메이션, animation도 나타나지 않았습니다. 여기서 트랜지션, t..
-
공부계획 #4 고급형 CSS이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 1. 04:20
지금부터 고급형 CSS에 대해 배워도록 하겠습니다.세부적으로 먼저, (1) 트랜지션,transition: hover와 active같은 효과, 즉, 클릭하면 변화가 생기는 효과 (2) 애니메이션, animation: 이미 customized된 애니메이션들을 사용 (3) 트랜스포메이션, transformation: 크기가 커지거나, 회전, 또는 움직이는 효과 (4)미디어쿼리, media query: 브라우저 크기에 맞춰서 움직이는 효과, 즉 웹사이트-모바일 반응형 위의 순서로 알아보도록 하겠습니다.
-
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 states이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 30. 02:55
이번시간에는 아주 간단하고 단순한 CSS states에 대해 연습해 보도록 하겠습니다. 제일 먼저 박스를 만들고, style에서 배경색을 빨간색으로 설정해주고, 박스에 lalala를 입력해 보겠습니다. div태그를 지우고, span태그로 고친 다음, 사이즈는 40px으로 설정하겠습니다. 여기서 마우스 우클릭으로 검사로 들어가보면 .hov에서 state를 살펴볼 수 있습니다. 위와 같이 active, hover, foxus, visited, focus-within과 같은 state가 있습니다. 지금부터 대표적인 CSS state인 hover, active, focus state에 대해 알아보도록 하겠습니다. 먼저 .box:hover{background-color: pink;}라고 작성하여, hover st..
-
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와 같이 지정할 수 있습니다. 혼자 작업할 때는 위와 같이 작업하더라도, 별다른 문제가 생기지 않지만, 팀으로 일할 때는 혼란을..
-
Fluid layouts with Flexbox이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 28. 05:15
이번시간에는 배열하는 방법 중 하나인 flex, 플렉스에 대해 배워 보도록 하겠습니다. flex, 플렉스가 등장하기 전에 있었던 여러 문제점들은 flex, 플렉스를 사용함으로써 해결할 수 있습니다. flex, 플렉스가 어떤 문제들을 해결 하였는지를 살펴 보도록 하겠습니다. 박스 3개를 만든 후, 배경색은 빨간색, 폭은 200px, 높이는 200px로 설정하고, 디스플레이는 inline-block으로 설정 하겠습니다. 여기서 박스를 더 추가 하게 되면, 박스들이 inline-block 디스플레이 형태로 나란히 옆으로 나열되는 것이 아니라, 박스들이 자리를 충분히 차지했다면, 아래쪽으로 이어 붙는다는 것을 확인할 수 있습니다. 이러한 문제점 뿐만 아니라, 여기에 margin을 넣어주면, 자동으로 완성되는 그..
-
Position property, 위치이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 27. 05:20
이번시간에는 position, 포지션에 대해 배워보도록 하겠습니다. position, 포지션에는 4가지 종류, 1> static, 정지 2> fixed, 고정, 3> absolute가 있습니다. position, 포지션을 설명하기 위해, 제일 먼저 클래스가 box와 box-child인 박스를 두 개 만들고, 브라우저가 갖고 있는 디폴트, default값을 상쇄 시키기 위해, 문서의 스타일은 높이는 100%, margin, 마진은 0, padding, 패딩도 0으로 따로 설정 하도록 하겠습니다. 그리고 본문 body 높이는 400%로, 배경색은 빨간색으로 설정한 후, 크롬에서 확인해 보겠습니다. 이번에는 box의 높이를 300px, 폭은 300px, 배경색은 노란색으로 설정하고, 크롬에서 확인 하겠습니다...