과제1
더보기

 

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>개인과제01</title>

    <!--외부스타일시트-->
    <link href="../resources/css/homework.css" rel="stylesheet" type="text/css">


</head>


<body>
    
<!-- 4. 화면을 꽉 채우는 배경 이미지 배치 -->
<div id="menu" class="big-bg">

        <!-- 2. header 만들기 -->
        <header class="page-header wrapper">
        </header>
        <!-- 3. 콘텐츠 부분 만들기 -->

        <div class="menu-content wrapper">
            <div>
                <img class="colorlogo" src="../resources/images/인스타폰트.jpg" >
            </div>
            <div>
                <img class="colorlogo1" src="../resources/images/아이디비번.png" >  
            </div> 
            <a class="button" href="개인과제02.html" target="_blank"><b>로그인</b></a>
            
            <br>
            <div>
                <img class="colorlogo2" src="../resources/images/또는.png" >  
            </div> 

            <div class="pwd">
                <p>비밀번호를 잊으셨나요?</p>
            </div> 

        </div>

        <br>
        <div class="menu-content1">
            
            계정이 없으신가요? <b class="join">가입하기</b> 
            
        </div>

        <br>

        <div class="menu-content2">
            앱을 다운로드 하세요
             </div>

             <br>
        <div class="download">
            <img src="../resources/images/다운로드하세요.png">
        </div>


    </div>

    <!-- 4. 푸터 만들기 -->
    <footer>
        <div class="wrapper">
            <p><small>Meta
                소개
                블로그
                채용 정보
                도움말
                API
                개인정보처리방침
                약관
                인기 계정
                해시태그
                위치
                Instagram Lite
                <br>
                뷰티
                댄스
                피트니스
                식음료
                집 및 정원
                음악
                시각 예술
                <br>
                한국어
                © 2022 Instagram from Meta</small></p>
        </div>
    </footer>




</div>

</body>

</html>

 

 

css

 

@charset "UTF-8";       /* 인코딩 문자 깨짐 방지 */

html {
    /* 사용자 설정 문자 크기 그대로 반영 되도록 */
    font-size : 100%;
}

body {
    background-color: white;
    text-align: center;
    line-height: 2.0;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}




/* menu ----------------------------------------------------- */

#menu {
    background-color: white;
    min-height: 80vh;
}


.menu-content {
    display:inline-block;
    background-color: white;
    border : 1px;
    border-style: solid;
    border-color: #dbdbdb;
    max-width: 500px;
    height: 500px;
    margin-top : 5%;
}



.colorlogo {
    position : center;
    width: 50%;
    height : auto;
    margin-top: 30px;
}

.colorlogo1 {
    position : center;
    width: 450px;
    height : auto;
    margin-top: 38px;
}



/* 버튼 */
.button {
    background: #0095f6;
    color : white;
    padding: 12px 153px;
    border-radius: 8px;
    font-size: 1.15em;
    
}


.colorlogo2 {
    position : center;
    width: 400px;
    height : auto;
    margin-top: 30px;
}

.pwd {
    text-align: center;
    color : #8e8e8e;
    margin-top: 10px;
}





.menu-content1 {
    display:inline-block;
    background-color: white;
    border : 1px;
    border-style: solid;
    border-color: #dbdbdb;
    width: 500px;
    height: 60px;
    margin-top : 20px;
    font-size: larger;
    list-style: none;
    text-align: center;
    padding-top: 20px;
}


.join {
    color:#0095f6;
}

.menu-content2 {
    display:inline-block;
    background-color: white;
    border : 1px;
    border-style: solid;
    border-color: white;
    width: 500px;
    height: 40px;
    margin-top : 20px;
    font-size: larger;
    list-style: none;
    text-align: center;
    padding-top: 10px;
}



.menu-content .page-title {
    text-align: center;
}


.wrapper {
    background-color: white;
}


.download {
    position:center;
    display:inline-block;
    width:400px;
    height:auto;
    padding-top: 10px;
}







/* for mobile ----------------------------------- */
@media (max-width : 600px) {
    .menu-content {
        margin-top: 20%;
    }
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

저작자표시 비영리 변경금지

'문제 풀이 > HTML5·CSS3 문제풀이' 카테고리의 다른 글

HTML 화면 구현 과제  (0) 2022.02.09

 

 

 

 

 

▼ 실습3 폼관련태그 ▼ (더보기 클릭)
더보기
더보기
더보기

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>[실습3]폼관련태그실습</title>
</head>
<body>
    
<form action=""  method="get">
    <label for="name"> 고객명 : </label>
    <input type="text" size="20" name="name" id="name"><br>
    <br>
    <label for="tel"> 전화번호 : </label>
    <input type="number" size="20" name="tel" id="tel"><br>
    <br>
    <label for="email"> 전화번호 : </label>
    <input type="email" size="20" name="email" id="email">
</form>
<br>
<label>피자 선택</label>
<select name="pizza">
    <option value="pe" selected>피자를 선택하세요.</option>
    <option value="pe">페퍼로니소금피자</option>
    <option value="pe">포테이토목막힘피자</option>
    <option value="pe">치자피즈피자</option>
</select>

<br>
<br>

<fieldset>
    <legend>피자 사이즈</legend>
    <input type="radio" id="small" name="pizza" value="small">
    <label for="small">Small</label>
    <br><br>
    <input type="radio" id="medium" name="pizza" value="medium">
    <label for="medium">Medium</label>
    <br><br>
    <input type="radio" id="large" name="pizza" value="large">
    <label for="large">Large</label>
</fieldset>

<br>

<fieldset>
    <legend>토핑 선택</legend>
    <input type="checkbox" id="bacon" name="topping" value="bacon">
    <label for="bacon">베이컨</label>
    <br><br>
    <input type="checkbox" id="cheeze" name="pizza" value="cheeze">
    <label for="cheeze">치즈</label>
    <br><br>
    <input type="checkbox" id="onion" name="pizza" value="onion">
    <label for="onion">양파</label>
    <br><br>
    <input type="checkbox" id="mushroom" name="pizza" value="mushroom">
    <label for="mushroom">버섯</label>
</fieldset>
<br>

<label>희망 배송 시간 : </label>
<input type="time" id="time" value="-- --:--" selected></input>

<br><br>

<label>배송시 요청사항 : </label>
<textarea cols="20" rows="3"></textarea>

<br>
<br>

<input type="submit" value="주문하기">


</body>
</html>

 

 

 

 

 

 

 

▼ 실습3 폼관련태그 ▼ (더보기 클릭)
더보기
더보기
더보기

 

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>[실습4] 폼 관련 태그 실습 </title>
</head>
<body>
    
    <fieldset>
        <legend>납품자 정보</legend>
       <ol type="1">
            <li> 납품자명 : 
               <input type="text" size="20" name="supplier" id="name">
            </li><br>
            <li> email : 
                <input type="email" size="20" name="supplier" id="email">
             </li><br>
             <li> 홈페이지 : 
                <input type="text" size="20" name="supplier" id="homepage" placeholder="http://">
             </li><br>
             <li> 지역 : 
                <select name="area">
                    <option value="in" selected>인천</option>
                    <option value="ok">옥저</option>
                    <option value="boo">부여</option>
                    <option value="dok">독도</option>
                </select>
             </li><br>
       </ol>
    </fieldset>

    <fieldset>
        <legend>납품 정보</legend>
       <ul>
            <li> 상품명 : 
               <input type="name" size="20" name="goods" id="name">
            </li><br>
            <li> 납품 수량 : 
                <input type="number" size="20" name="goods" id="number" placeholder="최소 100">
             </li><br>
             <li> 납품 등급 : 
                <input type="range" name="goods" min="0" max="100" step="10">
             </li><br>
             <li> 기타 사항 : 
                <textarea></textarea>
             </li><br>
       </ul>
    </fieldset>
    <br>
    <input type="submit" value="send massage">

</body>
</html>

 

 

 

 

 

 

 

▼ 실습3 폼관련태그 ▼ (더보기 클릭)
더보기
더보기
더보기

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>[실습5] 폼 관련 태그 실습</title>

</head>
<body>
    
    <h1>회원가입</h1>

    <fieldset>
        <legend>필수 입력 사항</legend>

            <label id="menu" width="20"><b>ID</b></label>
            <input type="id" size="20" name="join" id="joiner" required> &nbsp; &nbsp;
            <input type="submit" value="중복 확인">
            <br>

            <label id="menu"><b>비밀번호</b></label>
            <input type="pwd" size="30" name="join" id="joiner" placeholder="영문,숫자,특숨문자 포함 8자리 이상" required>
            <br>

            <label id="menu"><b>비밀번호 확인</b></label>
            <input type="pwd" size="30" name="join" id="joiner" placeholder="영문,숫자,특숨문자 포함 8자리 이상" required>
            <br>

            <label id="menu"><b>Email</b></label>
            <input type="email" size="30" name="join" id="joiner" required>
            <select>
                <option>직접입력</option>
                <option>접직입력</option>
                <option>접접직력</option>
                <option>입입력력</option>
            </select>

            <br>

       </ul>
    </fieldset>
    <fieldset>
        <legend>추가 정보</legend>
        <label> 프로필 사진 </label> &nbsp;
        <input type="file">

        <br>
        <br>

        <label>성별 : </label>
        <input type="radio" id="m" name="gender" value="m" checked>
        <label for="m">남자</label>
        <input type="radio" id="w" name="gender" value="w">
        <label for="w">여자</label>

        <br>
        <br>

        <label>생년월일 : </label>
        <input type="date">

        <br>
        <br>

        <label>취미</label><br>
        <input type="checkbox" id="baseball" name="hobby">
        <label for="baseball">야구</label> &nbsp;

        <input type="checkbox" id="basketball" name="hobby">
        <label for="basketball">농구</label> &nbsp;

        <input type="checkbox" id="baseball" name="hobby">
        <label for="baseball">축구</label><br>

        <input type="checkbox" id="studying" name="hobby">
        <label for="studying">공부</label> &nbsp;

        <input type="checkbox" id="music" name="hobby" checked>
        <label for="music">음악감상</label><br>
        
        <input type="checkbox" id="guitar" name="hobby">
        <label for="guitar">기타 : </label>
        <input type="text" size="20px">

        <br>
        <br>

        <laber>자기소개</laber><br> 
        <textarea cols="50" rows="5" style="resize:none;"></textarea>

    </fieldset>

    <br>
    <input type="submit" value="회원가입">
    <input type="submit" value="다시입력">
    <input type="submit" value="이전으로">

</body>
</html>

 

 

 

 

 

 

 

 

 

 

저작자표시 비영리 변경금지

'문제 풀이 > HTML5·CSS3 문제풀이' 카테고리의 다른 글

화면구현 개인과제  (0) 2022.02.15

+ Recent posts

티스토리툴바