팀 소개 페이지 만들기

내배캠 1주 3일차, 드디어 첫 프로젝트를 시작한다
미니 프로젝트로 팀 소개 페이지를 만들게 되었다

우선 우리팀은 pdf 로 레이아웃 초안을 잡고 기획된 틀을 가지고 작업을 시작하였고
나는 메인페이지 작업을 담당했다

메인페이지 레이아웃 요소 작업

우선 배경은 밝은 검정색으로 하기위해 전체적인 바디요소들을 감싸는 div를 만들어주고 거기에 배경과 폰트를 넣어줬다

		.wrap {
            font-family: 'NanumSquareBold';
            background-color: #242428;

그리고 큰지막한 텍스트로 소개문구를 넣고 그 밑에 사진을 넣어보았다
이미지는 일단 임시로 아무거나 넣어놨다

		.title {
            max-width: 1270px; // 반응형으로 동작하기 위해 최대 너비를 지정하고
            width: 100%; // 100%를 주어 좁은 너비에서는 양끝까지 박스를 지정했다
            padding: 100px 0 100px 0;
            margin: auto;
            text-align: center; // 텍스트 가운데 정렬
            color: white;
            font-size: 100px;
        }
        .title_coketmon {
            background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSh6rgxhKUaQ6W7K9nYdoGy6-qNfA6p2xCT1w&usqp=CAU");
            background-position: center;
            background-size: cover;
            max-width: 1270px;
            width: 100%;
            height: 480px;
            margin: 0 auto 20px auto;
        }

팀 소개 글은 소제목마다 다양한 색깔을 넣어봤다
안에 내용은 임시로 아무글이나 넣어뒀다

.introduce_title {
            max-width: 1140px;
            width: 100%;
            margin: 100px auto 50px auto;
            color: white;
            font-size: 70px;
        }
        .introduce_subtitle {
            max-width: 685px;
            width: 100%;
            margin: 0 auto 15px auto;
            font-size: 35px;
        }
        .introduce_desc {
            max-width: 685px;
            width: 100%;
            margin: 0 auto 50px auto;
            color: white;
            font-size: 20px;
        }

4장의 팀원 사진들을 원형이미지로 만들어 가로로 배치하였는데 배치시키는거까지는 수월하였지만
반응형으로 동작하게 만드는것이 상당히 어려웠다

페이지의 가로 너비를 줄이면 원형의 너비가 찌그러지는 문제가 있었고 어떻게 해결을 한다고 해도 비율유지, 가로로 배열하면서 페이지 너비가 줄어듬에따라 자동으로 크기만 작아지도록은 끝내 구현하지 못했다
그래서 할 수 없이 @media를 사용해서 페이지 너비에따라 수동으로 CSS 설정하기로 했다

		.member { // 4장의 멤버사진을 전부 묶어둔 클래스
            display: flex; // 4장의 이미지를 가로로 배열하기 위해 flex와
            flex-direction: row; // row를 지정했다
            justify-content: center;
            align-items: center;
            width: 100%;
            margin: 100px 0 0 0;
        }
        .member > div { // 사진 각각의 클래스
            margin: 0 25px 100px 25px;
            width: 300px; // 고정된 크기를 지정
            height: 300px;
            border-radius: 50%; // 원형 이미지
            background-position: center;
            background-size: cover;
        }
        @media (max-width: 1400px) { // 페이지 너비 1400 이하는 따로 css 지정
            .member > div {
                width: 200px; // 이미지를 조금 더 작게
                height: 200px;
                margin: 0 10px 100px 10px; // 여백도 조금 더 작게
            }
        }
        @media (max-width: 900px) { // 페이지 너비 900 이하도 따로 css 지정
            .member {
                flex-direction: column; // row를 column으로 바꿔 세로 정렬
            }
            .member > div {
                width: 300px; // 세로 정렬을 하는대신 크기를 원래대로 키움
                height: 300px;
                margin: 0 10px 100px 10px;
            }
        }

멤버 이미지를 누르면 각각의 멤버 소개 페이지로 이동할 수 있도록 하이퍼링크도 넣었다
div 태그에 이미지를 넣었을때 하이퍼링크 넣는 법을 몰라 구글링을 좀 했다

	<style>
		.member_1 {
            cursor: pointer; // 이미지가 img 태그가 아닌 div 태그에 들어가있기 때문에 하이퍼링크를 넣어도 마우스를 갖다댔을때 커서가 손가락 모양으로 변하지 않는것을 수동으로 변하도록 지정
            background-image: url("이미지링크");
        }
	</style>
	<body>
		<div class="member">
            <div class="member_1" onclick="location.href='kim.html'"></div> // 페이지 이동되도록 온클릭 이벤트 지정
            <div class="member_2" onclick="location.href='yeom.html'"></div>
            <div class="member_3" onclick="location.href='cho.html'"></div>
            <div class="member_4" onclick="location.href='choi.html'"></div>
        </div>
	</body>

마지막으로는 웹페이지 가장 아래에 footer 라는것을 넣어보았다
팀 이름과 팀원들 각각 이름, 이메일 주소와 날짜를 입력했다

<style>
	.footer {
      	font-family: 'Noto Sans KR', sans-serif; // 다른 글꼴을 적용
        color: gray;
        text-align: center;
        border-top: 1px solid gray; // 상단에 실선
        width: 100%;
        padding-bottom: 50px;
        margin: auto;
        background-color: #242428;
    }
	.footer > p {
        font-size: 30px;
        margin-top: 50px;
  	}
	.footer > div {
     	margin: auto;
  	}
</style>
<body>
	<footer>
        <div class="footer">
            <p>내일배움캠프 AI트랙 2기 14팀 # 코켓몬</p>
            <div>
                <p>이름 이메일주소</p>
                <p>이름 이메일주소</p>
                <p>이름 이메일주소</p>
                <p>이름 이메일주소</p>
                <p>2022.04</p>
            </div>
        </div>
    </footer>
</body>

Author And Source

이 문제에 관하여(팀 소개 페이지 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wkdudhksl/팀-소개-페이지-만들기

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

팀 소개 페이지 만들기

메인페이지 레이아웃 요소 작업

Author And Source

좋은 웹페이지 즐겨찾기