CSS 배치, 블록/인라인/인라인블록박스(display, position), 리스트/표/폼 꾸미기
배치
CSS3로 HTML 태그가 출력되는 위치 지정
HTML 태그는 웹 페이지에 작성된 순서와 달리 배치 가능
배치 기능의 CSS3 프로퍼티들
display , position , left, right, top, bottom , float , z-index,
Visibility, overflow
블록 박스와 인라인 박스
HTML 태그는 블록 태그와 인라인 태그로 나누어짐.
블록박스 - 블록 태그 , 인라인 박스 - 인라인 태그
<div>DIV</div>
<div>DIV</div>
<div>DIV</div>
박스의 유형 제어 : display
display : block(블록박스) | inline(인라인 박스) | inline-block(인라인블록 박스)
| 블록박스 | 인라인박스 | 인라인블록박스 |
| 항상 새 라인에서 시작 | 새라인에서 시작 못함 라인 안(inline)에 있음 |
새라인에서 시작 못함 라인 안(inline)에 있음 |
| 블록 박스 내에만 배치 | 모든 박스 내 배치 가능 | 모든 박스 내 배치가능 |
| 옆에 다른 요소 배치 불가능 | 옆에 다른 요소 배치 가능 | 옆에 다른 요소 배치가능 |
| width, height로 크기조절 | width, height로 조절 불가 | width,height 조절 가능 |
| padding, border,margin 조절 가능 | padding, border,margin 조절 불가능 | padding, border,margin 조절 가능 |
display : block
예) <span>을 블록 박스로 수정
span { /*CSS3 정의*/
display : block;
width : 100px;
height : 60px;
}
<div>
<span>block span</span>과
<span>block span</span>입니다.
</div>
* 대표적인 인라인 태그 <span>이 블록 박스로 한 줄을 독점적으로 차지하여 옆에 다른 태그가 출력되지 않았다.
display : inline
예) <div>를 인라인 박스로 수정
div div { display : inline; }
<div style="background : orange">
<div>inline DIV </div>
<div>inline DIV </div>
<div>inline DIV </div>
</div>
* <div>가 inline박스로 지정되어 , 다른 요소의 옆에 출력되는 것을 볼 수 있다.
display : inline-block
예) <div>를 인라인 블록 박스로 수정
div div {
display : inline-block;
border : 2px dotted orangered;
background : powderblue;
margin : 10px;
width : 60px;
height : 80px;
}
<div style="background : orange">
<div> inline-block DIV</div>
<div> inline-block DIV</div>
<div> inline-block DIV</div>
</div>
* inline-block 박스는 라인 안에 다른 요소들과 함께 배치, 동시에 width, height, margin으로 크기 조절 가능
박스의 배치 : position
normal flow
HTML 태그를 배치 한 순서 대로 웹 페이지에 나타난다.
position 프로퍼티를 이용하여 normal flow 무시하고 다르게 배치 할 수 있다.
position 프로퍼티를 이용한 배치 방법
- 정적 배치 - position : static (디폴트 ,default : 생략가능)
- 상대 배치 - position : relative
- 절대 배치 - position : absolute
- 고정 배치 - position : fixed
- 유동 배치 - float : left or right
position 프로퍼티를 사용할 때, 태그의 위치와 크기
· top, bottom, left, right, width, height 프로퍼티로 지정 (배치 방법에 따라 다르게 사용될 수 있다.)
CSS3로 리스트 꾸미기
리스트의 모양을 꾸미는 CSS3 프로퍼티
| 프로퍼티 | 설명 |
| list-style-type | 아이템 마커 타입 지정 |
| list-style-image | 아이템 마커 이미지 지정 |
| list-style-position | 아이템 마커의 출력 위치 지정(아이템 영역 내 혹은 영역 밖) |
| list-style | 앞의 3개 프로퍼티 값을 한 번에 지정하는 단축 프로퍼티 |
리스트와 아이템에 배경색 입히기
background 프로퍼티 이용
ul {
background : goldenrod;
padding : 10px 10px 10px 50px;
}
ul li {
background : greenyellow;
margin-bottom : 5px;
}
마커의 위치 : list-style-position
list-style-position : inside | outside
ul {
background : goldenrod;
padding : 10px 10px 10px 50px;
list-style-position : inside;
}
ul li {
background : greenyellow;
margin-bottom : 5px;
}
마커 종류 : list-style-type
list-style-type : disc | armenian | circle | cjk-ideographic | decimal | georgian| lower-alpha | lower-roman | square | upper-alpha | upper-roman | none
이미지 마커 : list-style-image
사용자가 이미지 마커 작성 가능
ul {
background : goldenrod;
padding : 10px 10px 10px 50px;
list-style-image : url("img/marker.png");
}
ul li {
background : greenyellow;
margin-bottom : 5px;
}
CSS3로 표 꾸미기
표 테투리 제어, border
중복된 테두리 합치기
border-collapse : collapse ; /*중복된 테두리 합치기*/
셀 크기 제어 , width, height
th { height : 40px; width : 100px; }
td { height : 20px; width : 100px; }
위에 제목 해딩만 셀을 크게 하고 싶다, 아래 tfoot부분은 tbody 동일하게 만들어보자.
thead th { height : 40px; width : 100px; }
th, td { height : 20px; width: 100px; }
셀 여백 및 정렬
padding : 여백
text-align : 정렬 (left, center, right)
폼 꾸미기
input[type=text] 폼 요소의 글자 색 지정
input[type=text] { color : red; }
input[type=text]의 폼 요소의 테두리 만들기
input[type=text] { border : 2px solid skyblue; border-radius : 5px; }
폼 요소의 마우스 처리
마우스가 올라 올때 :hover
input[type=text]:hover { background : aliceblue; }
포커스를 받을 때 :focus
input[type=text]:focus { font-size : 120%; }
CSS3 스타일로 태그에 동적 변화 만들기
자바스크립트로 구현하던 것을 CSS3로 작성 가능
3가지 기법 지원
- 애니메이션 (animation)
- 전환 (transition)
- 변환 (transform)
CSS3로 애니메이션 만들기
HTML 태그의 모양 변화를 시간 단위로 설정
애니메이션 코딩 작업
1. @keyframes로 HTML 태그의 시간별 모양 변화 만들기
@keyframews name {
시간 비율 { 스타일; 스타일; }
.....
시간 비율 { 스타일; 스타일; }
}
전환 (transition)
HTML 태그에 적용된 CSS3 프로퍼티 값의 변화를 서서히 진행 시켜 애니메이션 효과 생성
HTML 태그의 색이나 모양, 위치 등이 서서히 변하는 효과
전환 설정 : transition 프로퍼티 이용
변환 (transform)
텍스트나 이미지를 회전, 확대 다양한 기하학적인 모양으로 출력
회전 각도의 단위는 deg이며 시계방향으로 회전
예) div { transform : rotate(20deg); }
div {transform : skew(0deg, -20deg); }
div {transform : translateY(100px); }
div {transform : scale(3,1); }