[14기 과제] HTML / CSS + vercel + Figma dev mode

2주차 세션에서는 HTML, CSS 프로그래밍 언어에 대해 배우고, 기획/디자인 세션과의 소통을 돕는 Figma dev mode, 마지막으로 Vercel을 통해 배포하는 방법까지 배워보았습니다!

배운 내용을 복습하기 위한 과제로는 개인 포트폴리오 사이트 만들기 였는데요! 세션 중에 간단한 포트폴리오 만들기 실습을 진행했지만 세션 내용을 조금 더 복습하고 나니 실습 중에 부여한 class들이 너무 복잡해서 저는 그냥 새로 시작했습니다.. ㅎㅎ

제가 이번 과제로 구현한 포트폴리오 사이트의 메인 화면입니다! 😆

[구현 내용]

html코드 작성하기

포트폴리오 사이트의 전체적인 레이아웃이나 구성을 구상하고, 구상한 내용을 바탕으로 전체적인 코드를 작성하였습니다.

<div>만 사용하는 html코드보다, 시맨틱 태그들을 사용해서 구성한 html코드가 문서 구조가 더욱 정확히 나누어진다고 합니다. 로고와 내비게이션을 포함한 사이트를 만들고 싶어, 시맨틱 태그들을 활용해서 포트폴리오 사이트의 레이아웃을 작성하였습니다!

**1. 사이트 헤더 구현 *

html

<header>
        <h1 class="header-text">UHAEUN's PAGE</h1>
        <nav>
            <a href="#home">HOME</a>
            <a href="#about">ABOUT</a>
            <a href="#portfolio">PORTFOLIO</a>
            <a href="#contact">CONTACT</a>
        </nav>
</header>

2. 네비게이션 별 섹션 구현

html

         <section id="contact">
            <h2 style="text-align: center;">CONTACT</h2>
            <section>
                <div class="container contact-container">
                    <h2 class="title-text">Contact ☎️</h2>
                    <div class="inner-container">
                        <p>Phone : 010-9448-0514</p>
                        <p>Email : uhaeun@yonsei.ac.kr</p>
                        <p>Instagram : @euun_uha</p>
                    </div>
                </div>
            </section>
        </section>

네비게이션 별로 섹션을 구현하였는데, 뭔가 헤더 구성이 말끔하지 않은 것 같아 아쉽네요.. 큰 섹션 안에 <h2>로 작성한 각 섹션별 이름과 작은 섹션을 넣어 구성하였습니다.

CSS코드 작성하기

css파일을 작성하는 것이 이번 과제에서는 특히 재미있었는데요, css로 구현할 수 있는 디자인이 정말 많고, 똑같이 생긴 디자인이여도 구현할 수 있는 방법이 다양하다는 것을 알게되었습니다.

1. 폰트 바꾸기 css 코드에서 font-style을 지정하지 않았을 때 제공되는 기본 글씨체를 가장 먼저 바꾸고 싶었습니다. 여러 방법이 있겠지만 저는 구글 폰트 사이트(https://fonts.google.com )를 사용했는데요! 무료로 사용할 수 있는 글씨체가 다양한 언어로 제공하니 다른 아기사자 분들도 사용해보셨으면 좋겠습니다 ㅎㅎ

사이트에서 마음에 드는 글꼴을 선택한 뒤, 우측 상단의 [Get Font] -> [Get embeded code] 를 클릭하시면 'embed code in the <head> of your html'이라는 문구가 적혀진 칸에 있는 코드를 복사하셔서 헤더 부분에 입력해주시면 됩니다.

여기서 주의해야할 점은 @import문은 CSS에서 가장 먼저와야 한다는 점입니다!

그 다음, 아까 @import문을 복사한 칸 아래에 있는 'Dancing Script: CSS class for a variable style'이라는 문구가 적힌 칸에 있는 font family 줄을 복사하셔서 스타일 태그에 적용해주시면 됩니다.

css

body {
   font-family: "Noto Sans KR", sans-serif;
   background-image: url(background.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   min-height: 100vh;
   padding: 0 0 0 0;
   margin: 0;
}

저는 사이트의 모든 폰트를 통일하고 싶어서 그냥 body에 적용해주었습니다. (위 코드 첫줄 참고)

2. 박스 배치 및 여백 설정

이번 과제를 하면서 가장 많은 시간을 쏟은 곳은 박스를 보기 좋은 크기로 배치하고 여백을 조정하는 일이였는데요..!! 좌우 방향으로 텍스트 및 박스를 중앙에 놓으니 세로 방향으로 가운데에 배치되지 않는 등, 박스 배치를 깔끔하게 하는 것이 아직 정말 어렵더라고요!!

그래서 공부해본 것이 flex container과 그의 속성들이였습니다.

플렉스 컨테이너 : 부모 박스라고 이해하시면 좋습니다. 플랙스 박스 레이아웃을 적용할 대상을 묶어주는 요소입니다.
플렉스 항목 : 플렉스 컨데이너(부모)의 자식 박스라고 이해하시면 좋습니다. 플랙스 박스 레이아웃을 적용할 하위 항목, 대상들 입니다.
주축(main axis) : 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향으로, 기본 설정은 왼쪽에서 오른쪽 수평 방향입니다.
교차축(cross axis) 주축으로 배치하다가 끝점까지 닿았을 때 어떻게 배치할지 결정하는 속성으로, 기본 설정을 위에서 아래로 수직 방향입니다.

저는 제 포트폴리오 사이트의 각 네비게이션 화면 마다 텍스트 컨테이너들이 화면 중심에 위치할 수 있도록 하기 위해 flex container을 사용하였습니다!

css

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}

flex-driection : 플렉스 컨테이너의 주축 방향을 결정하는 속성입니다. 주축 방향을 세로로 설정해주었습니다.
justify-content : 주축의 정렬 방법입니다.
align-items : 교차축의 정렬 방법입니다.

[어려웠던 점]

이번 과제는 포트폴리오 사이트를 만들며 여러 css 속성들을 공부해보고, 사진 및 비디오도 삽입하며 재미있게 진행하였는데요!

다만 박스 레이아웃 및 여백을 마음처럼 설정하는 것이 쉽지 않더라고요. 마지막에는 center처럼 정확한 중앙 배치 속성을 사용하는 것이 아니라 직접 마진을 20px, 30px으로 설정하고 Live로 확인해보며 눈대중으로 요소들을 중앙으로 배치하기도 하였습니다..ㅠㅠ

다음 과제는 박스 레이아웃과 여백 속성들을 마스터하여 깔끔한 박스 배치를 해보고 싶습니다!!

[결과물]

멋사 첫 과제인 포트폴리오 링크입니다 ! https://portfolio-chi-mocha-c630r33651.vercel.app/#home 언제든 피드백, 조언은 환영입니다 🙇🏻‍♀️ !!!