Box Model의 정의
: 모든 HTML 요소는 어떤 직사각형 박스의 형태를 띄고 있음
이러한 박스 모델은 p태그 img와 같은 실제 내용,
내용과 테두리 사이의 여유공간(padding), 테두리(border), margin으로 정리할 수 있음
style에서 border를 이용해서 실제 내용 바깥에 테두리를 줄 수 있으며
padding으로 테두리와 내용 사이의 여유공간을 설정할 수 있다.
또한 width와 height로 내용이 담기는 box의 크기를 설정하여 화면에 보이는 크기를 조정할 수 있다. 이미지도 마찬가지이지만, 특히 p태그의 경우 글이 너무 옆으로 늘어져 보인다거나 할 수 있는데, width와 height로 이를 조정할 수 있다. height의 경우 max_height를 주어서 내용이 해당 박스 밖으로 나가지 않게 조정할수도 있다.
하지만 이런식으로 max_height를 주면 p태그의 경우 안에 내용이 많아 내용이 밖으로 흘러나오는 overflow현상이 발생하게 될 수 있는데, 이 경우 overflow에 대해서 visible, hidden, scroll, auto 이렇게 네가지로 각각 overflow 허용(다른 box와 겹칠수있음), 넘친 내용을 숨김, scorll바를 이용해서 아래까지 내용을 볼 수 있게함, visible과 scroll을 합쳐서 이용함을 뜻한다.
margin의 경우 기본적으로 전체 화면에 대해서 가로는 전체 화면에 맞게, 세로는 값을 가지고 있는데, 이를 margin을 상하좌우로 줘서 중앙정렬을 하거나, 우측 정렬을 하는 등의 작업을 수행할 수 있다. padding 또한 마찬가지이나 padding은 전체 화면이 아닌 border에 대해 적용된다.
border를 작성하는 방법은 두께, 종류, 색 순으로 설정하는데 left, right, top, bottom을 이용하여 모두 다른 테두리를 적용할 수도 있고 solid, dotted, dashed를 이용해서 서로 다른 테두리를 만들 수 있다. 또한 border-radius를 이용해서 테두리를 둥글게 만들거나, background-color를 이용해서 테두리 안을 채울 수 있다.
그리고 box의 테두리말고 shadow도 적용할 수 있는데 box-shadow를 사용하면
기본적으로 오른쪽과 아래에 그림자가 만들어지고 음수 값을 해당 위치에 쓰면 각각 왼쪽, 그리고 위쪽에 그림자가 생긴다 크기 뒤에 색을 쓰면 색도 변경할 수 있다.
이번주에 만든 로그인창!
