<목차>
1. CSS padding,magin의 구분과 활용법
2. padding과 magin을 사용하여 컨텐츠를 꾸미고 알아보기
전시간에 배운 padding과 magin을 보강하면서 복습하는 시간을 가졌다.
1. CSS padding,magin의 구분과 활용
1. padding
패딩을 사용하여 밀어낸 영역은 병합현상이 일어나지 않으며, 콘텐츠의 연장선으로서 패딩을 사용하여 넓어진 영역 또한 색이 입히고 추가속성 또한 모두 상호작용이 가능하다.
해당 HTML CSS코드를 사용하여 알아보도록 하자 <link rel=stylesheet 와 href를 사용하여 css파일을 불러 왔을 떄
해당 블록형태의 box1과 box2 가 붙어있는 것 처럼 보이지만 box1과 box2의 콘텐츠의 연장선인 padding영역이 box1,box2각각 상하 20px 넓어져서 aqua색의 속성 또한 넓어졌고 병합현상이 일어나지 않기에 하나의 큰 박스처럼 보이는 것을 알 수있다.
또한 curcor: pointer (커서에 포인터 효과를 줌) 의 속성이 넓어진 블럭에 전부 적용되었다.
2. margin
마진은 padding과 다르게 밀어낸만큼의 색상과 속성을 포함하지 않으며 병합현상(인접한 두 블록(형태)에 마진이 겹쳤을 떄 병합됨 마진 병합 현상을 Block형태에서만 발생한다.
위의 padding과 같은 속성인데 padding만 margin으로 바꿔서 실행해보자.
이번에는 2개의 box 가 하나처럼 합쳐지지 않고 나뉘어 보이는 것을 알 수 있었다. 이는 margin은 컨텐츠 밖의 영역을 밀어냈기에 겹쳐보이지 않게 나타났고 box1과 2 모두 20px씩 떨어져야하니까 40px이 떨어져야 하지만 마진 병합 현상이 일어나서 20px만 벌어진 확인 할 수 있었다.
2. padding과 magin을 사용하여 컨텐츠를 꾸미고 알아보기
padding과 magin을 사용하여 실제로 코딩하여 사용할때 의 차의점을 알아보자
HTML과 CSS를 활용하여 사진처럼 결과 값을 만들어 보자
1. 구역나누기
해당 사진을 보면 header라고 써있는 검은색 구역과 상담을 신청하기 그밑 화살표와 H, 지원하기, 상담신청하기가 하얀색 구역 중앙에 위치하고 아래 에 visual의 파란구역, 그아레 content, 구역이 존재한다
이를 구역으로 나누어 코딩해보면
크게 4가지 구역으로 나누어 header 부분과 main 부분 visual, content
으로 나누고 2번째 하얀 구역 안에 글씨와 화살표 등 추가적인 속성을 부여해야함으로
main 안에 inner 안에 큰 글씨를 주기위한 h2 파일과 ul 그리고 ul안에 li폴더를 만들었다.
실행해보면 4개의 영역에 h2 상담신청하기 ul의 불릿효과를 준li 글씨들이 보인다.
이걸 CSS를 사용하여 디자인하면
똑같이 순서대로 아레로 내려가면서 코딩을 하면 보기가 쉽다.
맨 위부터
* { <=을 사용하여 모든 padding과 margin을 0으로 맞춤 (왼쪽으로 정렬하여 깔끔한 정리를 위하여 사용)
#header 에 높이 160에 검은색 배경과 하얀색 글씨를 부여
#main 메인은 전 header와 같이 height 를 사용하여 높이를 부여할 수 있지만 padding- 영역을 위아레로 70xl을 부여하여 하얀 영역을 부여하였다.
#main > .inner
max-width: 1200px; 를 사용하고 margin: 0 auto; 를 사용하여 중앙을 맞추려고 하였으나. 이번에는 padding을 사용하여 중앙을 맞춰보았다 100/3 =33%
#main > .inner > h2 {
text-align: center; 텍스트를 센터에 위치합니다.
상담신청하기 의 weight 굵기 size 크기를 정합니다.
#main > .inner > ul
리스트의 불릿 모양을 제거하기위하여
list-stale: none;를 사용
text-align: center; 텍스트를 센터에 위치.
margin-top: 30px를 사용하여 위쪽공간을 밀어냅니다.
#main > .inner > ul > li
display: inline-block; 를 사용하여 블럭효과인 li를 인라인 형태로 만들어서 정렬하고
폰트크기와 굵기
margin-left를 사용하여 li간의왼쪽 여백을 만들어주어. 자연스럽게 만들어줍니다.
#main > .inner > ul > .circle {
위의 이미지를 pudlic 안에 img 폴더로 가져옵니다.
이미지의
넓이와 높이 22px로 설정한후
background-image: url("../img/arrow-icon.png를 사용하여 불러와도 되지만
background: url("../img/arrow-icon.png 을 사용하여 불러와도 불러와지는데
background 안에 여러가지 속성이 첨가되어 있기에 작동이 원활하게 됨을 확인 할 수 있었습니다.
그러나 해당 이미지처럼 이미지가 잘리는데 이미지의 크기가 44x44px 이나 22x22px로 설정하여 1/4 의 이미지만 구현되었습니다 이를 바로잡기위해
background-size: contain
이미지 크기를 조정하여 요소 안에서 어떻게 표시될지 설정해줌
contain => 이미지가 요소 안에 완전히 들어가도록 맞추는 방식
을 사용하였습니다.
***또한 이미지는 반복되는 형태로 표현되는데 예로 88x88px 의 크기를 가지고 싶을때 44x44px을 가진 이미지 이미지를 활용하면 (width: 88px , height: 88px)
해당 이미지 처럼 화살표 이미지가 반복되어서 표현되었습니다.
이같은 경우는
contain > 이미지를 요소안에 맞춤
을 사용하면 88x88px 안에 큰 화살표 이미지 하나를 표현하게 됨으로
background-repet: no-repet;
이미지를 반복 시키는 속성을 아니라고 표기하여 사용합니다.
마지막으로 visual 과 content에 높이와 색을 부여하여 마무리합니다.