본문 바로가기

CSS5

속성 선택자 (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.
position CSS position속겅은 문서 상에 요소를 배치하는 방법을 지정한다. top, bottom, left, right속성이 요소를배치할 최종 위치를 결정한다. static position값을 지정하지 않았을때 기본값이다. top, bottom, left, right, z-index영향을 받지않는다. relative 자기 자신을 기준으로 top,bottom,left,right의 값에 따라 위치를 조정한다. 위치가 바꼈을때 다른 요소에는 영향을 주지 않는다. 따라서, 레이아웃에서 요소가 차지하는 공간은 static일때와 같다. absolute 가장 가까운 부모 요소 position: relative값을 기준으로 위치를 조정한다. 부모 요소가 position: relative를 가진 부모가 없다면, body를.. 2023. 2. 14.
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.

티스토리툴바