[KH정보교육원] 39일차_HTML 영역 관련 태그, CSS 선택자

2021.12.3(금)

🌿 HTML 영역 관련 태그

1. 블럭 요소: 1줄 단위로 영역 차지하는 요소; 줄바꿈이 적용되어 이미 존재하는 요소 다음 줄에 출력됨
   • e.g. textarea, p, pre, h1~h6, .., "div"
   • div: 아무 의미 없고, 영역 구분 짓기 위한 용도로 사용; span보다 더 자주 쓰이며, 진~~짜 많이 쓰임(수천번 사용할 것)
2. inline 요소: content 내용만큼만 영역 차지하는 요소 -> 보통 width, height 변경해도 값 안 먹음/적용 안 됨; 줄바꿈이 적용되지 않아 옆으로 연이어져서 출력됨 -> 다음 줄로 넘기고자 할 때 <br>로 개행해야 함
   • e.g. input, label, mark, s, img, .., "span"
   • span: 아무 의미 없고, 영역 구분 짓기 위한 용도로 사용

✔️ 쉽게 구분하는 법: 두 태그를 연이어 썼을 때 옆으로 생성되면 inline 요소 vs 자동으로 1줄 개행하고 다음 줄에 생성되면 블럭 요소

🌿 CSS

🌱 선택자

출처: 학원 수업 자료

출처: 학원 수업 자료

✔️ 선택자들 간 우선순위

• 적용 방법에 따른 순위: 태그 스타일 → class 스타일 → ID 스타일 → inline 스타일 → !important
• 소스 순서에 따른 순위: 나중에 작성된 스타일 적용

🌱 텍스트 관련 스타일

• color
• text-decoration
• text-align

📗 homework: JDBC 프로그램 써보기/복습