<목차>
1. margin과 padding
2. margin과 padding을 활용한 원하는 공간 디자인
1.margin과 padding
기본적으로 HTML은 4가지의 영역으로 구성된다고 볼 수 있다.
바깥쪽부터 margin,border,padding,content 4가지의 영역으로 나뉘게 되는데 margin과 padding은 구역을 나눈다는 역할은 비슷해보이나 각자 다른 사용도를 보인다.
margin과padding 둘다 4면을 가지고 영역을 활용하기 때문에 상하좌우로 나누어 명령어를 내릴 수 있다.
padding을 예로 들자면 padding: 20px 명령어를 활용하면 4가지 면(상하좌우) 모두에 20px만큼의 공간을 벌리나 아레의 명령어처럼 구역을 나눠서 명령어를 넣는것도 가능하다.
1.2 margin과 padding의 차이점과 활용법
margin은 가장바깥쪽 에서 주변요소의 거리를 벌어지게하는 역할을 한다.
div 라인을 사용하여 넓이 100% 1px의 의 얇은 선을 만들어 냈으나 margin 50px(상,하) 0(좌,우)를 부여하여 위아레 간격이 50px 벌어졌기에 다음 텍스트인 "바깥으로 밀어냄"과의 간격이 떨어져있음을 알 수 있다.
padding은 Content와 Border 사이의 여백을 나타낸는 영역이다. content 영역이 배경색이나 배경 이미지를 가질 때, 이 Padding 영역까지도 영향을 미친다. 즉, padding 영역도 content의 연장으로 볼 수 있다.
위에 line 명령어에서 margin 대신에 padding 명령어를 넣어서 확인해보면 영역은 넓어졌지만 content자체의 크기가 커져서 영역을 확장함을 알 수 있다.
2. margin과 padding을 활용한 원하는 공간 디자인
오늘배운 margin과 padding의 공간영역을 활용하여
해당 디자인을 만들어 보자.
먼저 header-nav2 이름을 가진 콘텐츠를 만들고 블록형태의 ul를 서용하여 li 리스트를 만들었다.
이제 박스를 합치고 디자인하기 위하여 CSS 사용해야하므로
stylessheet 를 사용하는 css파일을 링크.
* <= 모든값에 적용함 * padding,margin을 사용하여 콘텐츠의 가장자리를 왼쪽으로 가지런히 정렬 깔끔하고 원하는 위치에 컨텐츠를 작성하기 위하여 사용
위의 HTML 코딩을 살펴보면 크게 <DIV header-nav2> 안에 <ul> 안에 <li>가 있는것을 알수있다 이를 CSS로 짜보면
가장 가장자리 div 부터 만들어보면 밑에 보이는 투명한 선을 만들기위하여 border 을 사용하였으나 투명한 선이 사용된건 밑에 부분이므로 왼쪽과 오른쪽은 사용하지 않는다 라는 속성을 부여하였다.
Ul 코딩을 살펴보면 처음에 padding 과 margin 값을 0을 주었기 때문에 컨텐츠 글씨가 왼쪽 구석에 몰려있을 것 이다.
이를 중앙에 배치하고 가지런히 정렬하기위해 padding과 margin을 사용하여 중심을 잡았다.
padding을 위아레 만 사용하여 글씨를 상단에서 떨어트려놓음
max-width을 사용하여 글씨가 너무 벌어지지않게 모음
margin 을 좌우만 오토로 설정하여 글씨간에 간격을 맞춤
li의 속성.
블럭형태인 div와 ul,li를 사용하였기에 inline-block; 속성을 주어 글씨를 일렬로 배치한후 글씨의 간격을 맟추기 위하여 width값을 100%6 하여 대략 16%를 사용함
cursor:pointer 은 마우스를 가져다 대면 상호작용을 하는속성
마지막으로 first-child2의 빨간색을 주기위하여 사용했으나
후자의 가상요소 선택자를 사용하여 빨간색을 주는 방법도 있다.
