미새문지

프론트엔드 홈페이지 만들기 첫 연습 본문

웹 프론트엔드

프론트엔드 홈페이지 만들기 첫 연습

문미새 2022. 6. 12. 00:14
728x90

배운 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>원광대학교-사람 중심의 글로벌</title>
    <link rel="stylesheet" href="./원광대학교.css">
    <style>
        table {
            width: 70%;
            height: 60px;
            border: 1px solid black;
            
        }

        ul {
            list-style: none;
        }
        
    </style>
</head>
<body>
    <div id="head">
        <div id="menu">
            <button type="button">언어선택</button>
            <a href="#">웹정보서비스 | </a>
            <a href="#">WAFFLE | </a>
            <a href="#">WKU PeopleHUB | </a>
            <a href="#">중앙도서관 | </a>
            <a href="#">총장동정 | </a>
            <a href="#">Language | </a>
        </div>

        <div id="mainmenu">
            <img src="./img/원광대학교 로고.png"/>
            원광소개 | 입학안내 | 대학/대학원 | 산학/취.창업 | 대학생활 | 원광소식 | 발전기금
        </div>
    </div>


    <div>
        <div id="wkuad">
                <img src="./img/원광대 교육부.jpg"/>
        </div>
        
        <div id="wkufocus">
            <table>
                <tr>
                    <td id="focus">원광포커스</td>
                    <td id="focus2">2022학년도2학기 원광대<br>학교 교수초빙<br><span id="internet">인터넷접수 : 5.13.(금)~5.17.(화)</span></td>
                    <td>[기간재연장-입학사정관]<br>원광대학교 신입직...</td>
                    <td>2022학년도 하계 계절학<br>기 운영 안내</td>
                    <td>원광대학교 캠퍼스 마스터<br>플랜</td>  
                </tr>
            </table>
        </div>


        <div id="news">
            <center>
            <img src="./img/원광대뉴스.PNG"/>
            </center>
        </div>


        <div id="banner">
            <center>
                <table>
                    <tr>
                        <td><img src="./img/글로벌인문학.jpg"/></td>
                        <td><img src="./img/발전기금.jpg"/></td>
                        <td><img src="./img/후원의집.jpg"/></td>
                        <td><img src="./img/캠퍼스투어.jpg"/></td>
                    </tr>
                </table>
            </center>
        </div>


        <div id="othersite">
            <center>
                <table>
                    <tr>
                        <td><button type="button">이전</button></td>
                        <td>청탁금지법 통합검색</td>
                        <td>대학정보공사</td>
                        <td>교원채용</td>
                        <td>원광대 안전관리계획</td>
                        <td>연구윤리정보센터</td>
                        <td><button type="button">다음</button></td>
                    </tr>
                </table>
            </center>
        </div>
    </div>



    <div id="footer">
        <div id="sitelink">
            <img src="./img/사이트링크1.PNG"/>
        </div>

        <div id="sitemeta">
            <span>우)54538 전라북도 익산시 익산대로 460 원광대학교TEL 063-850-5114FAX 063-850-6666<br></span>
            <span>© 2014 WONKWANG UNIVERSITY. All rights reserved<br></span>
            <span>사업자번호: 403-82-00258 | 총장: 박맹수</span>
        </div>

        <div class="container">
            <button class="slideopen" id="slideopen">
                관련기관안내
            </button>
        </div>
    </div>
    
</body>
</html>

기본적으로 작성되는 부분 아니면 대부분이 이미지라 코드도 많이 간단하고 css도 기본적인 크기조절만 했었습니다

 

완성된 홈페이지

 

보기엔 괜찮아보여도 뉴스 밑으로는 이미지로 붙여서 대체하였고 상단에도 슬라이드는 움직이지도 않고 너무 허술합니다

 

하단도 전부 이미지이고 중간에 작성할수 있는부분만 만들어 아무것도 클릭할수가없는 보기에만 비슷한 홈페이지를 만들었습니다

다들 처음에 그럴진 모르겠지만 저는 좀 습득력이 느린거같아 위치조정도 잘 안되더라구요

 

태그의 사용법도 잘 알지못하여 지정 위치도 엉망입니다ㅎㅎ

제가 학생들중에 제일 못하는축에 속하여 팀 프로젝트 할 때 피해 안주려면 스스로 많이 연습해야겠습니다

앞으로 많이 발전 되었으면 좋겠네요

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

'웹 프론트엔드' 카테고리의 다른 글

1차 팀프로젝트 홈페이지 만들기  (1) 2022.06.25
1차 팀 프로젝트 구상  (1) 2022.06.15
Front End. Day08 CSS(5)  (1) 2022.05.03
Front End. Day07 CSS(4)  (1) 2022.05.02
Front End. Day06 CSS(3)  (1) 2022.04.26
'웹 프론트엔드' Related Articles more