AI 웹개발 취업캠프 [정보통신산업진흥원] - 7월 21일자

yrp·2023년 7월 24일

AI교육 AI웹개발취업캠프 IT개발캠프 NIPA 개발자부트캠프 개발취업캠프 백엔드 유데미 정보통신산업진흥원 취업캠프 프로젝트 프론트엔드

과제물

반영한 것

기존 HTML 레이아웃 약간 수정 (main과 div의 사용)
margin으로 블록 영역 간격 조절
외부 스타일 시트 방식 사용
선택자는 주로 태그 선택자나 클래스 선택자를 사용
글자: 폰트 다운 받아 적용, 글자 크기 및 색 수정, 밑줄 없애기
이미지: 로고, 서비스 소개 이미지, 배너 이미지를 미리캔버스로 만들어 적용해 봄, 사이즈 조절

어려운 점 및 앞으로 보완해야할 부분

각 요소들의 배치 및 크기를 구성하는 게 쉽지 않았다.
나의 디자인적 센스가 부족하다고 느껴지는 순간이었다...ㅠ
마우스를 올렸을 때 나오는 효과(호버) 구현하는 쪽을 완벽하게 구성하지 않아서 이 부분에 대한 확인이 다시 필요하다.
폼태그를 잘 적용하고 싶었으나 서버 쪽 데이터를 받는 부분에 지식이 부족해서 이 부분은 자바스크립트를 배우며 다시 이해해보고자 한다.

HTML

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>vitata</title>

    <link rel="stylesheet" href="vitata_ver3.css">

</head>

<body>
    <form action="" method="">
    </form>

    <!-- 메뉴바 부분 -->
    <header>
        <img class="menu-logo" src="logo.png" title="회사 로고"/>
    	<nav>
    		<ul>
                <li><a href="" class="menu-button">건강칼럼</a></li>
                <li><a href="" class="menu-button">커뮤니티</a></li>
                <li><a href="" class="menu-button">로그인</a></li>
    		</ul>
    	</nav>
    </header>

    <main>
        <!-- 서비스 소개 부분(이미지 사용) -->
        <section>
            <img class="banner-info" src="info.jpg">
        </section>
        <!-- 맞춤 추천 영양제 목록 부분 -->
        <section>
            <article>
                    <h2 class="main-title">맞춤 추천 영양제</h2>
                    <div class="container-supplement">
                        <article class="supplement-item">
                            <div>
                                <img class="supplement-image" src="supplement_1.png">
                            </div>
                            <span>
                                <a class="supplement-text" href="">첫번째 영양제</a>
                            </span>
                        </article>
                        <article class="supplement-item">
                            <div>
                                <img class="supplement-image" src="supplement_2.png">
                            </div>
                            <span>
                                <a class="supplement-text" href="">두번째 영양제</a>
                            </span>
                        </article>
                        <article class="supplement-item">
                            <div>
                                <img class="supplement-image" src="supplement_3.png">
                            </div>
                            <span>
                                <a class="supplement-text" href="">세번째 영양제</a>
                            </span>
                        </article>
                    </div>

                    <div class="container-supplement">
                        <article class="supplement-item">
                            <div>
                                <img class="supplement-image" src="supplement_4.png">
                            </div>
                            <span>
                                <a href="">네번째 영양제</a>
                            </span>
                        </article>
                        <article class="supplement-item">
                            <div>
                                <img class="supplement-image" src="supplement_5.png">
                            </div>
                            <span>
                                <a class="supplement-text" href="">다섯번째 영양제</a>
                            </span>
                        </article>
                        <article class="supplement-item">
                            <div>
                                <img class="supplement-image" src="supplement_6.png">
                            </div>
                            <span>
                                <a class="supplement-text" href="">여섯번째 영양제</a>
                            </span>
                        </article>   
                    </div>


                </div>
            </article>
        </section>
        <!-- 외부 정보 글 및 광고 부분-->
        <section>
            <div class="banner-ad">
                <img src="ad.jpg">
            </div>
        </section>
    </main> 

    <!-- 저작권 및 기업 정보 부분 -->
    <footer>
        <ul>
            <li>상호명: 주식회사 비타타 | 대표자: yrp</li>
            <li>주소: 경기도</li>
            <li>고객센터: 1234-5678 | 사업자등록번호: 123-45-67890</li>
            <br>
            <il>
                <a href="">회사소개</a>
                |
                <a href="">개인정보 처리방침</a>
                |
                <a href="">이용약관</a>
            </il>
        </ul>
    </footer>

</body>
</html>

css

@font-face {
    font-family: 'KCC-Ganpan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/KCC-Ganpan.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* 로고 및 메뉴 버튼 부분 좌우로 배치하기 */
header {
    display: flex; 
    justify-content: space-between;
    border: 5px dashed #F0FFE5;
    margin-bottom: 10px;
}


/* 메뉴 버튼 구역도 수평으로 배치 */
header nav ul {
    display: flex; 
    text-align: center;
}

/* .a:link, a:visited, a:hover, a:active {color:#333;} */

a{
    text-decoration: none;
    font-family: 'KCC-Ganpan';
    color:green;
}

h2{
    font-family: 'KCC-Ganpan';
}

.menu-logo{
    float: left;
    border: none;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 55px;
    font-weight: bold;
    margin: 10px;
    font-size: 13px;
}

.menu-button{
    float: left;
    border: none;
    width: 55px;
    height: 55px;
    text-align: center;
    line-height: 55px;
    font-weight: bold;
    margin: 10px;
    font-size: 13px;
}

/* header nav ul li.active a,
header nav ul li:hover a {
    color: var(--blueColor);}

header nav ul li.active a:after,
header nav ul li:hover a:after {
    content:"";
    position:absolute;
    width:100%;
    height:2px;
    background-color:var(--blueColor);
    left:0;
    bottom:0;} */

.container-supplement{
    display: flex;
    justify-content: center;
}

.supplement-item{
    margin: 25px;
}

.supplement-image{
    width: 55px;
    height: 55px;
}

.supplement-text{
    text-align: center;
}

section{
    text-align: center;
}

footer{
    text-align: center;
    background-clip: content-box;
    background-color: #F0FFE5;
}

/* footer ul{
    text-align: center;
    background-clip: content-box;
    background-color: #F0FFE5;
} */

li{
    list-style-type: none;
}

/* .banner-info{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
} */

/* 
.banner-ad{
    margin: 0 auto;
} */

/* img{
    margin-left: auto;
    margin-right: auto;
} */

——————————————————————————
본 후기는 정보통신산업진흥원(NIPA)에서 주관하는 <AI 서비스 완성! AI+웹개발 취업캠프 - 프론트엔드&백엔드> 과정 학습/프로젝트/과제 기록으로 작성 되었습니다.
#정보통신산업진흥원 #NIPA #AI교육 #프로젝트 #유데미 #IT개발캠프 #개발자부트캠프 #프론트엔드 #백엔드 #AI웹개발취업캠프 #취업캠프 #개발취업캠프

yrp

유후랄라 개발일기

다음 포스트

AI 웹개발 취업캠프 [정보통신산업진흥원] - 7월 26일자

1개의 댓글

happy

2023년 7월 24일

잘 봤습니다. 좋은 글 감사합니다.

답글 달기