이미지 태그 및 스타일시트 > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

이미지를 제어하는 각종 방법들


1. src : image가 존재하는 경로 설정
<img src="happyjung.png">


2. width : image의 폭 지정
<img src="happyjung.png" width="10">
<img src="haapyjung.png" style="width:10px;">


3. height : image의 높이 지정
<img src="happyjung.png" height="20">
<img src="happyjung.png" style="height:20px;">>


4. alt : image에 대한 설명
<img src="happyjung.png" alt="해피정닷컴">


5. border : image의 테두리 크기 설정
<img src="happyjung.png" border="0">


6. align : image의 정렬형태 지정
<img src="happyjung.png" align="left">
   ⓐ left : 왼쪽
   ⓑ center : 가운데
   ⓒ right : 오른쪽
   <img src="happyjung.png" style="text-align:left;">


7. padding : 이미지 여백 적용
<img src="happyjung.png" style="padding: 0px 5px 10px 15px;">
   padding-top:0px;  위쪽 여백
   padding-right:5px;  오른쪽 여백
   padding-bottom:10px;  아래쪽 여백
   padding-left:15px;  왼쪽 여백
   padding: 위쪽px 오른쪽px 아래쪽px 왼쪽px;


8-1. opacity : 불투명도 적용 (0~1)
<img src="happyjung.png" style="opacity:1">


8-2. filter : image에 특수효과 적용 (IE8 and earlier)
<img src="happyjung.png" style="filter:alpha(opacity=100)">
   ⓐ alpha : 투명도 적용 (0~100)
       opacity : 투명도의 시작값을 설정
       finishopacity : 투명도의 끝값을 설정
       style : 투명도 처리방식을 지정
         -> 0 : 일반
         -> 1 : 점차적으로
         -> 2 : 원형형태로
         -> 3 : 사각형형태로
   ⓑ blur : 잔상효과
       direction : 잔상효과가 처리될 방향 지정 (각도)
       strength : 잔상효과가 나타날 정도 지정
   ⓒ chroma : 특정색상 제외처리
       color : 어떤색을 chroma처리할지 지정
   ⓓ dropshadow : 그림자 효과
       color : 그림자가 표시될 색상 지정
       offx, offy : 그림자가 표시될 위치를 가로, 세로로 지정
       positive : 그림자가 표시될 대상 지정
         -> 0 : 불투명한것
         -> 1 : 투명한것
   ⓔ fliph/flipv : 그림의 좌우 혹은 상하의 위치를 바꿉니다.
   ⓕ glow : 형광색 효과
       color : 형광표시할 색상을 지정
       strength : 형광표시할 정도를 지정
   ⓖ gray : 흑백효과
   ⓗ invert : 그림의 색상 반전효과
   ⓘ wave : 물결 효과
       add : wave처리된 형태에 원래 image형태를 혼합할 것인지 지정
       freq : wave표시할 수를 지정합니다.
       lightstrength : wave처리될 빛의 정도를 지정
       phase : wave표시가 시작될 위치를 각도기준으로 지정
       strength : wave표시될 정도를 지정
   ⓙ xray : x-ray 효과


9. 이미지를 예쁘게 하는 CSS 보더
Evan Byrne씨는 간단한 CSS 아이디어로 이미지를 더욱 예쁘게 표현하는 보더를 만드는 방법에 대하여 소개했습니다. 이것은 CSS 가짜 요소를 사용하는 방법입니다. <img>요소에는 가짜 요소를 사용할 수 없기 때문에 <span>요소를 추가하고 :after 가짜요소에 스타일을 지정합니다. 이때 font-size와 ine-height속성으로 보더와 이미지 사이에 생기는 공백을 제거해 주어었네요. 결과는 다음과 같습니다.

<style>
.fancy{
    position:relative;
    display:inline-block;
    font-size:0;
    line-height:0;
}

.fancy:after{
    position:absolute;
    top:1px;
    left:1px;
    bottom:1px;
    right:1px;
    border:1px solid rgba(255,255,255,0.5);
    outline:1px solid rgba(0,0,0,0.2);
    content:" ";
}
</style>
<span class="fancy"><img src="happyjung.png"></span>


10. 이미지와 텍스트를 나란히 정렬
<img src="happyjung.png" style="float:left; margin-right:20px; margin-top:5px; clear:both;">무궁화 꽃이 피<br>
무궁화 꽃이 피었습니다.<br>
무궁화 꽃이 피었습니다.


참고자료
http://www.w3schools.com/css/css_image_transparency.asp
http://lab.cliel.com/entry/HTML-CSS-이미지Image관련-태그Tag및-스타일시트Style-Sheet
http://firejune.com/1620/이미지를+예쁘게+하는+CSS+보더
http://kimhamc.com/220886720748