1. 박스 종류
- 블록 박스 : <p> <hl> <div> <ul> 등
- 인라인 박스 : <span> <a> <img> 등
< 기본 디자인인 경우>
블록 박스는 새 라인에서 시작하며, 옆에 다른 태그 배치가 불가함.
인라인 박스는 블록 내부에 배치하며, 다른 인라인 박스 배치가 가능함.
2. 박스 배치 속성
* display: block | inline | inline-block | none
--> block: 블록 박스 배치(width 및 height 지정 후 box 배치)
--> inline: 인라인 박스 배치새 라인에서 시작 불가
--> inline-block : 새 라인에서 시작 불가. 인라인 박스 배치(width 및 height로 크기 지정 가능)
--> none: 박스 공간을 할당하지 않음. invisible.
* position : static | relative | absolute | fixed
-> static : 기본 배치 진행
-> relative: left, top, right, bottom 속성으로 박스의 상대 위치를 조정함.
근처에 위치한 박스를 기준점으로 상대 위치에 배치되며, 다른 박스와 겹쳐져 배치됨.
겹치지 않게 배치하기 위해 float 속성을 추가로 사용
-> absolute : 부모 태그 내 상대적 위치를 지정. left, top, right, bottom 값 사용.
-> fixed : 브라우저 화면 내 특정 위치를 지정함. left, top, right, bottom 값 사용.
* z-index : 박스를 Z 축으로 쌓는 순서를 정수로 지정함. 높은 번호가 위쪽에 배치됨.
겹쳐지는 박스는 반드시 position relative 또는 absolute로 지정되어야 함.
* visibility: 인라인 박스 내 컨텐츠의 보임 여부 설정.
hidden | visible
-> display: none 과 달리 할당된 공간은 유지함.
* overflow : 박스 컨텐츠가 width, height 크기를 초과하는 경우 컨텐츠를 자를지 유지할지 지정.
hidden | visible | scroll
- hidden: 박스 크기를 초과하는 컨텐츠를 표시하지 않음
- visible: 박스 크기를 초과한 상태로 컨텐츠를 표시
- scroll: 스크롤바를 박스에 항시 부착
- auto: 기본값. 박스를 초과하는 경우에만 스크롤 부착
3. 리스트 디자인 속성
ul, ol 태그를 selector로 리스트 디자인 수정
* list-style : list-style-type list-style-position list-style-image
* list-style-type: disc | armenian | circle | cjk-ideographic | decimal | georgian | lower-alpha
| lower-roman | square | upper-alpha | upper-roman | none
-> roman: I, II, III, IV...
* list-style-position: inside | outside (기본값)
* list-style-image: url("이미지파일경로");
4. table 디자인 속성
* border:
* border-collapse: collapse -> tr, td로 인한 이중 테두리 합치기
* nth-child를 사용하여 Stripe 표 생성 가능
댓글