본문 바로가기

전체 글

(33)
[CSS] CSS 선택자 우선순위 (중요!) 선택자 우선순위 란? 하나의 요소가 여러 선언 대상이 된 경우 어떤 선언을 우선적으로 적용할지 결정하는 방법. 조건1 Css 내용을 Html에 적용할 때 붙는 점수가 높은 선언이 화면에 출력된다. 조건2 점수가 같을 경우, 맨 마지막으로 작성한 코드 내용이 우선 적용된다. Hello World!! div {color:red !important;}/* 1순위 (!important - 9999999점) */ #color_orange {color:orange;}/* 3순위 (ID 선택자 - 100점) */ .color_yellow {color:yellow;}/* 4순위 (Class 선택자 - 10점) */ div {color:blue;}/* 5순위 (태그 - 1점)*/ * {color:darkblue;}/* ..
[CSS] CSS 상속, 상속되는 CSS속성 1. 스타일 상속 Css 내용을 적용했을 때, 적용된 내용이 기타 하위 요소까지 영향을 주는 것을 말한다. body { margin:50px; } .people {/* people에 Css를 적용하였는데 */ color:lightpink; font-weight:bold; } 직원 사람 Jim Tommy Eve 로봇 이렇게 부모 요소를 통해 상속되는 Css 속성은 모두 글자/문자와 관련된 속성 이라는 것! ** 주의 : 그렇다고 모든 글자/문자 속성이 상속되는 것은 아니다. e.g. font-size | 글자 크기 font-family | 폰트(서체) font-weight | 글자 두께 font-style | 글자 기울기 Inline-height | 글자 높이 color | 글자 색상 text-align ..
[CSS] CSS 선택자 1. 기본 전체 선택자 (Universal Selector) 범위 안에 있는 모든 요소 선택 * { background-color:gold; } 태그 선택자 (Type Selector) 태그 이름으로 요소 선택 단, 태그의 종류가 모든 요소를 구분할 만큼 고유한 것이 아니기에 원하는 요소를 조금 더 정확하게 집어낼 수 있는 class 선택자를 사용할 수 있다. div { background-color:gold; } 클래스 선택자 (Class Selector) class로 지정한 요소 선택 (중복 선택 가능) .name { background-color:gold; } 아이디 선택자 (ID Selector) 전역 속성 id 값을 통해 요소를 찾는 개념 #name { background-color:gold;..