2023년 06월 16일 TIL [#html 만들기 #포지션픽스드 #스크롤 따라 고정된 버튼 #화면확대/축소해도 크기 고정된 버튼 만들기 #justify-content: 에서 한 놈만 왼쪽으로 몰기]

 

 

---

오늘의 학습 계획

_어제에 이어서 html 만들기

---

기록하고 싶은 학습내용

_스크롤을 따라다니며 고정되어 있는 버튼 만드는 방법!

생각보다 간단했다.

.new-exh-button {
    color: #6358DC;
    font-weight: bold;
    font-size: 20px;
    border: 5px solid #6358DC;
    border-radius: 10px;
    background-color: white;
    width: 300px;
    height: 50px;
    /* 스크롤 따라다니게 하는 코드 */
    position:fixed;
    display:inline-block;
    right:40%; /* 창에서 오른 쪽으로부터의 간격 */
    top:90%; /* 창에서 위에서부터의 높이 */
}

 

_그 고정된 버튼의 크기가 줌인 줌아웃해도 줄어들지 않는 방법!

그리고 그 버튼 안에 쓰여진 글씨인 요소내용/태그내용도!

그리고 그 버튼의 테두리의 선 굵기도!

그리고 그 버튼의 테두리의 보더 래디우스도!

 

일단은 버튼 크기를 픽셀이 아닌 % 단위로 주고, 나머지는

아래 코드로 하면 된다.

.new-exh-button {
    width: 20%;
    height: 7%;
    background-color: white;
    border: 0.5vmin solid #6358DC;
    border-radius: 2vmin;
    color: #6358DC;
    font-weight: bold;
    font-size: 3vmin;

    /* 스크롤 따라다니게 하는 코드 */
    position:fixed;
    display:inline-block;
    right:40%; /* 창에서 오른쪽 길이 */
    top:90%; /* 창에서 위에서 부터의 높이 */
}

이렇게 수치 명시를 특수단위인 vmin으로 한 부분들이 있다. vmin으로 하면 너비(viewport width) 또는 높이(viewport height) 중 작은 쪽에 따른 글자 크기를 지정할 수 있다. 이러면 해당 요소가 화면의 크기 변화에 적응함.

 

 

_justify-content: 에서 한 놈만 왼쪽으로 몰기

약간 요런 상황에서, 중앙의 돋보기 아이콘과 오른쪽 검색바는 서로 친구인데

justify-content: space-between; 때문에 삼자구도가 되어 서로서로 떨어져있다.

이럴때,

'등록된 전시 목록입니다' 텍스트는 좌측으로 보내고

돋보기 아이콘과 검색바는 우측으로 밀려면 어떻게 해야할까?

생각보다 간단하다! 이렇게 중앙의 돋보기 아이콘의 CSS에다가 margin-left: auto;를 주면 오른쪽 끝으로 쭉 밀린다.

짜잔!

---