한 걸음씩

Project 1 - HTML & CSS 본문

Project

Project 1 - HTML & CSS

winter17 2023. 2. 24. 20:44

 

HTML code

<!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>Elon Musk</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="outline">        
        <h1>Elon Reeve Musk</h1>
        <img src="일론 머스크.jpg" alt="">
        <hr>
        <div>
            <div class="content">
                <h4>본명</h4>
                <p>일론 리브 머스크 <br>Elon Reeve Musk</p>
            </div>
            <div class="content">
                <h4>출생</h4>
                <p>1971년 6월 28일(51세)<br>남아프리카공화국 하우텡주 프리토리아</p>
            </div>
            <div class="content">        
                <h4>국적</h4>
                <p>남아프리카공화국<br>캐나다<br>미국</p>
            </div>
            <div class="content">
                <h4>학력</h4>
                <p>
                  퀸즈대학교(경제학)<br>
                  펜실베니아 대학교(경제학,물리학) 학사<br>
                  스탠퍼드대학교 대학원(물리학) 박사과정 중퇴
                </p>
            </div>
            <div class="content">
                <h4>직업</h4>
                <p>	기업가,투자자</p>
            </div>
        </div>
        <div class="icons">
            <a href="https://www.spacex.com/"><img class="icon" src="rocket.png" alt=""></a>
            <a href="https://twitter.com/?lang=ko"><img class="icon" src="twitter.png" alt=""></a>
            <a href="https://www.tesla.com/ko_KR/"><img class="icon" src="tesla.png" alt=""></a>
            <a href="https://upbit.com/exchange?code=CRIX.UPBIT.BTC-DOGE"><img class="icon" src="bitcoin.png" alt=""></a>
        </div>
    </div>   
</body>
</html>

 

 

CSS code

body{
    background: linear-gradient(#ffffff,#bcc3c8,#656667);
    display: inline-block;
    text-align: center;
    width:100%;
}


.outline{
    background-color:black;
    margin: 10px;
    padding: 10px;
    width:600px;
    height:1000px;
    display:inline-block;
    text-align:center;
    border-radius: 30px;
}

.content{
    display:inline-flex;
}

h1{
    margin-top:30px;
    color:white;
    font-family: 'Source Serif Pro', serif;
}

h4{
    width : 100px;
    height:40px;
    padding-left:20px;
    text-align:left;
    color:white;
}

p{
    width:400px;
    height:40px;
    text-align: left;
    color:white;
}

프로젝트 후기

첫 팀 프로젝트였는데 무려 3시간이나 소비했다

최대한 배운 내용을 활용하려고 노력했고 그 이외의 기능들도 소소하게 구현해 보았다

프로필 약력 부분은 div로 표현했는데 표 만드는 태그를 이용했다면 더 깔끔했을 것 같다는 아쉬움이 있다

즉석 해서 기획하고 만들고 의견을 나누느라 급하게 진행한 것을 고려하자면

아쉽지만 다음에 더 잘할 수 있는 밑거름이 되어줄 프로젝트인 것 같다

'Project' 카테고리의 다른 글

Calculator  (0) 2023.06.15
Article preview component  (0) 2023.06.07
FAQ accordion card  (0) 2023.06.06
interactive-rating-component  (0) 2023.06.06
'Project' Related Articles more