스파르타코딩클럽 내일배움캠프4기 -2-

JaeSung Lee·2022년 11월 1일

내일배움캠프4기

목록 보기

2/24

미니 프로젝트가 시작 되었다.

일단은 각자 자기소개페이지를 만들기로했다.
기본적인 틀만 주고 능력껏, 재량껏 뽐내기로했다.

그래봤자 기초적인것들이지만...

단순하게 사진 넣고 밑에 이름 장점만 쓰는 것인데
막상 만들려고 하니 막막했다.
강의들을때는 정말 쉽게 만들 수 있을거 같았는데... ㅜㅜ
죽이 됐든 밥이 됐는 어떻게는 해보자!
구글링이나 전에 만들어 놓은 코드들을 보았다.

그렇게해서 완성된 코드이다.

<!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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poor+Story&display=swap" rel="stylesheet">
    <title>이재성</title>
    <style>
        *{
            font-family: 'Jua', sans-serif;
            font-size: 50px;
        }

        .frame {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .Js-Lee {
            width: 500px;
            height: 500px;
            background-image: url('boy.JPG');
            background-position: center;
            background-size: cover;

            margin-top: 50px;
        }

        .information {
            text-align: center;
            margin-top: 40px;
        }

        #explain {
            font-family:  'Poor Story', cursive;
            font-size: 40px;
        }

        #title{
            margin-top: 20px;
        }

        #explain {
            margin-top: 5px;
        }

    </style>
</head>
<body>
    <div class="frame">
        <div class="Js-Lee">

        </div>
        <div class="information">
           <div id="title">이름 / MBTI</div>
            <div id="explain">이재성 / ENFJ</div>
            <div id="title">장점</div>
            <div id="explain">고민상담</div>
            <div id="title">협업스타일</div>
            <div id="explain">시키면 뭐든지 한다.</div>
            <div id="title">블로그 주소</div>
            <div id="explain">https://velog.io/@optimist5235</div>
        </div>
    </div>
</body>
</html>

구글 폰트는 링크형식으로

구글 폰트를 보다 보면 link, @import 형식이 있다.
검색 결과 link형식을 추천하더라.

적용 방법은 head부분에 링크태그를 복붙한 후
css 부분에 css부분을 복붙하면 된다.

구글폰트사이트 들어가면 무슨말인지 안다.

폰트를 전체 문서에 적용 하려면
css 파일에 * { font-family: 'Noto Serif KR', serif;} (폰트는 예시임) 하면 됨.

구글폰트사이트
https://fonts.google.com/?subset=korean

참고
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=anonymousx&logNo=10183487261

display 4인방...

가장 많이 쓰는 코드가 아닐까 싶다..
꼭 외우자.

.frame {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }