#TIL (May 16th, 서른한번째 이야기)

Jung Hyun Kim·2020년 5월 16일
0

HTML과 CSS 만 사용하여 홈페이지 만들기

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0">
// viewport를 함으로서 모바일 사이즈를(미디어쿼리를 사용하여) 선택 한다는 것 user-scalable=no는 터치스트린의 줌인 효과를 허용하지 않겠다는 의미 

레이아웃 전 꼭 정해야 하는 부분

 html, body {
    margin: 0;
    padding: 0;
}

이미지 사이즈가 화면을 넘어섰을때 가로스크롤 생기지 않게 하려면 아래와 같이 설정

body {
	overflow-x: hidden;// 가로스크롤을 방지하기 위해 
}

배경이미지의 css 값

	{width: 100%;
	height:1600px; //배경을 하고자 하는 이미지의 높이 
	background-img:url}("../img/intro/intro_bg.png"); 
    //..을 통해 파일을 나와서 넣었다는 의미 image는 repeat값이 default로 들어감 

이미지 중간정렬?

	left:50% 
	margin-left:-380px;} //배경의 절반값 왼쪽마진주고

혹은

  margin : 0 auto;
  
  #intro .cloudWrap .leftCloud {
   position: absolute;
   width:934px;
   height:816px;
   background-image: url("../img/intro/cloud1.png");
   left:0;
}

양옆에 배치하고 싶을때 포지션 absolute한다음 left 0 right 0 해도된다

profile
코린이 프론트엔드 개발자💻💛🤙🏼

0개의 댓글