테이블 스타일
속성 설명
border 테이블의 경계선
border-collapse 이웃한 셀의 경계선을 합칠 것인지 여부
separate|collapse|initial|inherit;
width 테이블의 가로 길이
height 테이블의 세로 길이
border-spacing 테이블 셀 사이의 거리
empty-cells 공백 셀을 그릴 것인지 여부
table-align 테이블 셀의 정렬 설정
empty-cells: hide; or show
경계 통합
collapse : 이웃하는 셀의 경계선을 합쳐서 단일선으로 표시한다.
separate : 이웃하는 셀의 경계선을 합치지 않고 분리하여 표시한다.
헤더와 데이터의 분리
table, td, th
테이블 캡션 - 테이블의 제목
짝수행과 홀수행 다르게 하기
<!DOCTYPE html>
<html>
<head>
<style>
#list {font-family: "Trebuchet MS",sans-serif; width: 100%; }
#list td, #list th {
border: 1px dotted gray;
text-align: center;
}
#list th {color: white; background-color: blue;}
#list tr.alt td {background-color: yellow;}
</style>
</head>
CSS 레이아웃
블록요소와 인라인 요소
블록(block) 요소 - 화면의 한 줄을 전부 차지한다.
인라인(inline) 요소 - 한 줄에 차례대로 배치된다. 현재 줄에서 필요한 만큼의 너비만을 차지한다.
블록요소
한 줄을 전부 차지
<h1>, <p>, <ul>, <li>, <table>, <blockquote>, <pre>, <div> <form> , <header>, <nav> 요소
인라인요소
인라인 요소들은 한 줄 안에 차례대로 배치
<a>, <img>, <strong>, <em>, <input>, <span> 요소
CSS의 display 속성
속성 display를 block으로 설정하면 -> 블록 요소처럼 배치
display를 inline으로 설정-> 인라인 요소처럼 배치
display:block : 블록(block)
display:inline : 인라인(inline)
display:none : 없는 것으로 간주됨 : 화면에 나타나지 않음
display: inline-block :
var를 쓰면 지역변수
var를 안 쓰면 전역변수
요소의 위치
top, bottom, left, right 속성으로 결정
위치 설정 방법
정적 위치 설정(static positioning) - 정상적인 흐름에 따른 배치
상대 위치 설정(relative positioning) - 정상적인 위치가 기준점이 된다. - position속성이 있어야함
절대 위치 설정(absolute positioning) - 컨테이너의 원점이 기준점이 된다.
고정 위치 설정(fixed positioning) - 윈도우의 원점이 기준점이 된다.
float 속성
하나의 콘텐츠 주위로 다른 콘텐츠들이 물처럼 흘러가는 스타일 지정
float의 용도
레이아웃에 많이 사용된다.
clear 속성
float 속성을 중단할 때 사용된다.
z-index
요소의 스택 순서를 지정 - 숫자가 높을수록 위에온다.
overflow 속성
: 자식 요소가 부모 요소의 범위를 벗어났을 때, 어떻게 처리할 것인지를 지정
hidden – 부모 영역을 벗어나는 부분을 보이지 않게 한다.
scroll –
부모 영역을 벗어나는 부분을 스크롤 할 수 있도록 한다./안한다
auto – 자동으로 스크롤 바가 나타난다.
–생길수도 있고 안생길수 도 있다
시맨틱 요소
태그 설명
<header> 문서의 머리말(header)
<hgroup> <h1>에서 <h6>요소들의 그룹
<nav> 내비게이션 링크
<article> 문서의 내용이나 블로그의 포스트
<section> 문서의 섹션을 의미한다.
<aside> 사이드바와 같이 옆에 위치하는 내용
<footer> 문서의 꼬리말(footer)
<figure> 그림이나 도표 <figcaption>홍길동</figcaption> </figure>
