🍁전후 선택자 전후 선택자는 선택한 요소의 앞/뒤에 추가로 내용을 생성하는 역할을 한다. 지금까지 봐 온 first-child 같은 것들은 가상 클래스이다. 그리고 ::before는 가상 요소이다. 1. ::before = :before 2. ::after = :after 전후 선택자는 콜론이 하나가 아니라 2개를 쓴다. 콜론을 하나로 적어도 동작은 하지만 그럼에도 2개로 적는 이유는 성질을 확실하게 하기 위해서이다. 가상 요소 추가 Lorem ipsum dolor sit amet consectetur adipisicing elit. At laudantium vitae sit fugit aliquid recusandae rerum reiciendis unde nisi quisquam, ullam nequ..
🍁가상 클래스 가상 클래스의 특정 속성을 이용하여 컨트롤의 상황만을 콕 집어서 선택할 수 있다. 디자인을 재정의해서 required, readonly, disabled의 생김새에 차이가 나지 않게 했다. required, optional input[type=text]:required { background-color: gold } input[type=text]:optional { background-color: gray; } required와 optional은 짝꿍이다. 입력이 필수값(required)인 경우와 optional인 경우를 골라내어 서식을 적용할 수 있다. disabled, enabled input[type=text]:disabled { background-color: cornflowerbl..
🍁속성 선택자 속성 이름이나 속성 값으로 태그를 찾을 수 있다. [CSS] CSS Seletor (CSS 선택자) 2 🍁선택자 1. 전체 선택자: * {} 2. 태그 선택자: tag {} 3. ID 선택자: #id {} 4. class 선택자: .class {} 5. 그룹 선택자: sel1, sel2, sel3 {} 6. 자식 선택자: parent > child {} 7. 자손 선택자: parent child {} 8. 인접 형제 isaac-christian.tistory.com 의사 클래스 (Pseudo Class)에서 이어진다. 1. 선택자[속성명] 네이버 예스24 다음 11번가 아이작의 블로그 a[target]은 a를 사용한 모든 target을 찾아서 서식을 적용한다. target은 해당 속성을 보..
🍁가상 클래스 [CSS] CSS Seletor (CSS 선택자) 2 🍁선택자 1. 전체 선택자: * {} 2. 태그 선택자: tag {} 3. ID 선택자: #id {} 4. class 선택자: .class {} 5. 그룹 선택자: sel1, sel2, sel3 {} 6. 자식 선택자: parent > child {} 7. 자손 선택자: parent child {} 8. 인접 형제 isaac-christian.tistory.com 의사 클래스(Pseudo Class)에서 이어진다. 1. :first-child 목록 사과 귤 바나나 포도 복숭아 파인애플 참외 망고 수박 딸기 first-child는 앞의 대상이 자신의 그룹 내에서 첫 번째 자식인지를 묻는다. 목록 태그의 첫 번째 자식인 사과만을 선택한다. ..
🍁HTML과 CSS의 차이 HTML은 특정 태그에 미리 정해져 있는 속성이 있다. 예로 들어 는 사용할 수 있지만, 는 사용할 수 없다. 반면에 CSS는 모든 속성을 모든 태그에 적용 가능하며, 어떤 속성이든 선택자로 찾은 모든 태그에 적용 가능하다는 특징이 있다. HTML과 CSS 오류 background-position: 50 50; /* 오류 */ background-position: 50px 50px; HTML과 CSS는 에러 메시지를 띄우지 않는다. px를 지정해주지 않으면 잘못 사용한 것이지만, 에러 메시지가 발생하지 않으므로 조심하도록 한다. 🍁CSS 색상 표현법 1. Color Name: red, yellow, blue.. 2. RGB Color(HEX-16진수): #FFFFFF 3. RG..
