TIL : object-fit / API

hihyeon_cho·2022년 11월 3일
1

TIL

목록 보기
4/101

내일배움캠프 4일차

1) 프로젝트도 내일 마감이어서 오늘까지 계속 작업했다.
웬만한 건 거의 구현해서 프론트엔드만 마무리하면 됐었다.
그 중에서 이미지가 카드랑 width가 맞지 않아서 창의 크기에 따라서 카드의 크기가 바뀌면 이미지의 비율이 바뀌는 문제가 있었다.

.card-box {
            position: relative;
            max-width: 700px;
            height: 400px;
        }
.card-img-top {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

위 처럼 코드를 변경 후 이미지와 카드가 더 이상 따로 크기가 움직이지 않도록 바뀌었다.
이 때 object-fit 이라는 css 코드를 알게되었다.
MDN에 따르면, object-fit은 img나 video 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정한다.값은 contain, cover, fill,none,scale down 을 받는다.

API

2 ) 오늘 튜터님과 상담시간에 API의 범위를 질문했다.
아무래도 어디부터 어디까지가 API라 할 수 있는지 궁금했기 때문이다.
개념은 이랬다.


예를들어, 식당에가서 메뉴판을 보고 메뉴를 골라 주문을 한다.
이 때, 주문한 메뉴를 전달하는 것은 서버이며 메뉴판이 API인 것이다.
그래서 우리가 서버에 API를 요청하면 서버에 있는 API정보를 주는 것이다.
우리가 쓰는 부트스트랩도 마찬가지이다.
사용법대로 사용하는것 그대로 API를 사용한다고 할 수 있는 것이다.
오로지 백엔드 서버를 구성했을 때 요청한다고만 해서 API라고 할 수 없다.
주문하는 것, 사용설명서가 곧 API문서이다.
(** ajax : 통신DB를 부르기 위한 명령어)

오늘은 상담도 진행했는데, 여러가지 꿀팁도 얻었다.
체력관리하는 방법이랑 ( 점심,저녁시간에 밥먹고 눕지말고 산책하기!⭐️ )
여러가지 미뤄둔 고민들도 상담할 수 있어서 더욱 부트캠프에 함께하고 있다는 게 실감이 났던 하루였다.

profile
코딩은 짜릿해 늘 새로워 ✨

0개의 댓글