목표로 하는 디자인!

박스모델에 대해 알아보기.

  h1{
    border-width:5px;
    border-color:red;
    border-style:solid;
  }

경계의 넓이는 5픽셀 색은 빨강,스타일은 솔리드.

중요한 점 h1같은 제목 태그는 화면 전체를 사용함--- 박스를 생성하면 글자 만큼만 박스가 나오는게 아니라

이런식으로 화면 전체에 박스가 생성된다.
block level element

그러나 a와 같은 태그는 자기 자신의 크기만을 가진다.
inline element

그치만 화면전체를 쓰는 블록 속성도 자기자신만 속성을 가지게 할수 있다.
display:inline;으로 인라인으로 바꾸면.

마찬가지로 인라인도 블록으로 변경가능.
display:block;

*태그자체를 안보이게 하고 싶으면.
display: none;

h1과 a태그는 지금 중복된 효과를 가짐, 이런 중복을 없애려면?
h1, a{
border-width:5px;
border-color:red;
border-style:solid;
이런식으로 쉼표 처리를 한다.

지금 효과에서 border가 중복되므로 이를 해결.
border:5px solid red;

테두리와 글자간의 간격을 주고 싶으면?
padding: 20px;
테두리간의 간격.
margin:0;

화면 전체를 쓰되 그 정도를 조정하고 싶다면??
width:100px;

웹페이지 우클릭을 해서 검사를 들어가면 개발자 도구로 들어갈 수 있다.

1. 화면 전체를 쓰는 태그(제목 h1등), 부분만을 쓰는 태그(a)등이 있다.
2. 중복을 없애는 방법이 있다.
3. 웹페이지 우클릭 검사로 개발자도구를 볼수 있다!