[TIL] 211103

---

- shadow dom이란:

shadow dom은 dom의 구조를 가지고 있으나 외부에는 노출되지 않은 dom을 말하며 dom의 구조를 캡슐화할 때 사용한다.

출처 

이를 따로 확인하기 위해서는 크롬 익스텐션에서 아래의 설정을 켜 주면 된다.

show user agent shadow DOM 체크하기

 

- vscode htmltagwrap을 설치하고 option + w를 쓰면 글을 감싸는 태그를 바로 만들 수 있다.

 

- br 태그를 자주 썼었는데 이제 쓰면 안될 것 같다. br 태그로 개행을 주면 스크린리더가 br을 읽다가 멈춘다고 한다. 그래서 누군가는 span으로 주거나 그냥 css로 조정한다고 한다. 그러나 실무에서는 빨리 코드를 작성하려면 div처럼 쓰는게 좋지 않지만 쓴다고 한다. 아마 회사마다 룰이 다를거라 생각한다.

 

- 공백은  라는 엔티티 코드를 사용한다. 

 

- b 태그는 쓸 이유가 없고 대부분 strong 태그를 사용한다.

 

- 스크린 리더를 위해 일반인들이 볼 수 있지만 시각 장애인들은 볼 수 없는 것을 위해 설명을 해 두는 글을 넣는다. ir 기법이라고 알고있다. -10000px로 넘기거나 방법은 다양하다.

 

- section 태그 안에는 heading요소를 넣는 것이 원칙이다.

 

- footer 안에서는 구획을 나누면 안된다.

 

- footer에서 전화번호와 이메일은 아래와 같이 적는다.

<a href="tel:000-1110-1111">000-1110-1111</a>
<a href="mailto:jjj@gmail.com">jjj@gmail.com</a>

저렇게 해야 누르면 전화가 걸린다고 한다!!

 

- border-collapse는 겹치는 선을 없애준다. 테이블을 만들 때 자주 사용한다.

 

- 테이블을 만들 때, thead, tbody, tfoot은 생략하지 말아야 한다. 자바스크립트에서 많이 사용이 될 것이기 때문이다.

 

- colgroup col의 class를 넣으면 col의 컨트롤이 가능하다.

 

- css ~ 선택자는 일반 형제들 앞 요소 이후에 나오는 뒤의 요소를 모두 선택한다.

 

- .one.two: one과 two라는 클래스를 모두 다 가지고 있는 요소

 

- .one .two: one 클래스를 가진 요소 내부에 있는 two 클래스를 가진 요소

 

- css요소들을 적을 때 실무에서는 대부분 depth가 두 개 이상 들어가지 않는다고 한다. 예를 들면 아래와 같이.

.first.second > div > .last {}

 

- []를 사용하면 속성 선택자. 속성을 갖고 있는 것들을 선택한다.

 

- a[href~=“gyuri”] : 해당 단어가 들어있는지(gyuri lee)

a[href*=“gyuri”] : 해당 문자열이 있는지(gyurilee)

 

- css는 다른 프로그래밍 언어와 달리(어그래 마크업언어야 알겠어 진정해) 순서가 1부터 시작한다.

 

- enabled, disabled는 모든 활성, 비활성 요소에 적용시켜준다. 여기서 활성이란 active, hover 등을 말한다.

 

- 가상 요소 선택자는 콜론이 두개, 가상 클래스 선택자는 콜론이 하나다.

 

- style은 id > class > tag 순으로 적용된다.

 

- em은 부모요소의 배수 단위, 만약 부모가 20px이고 자식이 2em이면 자식은 40px이다.

 

- rem은 html의 배수 단위로 em보다는 계산하기가 편리하다. 하지만 무얼 이용하고 px이 나쁘고 이런건 없다고 한다. 짬인듯.