Frontend/CSS23 [CSS] 캐스케이딩 스타일 시트 캐스 캐이딩(Cascading) - 위에서 아래로 흐르는 스타일 시트 HTML element는 하나 이상의 스타일에 영향을 받을 수 있다. 그래서 스타일 간의 충돌을 막기 위해 어떤 스타일을 적용 받을지에 대한 우선순위가 결정되어야 한다. 이를 캐스캐이딩이라고 한다. CSS 정식 명칭이 Cascading Style Sheets인 만큼 캐스캐이딩이 중요하다. 캐스캐이딩은 다음의 3가지에 의해 결정된다. Importance(중요도) Specificity(명시도) 코드 순서 Importance(중요도) 1 사용자 스타일 시트 저시력자, 색약자 등과 같이 특별한 조건이 필요한 사용자가 그들에게 맞게 구성해 놓은 스타일 시트. 2 제작자가 만든 스타일 스티 중 !important가 붙은 스타일 3 제작자가 만든 .. 2021. 9. 22. [CSS] css 기본 , 인접형제 , 일반형제 , 자식 선택자 전체선택자 페이지에 있는 전체 전체 요소를 대상으로 한다. 주의 : 실전에서는 사용하지 말 것을 권함. 브라우저에 과부하가 걸릴 수 있음. * { margin:0; padding:0; } 타입 선택자 h1, p, div, span 등 html 요소(Element)를 선택하는 선택자. 클래스 선택자(.) 특정 값을 class 속성의 값으로 갖는 요소를 선택한다. .abc{ color:red; } p.abc{ color:blue; } /*클래스 값으로 abc를 갖는 p 요소를 선택*/ 인접형제선택자(X+Y) 0 1 2 3 4 div + p{ color:red; } 등위 선택자로 동등한 위치에 있는 태그를 선택하여 css속성을 지정할 수 있다. 지정한 요소의 바로 다음에 위치하는 요소만 선택한다. 그래서 바로.. 2021. 9. 15. [CSS] css 속성 선택자 특정 속성이나 특정 속성값을 가지고 있는 HTML 요소를 선택할 수 있다. [attribute] 해당 속성을 가진 태그를 지정. a[target]{ color:red; } /*a링크 중 target 속성을 가진 태그를 선택*/ [target]{ color:#fff; } /*target 속성을 가진 태그를 선택*/ [attribute="value"] 속성명과 속성값이 동시에 일치하는 요소를 선택자로 지정하는 기능. [class="tomato"]{ background-color:blue; } /*속성명이 class이고, 속성값이 tomato인 요소를 선택자로 지정.*/ p[class="tomato"]{ background-color:red; } /* p 태그 중에서 속성명과 속성값이 일치하는 요소를 선택자로.. 2021. 9. 15. [CSS] CSS 선택자 정리 - 가상 클래스 가상 클래스는 클래스 or 태그명 선택자 뒤에 콜론(:)을 붙여서 표시하는 특별한 요소의 상태, 요소의 순서를 기준으로 자식 요소를 선택하는 방법이다. 1 상태 가상 클래스 선택자 :link, :visited, :hover, :active 는 링크 요소(마우스 클릭에 반응하는 요소)의 다양한 상태를 표현하는데 사용할 수 있는 가상 클래스이다. :link 방문하지 않은 링크를 선택 a:link{ color:red; } :visited 사용자가 방문한 링크를 선택 a:visited{ color:green; } :hover 마우스를 위에 올린 상태 a:hover{ color:orange; } :active 마우스로 클릭한 상태 a:active{ color:coral; } ※ 주의할 점! 링크 클래스들은 스타일.. 2021. 9. 15. [CSS] box-sizing html의 모든 요소들은 margin, padding 등 각각의 여백들을 가지며 이 때 width나 height값을 주게 되면 여백값과 더해져서 화면에 나타나게 된다. 이때 요소의 너비와 높이를 계산하는 방법을 지정해주는 것이 box-sizing 속성이다. content-box 요소의 너비와 높이를 설정하면 테두리(border)와 안쪽 여백(padding)은 여기에 더해진다. border-box border와 padding의 크기도 요소의 크기로 고려된다. 2021. 7. 30. [CSS] em/rem em - 상위 요소 크기의 몇 배인지로 크기를 정한다. Lorem Ipsum Dolor html 요소의 크기는 16px. body 요소의 크기는 상위 요소인 html 요소 크기의 1.5배인 24px. a 크기는 상위요소 body의 24px의 2배인 48px가 된다. rem - 문서의 최상위 요소, html 요소의 크기의 몇 배인지로 크기를 정한다. .a { font-size: 2.0rem; } 글자 크기는 32px가 된다. 2021. 7. 30. 이전 1 2 3 4 다음 반응형
