전체 글

[CSS] Display

Display 웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나로, 해당 HTML 요소가 웹 브라우저에 언제 보이는가를 결정하는 속성이다. 모든 요소들은 단 하나의 display 값을 가진다. 여러 종류의 값이 있지만 대부분의 요소들은 inline과 block 중 하나를 가진다. 물론 원래의 기본 값을 CSS를 통해 바꿀 수 있다. inline block inline-block flex list-item none inline inline-level 요소의 기본 값이다. 이 속성이 적용되면 해당 요소는 width와 height를 부여하더라도 적용되지 않는다. 하나의 단어나 강조 구문처럼 인식되므로, 태그 다음의 요소는 줄 바꿈 되지 않는다. (수평 정렬) 값 기본 display 값이 inlin..

[SCSS] 상위 셀렉터 참조

상위 셀렉터 참조 SCSS/SASS 문법은 특수 문자 &를 이용하여 자신이 포함된 상위 셀렉터를 참조할 수 있습니다. 안녕하세요. 내용을 적어보겠습니다. 다른 내용을 적어보겠습니다. p { font-size: 20px; color: black; &.second {/* &.second = p.second */ color: red; } } 스타일 덮어쓰기 이러한 문법은 특정 클래스 안에서 스타일을 덮어쓰는 작업을 할 때, 유용하다. Hello? .page p { color: orange; .container & { /* .container & = .container .page p */ color: green; } }

[CSS] CSS 구체성 단위 (우선 순위)

CSS 구체성 단위 (우선 순위) 다양한 셀렉터들이 같은 요소를 가리키면 순위가 정해져야 한다. 이것을 구체성 단위라고 부르는데, 각 요소들은 정해진 점수가 있다. 그 점수가 높은 순서대로 우선 순위로 정해진다. 명시 방법 점수 TAG 1 Class 10 Id 100 HTML 태그의 style 속성 사용 (Inline Style) 1000 Inline Style 셀렉터에 Id가 많은 경우 셀렉터에 class, 속성(attribute), 가상 클래스(pseudo-class)가 많은 경우 일반적인 요소 또는 가상 요소가 많은 경우 /** 예시 **/ div.bbs_content { /* tag 1 + class 1 = 11점 */} body > div#container > div#header {/* tag ..