웹 스터디/CSS5 [CSS] 웹 프로젝트 9일차! (animation) 오늘은 여러 state 속성에 대해 공부했다. active, hover, focus, focus-within, visited ~~ 그리고 드디어.. 애니메이션 효과를 넣는 방법을 배웠다. state) - active -> 해당 요소를 마우스로 클릭했을 때 지정한 효과를 적용한다. - hover -> 마우스가 해당 요소 위를 지나갈 때 지정한 효과를 적용한다. - focus -> 키보드로 선택되었을 때 지정한 효과를 적용한다. - focus-within -> 부모 요소에게 적용하며, 자신의 자식 요소 중 하나가 focused 되었을 때 지정한 효과를 적용한다. - visited 링크를 걸어 두었을 때, 이미 방문한 사이트일 경우에 효과를 적용한다. 추가적으로 조건을 나열해 여러 상황을 설정할 수도 있다!!.. 2021. 7. 14. [CSS] 웹 프로그래밍 8일차! (position & pseuco selector) 오늘은 position 과 pseudo selector에 대해 공부했다. 우선 position에 대해 알아보자!! position) position은 요소의 위치를 지정하는 기준을 정하고 그에 맞추어 요소의 위치를 설정한다. 그렇다면 본격적으로 4가지 속성에 대해 알아봅시당!! - position : static ; (기준 없음) 모든 태그의 position 디폴트 값은 static으로 설정되어 있다. 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. - position : relative ; (요소 자신을 기준) 태그의 위치를 살짝 조정하고 싶을 때 사용한다. 이 코드를 사용함으로써 top(위) bottom(아래) left(왼쪽) right(오른쪽) 속성을 사용해 위치를 조정할 수 있다. * 주의할 점.. 2021. 7. 12. [CSS] 웹 프로젝트 7일차! (flexbox froggy) 오늘은 챌린지 쉬는 날~~ 오늘만 푹 쉬기로 했다!!! ...... 였으면 좋겠지만 그래도 간단한 복습이라도 진행하기로 했다!! ㅋㅎㅋㅎㅎㅋ 오늘은 가장 헷갈리는 개념 중 하나인 flex를 쉽고 재밌게 뽀실 수 있는 게임을 해 보기로 했다! 목표는 개구리의 위치를 연잎에 위치하게끔 flex코드를 이용해 문제를 풀어나가면 되는 간단한 게임이다. 총 24stage로 구성되어 있다. ㅋㅎㅋㅎㅎㅋ 그나저나 개구리가 참 귀여운 것 같당 ㅎㅎㅎ flex익히는게 이렇게 귀엽고 재밌을 줄이야~~~ ㅎㅎ 이제 display:flex; justify-content: ; align-items: ; flex-direction: ; 이고 뭐고 다 덤벼~~~~ https://flexboxfroggy.com/#ko Flexbox .. 2021. 7. 12. [CSS] 웹 프로젝트 6일차! (border & padding & flex) 오늘은 2일차 CSS의 box 특징 margin, border, padding 중 border 와 padding에 대해 공부해 보았다. padding) border의 안쪽 공간 = box의 경계 안쪽 padding: 20px; -> padding을 20px 해라 border) margin 과 padding의 경계선 = box의 경계 border: 2px solid black; -> border을 2px의 검은색 실선으로 해라 FLEX ) -> flex는 레이아웃 배치 전용 기능으로 고안되었다. 기존 방식의 inline-block보다 훨씬 편하고 강력하다!! 1 2 3 이런 코드가 있다고 할 때, flex선언은 부모 요소인 body에 하고, body는 flex container라고 한다. 자식 요소인 di.. 2021. 7. 11. [CSS] 웹 프로젝트 5일차! (CSS의 기본 문법 & margin) 오늘은 CSS를 처음 배우는 날이다. CSS를 HTML에 적용하는 방법부터 기본 문법, 특징까지 차근차근 배워 보았다. CSS를 HTML에 적용하는 방법) 1) HTML script 자체에 적용하는 방법 style 태그 안에 CSS 코드를 작성하면 된다. 2) CSS script를 HTML 파일에 적용하는 방법 link 태그를 사용해서 style.css란 만들어놓은 css파일을 html파일에 연결해주면 된다. 기본 문법) selector { property: value; } "selector에 value 값의 property를 적용한다."라고 이해하면 편하당ㅎㅎ {} 는 스타일 범위의 시작을 의미한다. ex) h1 { color: blue; font-size: 20px; } 이런식으로 적용하면 된다!! .. 2021. 7. 10. 이전 1 다음
