margin2 align 정렬 (margin, position, float) margin 속성을 이용한 가운데 정렬 margin 속성값을 auto로 설정하면, 해당 요소를 감싸고 있는 컨테이너 요소를 기준으로 수평 방향 가운데 정렬이 됩니다. 이때 해당 요소는 특정한 너비를 가져야 하며, 너비를 제외한 나머지 공간은 좌우로 균등하게 나뉘어 여백으로 만들어집니다. 따라서 이 방법을 사용하기 위해서는 반드시 해당 요소의 width 속성값을 먼저 설정해야만 합니다. ex) div { width: 300px; margin: auto; padding:10px } position 속성을 이용한 좌우 정렬 절대 위치 지정 방식으로 위치한 요소는 정상적인 레이아웃에서 벗어나 다른 요소와 겹칠 수 있게 됩니다. position 속성을 이용하여 정렬할 경우에는 요소에 margin과 padding .. 2021. 4. 25. box model 속성 (content, padding, border, margin, outline) content 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다. ex) div { background-color: red; padding: 50px; border: 20px solid maroon; margin: 50px; } padding 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다. background-color 속성으로 설정하는 배경색의 영향을 함께 받습니다. 1. padding-top 2. padding-right 3. padding-bottom 4. padding-left ex) div.four { padding: 10px 20px 30px 40px;} = padding-top: 10px; padding-right: .. 2021. 4. 25. 이전 1 다음