css 박스 모델

<h1> tag와 <a> tag의 차이점은 무엇일까?

 

<h1> tag는 화면 전체를 쓰고 <a> tag는 자기 크기만큼만 쓴다는 것이다.

그리고 이를 html에 표시할 때

화면 전체라는 의미로 block level element

자기 크기만큼의 의미 inline element 라고 한다.

 

이를 html로 표시하자면

 

<style>

h1{ border-width:5px;

    border-color:red;

    border-style:solid;

    display:inline;}

a { border-width:5px;

    border-color:red;

    border-style:solid;

    display:iblock;}

</style>

 

이런식으로 표시할 수 있다.

하지만 보시다시피 중복이 너무 많고 지저분함으로 정리를 하자면

<style>

h1, a {border:5px solid red;}

</style>

 

 css 내용이 중복될 경우 , 콤마를 활용해서 옆에 같이 넣어주고 border라는 말도 겹치므로 한 번만 넣어준다.

 

만약 box의여백을 주고 싶다면 콘텐츠의 테두리 사이 간격을 넣고 싶다면?

pedding라는 코딩을 넣어 원하는 간격만큼 넣어주면 된다

예를 들면 pedding:20px

 

만약 두 박스 모델 사이에 간격을 넣고 싶다면

margin이라는 코딩을 넣어

margin:20px라고 해주면 된다.