ysk(0soo)
Lifealong
ysk(0soo)
전체 방문자
오늘
어제
  • 분류 전체보기 (238)
    • Java (50)
      • whiteship-java-study (11)
      • Java (28)
      • time (6)
    • Spring (68)
      • JPA (15)
      • Spring (1)
      • SpringBoot (1)
      • SpringMVC (6)
      • Spring Security (22)
      • Jdbc (1)
      • RestDocs (14)
      • log (6)
    • Kotlin (3)
    • Web (2)
      • nginx (1)
    • Database (14)
      • MySQL (5)
      • PostgreSQL (1)
      • SQL (1)
      • Redis (4)
    • C, C++ (0)
    • Git (1)
    • Docker (2)
    • Cloud (3)
      • AWS (3)
    • 도서, 강의 (0)
      • t5 (0)
    • 기타 (7)
      • 프로그래밍 (1)
    • 끄적끄적 (0)
    • CS (14)
      • 운영체제(OS) (2)
      • 자료구조(Data Structure) (9)
    • 하루한개 (12)
      • 우아한 테크코스-10분테코톡 (12)
    • 스터디 (12)
      • 클린 아키텍처- 로버트마틴 (2)
      • JPA 프로그래밍 스터디 (10)
    • 테스트 (34)
      • JUnit (19)
      • nGrinder (2)
      • JMeter (0)
    • Infra (3)
    • 프로그래머스 백엔드 데브코스 3기 (0)
    • 디자인 패턴 (3)
    • Issue (4)
    • system (1)
      • grafana (0)
      • Prometheus (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • github

공지사항

인기 글

태그

  • nGrinder
  • LocalDateTime
  • mysql
  • 가상 스레드 예외 핸들링
  • 가상 스레드
  • 동일성
  • jpa
  • restdocs custom
  • junit5
  • 동등성
  • querydsl
  • scope value
  • nginx basic auth
  • VirtualThread Springboot
  • 구조화된 동시성
  • AccessDecisionManager
  • FilterSecurityInterceptor
  • java
  • AccessDecisionVoter 커스텀
  • 동시성 제어
  • restdocs enum
  • 인가(Authorization) 처리
  • node exporter basic auth
  • 트랜잭션
  • AuthenticationException
  • UserDetailsService
  • tree
  • StructuredConcorrency
  • DataJpaTest
  • 정규표현식

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
ysk(0soo)

Lifealong

기타

마크다운 이미지 나란히, 이미지 정렬 하는법

2023. 4. 26. 23:52

이미지 나란히

1. 마크다운 테이블 그리는법 활용

이미지링크 | 이미지링크
---|---|

2. html 태그 사용

<p align="center">
  <img src="이미지경로" align="center" width="32%">
  <img src="이미지경로" align="center" width="32%">
  <img src="이미지경로" align="center" width="32%">
  <figcaption align="center">3개 이미지 띄우기</figcaption>
</p>

3. figure 태그 사용

2개인경우

<figure class="half">

사용

<figure class="half">
  <a href="link"><img src="이미지경로"></a>
  <a href="link"><img src="이미지경로"></a>
  <figcaption>2개이미지.</figcaption>
</figure>

3개 인경우

<figure class="thrid">

사용

<figure class="thrid">
  <a href="link"><img src="이미지경로"></a>
  <a href="link"><img src="이미지경로"></a>
  <figcaption>3개이미지</figcaption>
</figure>

이미지 정렬

  1. 이미지 좌측 정렬
    <img src='./images/box-cox-translation.png' align='left'/>
  1. 이미지 중앙 정렬
    <img src='./images/box-cox-translation.png' align='center'/>
<center><img src="/img/myImg.png" width="300" height="300"></center>
  1. 이미지 우측 정렬
    <img src='./images/box-cox-translation.png' align='right'/>

이미지에 주석달기

<figcaption> 주석 내용 </figcaption>
저작자표시 비영리 (새창열림)

'기타' 카테고리의 다른 글

커서 기반 페이지네이션(Cursor-based-pagination) vs 오프셋 기반 페이지 네이션(offset-based-pagination  (0) 2022.12.14
Asciidoctor란  (0) 2022.12.12
Asciidoc, Asciidoc 사용법  (0) 2022.12.12
VsCode(Visual Studio Code) 키 십힘, Vim모드, VsCode INSERT 해결방법  (1) 2022.10.01
[Springdocs ]Swagger Error - Failed to fetch.  (0) 2022.09.07
    '기타' 카테고리의 다른 글
    • 커서 기반 페이지네이션(Cursor-based-pagination) vs 오프셋 기반 페이지 네이션(offset-based-pagination
    • Asciidoctor란
    • Asciidoc, Asciidoc 사용법
    • VsCode(Visual Studio Code) 키 십힘, Vim모드, VsCode INSERT 해결방법
    ysk(0soo)
    ysk(0soo)
    백엔드 개발을 좋아합니다. java kotlin spring, infra 에 관심이 많습니다. email : kim206gh@naver.com github : https://github.com/devysk

    티스토리툴바