[CSS][국비교육] Day 40

Ga02·2023년 2월 22일

국비교육

목록 보기

38/82

<table>태그의 전체적인 레이아웃
display: table; 이용하여 설정 가능 -> 테이블이 아니어도 테이블처럼 보이게 가능

외부 레이아웃이 블록모델과 유사
<table> 태그의 자체 레이아웃 특성
- width, height 속성 : 설정 가능 👉🏻 기본은 둘 다 auto
  - 내부 요소들은 너비의 총합, 높이 총합 만큼의 크기를 가짐
- padding, margin, border 속성 : 설정 가능
<tr>태그의 자체 레이아웃 특성
- width, height, border, margin : 다 적용 안됨
- height : 적용 가능 ❗ but, 적용하지 않고 컨텐츠의 높이 총합으로 자동으로 적용되도록 하는 것이 좋음
<th>, <td>태그의 자체 레이아웃 특성
- width, height, padding, border : 적용 가능
- margin : 적용 불가
- 같은 <table> 태그에 존재하는 <td>, <th> 태그들의 높이 총합, 너비 총합이 적용될 때 <table>태그의 높이, 너비에 영향을 받음
테두리 설정
- <table>, <th>, <td>에 각각 테두리 설정 가능 👉🏻 <tr>에는 테두리 없음
- border-collapse 속성 : 테두리가 겹치는 부분에 대한 처리방식을 설정
  - seperate : 각각 따로 분리하여 표현(기본값)
  - collapse : 합쳐서 한줄로 표현

요소를 배치하는 방법을 설정하는 속성
float은 배치를 나열, position은 직접 배치

static : 기본값 요소의 기본 위치 👉🏻 요소가 원래 있어야 했던 곳에 배치됨
- 다른 요소들과의 관계(기본 흐름)도 그대로 유지됨
absolute : 절대적 위치를 지정 👉🏻 기준점은 브라우저의 화면 외곽선
- 위치 지정 속성(top, left, bottom, right)을 적용하지 않으면 요소 기본 위치에 보여짐
- 브라우저의 화면 크기가 달라지면 요소의 위치도 따라서 변경됨 👉🏻 스크롤은 따라가지 않음
relative : 상대적인 위치를 지정
- 요소의 기본위치(positon: atatic;)가 기준이 됨
- 요소의 기본위치에서 차지하던 공간(영역) 레이아웃이 없어지지 않음 👉🏻 요소를 이동시켜도 공간이 유지가 됨
  ✔ 상대위치박스는 되도록 이동시키지 않고 사용 / 절대위치박스의 기준점이 되는 부모요소로 사용함
fixed : 고정위치를 지정
- 보고있는 화면이 상하좌우 벽면을 기준으로 위치가 설정됨 👉🏻 스크롤을 따라옴
- top,left, bottom, right를 이용하여 요소의 위치를 지정

웹 페이지의 레이아웃 구조를 쉽게 이해할 수 있도록 의미를 부여하는 것

<nav> : navigator, navigation, 메뉴
사이트 내에서 다른 페이지로 연결되는 링크들의 모음
<aside> : 사이드바
광고, 배너, 서브메뉴 등
본문 이외의 내용이 작성되는 곳
<section> 영역을 표현
계층적인 구조의 영역을 표현
주로 본문과 관련있는 내용을 감쌀 때 사용
<article> : 독립된 문서를 나타냄
하나의 게시물 또는 뉴스 기사 하나
<footer> : 바닥글 / 주로 화면 제일 하단에 표현됨
회사 소개, 이용약관, 개인정보취급방침, 제작자 정보 등이 포함됨
<main> : 해당 문서(HTML)에서 주요 콘텐츠를 표현
사이드바, 배너, 메뉴, 로고, 검색창, 저작권 등은 포함시키지 않도록 함
문서에서 1개만 존재하도록!

CSS3 스타일 속성 앞에 붙여 사용하는 브라우저별 접두어 ➡ 브라우저별 접두어가 다름
CSS3 표준문법을 적용한 속성을 개발하던 도중 브라우저 별로 테스트를 목적으로 제공해준 속성들 👉🏻 일종의 시범버전으로 개발되어 미리 사용해볼 수 있도록 만들어진 속성

✔ 접두어가 적용된 속성을 먼저 작성하고 접두어가 제거된 표준 속성을 마지막에 작성

형상 관리 도구, 버전 관리 시스템
형상관리 : 소프트웨어의 변경점들을 체계적으로 관리하고 변경 이력을 추적할 수 있는 환경

IT꿈나무 댓츠미