혜랑's STORY

[자기소개 페이지 만들기] : HTML, CSS 본문

무지성 작업실

[자기소개 페이지 만들기] : HTML, CSS

hyerang0125 2021. 1. 22. 15:17

오랜만에 HTML과 CSS를 복습하고자 간단한 자기소개 페이지를 만들어 보았다!

[디자인]

목표 자기소개 페이지
완성 디자인

[코드]

<!--index.html -->
<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="basic.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500&display=swap" rel="stylesheet">
</head>
<body>
    <div class="profile">
        <img src="profile.jpg" class="profile-image">
        <h1>Kawk Hyeonji</h1>
        <hr>
        <table>
        <td>
            <tr>
                <td>
                    <h2>More infomation</h2>
                    <ul  class="text">
                        <li>이름 : 곽현지</li>
                        <li>생일 : 2002 - 01 - 25</li>
                        <li>핸드폰 : 010 - 0000 - 0000</li>
                        <li>이메일 : *****@naver.com</li>
                        <li>블로그 : *****@tistory.com</li>
                    </ul>
                </td>
                <td>
                    <h2>Educational History</h2>
                    <ul  class="text">
                        <li>2017-2020 충남삼성고등학교</li>
                        <li>2020 ~    숙명여자대학교 컴퓨터과학전공</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <h2>Etc</h2>
                    <ul  class="text">
                        <li>C / C++ / Python 언어 공부 중</li>
                        <li>소설책 읽는 것 좋아함</li>
                        <li>풍경 사진 찍는거 좋아함</li>
                        <li>특기는 일 만들어 하기</li>
                        <li>SKT T1 좋아함</li>
                    </ul>
                </td>
            </tr>
        </td>   
        </table>
    </div>
</body>
</html>


/*basic.css*/
body {
    background-color: #233255;
    padding-top: 150px;
}

h1, ul {
    font-family: 'Chakra Petch', sans-serif;
}

hr {
    margin: 0 30px;
}

td{
    width: 450px;
}

h2{
    color: black;

}

.profile {
    background-color: white;
    border-top: 10px solid white;
    border-bottom: 10px solid white;
    border-radius: 10px;
    margin: 0 auto;
    width: 900px;

    text-align: center;
}

.profile-image {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    margin-top: -100px;
}

.text{
    color: gray;
    text-align: left;
    font-size: 1.2em;
    list-style: none;
}

 

[사용한 태그 및 폰트]

  • 사용한 폰트
 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

  • <table> : 표를 만드는 태그

- <th></th> : 표의 제목

- <tr></tr> : 가로 줄

- <td></td> : 세로 줄

  • <ul> : 순서가 필요 없는 목록을 만드는 태그

[CSS 추가 설명]

  • margin: ___ auto; - 대표적인 중앙정렬 속성. 위 아래 여백을 ___만큼 주고, auto로 가로 중앙에 배치한다는 뜻이다.
  • border-radius - 테두리를 둥글게 만드는 속성이다.
저작자표시 비영리 변경금지

'무지성 작업실' 카테고리의 다른 글

[설리번 프로젝트] 교육자료 만들기 및 활동증명서  (0) 2021.02.15
[To Do List Project]-(2)  (0) 2020.07.18
[To Do List _ Project] - (1)  (0) 2020.07.16
'무지성 작업실' Related Articles more