HTML

요소

임베디드

• source
  => picture, video, audio 요소에 사용
  => 환경이나 조건에 맞는 최적의 요소를 출력하기 위해 사용
  => source 요소는 존재하지 않을 수 있음
  => source 요소를 지원한다면 우선하여 출력됨
• iframe
  => 외부의 html 페이지를 문서에 포함시킬 때 사용

테이블

• caption(제목)을 가져야 한다

인터렉티브

• dialog
  => 팝업, 경고창 등과 같이 대화상자가 열리고 사용자와 상호작용 할 수 있음
  => 논리속성 open을 줘야 대화상자가 열린다
• details
  => 보다 자세한 정보를 담는다
  => 논리속성 open을 주면 요약 정보가 열린 채로 출력된다
• summary
  => details 내부에 위치하며, 요약된 정보를 열고 닫을 수 있다

스크립팅

• css파일을 연결할 때
  => link태그 삽입
• javascript파일을 연결할 때
  => script태그 삽입
  => script태그의 src속성 뒤에 defer논리속성을 주면 script태그 위치에 따라 HTML이 해석이 되지 않는 것을 방지할 수 있다

폼

• button의 type값을 생략하면 기본값은 submit이다

속성

유저 인터렉션

• tabindex
  => focus되지 않는 요소를 focus가 가능하도록 한다
  => 순서를 정할 수 있다
• accesskey
  => 단축키
  => 웹접근성 측면에서도 유용하다
• contenteditable
  => true값을 주면 사용자가 편집할 수 있게 된다

CSS

기본문법

• 선택자 { 속성: 값; 속성: 값 }
• 최신 브라우저는 CSS를 대부분 지원하나,
  지원하지 않는 경우에는 속성에 브라우저별 접두사를 붙여야 한다

스타일 방법

External Style Sheet

• link태그 삽입이나 @import를 선언하여 외부 파일과 연결할 수 있다
• 내부 스타일 시트와 달리 캐싱되기 때문에 로드하는 데에 유리한 장점이 있다

Embedded Style Sheet

• HTML 문서의 head에 style태그를 삽입하여 CSS를 사용하는 방법

Inline Style Sheet

• HTML 문서에서 특정 요소에 style속성을 삽입하여 CSS를 사용하는 방법

선택자

• 동일한 스타일을 여러곳에 적용하고 싶을 때 class선택자 사용
  => 가급적 class에 스타일을 적용하는 방법을 사용하자
• a선택자 b선택자
  => a선택자 하위의 b선택자 호출
• a선택자 > b선택자
  => a선택자 바로 하위의 b 선택자 호출
• 아이디 선택자는 #으로 호출한다.

가상 요소 선택자

• ::로 시작하며, 선택한 요소의 일부분에만 스타일을 적용할 때 사용

가상 클래스 선택자

• :로 시작하며, 선택한 요소가 특정한 상태일 때에 스타일을 적용할 때 사용

상속

• 상속되지 않는 속성도 있다
  => 논리적으로 고민해보면 알 수 있다
• color에 inherit값을 주면 고유의 컬러값이 아닌 상속값으로 바뀐다

우선순위

• (1) id, (2) 클래스, (3) 태그 순서
• !important는 다른 선언보다 우선해서 적용된다
  => 스타일이 겹쳐서 우선순위를 확인해볼 때만 사용하자