HTML 공통속성

Html 공통속성

• 공통 속성
• onclick : 해당 요소를 클릭하였을때 발생시킬 이벤트이고, Javascript 문법으로 작성한다. 단, 이는 인라인 스크립트(Inline Script)라 하여, 보안 취약점이 있음으로 사용을 자제한다.
• hidden : 해당 요소를 눈에 보이지 않게 한다. 눈에 안 보일 뿐 아니라 자리도 차지하지 않는다. 속성값을 부여하지 않는다.
• style : 해당 요소에 CSS속성(Property)을 부여할 때 사용한다. CSS문법으로 작성한다. 단, 이는 인라인 스타일(Inline Style)이라 하여, 보안 취약점이 있음으로 사용을 자제한다.
• class : 어떠한 요소를 특정하기 위해 사용한다. 공백()으로 구분하여 여러개 부여할 수 있고, 문서내에 무제한으로 중복되어도 상관없다.
• id : 어떠한 요소를 특정하기 위해 사용한다. 하나만 부여할 수 있고, 문서내에서 동일한 id 속성 값을 가지는 요소가 중복되어서는 안 된다.

---

CSS 속성

1. CSS 속성은 세미콜론(;)으로 구분하여 여러개 작성할 수 있다.
2. 속성 값 뒤에 !important를 적은 경우. (나중에 CSS가 엄청 꼬이기 때문에 잘 사용하지 않음).
3. 보다 명확하게(복잡하게) 해당 요소를 선택하는 경우.(ID 선택자 > 클래스 선택자 > 요소 선택자).
4. 복잡도가 같다면 보다 아래에 적힌 경우.

• 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소의 상태나 특성에 따라 선택자를 분기하기 위해 사용한다. 콜론(:)을 활용하여 다음과 같이 작성한다.
  "선택자":"의사 클래스" {...}

태그 Style

• 가능한 부모: head
• 문서 내에 적용될 CSS문법을 작성하기 위해 사용한다.
• 인라인 스타일(Inline Style)임으로 잘 사용하지 않는다.

---

요소 선택자

• 요소 선택자(Element Selector)는 CSS속성(Property)을 적용하기 위해 사용하는 선택자 중 하나로, 태그의 이름으로 CSS 속성을 적용시키고자 할 때 사용한다.
• 다음과 같이 작성한다.(""는 없는 것으로 한다.)

---

클래스 선택자

• 클래스 선택자(Class Selector)는 CSS속성(Property)을 적용하기 위해 사용하는 선택자 중 하나로, 태그가 가진 클래스의 이름을 활용하되, 그 이름 앞에 마침표(.)를 붙인다.

---

ID 선택자

• ID 선택자는 CSS 속성을 적용하기 위해 사용하는 선택자 중 하나로, 태그가 가진 아이디의 이름을 활용하되, 그 이름 앞에 샾(#)을 붙인다.
• css 스타일을 주기 위해 ID를 부여하는 것은 추 후에 ID가 겹칠 가능성을 제공함으로 사용을 자제한다.

---

자식 결합자

• 자식 결합자(Child Combinator)는 어떠한 부모 선택자에 대한 자식을 선택하기 위해 사용하는 결합자이다.
• 다음과 같이 작성한다.
• "어떠한 부모 선택자" > "자식 선택자" { 구현부 }

---

일반 형제 결합자

• 일반 형제 결합자(General Sibiling Combinator)는 어떠한 선택자에 대한 형제를 선택하기 위해 사용하는 결합체 이다.
• 다음과 같이 작성한다.
• "어떠한 선택자" ~ "형제 선택자"
• 아래 조건을 만족하는 경우 선택된다.

1. 위 작성 예시에서 "어떠한 선택자"와 "형제 선택자"는 같은 부모를 가져야한다.
2. 위 작성 예시에서 "어떠한 선택자"보다 "형제 선택자"는 뒤에 와야한다.

---

인접 형제 결합자

• 인접 형제 결합자(Adjacent Sibiling Combinator)는 어떠한 선택자에 대한 인접한 형제를 선택하기 위해 사용하는 결합자이다.
• 다음과 같이 작성한다.
• "어떠한 선택자" + "형제 선택자"

---

전체 선택자

• 전체 선택자(Universal Selector)는 주로 모든 요소를 선택할 때 사용한다.

---

그룹 선택자

• 그룹 선택자(Group Selector)는 동일한 한 개 이상의 CSS 속성들을 여러 선택자에 적용하고자 할때 사용한다.
• 다음과 같이 작성한다. 콤마(,)로 구분하여 여러개 나열 가능.(""는 없는 것으로 한다.)

의사 클래스(Pseudo Class)

Active 의사 클래스

• Active 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소가 마우스를 누르고 있는 상태 일 때에 대한 선택자 이다.
• 다음과 같이 작성한다.
  "선택자" :active {구현부}

Hover 의사 클래스

• Hover 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소에 마우스가 올라가 있는 상태 일 때에 대한 선택자 이다.
• 다음과 같이 작성한다.
  "선택자" :hover {구현부}

Checked 의사 클래스

• Checked 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소가 체크 되어 있는 상태에 대한 선택자 이다.
• 주로 type이 checkbox인 input을 위해 사용한다.

disabled 의사 클래스

• Disabled 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소가 비활성화 되어 있는 상태에 대한 선택자 이다.

child 의사 클래스

• first-child 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 첫번째 요소를 선택하기 위해 사용한다.
• nth-child(n) 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 n번째 요소를 선택하기 위해 사용한다. 이 때 n 값은 1이상의 자연수 혹은 xn+y(이때 n은 자동 증가, x배수와 y 오프셋), odd(홀수 번째), even(짝수 번째)로 지정가능하다.
• last-child 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 마지막 요소를 선택하기 위해 사용한다.

not 의사 클래스

• Not 의사 클래스는 다른 의사 클래스를 부정하기 위해 사용한다.
• 가령, 마지막 요소가 아닌 모든 요소는 다음과 같이 선택한다.
  :not(:last-child) {...}

Focus 의사 클래스

• Focus 의사 클래스는 선택된 요소에 포커스가 있을 때에 대한 의사 클래스이다.