[Web] .css에서 이미지 사이즈 조정이 안될때, Inline Style Testing

#  style.css

전반적인 스타일을 담당하는. css 파일에 이미지를 넣어야 하는 경우 해당 코드에서 이미지에 대한 속성을 조정해 줄 수 있다. 다만 가끔씩 조정한 이미지의 속성이 html에서 적용이 제대로 되지 않는 경우가 발생하는데 빠르게 해결하는 방법은 html 자체에서 테스트를 해보는 것이다. 한마디로 이미지 속성 변경이 제대로 이뤄지지 않는 이유들 중에서 이미지 자체에 문제가 있거나 아니면 css와 html 코드 간의 연결 문제가 있는지 등을 확인해 보기 위해서 html 내에서 이미지 속성을 지정해 주는 것이다.

---

#  Inline Style Testing

.css 파일에서 이미지를 설정해 준다고 가정했을 때 아래와 같이 코드가 작성되어 있을 것이다.

.logo {
    width: 500px;
    height: autho;
    margin: 0 auto 20px;
    display: block;
}

 

위의 logo라고 지정한 이미지 속성의 width값을 변경해 줬음에도 적용이 제대로 되지 않는다면 우선. css 파일 내에서 강제로 사이즈를 키워봐서 어떤 점에 문제가 있는지 하나하나 확인해 주는 것이 좋다. 아래는 height와 maxwidth를 통해서 테스트해 본 코드이다.

.logo {
    width: 500px;
    height: 200px;
    max-width: 100%;
    margin: 0 auto 20px;
    display: block;
}

---

# Inline Style Testing

위와 같이 .css 파일의 이미지 속성 값을 수정해 줬는데도 원하는 속성이 제대로 출력되지 않는다면 html 내에서 변경이 가능한데 이를 Inline style testing라고 한다. 솔직히 말해서 html에 스타일 관련 속성을 넣은 채로 사용해도 상관이 없다. 하지만 코드를 관리하는 측면에서 깔끔하게 하기 위해서 나눠서 관리하는 것이 좋다. 쉽게 말해서 음식을 먹을 때 어차피 위 속으로 들어가면 다 똑같다고 믹서기에 모든 재료를 넣어서 갈아서 마시지 않는 것처럼 html에서 테스트를 하고 문제가 없으면. css에 적용해 주면 된다.

 

 <img src="images/logo.png" alt="Logo" class="logo" style="width: 300px; height: auto;>

 

html에서 이미지 스타일 또는 속성을 지정해줬을때 원하는 대로 출력이 이뤄진다면 해당 html과 style.css 간의 연결이 제대로 이뤄지지 않았을 가능성이 있다. 따라서 연결이 제대로 되어 있는지를 html 코드에서 살펴보는 것이 좋다.

 

    <link rel="stylesheet" href="styles.css">

---