[CSS]목록, 테이블, 디스플레이, 레이아웃,색인

ul,ol태그

https://hyejin283.tistory.com/166

[HTML]UL,LI,ol,dl,dt,dd / / p vs div // 클래스 //id

목록 항목 마커 이미지 지정

list-style-image:url('');

목록 항목 마커 배치

list-style-position  글머리 기호의 위치 지정 (inside, outside)

기본 설정 제거 

list-style-type:none해서 마커, 글머리기호 제거가능 그 후 margin:0 padding:0

list-style 약식 속성

• list-style-type(list-style-image가 지정된 경우 어떤 이유로 이미지를 표시할 수 없는 경우 이 속성의 값이 표시됩니다)
• list-style-position(목록 항목 마커가 콘텐츠 흐름 내부 또는 외부에 나타나야 하는지 여부를 지정합니다)
• list-style-image(이미지를 목록 항목 마커로 지정)

 

 

테이블

테이블 테두리 - border

https://hyejin283.tistory.com/165

[HTML]파비콘,테이블, time태그, title

테이블 테두리 축소-border-collapse:collapse;

콘텐츠 수직정렬 vertical-align top,bottom, left, right

수평선 넣기 border-bottom 

overflow-x:auto 컨테이너 요소를 반응형으로 만들 수 있음

 

디스플레이

display 요소가 표시되는지 여부지정

block, inline

블록

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

 

스크립트 요소는 display:none;이 기본값임

none 아에 없어짐

hidden 숨기기

 

레이아웃 위치 속성 position

 

• static 정적 배치 탑,바텀,왼쪽, 오른쪽 속성의 영향을 받지 않음
• relative 상대적 배치 탑, 오른쪽, 바닥, 왼쪽 속성을 설정하면 원래 위치에서 멀어지게 조정
• fixed 고정 뷰포트에서 상대적으로 위치하기때문에 스크롤하더라도 항상 같은 위치에 고정
• absolute : 가까운 위치에 있는 조상을 기준으로 배치
• sticky : 스크롤 위치를 기준으로 배치 스크롤을 움직여도 계속 보임 top:0이면 상단에 고정됨

다음 top, bottom, left, right

overflow

너무 커서 영역에 맞지 않는 콘텐츠 제어

속성값

• visible- 기본. 오버플로가 잘리지 않습니다. 콘텐츠는 요소 상자 외부에서 렌더링됩니다.
• hidden- 오버플로가 잘리고 나머지 내용은 보이지 않습니다.
• scroll- 오버플로가 잘리고 스크롤바가 추가되어 나머지 내용을 볼 수 있습니다.
• auto- 와 유사 scroll하지만 필요할 때만 스크롤바를 추가합니다.
• overflow-x콘텐츠의 왼쪽/오른쪽 가장자리로 수행할 작업을 지정합니다.
  overflow-y콘텐츠의 위쪽/아래쪽 가장자리로 수행할 작업을 지정합니다.

 

float, clear

float 은 요소가 어떻게 떠야하는지 지정

clear 지워진 요소 옆과 어느쪽에서 떠 있을 수 있는 지 지정

float값

• left- 요소는 컨테이너의 왼쪽에 떠 있습니다.
• right- 요소는 컨테이너의 오른쪽에 떠 있습니다.
• none- 요소는 부동하지 않습니다(텍스트에서 발생하는 바로 그곳에 표시됩니다). 이것은 기본값입니다
• inherit- 요소는 부모의 float 값을 상속합니다.

clear값

• left- 요소는 컨테이너의 왼쪽에 떠 있습니다.
• right- 요소는 컨테이너의 오른쪽에 떠 있습니다.
• none- 요소는 부동하지 않습니다(텍스트에서 발생하는 바로 그곳에 표시됩니다). 이것은 기본값입니다
• inherit- 요소는 부모의 float 값을 상속합니다.

 

색인속성

z-index -1인경우 텍스트 뒤에 배치

z인덱스로 화면의 띄울 순서를 정함