위치(Position) 스타일
- position 속성
- absolute : 상위 요소에 대한 절대 배치
- relative : 상위 요소에 대한 상대 배치
- fixed : 고정 위치 지정
#box1 {
position: absolute;
left: 30px;
top: 30px;
width: 100px;
height: 100px;
background: yellow;
}
#box2 {
width: 100px;
height: 100px;
background: pink;
}
- z-index 속성 : 요소 쌓는 순서 정하기
⭐ 숫자가 클수록 앞에 위치
#f1 {
left: 0;
top: 0;
z-index: 3; /* 맨 앞 */
}
#f2 {
left: 150px;
top: 50px;
z-index: 2; /* 중간 */
}
#f3 {
left: 300px;
top: 100px;
z-index: 1; /* 맨 뒤 */
}
- resize 속성 : 요소의 크기 조절 기능
.resize {
font-size: 12px;
width: 200px;
height: 50px;
border: 1px solid #06F;
overflow: hidden;
resize: both; /* 가로, 세로 사이즈 조절 가능 */
}
- float 속성 : 태그를 가로 정렬
div#a {
background-color: pink;
width: 75%;
float: left;
}
div#b {
background-color: green;
width: 24%;
float: right;
}
- clear 속성 : float 속성 무효화
div#a {
width: 75%;
background-color: pink;
float: left;
}
div#b {
width: 23%;
background-color: green;
float: right;
}
div#c {
width: 100%;
background-color:yellow;
clear: both;
}
float 활용 - 입력 양식 만들기
- float 속성을 활용하여 입력 양식 만들기
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul li {
padding: 0;
margin: 0 0 10px 0;
}
label {
width: 150px;
float: left; /* label과 input 사이의 간격 부여 */
}
form {
width: 500px;
margin : 0 auto;
}
'Web > CSS3' 카테고리의 다른 글
[CSS] 표 스타일, 변형 스타일, 미디어 쿼리 (0) | 2021.08.03 |
---|---|
[CSS] 박스 모델 (0) | 2021.08.03 |
[CSS] 색상 스타일, 배경 스타일 (0) | 2021.08.03 |
[CSS] 폰트 스타일, 텍스트 스타일, 목록 스타일 (0) | 2021.08.03 |
[CSS] CSS import, 스타일 우선순위, 선택자 (0) | 2021.08.03 |