이렇게 가로를 꽉채우고 세로도 비율에맞게 자동으로 조절된다.
때때로 이미지를 글쓰기 에디터를 통하지 않고 따로 올리거나 다른 곳에서 이미지을 퍼올때, HTML 태그를 이용하여 올리게된다.
그런데 이것이 이미지가 블로그나 타 웹이 지원하는 가로크기를 넘어버리면 가로가 잘려서 나오는 사태가 발생하게 되버린다.
그 잘리는 사태를 막고 원본의 비율대로 이미지를 올릴 수 있는 방법을 소개하고자 한다.
간단한 태그하나로 해결 할수 있다.
그럼 아래를 보자.
< img src="주소" style="max-width: 100%; height: auto;">
자 이것이 우리가 배울 태그의 양식이다.
여기서 중요한 것은, style max-width: 100%; 과 height: auto;"
바로 style 태그!
우리를 이미지 비율로부터 편하게 해줄 마법의 태그다. 사용법은 아주 쉽다.
그런데 배우기 전!
style 태그를 배우기 앞서 일반적으로 크기를 조절하는 법을 알아보자
보통 크기를 설정하기 위해서는 style 태그를 이용하지 않고
<img src="주소"> 여기에 주소뒤에
width=Opx, height=Opx 를 이것을 추가하면 된다.
여기에서 O에 수치를 입력하면 그 수치만큼 이미지가 조절된다.
자 그럼 예시를 보자.
가로 400 세로 400으로 설정해보겠다.
*왜인지 모르겠지만 크롬에선 변경된 사이즈로 보이지 않는군요..
예시로 AKB48분들이 도와주셨다.
자 이렇게되면 비율이 깨져버리게 된다. 원본이미지의 비율을 고려하지 않은채 400*400으로 만들어버렸으니
비율이 깨져서 그다지 보기좋지 않은 이미지가 되어버리는 것이다.
그럼 이렇게 싫은 이미지가 되기 싫으면 어떻게해야하는가?
원본 이미지의 비율에 맞춰서 크기를 설정해주면 해결될 일이다.
그런데 그게 귀찮고 번거로우니까 style태그를 배우는 것이다.
그럼 본격적으로 style 태그를 이용하여 이미지를 보기좋게 만들어주자.
이번에 수고해주실 분은 도쿄중앙은행 한자와 과장님이다.
아무것도 설정하지 않고 이미지 태그만 설정하니 원본사진이 너무 커서 가로가 짤리고 말았다.
이걸 본 글쓴이는 아마 가로가 잘리지 않고 비율도 맞는 멋진 이미지를 원할 것이다.
바로 이때 사용하는게 style 태그이다.
이 태그를 이미지태그 안 뒤에 쓰면 가로크기를 기준으로 세로 크기를 원본 이미지의 비율에 맞게 자동으로 조정된다.
왜 세로가 자동으로 조절되냐 묻는다면 height의 값을 보라. auto라고 써있는걸 보면 초등학생 아니 요즘은 유치원생도 저 부분이 자동으로 조절되는 것이겠구나 하고 금방 알아챌 수 있을것이다.
그럼 적용해보도록 하자.
가로는 600px로 설정해보겠다.
자 어떤가, 가로 600px에 맞게 세로 길이가 자동으로 조절되었다.
전 예시사진과는 다르게 비율도 깨지지 않고 보기좋게 됬다.
비율맞게 이미지가 조정된건 좋은데 이미지가 게시글에 꽉차게 설정하고싶을 때도 있다.
그럴때는 style태그에서 크기값을 조정해주면 된다.
style="max-width: 600px; height: auto;">
내가 저 사진을 올릴 때 사용한 태그의 style 부분이다.
가로 값이 현재 600px로 설정되어서 무슨 일이 있어도 600px로 표현된다.
그런데 저 값을 100%로 설정해 주면 알아서 화면을넘어가지 않을 최대크기로 조절된다.
가로길이가 최대로 설정되고 세로는 가로를 기중으로 비율맞게 자동으로 조절됬다.
100%라는 값에서 알 수 있듯이 가로를 최대한 채우는 길이로 조절된다.
그럼 50%로 설정하면 딱 절반으로 설정될까?
그렇다. 딱 절반의 크기로 줄어들었다.
정말이지 마법의 태그라고 할 만큼 우리를 편하게 해준다.(물론 내가 맘대로 붙인 말이지만ㅋ)
요점정리
1. 사진 크기를 조절할 때는 <img src="주소" width=00px, height=00px>
2. 원본이 커서 가로가 잘릴 때 비율맞게 크기를 편하게 조절하려면 style태그를 사용한다.
3. style 태그는 style="max-width: 00px; height: auto;" 이며 이미지태그 뒤에 붙여주면 된다.
4. max-width 값에 수치를 변경하면 가로를 기준으로 세로가 자동조절된다.
5. 퍼센트(%)를 이용하면 편하다. 100%면 가로를 꽉채우고 그에맞게 세로 자동설정.
자 style 태그를 자신의 블로그나 다른 웹에가서 활용해보자.
계속 사용하다보면 자신도 모르게 자연스럽게 설정하고 있을것이다.
* 추가.
왜인지 모르겠지만 크롬에서는 크기를 설정해도 그냥 맞게 나오네요. ㅡㅡ
왜이래
가로 400 세로 400으로 설정해보겠다.
*왜인지 모르겠지만 크롬에선 변경된 사이즈로 보이지 않는군요..
예시로 AKB48분들이 도와주셨다.
자 이렇게되면 비율이 깨져버리게 된다. 원본이미지의 비율을 고려하지 않은채 400*400으로 만들어버렸으니
비율이 깨져서 그다지 보기좋지 않은 이미지가 되어버리는 것이다.
그럼 이렇게 싫은 이미지가 되기 싫으면 어떻게해야하는가?
원본 이미지의 비율에 맞춰서 크기를 설정해주면 해결될 일이다.
그런데 그게 귀찮고 번거로우니까 style태그를 배우는 것이다.
그럼 본격적으로 style 태그를 이용하여 이미지를 보기좋게 만들어주자.
이번에 수고해주실 분은 도쿄중앙은행 한자와 과장님이다.
아무것도 설정하지 않고 이미지 태그만 설정하니 원본사진이 너무 커서 가로가 짤리고 말았다.
이걸 본 글쓴이는 아마 가로가 잘리지 않고 비율도 맞는 멋진 이미지를 원할 것이다.
바로 이때 사용하는게 style 태그이다.
style="max-width: Opx; height: auto;"
이 태그를 이미지태그 안 뒤에 쓰면 가로크기를 기준으로 세로 크기를 원본 이미지의 비율에 맞게 자동으로 조정된다.
왜 세로가 자동으로 조절되냐 묻는다면 height의 값을 보라. auto라고 써있는걸 보면 초등학생 아니 요즘은 유치원생도 저 부분이 자동으로 조절되는 것이겠구나 하고 금방 알아챌 수 있을것이다.
그럼 적용해보도록 하자.
가로는 600px로 설정해보겠다.
자 어떤가, 가로 600px에 맞게 세로 길이가 자동으로 조절되었다.
전 예시사진과는 다르게 비율도 깨지지 않고 보기좋게 됬다.
비율맞게 이미지가 조정된건 좋은데 이미지가 게시글에 꽉차게 설정하고싶을 때도 있다.
그럴때는 style태그에서 크기값을 조정해주면 된다.
style="max-width: 600px; height: auto;">
내가 저 사진을 올릴 때 사용한 태그의 style 부분이다.
가로 값이 현재 600px로 설정되어서 무슨 일이 있어도 600px로 표현된다.
그런데 저 값을 100%로 설정해 주면 알아서 화면을넘어가지 않을 최대크기로 조절된다.
가로길이가 최대로 설정되고 세로는 가로를 기중으로 비율맞게 자동으로 조절됬다.
100%라는 값에서 알 수 있듯이 가로를 최대한 채우는 길이로 조절된다.
그럼 50%로 설정하면 딱 절반으로 설정될까?
그렇다. 딱 절반의 크기로 줄어들었다.
정말이지 마법의 태그라고 할 만큼 우리를 편하게 해준다.(물론 내가 맘대로 붙인 말이지만ㅋ)
요점정리
1. 사진 크기를 조절할 때는 <img src="주소" width=00px, height=00px>
2. 원본이 커서 가로가 잘릴 때 비율맞게 크기를 편하게 조절하려면 style태그를 사용한다.
3. style 태그는 style="max-width: 00px; height: auto;" 이며 이미지태그 뒤에 붙여주면 된다.
4. max-width 값에 수치를 변경하면 가로를 기준으로 세로가 자동조절된다.
5. 퍼센트(%)를 이용하면 편하다. 100%면 가로를 꽉채우고 그에맞게 세로 자동설정.
자 style 태그를 자신의 블로그나 다른 웹에가서 활용해보자.
계속 사용하다보면 자신도 모르게 자연스럽게 설정하고 있을것이다.
* 추가.
왜인지 모르겠지만 크롬에서는 크기를 설정해도 그냥 맞게 나오네요. ㅡㅡ
왜이래