CSS_Layout2

오늘은 Layout 2번째 BOX에 대해서 알아볼께요!

우선 기본적으로 p태그를 이용해서 한번 코딩 해보도록 할께요!

우선 아무의미가 없는 내용을 코딩해 보았습니다. 저건 lorem 이라고 치면 자동으로 쳐지는 아무 의미없는 문자 입니다.

우선 결과화면을 웹페이지로 보시게 되면 좀 답답한 감이 없지 않아 있게 느껴지실텐데요...

오늘 그 답답함을 해결해 보도록 하겠습니다!

박스는 이렇게 구성이 되어있다고해요!

p태그를 쓴것은 내용물(content)에 해당하는 것이구요, 나머지는 이제 설명하도록 하겠습니다.

먼저 패딩(padding)을 설명할게요.

패딩은 border와 content간의 간격을 의미합니다.

소스를 보시면 style태그 안에 p 셀렉트 안에 padding:10px; 라고 쓴거 보이시나요?

저 부분은 border와 content사이의 간격을 10px만큼 떨어뜨리는 것을 의미합니다.

그래서 보이시는 바와 같이 padding을 설정하기 전보다 설정한 후 웹페이지가 10px만큼 떨어져 있는거 보이시나요?

다음은 margin을 설명하도록 하겠습니다.

margin은 웹페이지와 border사이의 간격을 의미합니다.

margin값을 40px를 주자 웹페이지에서부터 border가 40px만큼 떨어진게 눈에 보이실 겁니다.

이렇게 깔끔하게 웹페이지를 정리를 할 수 있습니다.