Overview

이미지는 HTML 에서 넣거나 CSS 에서 넣을 수 있습니다.

둘다 이미지가 노출된다는 사실은 같으나 약간의 차이점이 있습니다.

1. HTML 에서 태그 사용

<img src="/temp/image">

• <img> 태그를 사용하면 이미지 업로드 실패 시 "깨진 이미지 아이콘" 과 "alt" 가 함께 노출된다.
• SEO 나 성능 등에서 이점이 많다.

2. CSS 에서 background-image 속성 사용

background-image: url(image.jpg);

• 순전히 디자인 목적이라면 CSS 를 이용해도 된다.
• CSS 는 이미지 사이즈가 큰 경우 로딩하는데 시간이 더 걸린다
• 이미지 업로드 실패 시 아무것도 노출되지 않는다.

3. 각각 언제 사용하는게 좋을까?

만약 배경 이미지가 있어도 그만 없어도 문제 없는 상황이라면 실패했을 경우 아예 이미지가 노출되지 않는 편이 좋을 수도 있습니다.

이미지가 없어도 컨텐츠를 이해하는 데 무리가 없기 때문에 사용자에게 굳이 에러 상황을 알려줄 필요가 없습니다.

img 태그는 이미지가 컨텐츠와 관련이 깊고 검색 엔진에 노출이 필요한 경우에 사용하고 background-image 속성은 순수하게 디자인을 위한 목적인 경우에 사용합니다.

제 개인적인 생각으로는 웹 접근성도 고려해서 웬만하면 HTML 태그를 사용하는 게 좋다고 생각합니다.

Reference

• HTML img tag vs CSS background-image

Overview

textarea 내부에는 <b> 와 같은 HTML Tag 적용이 되지 않습니다.

구글링 해보니 textarea 내부에 부분적으로 변화를 주는 건 불가능하고 textarea 를 사용하지 않고 <div> 태그를 사용해서 꼼수 부리는 방식들이 나와있었습니다.

1. contenteditable 로 편집 기능 추가

contenteditable 이라는 값을 이용하면 다른 태그에도 편집 기능을 추가할 수 있습니다.

1.1. HTML

<div class="editable" contenteditable="true"></div>

HTML 옵션으로 contenteditable 값을 주면 편집기능이 추가됩니다.

1.2. JavaScript or JQuery 로 편집 기능 추가

$('.editable').each(function(){
    this.contentEditable = true;
});

JavaScript 로도 contentEditable 옵션을 사용해서 내부에 text 를 입력가능하게 할지 말지 설정할 수 있습니다.

만약 값을 false 로 준다면 readonly 처럼 동작합니다.

2. CSS 로 textarea 처럼 변경

div.editable {
    width: 300px;
    height: 200px;
    border: 1px solid #dcdcdc;
    overflow-y: auto;
}

textarea 처럼 보이기 위한 방법입니다.

Reference

• Is it possible to display bold and non-bold text in a textarea?
• Rendering HTML inside textarea
• Format text in a textarea?