css3 속성 선택자 (Attribute selector) 1. [attr] a[target] : target속성을 가진것만 지정할 수 있다. 2. [attr=value] a[href="https://example.org"] : value값을 통해 속성을 지정할 수 있다. 3. [attr^=value] a[href^="http"] : 캐럿(^)기호를 통해 http로 시작하는 속성만 선택 4. [attr$=value] a[href$=".com"] $을 통해서 .com으로 끝나는 속성만 선택 5. [attr*=value] a[href*="example"] *을 통해 example을 가지고 있는 속성 모두에게 적용 2023. 3. 2. Box Model 박스 모델(box model) 모든 html요소는 박스 모양으로 구성되며, 이것을 박스 모델이라 한다. 박스 모델은 html요소를 padding, border, margin, content로 구분한다. content : 텍스트나 이미지 박스의 실질적 내용이 있다. padding : content와 border의 간격. 즉, content의 내부여백. border : content를 감싸는 영역. margin : border와 이웃하는 요소의 가이 간격. 즉 content의 외부여백. 📦 Box-sizing Box Model에서 너비와 높이는 요소 컨텐츠 박스 크기에 적용된다. 박스에 안쪽 여백에 따라 사이즈가 변경되는데 이를 해결하기 위해 box-sizing이란 속성을 사용한다. content-box 요.. 2023. 2. 14. CSS 반응형 단위 웹 접근성이 좋은 사이트는 고정 단위 px대신 반응형 단위 em, rem, vw, vh 등을 사용한다. px을 사용하게 되면 고정값으로 값이 할당 되기때문에 사이즈를 변경해도 반응일 없다. em 폰트 사이즈에 현제 지정된 포인트 사이즈를 나타낸다. 브라우저는 기본적으로 html 폰트 사이즈 16px를 지정한다. 따라서 html의 폰트 사이즈를 설정하지 않았다면 16px == 1em이다. 이처럼 em은 상대적이다. 부모 요소의 사이즈에 따라 변경되어야 할 때 사용한다. rem rem은 부모의 사이즈에 따라 사이즈가 계산되는 것이 아니라 루트에 지정된 폰트 사이즈에 따라서 크기가 결정된다. 주로 폰트 사이즈를 지정할때 em보다는 rem을 사용한다. vw,vh 뷰포트 너비값과 높이값은 넓이, 높이의 100분의.. 2023. 2. 13. 이전 1 다음
