Web/Web _ CSS3 CSS _ 정리 03 : 개발 이슈 (반응형 웹) 1. 반응형 웹 반응형 웹을 구현하기 위해서는 간단하다. 아래처럼 화면 별로 CSS를 설정해주면 된다. @media screen and (max-width: 1680px){ h1 { font-size : 1em; } } @media screen and (max-width: 1280px){ h1 { font-size : 1.5em; } } @media screen and (max-width: 980px){ h1 { font-size : 2em; } } @media screen and (max-width: 736px){ h1 { font-size : 2.5em; } } 2. !important 타인이 만든 CSS 파일을 가져와서 사용할 때가 있다. 여기에 덧붙여서 내가 CSS를 작성하다보면 기존 것과 충돌되.. 2020. 4. 17. CSS _ 정리 02 : Button, Transition 1. Button hover : 커서가 버튼에 올려져있는 상태 active : 커서가 버튼을 클릭한 상태 2. CSS 애니메이션 이벤트를 지원하는 transition 마우스를 버튼에 올려두었을 때, 버튼의 색이 천천히 변하는 경우가 있다. 이처럼 일정 시간 동안 요소에 변화를 줄 수 있도록 해주는 것이 transition이다. transition / transition-delay / transition-duration / transition-property / transition-timing-function 3. transition을 지원하는 웹 브라우저 다양한 브라우저가 transition을 지원하고, 아래처럼 표시한다. 4.0 -webkit- : chrome 4.0 -moz- : firefox 3.1.. 2020. 4. 17. CSS _ 정리 01 : 선택자 CSS 선택자 1. 유형선택자 : 요소이름 ex) div {~~} 2. 전체선택자 : * ex) div * {~~} : div 태그 하위의 모든 것들에 적용한다는 의미 3. ID선택자 : # ex) #notice_board {~~} : notice_board라는 ID를 가진 것들에 적용한다는 의미 4. 클래스선택자 : . ex) .row {~~} : row라는 클래스를 가진 것들에 적용한다는 의미 5. 자식선택자 : > ex) body > p {~~} : body 태그의 직계 자식인 p 태그에 적용한다는 의미 주의할 점은 직계 자식만 해당한다는 것이다. p태그의 하위에 다른 태그들에는 적용되지 않는 것이다. 6. 자손선택자 : space ex) body p {~~} : body 태그의 하위에 존재하는 모.. 2020. 4. 17. 이전 1 다음