🍁전후 선택자 전후 선택자는 선택한 요소의 앞/뒤에 추가로 내용을 생성하는 역할을 한다. 지금까지 봐 온 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는 앞의 대상이 자신의 그룹 내에서 첫 번째 자식인지를 묻는다. 목록 태그의 첫 번째 자식인 사과만을 선택한다. ..
🍁CSS Seletor의 성질 1. 선택자 충돌 2. 속성 충돌 3. 선택자 우선순위 선택자 충돌 상자 특정 태그를 찾는 선택자는 N개 이상 선언할 수 있다. 물리적으로 문제가 되지는 않지만 코드 관리상 어려움이 있으므로 웬만하면 한 곳에 모아서 선언하는 게 좋다. 속성 충돌 상자 위 코드에서는 선택자 충돌과 속성 충돌이 동시에 발생하고 있다. 동일한 태그를 선택한 식별자들이 동일한 속성을 지정하면 충돌이 발생하며, 작성된 순서에 따라 마지막에 작성된 속성이 적용된다. 즉, 덮어쓰기가 적용이 된다. #box1 { color: orange; } .box { color: blue; } div { color: red; } 그런데 위의 말대로 하면 파란색이 되어야 할 거 같은데, 주황색이 출력이 된다. 이는 선..
🍁선택자 1. 전체 선택자: * {} 2. 태그 선택자: tag {} 3. ID 선택자: #id {} 4. class 선택자: .class {} 5. 그룹 선택자: sel1, sel2, sel3 {} 6. 자식 선택자: parent > child {} 7. 자손 선택자: parent child {} 8. 인접 형제 선택자: sel1 + sel2 {} 9. 형제 선택자: sel1 ~ sel2 {} [CSS] CSS Seletor (CSS 선택자) 1 🍁CSS 문법 선택자 { 속성명: 값; } 선택자 { 속성명: 값; 속성명: 값; 속성명: 값;} 선택자 { 속성명: 값; } 선택자 { 속성명: 값; 속성명: 값; 속성명: 값; } CSS 문법으로 위의 틀을 사용한다. 선택자와 isaac-christian...
🍁CSS 문법 선택자 { 속성명: 값; } 선택자 { 속성명: 값; 속성명: 값; 속성명: 값;} 선택자 { 속성명: 값; } 선택자 { 속성명: 값; 속성명: 값; 속성명: 값; } CSS 문법으로 위의 틀을 사용한다. 선택자와 값의 속성을 변경하면서 사용하며, 이때 속성은 늘어날 수 있다. 문장 종결자가 있기 때문에 블럭 내에서 자유롭게 작성한다. CSS의 표기법 [Java] 변수 명명법 패턴: 파스칼 표기법, 캐멀 표기법, 스네이크 표기법, 케밥 표기법, 헝가리언 변수명, 클래스명, 메소드명 등의 이름을 다음과 같이 지었더니 좀 더 관리하기 쉽다는 장점이 있어 공식화 되었다. 변수 명명법 패턴은 관습적이긴 하지만, 큰 개발 환경에서는 규칙을 따르지 isaac-christian.tistory.com ..
