다룽이네 다락방

css에서 가장 기본이 되고 중요한 selector(선택자) 선택자의 우선순위를 알아보자 기본적으로 css속성은 위에서부터 아래로 적용 (=밑에 있는게 우선순위가 더 높다) 같은 태그에 여러개의 css속성이 설정된 경우에는 우선순위에 따라 스타일이 적용 !important > 인라인스타일 > 아이디선택자 > 클래스선택자 > 태그선택자 - 위에서 아래로 내려가며 중복된 속성이 있는 경우 !important > 인라인스타일 > 아이디선택자 > 클래스선택자 > 태그선택자 의 우선순위를 가지고 적용된다. (중복값 없으면 당연히 그대로 유지됨) !important / 인라인스타일 별로 사용할일 없긴함

css에서 가장 기본이 되고 중요한 selector(선택자) 선택자의 종류와 선택자로 어떻게 태그 선택할지 알아보자 하위 선택자 -특정 요소 하위의 요소를 선택 하위에 있는 모든 요소가 선택된다는 점에서 자식 선택자와 구별된다 (자식선택자는 부모 바로 밑에 있을때만 선택 됨) ex) HI HELLO 안녕 /* 하위 선택자 */ div span{ background-color: yellow; } 해석 div요소 하위에 있는 모든 span태그에 배경 yellow적용 -> 'HELLO'와 '안녕'까지 전부 선택됨

css에서 가장 기본이 되고 중요한 selector(선택자) 선택자의 종류와 선택자로 어떻게 태그 선택할지 알아보자 종속 선택자 -타입 선택자와 id선택자(#) class선택자(.)가 혼합된 형태 ex) /* 종속 선택자 */ 1. li.acls01{ background-color: green; } 2. li.acls02#sidli{ font-size: 40px; } 해석 1. 태그의 종속클래스인 acls01을 선택하여 배경 green 적용 2. 태그의 종속클래스인 acls02의 id값 sidli를 선택하여 폰트 크기 40px 적용

css에서 가장 기본이 되고 중요한 selector(선택자) 선택자의 종류와 선택자로 어떻게 태그 선택할지 알아보자 가상클래스 선택자 -특정 이벤트가 발생되면 이를 감지하고 선택하는 태그 이건 코드보고 이해하는게 더 빠르다 ex) html 구글 다음 체크박스 css 1. a:link{ color: pink; } 2. a:visited{ color: grey; } 3. a:hover{ background-color: purple; } 4. input:checked{ width: 200px; height: 200px; } 해석 html? 링크걸린 구글 / 링크걸린 다음 / 체크박스 세가지가 리스트 되어 있음 css? 1. 링크 걸린 곳이 있으면(이벤트 발생하면) 링크 선택하여 글자 pink 2. 링크된 사이..

css에서 가장 기본이 되고 중요한 selector(선택자) 선택자의 종류와 선택자로 어떻게 태그 선택할지 알아보자 속성 선택자 -속성이 정의된 태그만 선택하는 선택자 머선뜻29? 라고 정의된 태그를 태그1[속성1]{ } 로 표현하여 꾸미기 가넝한 ex) 를 p[title]로 선택할 수 있다. /* 속성 선택자 */ 1. p[title]{ color: skyblue; } 2. p[title="b"]{ background-color: yellow; } 해석 1. title이라는 속성이 정의된 p태그를 선택하여 글자색을 skyblue로 지정 2. title을 b라고 정의한 속성을 가진 p태그를 선택하여 배경을 yellow로 지정 ->1은 title속성 가진 p태그 전체에 적용되겠고, 2는 title속성을 가..

css에서 가장 기본이 되고 중요한 selector(선택자) 선택자의 종류와 선택자로 어떻게 태그 선택할지 알아보자 인접 선택자 -지정한 요소 다음에 나오는(인접해 있는) 요소 선택 ex) 태그1 +태그2 { } : 태그1에 인접한 태그2를 선택 h3 + b{ background-color: black; color: white; } : h3 다음에 있는 b태그의 배경을 black, 글자를 white로 지정하겠다.

css에서 가장 기본이 되고 중요한 selector(선택자) 선택자의 종류와 선택자로 어떻게 태그 선택할지 알아보자 전체 선택자 - *로 선택하여 html문서 전체에 적용한다. 거의 사용할 일 없음 ex) *{ text-align: right; margin: 0px; padding: 0px; }

css에서 가장 기본이 되고 중요한 selector(선택자) 선택자의 종류와 선택자로 어떻게 태그 선택할지 알아보자 class 선택자 -요소에 class를 지정하고 style에서 지정된 class값을 사용 .(dot)으로 구분 ex) .클래스명{ } /* class 선택자 */ .scls{ color: pink; } scls라는 클래스의 글자색을 pink로 지정 id와 중복될 경우? id는 하나의 값이기 때문에 class보다 우선으로 적용된다

css에서 가장 기본이 되고 중요한 selector(선택자) 선택자의 종류와 선택자로 어떻게 태그 선택할지 알아보자 id 선택자 -요소에 id를 지정하고 style에서 지정된 id값을 사용한다. id 속성은 페이지 내에서 유일한 하나이며 #으로 구분 ex) #id{ } /* id 선택자 */ #sid1{ color: green; } #sid2{ color: yellow; } #sid3{ color: brown; } 만약, 페이지 내에 동일한 id가 두 개일 때? css에서는 적용되지만, 나중에 문제가 되니까 애초에 하나로만 적용하자)

css에서 가장 기본이 되고 중요한 selector(선택자) 선택자의 종류와 선택자로 어떻게 태그 선택할지 알아보자 타입선택자 -태그 이름 선택해서 선언 ex) /* 타입 선택자 */ pre{ text-align: center; } pre태그를 가운데 정렬한다