css

2020/12/02

 

목록을 이용해 가로형태의 메뉴 만들기

<menuHorizintal.jsp>

#pipe { 

      margin-left: 0px;

      width: 550px;

      padding: 5px;

      border: 1px solid #000000;

      }

#pipe li {      ---> 테두리 생성

      margin-left: 0px;

      padding: 3px 15px;

      list-style: none;

      border: 1px solid #000000;

      }

#pipe li.first {      ---> 가로로 정렬

      margin-left: 0px;

      border-left: none;

      list-style: none;

     display: inline;

      }

#pipe a {     ---> ul태그 내의 a태그

      margin-right: 5px;

      text-decoration: none;

      font-size: 12px;

      color: #304e06;

      font-weight: bold;

      }

#pipe a:hover {    ---> 마우스가 특정 영역에 들어갔다.

 

      color: red;

      }

 

 

 

 

세로형 메뉴 만들기

<menuVertical.jsp>

#sidemenu { /* float 속성을 사용하여 메뉴를 화면의 왼쪽에 위치시킨다. */
float:left;
width:25%;
margin-top:20px;
}
#sidemenu a {   /* 글자 스타일 지정 */ 
font-size: 13px;
color: darkgreen;
text-decoration: none;
font-weight: bold;
}

sidemenu a:hover {
color: red;
}
ul { /* 목록 동그라미 삭제 */
list-style: none;
}
#sidemenu ul li{ /* 줄간격 조정 */
margin-top: 20px;
}

 

 

---

이미지 요소 옆에 문단 흐르게 만들기

<float00.jsp>

 

 

 

---

이미지 요소를 세로로 배치하기

<displayBlock01.jsp>

body { /* 이미지 기본(가로)로 배치*/
margin-top:30px;
}
#newBookBox { /* 외부 테두리 박스 */
margin:30px auto;
width:400px;
background-color:#CCCC99;
border-radius:10px;
padding:20px;
}
h1 { /* 상단 New Book의 테두리 둥글게 변경 */
font:20px 굴림; 
color:#FFFFFF;
background-color:#669900;
border-radius:20px;
padding:5px 30px;
margin-bottom:20px;
}
img { /* 이미지 세로 배치  */
border:3px groove #999999;
background-color:#efefef;
padding:5px;
margin:0px auto 15px auto;
display:block; /* display:inline;은 이미지 가로 배열  */
}

 

 

 

---

목록 요소를 가로로 배치하기

<displayInline01.jsp>

마우스 오버 시 글자 크기 및 색상 변화

 

 

 

body { 
margin:50px 0px;
}
#topMenu { /* 컨테이너 박스 */
list-style: none; /* 점 삭제 */
width: 100%;
background-color: #ff66dd; /*배경색*/
padding: 10px; /*배경 여유*/
margin: 0px;
text-align: center; /*가운데 배열*/
}
#topMenu li {
 display:inline; /* 메뉴들을 일렬로 세움  */
 padding-left: 50px; /* 메뉴 간 간격 조정 */

}
a { /* 메뉴의 글꼴, 색상, 밑줄 제거 등 */
font:1.5em arial sans-serif;
color: white;
text-decoration: none; /*언더라인 삭제*/
}
a:hover { /* 가상클래스, 마우스가 영역으로 들어 오면 */
color:#ffff33;
font-size: 1.7em; /* 마우스오버 시 글자크기 커짐 */
}

 

 

 

---

다단에 구분선 표시하기

<column01.jsp>

body { 
font:12px "맑은 고딕",돋움,arial; 
margin:0px;
}
ul, li, dl, dt, dd {
margin:0px;
padding:0px;
}
h2 { /* 상단 제목 */
font-size:2.0em; 
color:#FFFFFF;
background-color:#FF3399; 
text-align:center; 
padding:10px 15px; 
width:100%;
margin:20px 0px;
}
h3 { /* 파트별 제목 */
font-size:1.2em; 
color: #006600 ;
}
p { /* 파트별 내용물 */ 
line-height:150%;
margin-bottom:30px;
}
#bookPart { /* 문단 나누기 */

/* -----문단 간격 조정-----*/ 

width:850px;
margin-left:50px;
text-align:justify;
margin-bottom:50px;

/* -----문단 구분하기-----*/ 
column-count:5; /*문단 3개로 구분*/
column-rule:1px dashed #666666;
column-gap:50px; /*문단라인과 내용물 간 간격*/

}

 

 

 

---

box-flex 속성으로 비율로 크기 조정하기

<boxFlex01.jsp>

* box-flex : 전체의 비율을 지정

Vendor Prefix는 moz, webkit 등을 가리킴.

moz는 Firefox, webkit은 Safari&Chrome.

* css Vendor Prefix(접두어) 참고 블로그 :  http://gxnzi.tistory.com/54

 

 

li.red{

-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
box-flex:1.0;
background-color:red;
border-top-left-radius: 30px;/*우측 상단각*/
border-bottom-left-radius: 30px;/*우측 하단각*/
text-align:right;
}

 

 

 

 

gradient backgrounds

transition : width 25%;