HTML&CSS 이용하여 자기소개 페이지 만들기

2022.07.05 - [개인공부 기록/HTML&CSS] - 자기소개 페이지 반응형으로 개선하기

HTML과 CSS를 이용하여 자기소개 페이지를 만들었는데

유튜브를 볼 때는 나도 할 수 있겠다는 생각이 들었지만 코드 몇 줄 치자 멘붕..

이것 저것 시행착오를 겪다보니 어려움이 많았고, 결과물에도 여러가지 문제점이 있지만

직접 만들어 결과물이 생긴걸 보니 이제 한걸음 내딛었구나 하는 생각이든다.

 

자기소개 페이지 - https://jeongjaeha.github.io/jaeha2324.github.io/index.html

깃 허브 - https://github.com/JeongJaeHa/jaeha2324.github.io

재하님의 자기소개 페이지 입니다.

     

목차

1. 자기소개 페이지
2. 개선사항
3. 참고 자료

1. 자기 소개 페이지

 

메인 페이지는 상단바, 메인 내용, 하단 Footer  3개의 구역으로 나누었으며

나머지 2개 페이지는 상단바, 메인 내용 2개의 구역으로 나누어 제작을 진행하였다.

 

1.1 상단바

    <nav class="navbar">
        <ul class="navbar_menu">
            <li><a href="index.html">Home</a></li>            
            <li><a href="my.html">About</a></li>
            <li><a href="favor.html">Favorite</a></li>
        </ul>
    </nav>

메뉴는 navbar로 묶고, 순번이 필요없다 판단하여 <ul>태그를 사용, <a>태그에 이동할 페이지를 링크하여 구성하였다.

 

1.2 메인 내용

 

Home, About 페이지는 단순하여 간단하게 구현하였으나, Favorite 페이지 구현하는데 시행착오를 많이 겪어서

해당 페이지 구현 방법에 대해 작성하기로 하였다.

 

                <!-- 메인 내용 -->
        <div class="favor">    
            <div class="favor_left">

                <!-- 화면 좌측 -->
                <div class="">
                    <img class="favor_img_l" src="img/favor1.jpg" width="250px" height="250px" alt="" align="middle" style="float:left">
                    <p1>국내의 유명한 장소 또는 잘 알려지지 않은</br>
                        명소에 여행가는 것을 좋아합니다</p1>
                </div>                   

                <div class="">
                    <img class="favor_img_l" src="img/favor2.jpg" width="250px" height="250px" alt="" align="middle" style="float:left">
                    <p1>어릴 때 배웠던 피아노에도 관심이 많아요!</br>
                        한 곡 정도는 완벽하게 칠 수 있는게 목표입니다</p1>
                </div>  
   
            </div>              
                        
                    
            <div class="favor_right">

                <!-- 화면 우측 -->
                <div class="">
                        <img class="favor_img_r"src="img/favor4.jpg" width="250px" height="250px" alt="" align="middle" style="float:left"></article>
                            <p1>뭐니뭐니해도 맛있는 음식을 먹는 것 만큼 </br>
                                행복한 일은 없겠죠?! </br>
                                맛집 탐방도 좋아합니다 :)
                            </p1>


                </div>

            </div>
        </div>

화면 나누기

먼저 Favor_left, Favor_right 로 클래스를 구분하여 좌,우 분할을 시켰으며(빨간색 박스)

그 안에서 각각 컨텐츠의 구역을 나누어 주었다.(노란색 박스)

 

노란색 박스 안에서는 img태그와 p태그를 이용하여 내용을 작성하였고, CSS를 이용하여 디자인 하였다.

 

이렇게 하는 경우 Right-2가 없는 오른쪽 영역의 하단은 배경색이 흰색으로 출력되어 제일 상단에 좌,우 전체를 포함하는 favor영역을 설정하였고 CSS를 통해 배경색을 넣어 주었다.

 

1.3 푸터

    <footer class="footer">
        <ul>
            <li><a class="fa-brands fa-github" href="https://github.com/JeongJaeHa">&nbsp;Github</a></li>
            <li><a class="fa-brands fa-github-alt" href="mailto:jaeha2324@gmail.com">&nbsp;E-Mail</a></li>          
            <li><a class="fa-brands fa-instagram" href="https://www.instagram.com/jjaeha_/">&nbsp;Instagram</a></li>       
        </ul>
    </footer>

 

아이콘 사이트에서(https://fontawesome.com/) 개인 별 고유 스크립트를 발급 받아 헤더에 붙이고 원하는 아이콘을 검색한 뒤 HTML링크를 따서 붙여 이미지를 불러왔고, 하이퍼 링크를 통해 클릭 시 이동할 수 있도록 구현하였다.

 

푸터가 하단에 고정이 안되거나, 고정되도 창 확대, 축소 시 컨텐츠 내용을 가리는 것 때문에 애를 많이 먹었는데 해당 이슈에 대한 해결방법을 잘 정리해 준 영상이 있어 아래 참고자료에 링크를 남겼다.

 

fa-brands 이외의 다른 태그를 가진 아이콘을 사용하면 사용이 안되거나, 폰트가 깨지는 문제점이 있었다.

 

 

 

2. 개선 및 공부해야 할 내용

• 반응형으로 수정하기
• 깃허브 사용법 공부하기
• Favorite Page 축소시 사진 안 밀리게 만들기
• Hover 기능 공부해서 이해하기

 

자기소개 페이지 네비게이션 바에 :Hover, ::after 선택자 적용하기

 

자기소개 페이지 반응형으로 개선하기

 

3. 참고자료

 

메뉴바 - http://(https://www.youtube.com/watch?v=X91jsJyZofw&t=603s&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9)

호버링 - https://velog.io/@jjine/%EB%84%A4%EB%B9%84%EA%B2%8C%EC%9D%B4%EC%85%98-%EB%B0%94-%ED%98%B8%EB%B2%84-%EC%9D%B4%ED%8E%99%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-1

Footer - http://(https://www.youtube.com/watch?v=who42wBr1ns&ab_channel=Rock%27sEasyweb)