css

2020/12/01(화)

 

 

그림자 효과 만들기

<boxShadow01.jsp>

 

 

 

 

---

테이블에 관련된 속성 알아보기

<emptyCells01.jsp>

 

 

 

 

 

---

테이블에 관련된 속성 알아보기

<borderCollapse01.jsp>

 

 

 

 

 

 

 

 

 

 

---

요소의 표시와 배치

<myElementEx01.jsp>

top / bottom / left / right / width / height 속성을 사용한 해당 요소들의 위치 조정

(원활한 실습을 위해 요소들의 position속성은 absolute로 설정)

 

 

#mydiv{

      position:absolute;

      top:0px;

      left:0px;

      width:300px;

      height:200px;

      background: red;

      }

.test1{ /* 소녀시대 */

      position:absolute;

      top:30px;

      left:30px;

      background:aqua;

      }

.test2{ /* 원더걸스 */

      position:absolute;

      top:100px;

      left:50px;

      background:fuchsia;

      }

.test3{ /* 티아라 */

      background:yellow;

      position:absolute;

      top:60px;

      width:150px;

      height:75px;

      }

<div id="mydiv">

      <div class="test1">소녀시대</div>

      <div class="test2">원더걸스</div>

      <div class="test3">티아라</div>

</div>

 

 

 

 

<myElementEx02.jsp>

overflow 속성 값 : visible / hidden

visible : 넘치는 부분 전부 보여줌

hidden : 넘치는 부분 보여주지 않음

 

 

---

요소의 표시와 배치

<positionEx01.jsp>

position : absolute 속성을 사용하여 레이어(layer)의 위치를 잡아 보는 예시

position : absolute 는 바깥 컨테이너와 절대적인 위치 관계

 

 

 

 

div{  ---> test1,2,3의 크기
width:100px;
height:100px;
position:absolute;
}
#mydiv{ ---> test1,2,3의 베이스(?)
top:10px;
left:10px;
width:300px;
height:300px;
background: green;
}
.test1{ /* 소녀시대 */
top:20px;
left:30px;
background:aqua;
}
.test2{ /* 원더걸스 */ 
bottom:20px;
background:fuchsia;
}
.test3{ /* 티아라의 상위 개념인 mydiv의 상단 10, 왼쪽 10px 만큼 이동한다 */
top:10px;
left:10px;
background:yellow;
}

 

 

---

 

요소의 표시와 배치

<positionEx02.jsp>

position : static 속성을 사용하여 레이어(layer)의 위치를 잡아 보는 예시

position : static은 기본값으로, top, right, bottom, left 등을 지정해도 값이 무시됨

div{
width:200px; 
height:100px;
border:1px solid #000000;

position:static; 

}
.test1{
top:100px; /* 무시됨 */
left:100px; /* 무시됨 */
width:200px;
background:green;
}
.test2{
width: 300px;
height: 100px;
background: yellow;
}
.test3{
width: 400px;
height: 100px;
background: blue;
}

 

 

---

요소의 표시와 배치

<positionEx03.jsp>

position : relative 속성을 사용하여 레이어(layer)의 위치를 잡아 보는 예시

position : relative 해당 요소의 바로 앞의 요소에 대한 상대적인 개념이다.

 

div{ /* 모든 div 요소에 대하여 공통 적용 사항 */
width:100px;
height:100px;
position:relative;
}
#mydiv{
top:50px;
left:50px;
width:400px;
height:400px;
background: pink;
}
.test1{  /* 소녀 시대 */
top:10px; ---> 부모(#mydiv)에 대한 상대적인 위치
left:40px;
background:aqua;
}
.test2{  /* 원더 걸스 */
---> 부모(#mydiv)에 대하여 20px인데 test1이 10px를 띄고 있으므로
---> test2는 test1에 대하여 20-10=10px를 띄운다. 
top:20px;
left:20px;
background:fuchsia;
}
.test3{  /* 티아라 */
---> 부모(#mydiv)에 대하여 40px인데 test1=10px, test2=10px를 띄고 있으므로
---> test3는 40-10-10= 20px를 띄운다. 
top:40px;
left:40px;
background:yellow;
}
.test4{  /* 오마이걸 */
---> 원래 있는 곳에서 상대적으로 얼마나 움직이는지 확인 
top:20px;
left:100px;
background:grey;
}

 

 

---

절대 좌표 방식으로 배치하기

 

<position05.jsp>

<position06.jsp>

 

 

 

 

---> position 속성이 absolute이면 (position: absolute)

top bottom 속성을 이용해 상단 y좌표를 설정하고

left, right 속성을 이용해 좌우 x좌표를 설정함.

서로 겹치는 경우에는 나중에 삽입된 요소가 위에 표시,

겹치는 순서를 조정하려면 z-index속성을 이용하면 됨.

 

 

---> position 속성이 relative이면 (position: relative)

현재 삽입된 위치의 부모를 기준으로

top, bottom 속성을 이용해 상단의 y좌표를 설정하고,

left, right 속성을 이용해 좌우 x좌표를 설정함.

이와 같은 상대 좌표 지정 방식은

float속성과 함께 사용하는 경우가 많고, 단위는 px, % 등을 이용함.

 

 

 

---

절대 좌표 방식으로 배치하기

<position07.jsp>

position: fixed로 지정하면 스크롤바의 이동에도 상관없이 현재 좌표 그대로 유지.

 

 

---> position 속성을 fixed의 값으로 지정하면 (position: fixed)

가로와 세로의 스크롤바 이동에 상관없이

현재 좌표를 유지하는 고정 좌표 형식으로 레이아웃이 지정됨.

고정 좌표 방식은 배너, 사이드바, 네비게이션과 같이

방문자에게 노출을 많이 해야 하는 요소에 적합함.

 

---> 스크롤바를 이동시켜보면,

position속성을 fixed로 지정한 상단 header, 좌측의 nav 요소는

마우스 스크롤이 발생하더라도 항상 현재 위치 그대로를 유지함.

반면, section요소 안에 삽입된 내용은

스크롤바의 움직임에 따라 이동이 되어 표시됨.