상세 컨텐츠

본문 제목

예제

FrontEnd/HTML

by H_Develop 2022. 6. 21. 17:17

본문

기본

 

내 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

	* {margin : 10px;}
    .main {background-image : url("blue_bg.png");
    		width : 500px;
            box-shadow : 3px 3px 10px #888888;
            padding-bottom : 50px;}
            
     #one p {padding-left : 15px;
     		padding-bottom : 10px;
            color : white;
            width : 90%;
            text-align : center;}
            
	.main h1, h4 {text-align : center;
    			max-width : 100%;
                padding : 0px 20px 0px 20px;}
                
	.main h1, h4, li {color : yellow;}
    
    .main img {width : 70%;
    			display : block;
                margin-left : auto;
                margin-right : auto;}
                
	ul {width : 70%;
    	padding : 20px 100px 20px 100px;}
        
	#two {background-color : yellow;
    	width : 300px;
        height : 50px;
        display : block;
        margin-left : auto;
        margin-right : auto;}
        
	#two p {text-align : center;
    		color : black;
            line-height : 50px;
            font-size : 20px;
            font-weight : bold;}

</style>
</head>
<body>
</body>

	<div class="main">
    	<div id="one">
        	<h1>스페셜 드레스 샵</h1>
            <h4>Special Dress Shop</h4>
            <p>생일, 결혼기념일, 만난 기념일 등 특별한 알에 스페셜 드레스를 입고
				포토존에서 멋진 추억의 사진을 남겨보세요</p>
        </div>
        <img src="dress.png">
        <ul>
        	<li><p>기간 : 매주 토/일요일<br>
				13:00 ~ 마감시간 전까지</p></li>
            <li><p>장소 : 기념품 판매점 옆 스페셜 드레스<br>
				※ 키즈, 커플 드레스도 입고 되었어요!</p></li>
        </ul>
        <div id="two">
        	<p>이용요금 및 이용 방법</p>
        </div>
   </div>

</html>

선생님 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

	* {margin : 0;
    	padding : 0;}
        
	#dress {width : 600px;
    		height : 855px;
            margin : 30px;
            background-image : url("blue_bg.png");
            color : #fed45a;
            font-size : 18px;
            font-family : "돋움";
            text-align : center;
            box-shadow : 5px 5px 10px #888888;}
            
	img {width : 400px;}
    
    h1 {font-family : "맑은고딕";
    	font-size : 60px;
        color : #fed45a;
        text-shadow : 3px 3px 10px black;
        padding-top : 20px;}
        
	#eng {display : block;
    	font-size : 30px;
        color : #fed45a;
        margin : 10px 0;
        text-align : center;}
        
	p {margin : 30px 60px;
    	line-height : 150%;
        text-align : center;
        color : white;}
        
	ul {margin-top : 20px;}
    
    li {text-align : left;
    	list-style-type : square;
        margin-left : 120px;
        padding : 10px 0px 0px 15px;
        line-height : 150%;}
        
	#button {background-color : #fed45a;
    		padding : 20px;
            margin : 40px 100px;
            color : #13214d;
            font-size : 30px;
            font-weight : bold;}

</style>
</head>
<body>

	<div id="dress">
    	<h1>스페셜 드레스 샵</h1>
        <span id="eng">Special Dress Shop</span>
        <p>생일, 결혼기념일, 만난 기념일 등 특별한 날에 스페셜 드레스를 입고 
        포토존에서 멋진 추억의 사진을 남겨보세요.</p>
        <img src="dress.png">
        <ul>
        	<li>기간 : 매주 토/일요일<br>
        	<span>13:00 ~ 마감시간 전까지</span></li>
            <li>장소 : 기념품 판매점 옆 스페셜 드레스<br>
			※ 키즈, 커플 드레스도 입고 되었어요!</li>
        </ul>
        <div id="button">
        	<a>이용요금 및 이용방법</a>
        </div>
    </div>

</body>
</html>

 

 

INPUT TABLE 

 

 

내 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

	.main {width : 500px;}
    table {width : 500px;
    		border-collapse : collapse;} /* 단일 경계선 */
	td {padding : 10px;
    	border-bottom : solid 3px black;}
        
	h3 {border-bottom : solid 3px black;
    	padding-bottom : 10px;
        margin-bottom : 0px;
        width : 500px;}
        
	#bottom {float : right;}

</style>
</head>
<body>

	<div>
    	<h3>게시판 글쓰기 폼</h3>
        <table>
        	<tr>
            	<td>이름</td>
                <td>홍길동</td>
            </tr>
            <tr>
            	<td>제목</td>
                <td><input type="text" size="50" maxlength="45"></td>
            </tr>
            <tr>
            	<td>글 내용</td>
                <td><textarea cols="52" rows="7"></textarea></td>
            </tr>
            <tr>
            	<td>파일</td>
                <td><input type="file"></td>
            </tr>
        </table>
        
        <div id="bottom">
        	<input type="button" value="저장하기">
            <input type="button" value="목록보기">
        </div>
    </div>
    
</body>
</html>

선생님 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

	table {border-collapse : collapse;		/* 단일 경계선 / td의 경계선에 영향 */
    		border-top : solid 3px black;}	/* 상단 경계선 */
            
	td {border-bottom : solid 3px #cccccc;	/* 하단 경계선 */
    	padding : 10px;}
        
	.col1 {width : 80px;}
    input {width : 500px;
    		height : 25px;}
	textarea {width : 500px;
    		height : 100px;}
	#buttons {width : 620px;
    		text-align : right;
            margin-top : 20px;}
	button {padding : 5px 20px;
    		margin-left : 3px;}

</style>
</head>
<body>

	<h3>게시판 글쓰기 폼</h3>
    <table>
    	<tr>
        	<td class="col1">이름</td>
            <td>홍길동</td>
        </tr>
    	<tr>
        	<td>제목</td>
        	<td><input type="text"></td>
        </tr>
    	<tr>
        	<td>글 내용</td>
        	<td><textarea></textarea></td>
        </tr>
    	<tr>
        	<td>파일</td>
        	<td><input type="file"></td>
        </tr>
    </table>
    <div id="buttons">
    	<button>저장하기</button><button>목록보기</button>
	</div>
</body>
</html>

 

'FrontEnd > HTML' 카테고리의 다른 글

HTML 레이아웃 요소 (header, sidebar, section, footer)  (0) 2022.06.22
레이아웃 (배치),(margin:0 auto;),(float),(clear),(layout)  (0) 2022.06.21
Table, Display, 목록 꾸미기  (0) 2022.06.20
CSS 배경 이미지, repeat, background-position  (0) 2022.06.20
선택자 (그룹, ID, CLASS, 하위)  (0) 2022.06.20

관련글 더보기

티스토리툴바