시작하며
오늘은 예비군 훈련으로 인해 수업을 듣지 못해서 수업 PPT만 가지고 AI의 도움을 받아 혼자 공부해보았다. 다행히 그렇게 어려운 내용은 없었던 것 같아서 NotebookLM과 AI 학습 모드를 사용하니 금방 이해할 수 있었다.
Table 태그
- 표를 만들 때 사용하는 태그
<table>: 표를 감싸는 태그<tr>: 표 내부의 행<th>: 행 내부의 제목 칸<td>: 행 내부의 일반 칸<thead>/<tbody>를 사용하여 구분
<table> 속성
border=””: 테두리 두께cellspacing=””: 테두리 간격 사이의 너비cellpadding=””: 셀 내부의 간격align=””: 테이블 정렬 속성width=””/height=””: 테이블의 너비와 높이bgcolor=””/bordercolor=””: 테이블 배경색과 테두리 색
<td> 속성
colspan=””: 해당 칸이 점유하는 열의 수 지정rowspan=””: 해당 칸이 점유하는 행의 수 지정
Semantic
- 웹 페이지를 이루는 요소의 의미에 맞는 태그를 사용하는 것
- SEO (Search Engine Optimization) : 검색 최적화
- 유지보수 용이
Semantic 태그
<header>: 헤더 (로고, 메뉴 등)<nav>: 네비게이션 (다른 곳으로 이동 가능한 링크들)<footer>: 푸터 (하단 영역)<aside>: 콘텐츠와 직접적인 연관이 없는 사이드 부분 (광고 등)<main>: 콘텐츠 영역 표시 / 한 html 페이지당 한 번 사용 하는 것이 좋음<article>: 하나의 의미있는 요소 (ex. 기사 리스트 중 기사 하나)<section>: article을 포함 (그룹화)
CSS
- Cascading Style Sheet : 웹 페이지를 디자인하기 위해 사용하는 언어
CSS 참조 방식
- 인라인 방식
- 각 요소의 style 속성에 전부 직접 적어주는 것
- 재사용 불가능
- 내장 방식
<head>태그 내부에<style>태그로 선언해서 사용
- 링크 방식
- 모든 style을 하나의 CSS 파일에 넣고 필요한 HTML 파일에서 해당 파일을 링크해서 사용
- 재사용 가능 및 스타일 변경 가능
-
3가지 방식이 겹치면 가장 늦게 읽히는 것이 우선으로 적용
-
인라인 방식이 내장, 링크 방식에 무조건 우선
-
내장, 링크 방식은 늦게 쓰여진 것이 우선
선택자
- style을 적용하고자 하는 HTML의 요소를 선택하는 것
속성 (Property)
- { } 내에 속성 값을 지정하여 다양한 style 정의
- 여러 개의 속성을 연속해서 지정할 수 있으며 세미콜론( ; )으로 구분
값 (Value)
- 해당 속성에 사용할 수 있는 값을 특정 단위로 지정
기본(단일) 선택자
* {}: 전체 선택자 / 모든 요소를 선택p {}: 태그 선택자 / 해당 태그 이름의 요소를 선택.className {}: 클래스 선택자 / 해당 클래스 속성 값을 가진 요소를 선택#idName {}: ID 선택자 / 해당 ID 속성 값을 가진 요소를 선택
복합 선택자
- 특수한 요소를 호출하고 싶을 때 / 기본 선택자만으로는 선택이 불가능한 경우에 사용
하위 선택자 (공백)
div p { color: red; }:div안에 있는 모든p태그에 적용
자식 선택자 (>)
div > p { color: red; }:div바로 아래 자식인p태그에만 적용
인접 형제 선택자 (+)
h1 + ul { color: red; }:h1바로 뒤에 오는ul하나만 선택
일반 형제 선택자 (~)
h1 ~ ul { color: red; }:h1뒤에 오는 모든ul선택
마치며
CSS 부분이 어려울 것 같아서 오늘 빠지는 게 걱정됐었는데, 어려운 내용은 내일부터 들어갈 것 같아서 다행이었다. 그래도 PPT 내용 이외의 설명을 못 들어서 혹시나 놓친 내용이 있는지 내일 확인해봐야겠다.
NOTION
Hello I'm TaeHyunAn, Currently Studying Data Analysis