개발자를 꿈꾸는 젤리누나

@media(max-width:768px) {

.aaa {
 	 width: 100%; height: 155px;
 } 
 
 #hello {margin-top:89px;}
 
}

위와 같이

@midia(max-width:768px){

} 

미디어로 감싸서 style 속성을 주면 된다!

이미지를 <a>태그로 style="background:url();" 속성을 이용하여 화면에 출력할 땐,

기본적으로  <a>태그는 width와 height가 0이기 때문에

width 혹은 height값을 줘야한다.

그!러!나 <a>태그는 inline 요소이기 때문에 width와 height값을 먹지 않는다..

따라서 width와 height값을 주고 싶을 땐 반드시 display:block; 속성을 줘야 한다!

참고로 <a>태그를 품고 있는 부모요소의 width, height값 만큼 크기를 지정해줘야 예쁘게 나온다..!

아래와 같은 속성을 주면 더욱 깔끔하게 이미지가 위치하게 된다 :D

+ backgound-size:cover; 지정한 요소를 다 덮도록 배경이미지를 확대/축소

+ background-position:center; 정 가운데 정렬

난 아래와 같이 속성을 주었다!

결과:

사진이 딱 적당한 사이즈와 포지션으로 출력된 것을 볼 수 있다!

매번 느끼지만 display 속성에 대한 개념은 반드시 정확히 알아 둬야 css를 만지기 수월해지는 것 같다..

참고하기 좋은 게시물↓↓

https://studiomeal.com/archives/282