Easy ways

[Html, CSS] 웹페이지 이미지 표현 (margin,padding, border, visibility) 본문

프론트엔드/Html Css

[Html, CSS] 웹페이지 이미지 표현 (margin,padding, border, visibility)

softColors 2022. 12. 17. 20:45
반응형

 

오늘은 Html과 CSS 를 통하여

이미지를 표현하고 조정하는 법을 배워보자

쉽고 간단해서 좋다

 

 

단위

웹에서 기본적으로 사용하는 단위는 다음과 같다.

 

  • px : 픽셀 단위
  • %  : 부모태그의 너비에서의 %단위의 공간의미
  • auto : 사용자의 브라우저가 자동으로 계산하게 만드는 값
  • vw,vh : 사용자의 브라우저 창의 해상도를 기준으로 % 계산  [ex) 30vw는 브라우저 화면너비의 30%]

vw와 vh를 사용하면 px픽셀과 같이 해상도에 따라 다르게 보이지 않고,

화면의 크기에 상관없이 항상 일정한 비율로 화면에 콘텐츠를 표현할 수 있다. 

 

웹을 스마트폰 등에서도 확인 가능한 반응형으로 짜기 위하여 이러한 방식을 알아 두어야한다. 

 

이미지 크기 지정하기

이미지의 크기는 다음처럼 지정할 수 있다. 

weight = 너비

height = 높이

 

일반적으로 아래와 같이 표현한다. 

<img src = "test_image.jpg" width="100px" height="100px">

 

style을 통해서 표현도 가능하다

<!doctype html>
<html>
    <head>
        <style>
            img { 
                width : 300px;
                height : 300px
            }
        </style>

</head>
    <body>
        <img src = "test_image.jpg">
    </body>
</html>

 

 

 

이미지 여백 지정하기 ( margin, padding )

이미지에 있어서 여백은 중요한표인트이다. 

여백에는 다른 요소가 침범하지 못한다. 

여백은 내부여백(padding)과 외부여백(margin)으로 표현현 할 수 있는데

아래와 같이 구성되어있다. 

이미지 내부여백 외부여백

 

 

 

 

예제 코드

<!doctype html>
<html>
    <head>
        <style>
            img { 
                /* 외부 여백 */
                /*단위 px = 픽셀 수, vw = 사용자 화면 대비 % (반응형)*/
                margin-left : 10vw;
                margin-right : 10vw;
                margin-top : 5vh;
                margin-bottom : 5vh;
                /* 내부 여백 */
                /*단위 px = 픽셀 수, vw = 사용자 화면 대비 % (반응형)*/
                padding-left : 10vw;
                padding-right : 10vw;
                padding-top : 5vh;
                padding-bottom : 5vh;
                border: dashed;
            }
        </style>

</head>
    <body>
        <img src = "test_image.jpg"  width ="300px;"  height ="300px;" >
    </body>
    <br>
    <body>
        <img src = "test_image.jpg"  width ="300px;"  height ="300px;"
        style =
        "margin-left :10px; 
        margin-right :10px;
        margin-top :10px;
        margin-bottom :10px;
        border: dotted;"
        >
    </body>
</html>

 

코드를 통해 확인할 점은

inline으로 작성된 아래 그림에 head에 style로 작성된 padding이 상속되었다는 점이다. 

 

 

이미지 테두리 설정( border)

 

 

외부여백과 내부여백을 나누는 포인트가 border이다. 

border은 말그대로 객체의 테두리로

스타일, 두께, 색상 등을 표현할 수 있고

테두리의 모서리에 대한 굴곡도 지정가능하다. 

 

border

border는 기본적으로 테두리의 스타일을 의미하지만 

전체적인 속성도 정의가능하다. 

<!doctype html>
<html>
    <p style = "border : dotted">dotted</p>
    <p style = "border : dashed">dashed</p>
    <p style = "border : solid">solid</p>
    <p style = "border : double">double</p>
    <p style = "border : inset">inset</p>
    <p style = "border : outset">outset</p>

    <!-- 압축표현 -->
    <p style = "border : solid 2px red">test1</p>

</html>

 

압축 표현은 이후에 다룰 

border width 와 color 를 모두 합친 표현으로

입력 순서는 상관없이 세가지 속성을 입력받는다

 

 

border-width 

border-width는 테두리의 두께를 의미한다. 

<!doctype html>
<html>
    <p style = "border : solid; 
    border-width : 4px;">
    border width test</p>

    <p style = "border : solid; 
    border-top-width : 1px;
    border-right-width : 2px;
    border-bottom-width : 3px;
    border-left-width : 4px;">
    border width test</p>

</html>

 

 

border-color

border-color를 통해 테두리의 색상을 표현할 수 있다. 

<!doctype html>
<html>
    <p style = "border : solid; 
    border-width : 4px;">
    border width test</p>

    <p style = "border : solid; 
    border-top-width : 1px;
    border-right-width : 2px;
    border-bottom-width : 3px;
    border-left-width : 4px;">
    border width test</p>

</html>

 

 

 

border-radius

border-radius를 통해 테두리의 굴곡을 설정할 수 있다.

단위는 %와 px 이며,

정사각형 이미지에 50%의 값을 주면 원형으로 표현가능하다. 

 

<!doctype html>
<html>
    <body>
        <img src = "test_image.jpg" 
        width="200px" height="200px"
        >
        <img src = "test_image.jpg" 
        width="200px" height="200px"
        style = "border-radius:50%;"
        >
    </body>
    <body>
        <img src = "test_image.jpg" 
        width="200px" height="200px"
        style = "border-radius:10% 40%;"
        >
        <img src = "test_image.jpg" 
        width="200px" height="200px"
        style = "border-radius:10% 20% 30% 40%;"
        >
    </body>
</html>

 

 

 

 

 

이미지 표시 활성화 (visibility)

 

이미지를 안보이게 할 수 있는 기능이다.

은근이 활용성이 높은 것으로 알고 있다. 

 

<!doctype html>
<html>
    <body>
        <img src = "test_image.jpg" 
        width="200px" height="200px"
        style="visibility : hidden"
        >
        <img src = "test_image.jpg" 
        width="200px" height="200px"
        >
    </body>
</html>

 

 

반응형

'프론트엔드 > Html Css' 카테고리의 다른 글

[HTML] 이미지 표지 활성화(display)  (0) 2023.08.25
[CSS] 스타일 색상, 폰트 설정 법  (0) 2023.08.25
[웹 기초] CSS란? CSS의 기초와 예제  (0) 2022.12.04
[HTML] Input Tag 총 정리  (0) 2022.11.17
[웹서버 기초]HTML 이란? (개념설명, 환경구축, 예제)  (0) 2022.09.23
'프론트엔드/Html Css' Related Articles more
Comments