[HTML/CSS] 과제 자기소개 홈페이지 제작하기

과제1

우선 CSS파일에 공통적으로 쓰일 style들을 정리하고, 과제1과 2에 동일하게 사용하였음

→ 훨씬 더 간결한 코드로 작성할 수 있었음

/*사진, 버튼 요소*/
.profile{ 
    width: 300px;
    display: block;
    margin: auto;
}

/*카테고리 제목 요소*/
.title{
    line-height:300%; 
    letter-spacing: -1px; 
    color: gray;
    text-align: center;
}

/*카테고리별 내용 텍스트*/
.content{
    line-height:30px;
    letter-spacing: -1px;
    text-align: center;
}

강의 자료에서 벗어나 새로 사용했던 것

<p style="line-height:20px;"> Digital Media </p>
<br>Front-end Developer</p>

 <a href="https://velog.io/">
        <button class="profile" style="background-color: rgb(224, 147, 95);color:white">BLOG</button>
 </a>

"line-height: ~" : 행간 간격 설정

<br> : 텍스트 안의 줄바꿈

"background-color: " : 버튼 배경색 변경

과제2

두 번째 과제에서는 Tailwind을 활용하는 방법을 익히는 것이 중요하다고 생각해서 다른 새로운 기술을 찾기보다는 Tailwind에서 제공하는 요소들을 최대한 가져와서 사용하였음

가장 주축으로 사용한 Testimonial 요소.

보내 리뷰를 쓰는 공간에 자기소개 카테고리를 넣어서 수정하였고, 자기소개라는 느낌을 주기 위해 인사말과 함께 소개글을 중앙에 배치하였음. 이에 더해 이미지를 삽입하고 기존 버튼을 삭제하면서 이러한 상단의 텍스트와 이미지의 중앙 정렬을 하는 데에 많은 시간이 들었음.

<section class="bg-gray-100">
    <div class="mx-auto max-w-screen-2xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16 flex items-center justify-center">
        <img src="cat2.png" style="width: 200px; margin-right: 20px;">
        <div class="max-w-xl">
            <h2 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
                HI! I'm<strong style="color : rgb(224, 147, 95)">
                    <br>KAYOUNG!</strong>
            </h2>
            <p class="mt-6 max-w-lg leading-relaxed text-gray-700">
                안녕하세요! 12기 아기사자 프론트엔드파트 <strong style="color:rgb(224, 147, 95);">김가영</strong>입니다!
                <br>아직 경험은 적지만, 그만큼 더 열심히 하겠습니다.
                <br>그 과정에서 여러 경험과 추억을 쌓으며 함께 성장하고싶어요.
            </p>
        </div>
    </div>
</section>

mx-auto: 수평 가운데 정렬

max-w-screen-2xl: 요소의 최대 너비를 지정

px-4: 왼쪽/오른쪽 패딩 설정

py-12: 위쪽/아래쪽 패딩 설정

sm: px-6: 스몰(작은) 화면 크기에서 가로 방향 6픽셀의 패딩

lg: px-8: 라지(큰) 화면 크기에서 가로 방향으로 8픽셀의 패딩

lg: py-16: 라지(큰) 화면 크기에서 세로 방향으로 16픽셀의 패딩

flex items-center justify-center: 요소를 가로 방향으로 정렬하고, 내부 요소를 수직과 수평으로 가운데 정렬

text-4xl: 텍스트의 크기 정의

font-bold: 텍스트의 굵기 강조

tracking-tight: 텍스트의 자간(글자 간격) 좁게 조정

sm: text-5xl: 스몰(작은) 화면 크기에서 텍스트의 크기

mt-6: 위쪽 마진을 설정

max-w-lg: 요소의 최대 너비를 정의

leading-relaxed: 텍스트의 줄간격을 조정

이외에는 Progress 요소를 가져와 #STUDYING 카테고리를 채웠고

Footer 요소에서는 SNS 버튼들만을 가져와 활용하였음

https://github.com/lvyest/frontend-handout-0321/tree/kayoung