제로베이스4 속성 선택자 (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. [Sass] Scss 핵심 기능 들어가기전 Sass와 Scss의 차이를 알아보자. Sass와 Scss는 Nesting구조를 가지고 있지만, Sass는 indent(들여쓰기)로 구분하기 때문에 tab사용에 예민하니 주의해야 한다. Scss는 브라켓 {} 으로 구분한다. Variables $를 붙여 변수를 만들 수 있다. $작명: 값; 형태로 사용한다. 변수를 사용해서 일관된 스타일을 부여해주고 수정시 값만 변경해주면 된다. See the Pen Untitled by jaecoder222 (@jaecoder222) on CodePen. @mixin @mixin명령어를 이용해서 스타일 집합을 만들어내고 @include를 통해 불러올 수 있다. 또한 함수처럼 default parameter를 지정 할 수 있고 parameter를 받아 상속을 .. 2023. 2. 15. 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 다음
