HTML5와 CSS : background 기본속성 7종세트

💡 핵심 요약 (TL;DR)

HTML5와 CSS : background 기본속성 7종세트의 동작 원리를 이해하고 실제 프로젝트에 적용하기 위한 실무 가이드다. 핵심 설정과 구현 코드를 단계별로 파악하여 상황에 맞게 유연하게 활용할 수 있다.

CSS background 기본속성 7종세트

body{
    width: 500px;
    height: 200px;
    background-image: url("../img/이미지이름");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

div에 이미지 삽입했을 때 기본속성

div{
	background-color: white;
	width: 100px;
	padding: 410px;
	margin: 30px auto;
	border: 10px solid coral;
}

• 위의 코드에 추가로

      
/* div든 뭐든 센터로 위치 시킬때(상-좌우-하 순서)  */
      margin: 30px auto;

/* div든 뭐든 센터로 위치 시킬때(상-좌우-하 순서) */
      margin: 30px auto 50px;
     
/* div든 뭐든 센터로 위치 시킬때(상-우-하-좌 순서: ) */
      margin: 10px 20px 30px 10px;
      
/* div든 뭐든 테두리주고 싶을때 */
      border-width: 10px;
      border-style: solid;
      border-color: coral;
      
/* 위의 border 속성을 한 줄로 줄여쓸 수 있다(단축속성) */
      border: 10px solid coral;

• div는 기본적으로 block속성이다

가장 중요한 박스모델

가장 중요한 박스모델을 정리하자면

Box model

width : 너비, 미설정시 모부크기만큼 꽉참
height : 미설정시 자식높이만큼 자동 조절
margin : 바깥여백
padding : 안쪽여백, 설정시 자신의 width와 height에 padding만큼 증가함
border : 테두리, 설정시 자신의 width만큼 증가함