My Notes

위치(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;
}