본문 바로가기

CSS7

[CSS] CSS 우선순위 새로 알게 된 점 정리 제로베이스 데일리 스크럼을 하던 중 팀원 중 한 분의 의문을 제기한 게 사건의 발단이었다. 그분이 제시한 의문은 굉장히 흥미로웠는데 css style을 attribute를 통해 주게 되었을 때 class로 준 스타일이 먹지 않는다는 의문이었다. 다음은 의문의 코드와 비슷한 맥락으로 재현한 전체 코드다. 전체 코드 예시) 안녕 나는 위 코드처럼 했을 때 우리 팀원들은 tag로 준 스타일의 우선순위 보다 class로 준 우선순위가 더 높을 거라 예상해 당연히 될 것이라 굳게 믿었다. 하지만, 늘 그렇듯 믿음은 배신당한다^.^ 당연히 빨간색이라는 자신감을 처참히 뭉개고 시퍼런 아쿠아색을 뽐내고 있었다. 그래서 차근차근 단계를 밟아가 알아보기로 했다. 테스트 코드 예시) 처음 시도한 것은 attribute 속성.. 2023. 3. 3.
[CSS] CSS Attribute 선택자 정리 HTML의 Attribute 값으로 특정 요소를 선택할 수 있다. 예시 위 같은 HTML 마크업이 있다고 가정을 한다면, CSS에서는 target이라는 속성을 특정해서 선택해 스타일을 줄 수 있다. ✅ 주요 특성 [attr] 해당 attr을 갖고 있는 요소 선택 a[target] : 태그 중 target 속성을 갖고 있는 요소만 선택 [attr=value] attr의 값이 특정 value 인 요소 선택 input[type="submit"] : 태그 중 type 속성의 값이 submit인 요소만 선택 [attr~=value] attr의 값이 특정 value 가 아닌 요소 선택 [attr^=value] ^(캐럿) : value로 시작하는 요소 선택 (prefix) [attr$=value] $(달러) : va.. 2023. 2. 23.
[CSS] 자주 쓰이는 Scss 핵심 기능 Sass와 Scss 차이 기본적으로 Sass와 Scss는 Nesting 구조를 가지고 있다. 👀 Sass 예제 .list width: 100px float: left li color: red background: url("./image.jpg") &:last-child margin-right: -10px 👀 Scss 예제 .list { width: 100px; float: left; li { color: red; background: url("./image.jpg"); &:last-child { margin-right: -10px; } } } 위 두 예제를 보게 되면 Sass는 범위의 구분을 indent로 구분하고, Scss는 브라켓으로 구분하는 걸 알 수 있다. 💡 Sass 같은 경우는 indent로 .. 2023. 2. 14.
[CSS] position 정리 🤔 position 이란? CSS에서 position 속성은 문서 상에 요소를 배치하는 방법을 지정한다. 📖 position 속성 5가지 1. static position을 지정하지 않았을 때의 기본값 이다. top, right, bottom, left, z-index 영향을 받지 않는다. 2. relative 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 위치를 조정한다. 위치가 바꼈을때 다른 요소에는 영향을 주지 않는다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다. static과 다르게 z-index가 적용된다. table-*-group, table-row, table-column, table-cell, table-caption 요소에는.. 2023. 2. 13.

티스토리툴바