HTML CSS 3

[CSS]선택자-일반 형제 결합자, 인접 형제 결합자

일반 형제 결합자 '~'으로 나타내고, 첫번째 요소를 뒤따르면서 같은 부모를 공유하는 두번째 요소를 선택한다. div ~ p 결합자라면 div와 같은 부모를 공유하는 모든 p요소를 선택한다. div의 자식 p-1 div의 자식 p-2 div의 자식 p-3 div div의 형제 p-1 div의 형제 p-2 div의 형제 p-3 section요소 자식 div의 형제 p-1 div의 형제 p-2 div의 형제 p-3 예시1 div ~ p { color: palevioletred; } div요소와 같은 부모를 공유하는 모든 p태그가 선택된다. 인접 형제 결합자 "+"로 나타내고,첫번째 요소의 바로 뒤에 위치하며 같은 부모를 공유하는 두번째 요소를 선택한다. div + p 선택자는 div와 같은 부모를 공유하는 ..

HTML CSS 2022.09.23

[CSS]자손결합자,자식 결합자

결합자 자손 결합자 div p 처럼 공백으로 타나내고, 첫번째 요소의 자손인 요소를 선택한다. 요소 안의 모든 요소를 선택한다. div안의 p 1 div안의 p 2 div안의 p 3 div안의 p 4 div안의 p 5 div안의 p 6 div안의 div의 p 1 div안의 div의 p 2 div안의 div의 p 3 div안의 div의 p 4 예시1 div p { font-size: 20px; font-weight: 700; color: pink; } div안의 모든 p가 선택된다. 예시2 .a p { font-size: 20px; font-weight: 700; color: purple; } 클래스 선택자 a요소안의 모든 p요소가 선택된다. 예시3 .a-1 p { font-size: 20px; font-..

HTML CSS 2022.09.23

[HTML] Semantic tag

Semantic tag 란? 의미있는 태그를 의미한다. 의미있는 태그를 사용함으로써 내용을 정확하게 정의한다. 장점 -검색엔진최적화 : 태그를 기반으로 검색 키워드의 우선순위를 파악할 수 있다. -웹 접근성 : 음성으로 읽어주는 스크린 리더탐색에 도움이 된다. - 유지보수 : 브라우저나 개발자에게 의미를 명확하게 전달한다. 종류 실제 사용자에게 보여지는 컨텐츠의 영역이다. 컨텐츠의 시작부분을 나타내는 요소이다. 일반적으로 구역의 제목을 포함한다. body의 주요 콘텐츠 연관성있는 문서의 구획을 나누고자할 때 사용하는 요소이다. 연관 콘텐츠를 나타낸다. :) 네이버 메인 뉴스 언론사별 콘텐츠 독립적으로 구분하거나 재사용할 수 있는 구획을 나타낸다. 다른 서비스에 가져다 놔도 이상하지 않다. :) 위젯 검색..

HTML CSS 2022.09.06