반영훈/웹 개발34 [CSS]vw, vh, vmin, vmax VW와 VH 각각 Viewport width, Viewport height 이 둘 또한 반응형으로 사용하기 좋음 0~100사이의 값을 가짐. 뷰포트 즉 현재 브라우저창이 변함에 따라 크기가 변화됨. vmax width: 50vmax; ->현재 뷰포트의 가로와 세로 중 더 넓은 사이즈의 50%를 가로사이즈로 사용한다. vmin width: 50vmin; -> 위와 비슷한 개념으로 현재 뷰포트의 가로와 세로중 더 좁은 사이즈의 50%를 가로사이즈로 사용한다. 2020. 6. 20. [CSS] EM, REM em은 자신의 폰트사이즈에 영향을 받음. ex) .box { width:200px; fontsize: 10px;] = .box{width:20em; fontsize: 10px;] 200px/10 = 20 이런식으로. 자식(후손) 요소에 폰트 사이즈 지정이 되어있지 않을 땐 상위요소인 부모(조상)요소의 폰트사이즈를 상속받아 계산함. rem은 html에 지정된 폰트사이즈의 영향을 받는다. 반응형 웹사이트 작업할 때 폰트사이즈 및 패딩, 마진작업에 유용하다고 함. 참고할 웹사이트 https://yeoninim.tistory.com/38 2020. 6. 20. [CSS]우선순위 결정 같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법 1. 명시도 점수가 높은 선언 (명시도) 2. 점수가 같은경우, 가장 마지막에 해석되는 선언 (선언 순서) 3. 명시도는 '상속' 규칙보다 우선(중요도) 4. !important가 적용 된 선언방식이 다른 모든방식보다 우선(중요도) !important > 명시도 점수가 같을 때 가장 마지막에 해석되는 선언 > 명시도 점수가 가장 높은 선언 > 상속 스타일 속성을 통한 인라인선언(1000 Point)[비추천/ 덮어쓰기 힘듦] ex) HELLO WORLD ID 선택자를 통한 선언(100pt) ... #Apple Class 선택자를 통한 선언(10pt)... .Apple 단, 가상클래스 선택자 중 :not은 점수.. 2020. 6. 17. [Web]HTML, CSS 속성(Attribute)과 값(value) HTML ex) 에서 class는 속성, "A"는 값이 됨. CSS ex) color:tomato; 에서 color가 속성, tomato는 값이 됨. 2020. 6. 13. [CSS] 가상선택자 ::before 2020. 6. 13. [CSS]4가지 기본 선택자 1. *: 전체선택자(Universal Selector) ex) * {color:red;} 2. A,li,div 등 특정이름: 태그선택자(Type Selector) ex) div {color: red;} 3. 클래스의 속성값 :클래스 선택자 ex) .fruits{color: red;} 사과 4.id의 속성값: 아이디 선택자(ID Selector) ex) #fruits{color: red;} 사과 2020. 6. 12. 이전 1 2 3 4 5 6 다음
