pixabay 유사 사이트를 제작관련 css 질문입니다.

pixabay에 이미지를 검색하면 검색한 결과 이미지들을 볼수있는데요.https://pixabay.com/ko/images/search/

똑 같이 만들고싶은데 ㅠㅠ  어떻게 만들어야될지 몰라서 질문합니다.

https://newspace.gq/#/search 왼쪽에 있는 링크가 지금 만들고 있는 사이트입니다.

들어가서 보시면 검색 결과에 따라 왼쪽, 오른쪽 이미지길이가 달라서 이렇게 질문을 남깁니다 ㅠㅠ

 

좀더 구체적인 질문으로는 아래와같습니다.

1. display 속성은 무엇인가? flex? grid? 
2. 이외에 필요한 개념은?

 

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    CSS display는 요소를 어떻게 보여줄지를 결정하는 속성입니다.

    아래 링크를 참고해보시면 이해가 되실 듯합니다.

    https://ofcourse.kr/css-course/display-속성

     

    display flex는 동적으로 변경 가능한 순서를 지정할 수도 있고

    가용한 공간 내에서 크기와 위치를 자동으로 조정하기도 할 수 있습니다.

    아래 링크를 참고해보시면 자세한 내용과 예제 코드를 확인해보실 수 있습니다.

    https://heropy.blog/2018/11/24/css-flexible-box/

     

    CSS 그리드 레이아웃의 기능은 고정되거나 혹은 유연한 트랙 크기, 아이템 배치, 정렬 제어 등이 있습니다.

    아래의 관련 링크를 참고해보세요.

    https://www.vobour.com/-디자인-5분-안에-css-grid-배우기

     

    저희가 안내해드린 링크 외에도 구글에 검색해보시면 참고해보실 만한 자료가 많이 있습니다.

    레이아웃을 원하는대로 편집하시려면 HTML과 CSS 코드에 대해 알면 도움이 됩니다.

     

    이미지를 원본 그대로 표시한다면 로딩 속도가 느려질 수도 있습니다.

    KBoard 플러그인에서는 이미지를 잘라서 표시하기 위해

    워드프레스의 WP Image Editor 클래스 기능을 활용하고 있습니다.

    아래 링크도 참고해보세요.

    https://codex.wordpress.org/Class_Reference/WP_Image_Editor

    고맙습니다.

  • #커뮤니티 자동 추천글

    HTML/CSS/웹표준 커뮤니티

    더보기

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기