23.05.18) 팀프로젝트:팀 소개 - html꾸미기

🤓오늘 공부한 내용

어제까지는 전체 모달창에 각가 댓글달고 저장까지 완성했지만 모달창 개별 댓글 저장은

아직 해결하지 못했다. 팀원분께서 포스트아이디 값을 개별로 주면 된다고 하셔서

우선 html 디자인부터 꾸미고 댓글 마무리작업을 해야 할 것 같다.

디자인 감각이 없어서 3일째 기본 틀로 html을 꾸며놨었는데 점심을 먹다가 갑자기

동물의 숲이 떠올랐다..ㅋㅋ 닌텐도로 한참 모동숲 꾸미던 때가 생각이 나서

팀원 분들을 모동숲 주민 캐릭터로 이미지 설정하고 전체적이 테마도 모동숲이랑

맞춰볼 생각이다.

모동숲 배경에 로고 글자를 다 지우고 새롭게 폰트를 다운받아 우리 팀 이름인 모두모여 기억해조로 바꿨다.

팀원 분들한테 각자 좋아하는 동물 있냐고 여쭤봐서 주민캐릭터 중에 귀여운 캐릭터로 골라봤다. (난 케찹이 💟)

기존 카드 대신에 캐릭터를 누르면 모달창이 나올 수 있도록 구현하고 싶었다.

 

백그라운드 배경 이미지를 부모요소로 하고 캐릭터들을 자식요소로 해서 전체적인 위치를 잡아보았다.

<div class="background">
        <div class="div">
            <img src="https://i.ibb.co/ZXMJKBX/0-FC718-EF-C6-DA-426-B-990-C-B10-C5307-C119.png" onclick="openModal(1)">
            <div id="myModal1" class="modal">
								(모달 내용)
			</div>
		</div>
</div>

 

<div>안에 자식 요소 <div> 각각 넣어서 정리했다. 모달 코드는 어제 쓰던 코드를 그대로 옮겨서 사용했다.

캐릭터 이미지를 다 배치 하기 위해서 css를 수정해야한다. 여기서 좀 복잡해지는게 css코드가 너무 길어져서

깔끔하게 정리하고 싶은데 아직 방법을 몰라 열심히 작성만 줄줄이 길어졌다..

body {
    background-image: url("./background1.jpeg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1400px;

    width: 1000px;
    height: 800px;
    position: relative;
    /* overflow: hidden; */

}


.div:nth-child(1) {
    position: absolute;
    top: 280px;
    left: 200px;
}

.div:nth-child(1) img {
    max-width: 220px;
    height: auto;
    cursor: pointer;
}

 

각 이미지 카드에 자식 요소를 부여하는 방법은.div:nth-child() 이렇게 코드를 쓰면 된다.

.div:nth-child(5) 까지 각 캐릭터들을 원하는 위치에 배치시켜주고 이미지를 클릭하는 이벤트를 알려주기 위해

마우스 커서를 이미지에 대면 이미지가 커지는 효과를 주고 싶었다.

/* 마우스 갖다대면 사이즈 커짐 */
.div:nth-child(1):hover img {
    transform: scale(1.1);
		transition: all 0.1s linear;
}

 

마우스를 올렸을 때 사이즈가 커지는 효과는 trasnform을 이용해서

원하는 스케일 값을 주면 커진다. 그리고 이미지가 갑자기 확 커지는 느낌보다

부드럽게 커지는 효과를 주기 위해 trasnsition을 이용해서 원하는 시간효과를 주면 된다.

 

여기까지는 문제 없었는데 모달창 클릭 시 모달창 안에 있는 이미지크기가 자꾸 길어지고 

아무리 css에서 따로 크기를 조정해도 값이 전혀 먹지 않는 것이다. 개발자도구를 열어서

계속 확인해봐도 오류를 찾을 수 없어서 꽤나 힘들었다.. 집념 끝에 백그라운드와 캐릭터카드의

부모-자식 상속때문에 모달창이 캐릭터카드를 상속받고 있어서 같이 설정된 것이었다.

그래서 캐릭터 카드 이미지 크기를 수정하면 모달창 내부에서도 자꾸 이미지들 크기가 벗어나고

난리부르스를 떨었던 것,,

<div class="main1">
    <img src="https://i.ibb.co/ZXMJKBX/0-FC718-EF-C6-DA-426-B-990-C-B10-C5307-C119.png" onclick="openModal(1)">
</div>
<div id="myModal1" class="modal"> <!-- 모달 요소 -->
.
모달내용
.
</div>

 그래서 결국엔 메인 캐릭터 카드와 모달창을 분리해서 해결했다!!헤헤

자바스크립트로 함수로 호출을 사용하면 굳이 지금처럼 index에서 카드 하나하나

다 요소를 적어줄 필요가 없을것 같은데.. 아직 자바스크립트 문법을 배우지 못해서

이번 프로젝트는 html익혀보자,,생각으로 공부중이다..

 

 

 

See the Pen 23.05.18) 팀프로젝트:팀 소개 - html 디자인 수정 by Treasure jin (@Treasure-jin) on CodePen.