내일배움캠프 사전 캠프가 곧 끝난다. (9월 27일까지~)
팀원과 함께 팀 소개 페이지를 만들어야 한다.
함께하게 된 팀원은 희찬님과, 인준님, 영호님이였다.
팀 소개를 뭘로 할지 고민하다가, 각자 제시한 팀명을 룰렛을 통해서 팀명을 정했다.
영호님이 의견내신 '새싹의 반란'으로 정해졌다.
저녁시간에 딱히 배가 고프지않아서 오랜만에 급하지만 로고 디자인을 해보았다.
쉽사리 결정이 잘 안되서 일단 메인 컬러랑 레이아웃부터 하기로 했다.
팀장은 수업이 끝나기 전 인준님이 하시겠다고 하셔서 인준님이 하시게되었다.
메인섹션과 각자 코딩한 전체 코드 합치기는 내가 하기로 했다.
네비 바는 차후 구현하기로 하고 일단 아주 대략적인 와이어프레임을 짰다.
심플이즈 베스트니까 최소한으로 정했다.
주 컬러는 #34c88a으로, 일반 색은 #3b4c56로 정했다.
파이어베이스 백엔드 연결은 일단 제쳐두고 html과 css를 먼저 완료하기로 했다.
거의 하루종일 논의를 했고, 나는 21시가 지났지만 일단 네비바만 간단하게 구현을 해보았다. 인준님이 서브페이지 디자인하는 거보고 너무 이쁘다고 생각했다. 내 취향인데..? 최고인듯
[PC 화면]
[모바일]
일단 간단하게 html만 구현을 해두고 메인섹션에 아래로 스크롤과 화면 꾸미기가 완성되면 hover나 포커스 등등 효과를 줘봐야겠다.
부트스트랩도 심어주고, css도 분리하고 혹시 모르니 제이쿼리도 추가했다.
두근두근 코딩... 이제 시작이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
<header class="d-flex justify-content-center py-3 bg-success">
<ul class="nav nav-pills">
<li class="nav-item "><a href="#" class="nav-link text-white" aria-current="page">홈으로</a></li>
<li class="nav-item"><a href="#" class="nav-link text-white">김희찬</a></li>
<li class="nav-item"><a href="#" class="nav-link text-white">여인준</a></li>
<li class="nav-item"><a href="#" class="nav-link text-white">이다원</a></li>
<li class="nav-item"><a href="#" class="nav-link text-white">진영호</a></li>
</ul>
</header>
</body>
</html>네비 바 색상이 안먹혀서 css파일에 결국 !important를 입력했다.
패딩과 마진은 초기화해줬고 일단 최애폰트인 에스코어드림으로 일단 설정했다.
@font-face {
font-family: 'S-CoreDream-3Light';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
font-weight: normal;
font-style: normal;
}
*{padding:0; margin:0;font-family: 'S-CoreDream-3Light';}
.bg-success{background-color: #34c88a !important;
}
오늘의 한줄평 : 순탄하게 잘 흘러갔으면 좋겠다. 기적 만드는 건 늘 내겐 쉬운일이잖아?
