2023년 06월 15일 TIL [#html 만들기]

 

 

---

오늘의 학습 계획

_메인페이지, 로그인, 회원가입, 회원정보수정 html을 만든다

---

기록하고 싶은 학습내용

_검색창을 만들 때 input 태그로 해야할까?

js랑 백엔드가 어떤 입력값을 http로 전달할 때 선호되는 태그가 있을텐데 무엇을 써야 하는 지 알아보자!

> 그냥 하나만 보낼 땐 input 태그에 type="submit"을 넣어서!

> 여러개 보낼 땐 입력칸들을 아울러 감싸는 form 태그를 만들어서! form 태그 안에 action="url주소" 를 주고 

 

 

_텍스트가 컨테이너 밖으로 나갈 때 적당히 사라지게 하는 법

.CSS선택자 {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

이러면

이렇게 글씨가 다음줄로 넘어가지 않고 적당히 잘리게 된다.

 

 

_미리 준비된 이미지가 검은색일 때 빨간색으로 바꾸기: 필터와 색상보정 옵션을 사용해서 조금씩 바꾸면 된다.

<img class="icon" src="icon_black.svg" alt="icon">


.icon:hover {
    filter: invert(16%) sepia(89%) saturate(6054%) hue-rotate(358deg) brightness(97%) contrast(113%);
}

 

_빈 하트를 좋아요 할 때마다 꽉찬 하트로 바꾸는 방법

나는 div 태그를 놓고 CSS 부분에서 background-image 를 먹여 이미지를 넣었다.

왜냐하면 JS에서 선택자를 잡아다가 그의 CSS를 바꾸는 방법이 있다는 것을 어디서 보았기 때문에

CSS 부분에서 이미지 종류를 정한다면, 같은 기술로 이미지를 다른 이미지로 교체할 수도 있다고 생각이 들었기 때문이당

 

먼저 html단

<div class="exhibition-info-box">
    <span class="exhibition-title">전시 이름</span>
    <span class="exhibition-period">전시 기간</span>
    <div class="heart-set">
        <div class="heart" id="heart" onclick='heart()'></div>
        <span class="heat-num">999</span>
    </div>
    <div class="sign-set">
        <button class="detail-button">전시상세</button>
        <button class="reserve-button">예약하기</button>
    </div>
</div>

css단

.heart {
    background-image: url('../img/empty-heart.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 18px;
    margin-right: 7px;
    filter: invert(16%) sepia(89%) saturate(6054%) hue-rotate(358deg) brightness(97%) contrast(113%);
}

js단

// 좋아요 하트 관련 코드
let fullHeart = false;
function heart() {
    const heartElement = document.querySelector('#heart');
    if (!fullHeart) {
    heartElement.style.backgroundImage = 'url("../static/img/filled-heart.png")';
    alert("좋아요!");
    } else {
    heartElement.style.backgroundImage = 'url("../static/img/empty-heart.png")';
    alert("좋아요 취소!");
    }
    fullHeart = !fullHeart;
}

---

오늘의 느낀점: 화면구현을 오랜만에 만져보니 신기한 것들을 많이 배웠다! ㅎㅎㅎ

백엔드도 재밌지만 화면구현도 재밌어.

편식하지 않고 냠냠 흡수하다보면

언젠가는 혼자 백과 프론트를 다 만들 수 있는 사람이 될 수 있을지도?

---