CSS

로그인 페이지 만들기

@charset "utf-8";
*{margin: 0; padding: 0;}
body{
    border-top: 15px solid #333;
}
#loginForm{
    border-top: 50px solid #ff6633;
    padding-top: 30px;
}
#loginForm h1{
    text-align: center;
    font-size: 50px;
    color: #c8c8c8;
}
#loginForm fieldset{
    width: 330px;
    margin: 10px auto;
    padding: 50px;
    border: 5px solid #efefef;
    border-radius: 15px;
}
#loginForm fieldset legend{
    display: none;
}
#loginForm fieldset #login{
    float: left;
}
#loginForm fieldset #login p{}
#loginForm fieldset #login p label{
    display: inline-block;
    width: 75px;
    font-weight: bold;
}
#loginForm fieldset #login p input{
    width: 150px;
    border: 1px solid #999;
    padding: 2px;
    margin-bottom: 5px;
}
#loginForm fieldset #btnLogin{
    background: #f63;
    margin-left: 10px;
    border: none;
    border-radius: 5px;
    width: 83px;
    height: 50px;
    text-align: center;
    color: #fff;
}
#loginForm fieldset #btn1{
    clear: both;
    margin-left: 85px;
    padding: 10px 0;
}
#loginForm fieldset #btn2{
    margin-left: 77px;
}
#loginForm fieldset #btn2 input{
    background: #ddd;
    border: none;
    border-radius: 5px;
    color: #fff;
    padding: 5px 10px;
}

• float:left 가 된 인라인요소를 다음 줄로 넘길때 clear:both를 사용한다.

주문 폼 만들기

@charset "utf-8";
*{margin: 0; padding: 0;}
body{
    margin-top: 50px;
    font-size: 13px;
}
#wrapper{
    width: 500px;
    border: 5px solid #f39;
    margin: 0 auto;
    padding: 15px;
    border-radius: 10px;
}
#orderForm{
    display: table;
    border-collapse: collapse;
}
#orderForm h1{
    display: table-caption;
    padding: 5px;
    text-align: center;
    margin-bottom: 10px;
    font-size: 15px;
}
#orderForm h1 span{
    background: #333;
    display: block;
    color: #fff;
    padding: 5px;
}
#orderForm p:not(:last-child){
    display: table-row;
    border-bottom: 1px solid #b6b6b6;
#orderForm p label{
    display: table-cell;
    text-align: center;
    padding: 5px 0;
}
#orderForm p .cellStyle{
    display: table-cell;
    padding: 5px;
}
#orderForm p .cellStyle input,#orderForm p .cellStyle select{
    border: 2px solid #f39;
    background: #ccc;
    color: #fff;
    padding: 5px;
}
#orderForm p .cellStyle #userId{
    width: 80px;
}
#orderForm p .cellStyle #userPhone1{
    width: 60px;
}
#orderForm p .cellStyle #userPhone2, #orderForm p .cellStyle #userPhone3{
    width: 100px;
}
#orderForm p .cellStyle #userEmail1, #orderForm p .cellStyle #userEmail2{
    width: 134px;
}
#orderForm p .cellStyle #userAdd1{
    width: 100px;
    margin-bottom: 5px;
}
#orderForm p .cellStyle #userAddBtn{
    border-radius: 20px;
    background: #fff;
    color: #f39;
    width: 150px;
    margin-left: 5px;
}
#orderForm p .cellStyle #userAdd2, #orderForm p .cellStyle #userAdd3{
    margin-bottom: 5px;
    width: 302px;

}
#orderForm p:last-child{
    padding: 5px;
    text-align: center;
}
#orderForm p #btnSubmit{
    padding: 5px 20px;
    background: #f39;
    color: #fff;
    border: none;
    position: relative;
    left: 171px;
    border-radius: 5px;
}

세로바가 있는 테이블 헤더 만들기

@charset "utf-8";
*{margin: 0; padding: 0;}/* 크로스 브라우징을 위해 */
body{
    font: .9em "맑은고딕",돋움, sans-serif;
}
body h1{
    text-align: center;
}
body #tableDesign{
    margin: 0 auto;
    border-collapse: collapse;
}
body #tableDesign caption{
    display: none;
}
body #tableDesign tr th{
    background-color: #efefef;
    padding: 10px 0;
    border-top: 1px solid #333; 
    border-bottom: 1px solid #333; 
}
body #tableDesign tr th:nth-child(1){width: 80px;}
body #tableDesign tr th:nth-child(2){width: 300px;}
body #tableDesign tr th:nth-child(3){width: 170px;}
body #tableDesign tr th:nth-child(4){width: 150px;}
body #tableDesign tr th:nth-child(5){width: 120px;}
body #tableDesign tr th span{
    border-right: 1px solid #939393;
    display: block;
}
body #tableDesign tr td:first-child{
}
body #tableDesign tr td{
    text-align: center;
    padding: 8px 0;
    border-bottom: 1px solid #333;
}
body #tableDesign tr td.leftStyle{
    text-align: left;
}
body #tableDesign tr td input{
    background: #666;
    color: #fff;
    border: none;
    padding: 5px 20px;
    border-radius: 5px;
    cursor: pointer;
}

*th옆 번호 | 이벤트 명| 이벤트기간| .. 은 각 th에 width를 넣어 border-right를 넣어준다.

해상도 크기에 따라 디자인 다르게 설정하기 (반응형 웹)

body{
	background: url(./images/pattern.png);
	}
h1 span{
	display: none;
    }
div{
	text-align: right;
    }
.btn{
	background: #000;
    color: #fff;
    border: none;
    }
@media screen and (min-width: 320px) and (max-width:799px) {
	h1{
    	width: 100%;
        height: 295px;
        background: url(./images/mediaQuery1.png) no-repeat 			center top;
        }
	.btn{
		padding: 5px 10px;
    	font-size: 1.1em;
    	border-radius: 5px;
    	}
 }
@media screen and (min-width: 800px) and (max-width:1024px) {
	h1{
    	width: 100%;
        height: 520px;
        background: url(./images/mediaQuery2.png) no-repeat center top;
        }
	.btn{
		padding: 10px 20px;
    	font-size: 2.1em;
    	border-radius: 10px;
    	}
}
@media screen and (min-width: 1025px){
	h1{
    	width: 100%;
        height: 720px;
        background: url(./images/mediaQuery3.png) no-repeat center top;
        }
	.btn{
    	padding: 15px 30px;
    	font-size: 3.1em;
        border-radius: 15px;
        }
}

미디어쿼리

미디어쿼리 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술을 말한다.

• @media only screen and (조건문) {실행문}
• @media : 미디어 쿼리가 시작됨을 표시
• only : 미디어 쿼리 구문을 해석하라는 명령어(생략이 가능)
• all (only 또는) : 미디어 쿼리 해석해야 할 대상을 나타냄(생략이 가능)
• screen : 컴퓨터 스크린에서 사용할 css 정의
• 조건문 : 해당 크기를 설정
• 실행문 : 조건에 따른 실행을 설정
  
  *창을 줄이면 설정한 넓이값으로 인해 색상을 변경시킨다.

/* 화면 너비가 0~1280px 까지 pc화면1 */
            @media screen and (max-width:1280px) {
                body{background: yellow; color: #fff;}
            }
            /* 화면 너비가 0~1024px 까지 pc화면2 */
            @media screen and (max-width:1024px) {
                body{background: rgb(35, 198, 122); color: #fff;}
            }
            /* 화면 너비가 0~960px 까지 노트북 화면 */
            @media screen and (max-width:960px) {
                body{background: rgb(62, 44, 222); color: #fff;}
            }
            /* 화면 너비가 0~768px 까지 태블릿 화면 */
            @media screen and (max-width:768px) {
                body{background: rgb(250, 144, 218); color: #fff;}
            }
            /* 화면 너비가 0~599px 까지 모바일 화면 */
            @media screen and (max-width:599px) {
                body{background: rgb(7, 70, 80); color: #fff;}
            }

반응형 메뉴 만들기

@charset "utf-8";
*{margin: 0; padding: 0;}

body{
    background: #666;
    margin-top: 80px;
}
#wrapper{
    margin: 0 auto;
    overflow: hidden;
}
#wrapper ul{
    list-style: none;
}
#wrapper ul li{
    background-color: #fff;
    background-position: center center;
    background-repeat: no-repeat;
    float: left;
    text-align: center;
}
#wrapper ul li a{
    text-decoration: none;
    color: #fff;
    font-size: 2em;
    text-shadow: 1px 1px 10px #000;
    font-weight: bold;
}
#wrapper #mainNav li:nth-child(1){
    background:#1a781f;
    background:-webkit-linear-gradient(top, #9de484, #1a781f);
    background:-moz-linear-gradient(top, #9de484, #1a781f);
}
#wrapper #mainNav li:nth-child(8){
    background: #5a1818;
    background:-webkit-linear-gradient(top, #e48984, #5a1818);
    background:-moz-linear-gradient(top, #e48984, #5a1818);
}

@media screen and (min-width:800px){
    #wrapper{
        width: 744px;
    }
    
    #wrapper ul li{
        width: 150px;
        height: 150px;
        padding: 10px;
        border-radius: 20px;
        line-height: 150px;
        border: 5px solid #dbdbdb;
        margin-bottom: 8px;
    }
    #wrapper ul li a{
        
    }
    #wrapper ul li:not(:nth-child(4n)) {
        margin-right: 8px;
    }
 
    #wrapper #mainNav li:nth-child(2){
        background-image: url(../images/sandal.png);
    }
    #wrapper #mainNav li:nth-child(3){
        background-image: url(../images/neck.png);
    }
    #wrapper #mainNav li:nth-child(4){
        background-image: url(../images/bag.png);
    }
    #wrapper #mainNav li:nth-child(5){
        background-image: url(../images/top.png);
    }
    #wrapper #mainNav li:nth-child(6){
        background-image: url(../images/dress.png);
    }
    #wrapper #mainNav li:nth-child(7){
        background-image: url(../images/bottom.png);
    }
 
}
@media screen and (min-width:380px) and (max-width:799px){
    #wrapper{
        width: 376px;
        }
   	#wrapper ul li{
        width: 100px;
        height: 100px;
        padding: 8px;
        border-radius: 15px;
        line-height: 100px;
        border: 3px solid #dbdbdb;
        margin-bottom: 5px;
    }
    #wrapper ul li a{
        font-size: 1.1em;
    }
    #wrapper ul li:not(:nth-child(3n)) {
        margin-right: 5px;
    }
 	#wrapper #mainNav li:nth-child(2){
        background-image: url(../images/sandal2.png);
    }
    #wrapper #mainNav li:nth-child(3){
        background-image: url(../images/neck2.png);
    }
    #wrapper #mainNav li:nth-child(4){
        background-image: url(../images/bag2.png);
    }
    #wrapper #mainNav li:nth-child(5){
        background-image: url(../images/top2.png);
    }
    #wrapper #mainNav li:nth-child(6){
        background-image: url(../images/dress2.png);
    }
    #wrapper #mainNav li:nth-child(7){
        background-image: url(../images/bottom2.png);
    }
}
@media screen and (max-width:379px){
    #wrapper{
        width: 288px;
    	}
    #wrapper ul li{
        width: 80px;
        height: 80px;
        padding: 5px;
        border-radius: 10px;
        line-height: 80px;
        border: 2px solid #dbdbdb;
        margin-bottom: 3px;
    }
    #wrapper ul li a{
        font-size: .5em;
    }
    #wrapper ul li:not(:nth-child(3n)) {
        margin-right: 3px;
    }
 	#wrapper #mainNav li:nth-child(2){
        background-image: url(../images/sandal3.png);
    }
    #wrapper #mainNav li:nth-child(3){
        background-image: url(../images/neck3.png);
    }
    #wrapper #mainNav li:nth-child(4){
        background-image: url(../images/bag3.png);
    }
    #wrapper #mainNav li:nth-child(5){
        background-image: url(../images/top3.png);
    }
    #wrapper #mainNav li:nth-child(6){
        background-image: url(../images/dress3.png);
    }
    #wrapper #mainNav li:nth-child(7){
        background-image: url(../images/bottom3.png);
    }
}