<table>
- 표를 만들 때 사용하는 태그
- 표를 감싸는 태그
- 과거에는 테이블을 사용하여 레이아웃을 구성하였으나 기능 상의 한계로 인하여 최근에는 공간 분할 태그인 <div> 태그를 사용
- 먼저 행을 쓰고 행의 자식 요소로 칸을 넣어주는 것이 기본
<tr>
- 표 내부의 행
<th>
- 표 내부의 제목 칸
<td>
- 행 내부의 일반 칸
<table> 속성
- border : 테두리 두께
- cellspacing : 테두리 간격 사이의 너비
- cellpadding : 셀 내부의 간격
- align : 테이블 정렬 속성
- width와 height : 테이블의 너비와 높이
- bgcolor와 bordercolor : 테이블 배경색과 테두리 색
<td> 속성
- colspan : 해당 칸이 점유하는 열의 수 지정
- rowspan : 해당 칸이 점유하는 행의 수 지정
semantic 태그
- HTML 요소는 semantic하게 작성되어야 한다.
- div와 기능을 똑같지만 의미를 담고 있다.
semantic 태그의 종류
<header>, <h1> ~ <h6> <nav>, <aside>, <main>, <section>, <article>, <footer>
왜 semantic 해야할까?
SEO(Search Engine Optimization, 검색최적화)
- 검색엔진은 HTML 코드를 분석해 사이트를 노출시킨다
- 크롤러가 페이지의 구성 요소들이 무엇을 의미하는지 이해하여 사이트 노출에 영향을 준다.
유지보수성
- 페이지를 유지보수 할 때, <div> 태그만 가득하다면 요소를 찾기 정말 힘들다.
- semantic tag를 활용해 컨텐츠를 적절히 구분시켜야 한다.
CSS
- Cascading Style Sheet
- 웹 페이지를 디자인하기 위해 사용하는 스타일 시트 언어
- 폭포처럼 속성이 부모요소에서 자식요소로 상속된다.
인라인 방식
- 각각 태그마다 전부 스타일을 적어줘야 함
- 아래에서 같은 스타일을 가진 태그를 사용하려고 해도 코드를 복붙 필요
- 즉, 재사용이 전혀 불가능
내장 방식
- HTML의 <head> 태그 내부에 사용할 style을 <style> 태그로 미리 선언하여 사용
- 태그에 같은 스타일 적용이 가능
- 하지만 유지보수가 어려움
링크 방식
- 모든 style을 하나의 css 파일에 넣고, 필요한 HTML 파일에서 해당 파일을 링크해서 사용하는 방식
- 재사용 가능
- 스타일 유지보수 쉽게 할 수 있음
@import 방식
- css @import 규칙으로 css 문서 안에서 또 다른 css 문서를 가져와 연결하는 방식
CSS 참조 방식 우선순위
인라인 방식 > 내장 방식 = 링크 방식
- 기본 룰은 가장 늦게 읽히는 것이 우선으로 적용
- 인라인 방식은 내장, 링크 방식에 무조건 우선
- 내장, 링크 방식은 늦게 쓰여진 것이 우선
CSS 선택자
- css는 html 요소의 style을 정의하여야 하므로 스타일을 적용하고자 하는 html 요소를 선택할 수 있어야 한다.
- 선택자는 스타일을 적용하고자 하는 html 요소를 선택하기 위해 css에서 제공하는 수단
CSS 속성
- 선택자로 HTML 요소를 선택하고 { } 내에 속성 값을 지정하여 다양한 style을 정의
- 여러 개의 프로퍼티를 연속해서 지정할 수 있으며 세미콜론(;)으로 구분
- 속성은 표준 스펙으로 이미 지정되어 있는 것을 사용, 사용자가 임의로 정의 할 수 없다.
CSS 값
- 값은 해당 속성에 사용할 수 있는 값을 키워드나 크기 단위 또는 색상 단위 등의 특정 단위로 지정
CSS 선택자 우선순위
id 선택자 > class 선택자 > tag 선택자
CSS 기본 선택자
- 별도의 테크닉 없이, 순수하게 무엇인가를 호출 할 때 사용
- 전체 선택자 (*)
- 태그 선택자 (태그 이름)
- class 선택자 (.)
- id 선택자 (#)
CSS 복합 선택자
- 특수한 요소를 호출하고 싶을 때, 기본 선택자만으로는 선택이 불가능한 경우에 사용
- 일치선택자 ex) span.orange
- 자식 선택자 (>)
- 하위 선택자 (띄어쓰기)
- 형제 요소 하나 (+)
- 형제 요소 모두 (~)
CSS 가상 클래스 선택자
- 사용자의 행동에 따라 변화하는 가상 상황에 따라서 요소 선택 시 사용
- 각 요소의 상황에 따라 사용자가 원하는 요소를 선택 할 때 사용
- :hover - 선택자 요소에 마우스 커서가 올라가 있는 동안 선택
- :active - 선택자 요소에 마우스를 클릭하고 있는 동안 선택
- :focus - 선택자 요소가 포커스되면 선택
- :visited - 선택자 요소가 링크일 때, 방문했다면 스타일 변경 (a 태그)
- :checked - 선택자 요소가 체크되었을 때 스타일 변경 (radio / checkbox)
'기록 > 새싹x코딩온' 카테고리의 다른 글
| [새싹x코딩온] 웹 퍼블리싱 과정 2주차 - 3 | CSS - flex, transform, transition (0) | 2023.06.24 |
|---|---|
| [새싹x코딩온] 웹 퍼블리싱 과정 2주차 - 2 | CSS - 위치 속성, 배경 속성 (0) | 2023.06.22 |
| [새싹x코딩온] 웹 퍼블리싱 과정 2주차 - 1 | CSS - 문자 속성, 박스 모델 속성 (0) | 2023.06.20 |
| [새싹x코딩온] 웹 퍼블리싱 과정 1주차 - 2 | HTML 태그 (0) | 2023.06.15 |
| [새싹x코딩온] 웹 퍼블리싱 과정 1주차 - 1 | Git (0) | 2023.06.14 |