< div> : 공간을 나누는 태그
block속성의 대표적인 태그로 , 투명한 빈 박스 태그이다.
css box model
- 박스의 넓이와 높이가 생겼을 때 컨텐츠를 배치하고 레이아웃을 설정할때 css box model을 사용한다.
- css box model에서는 컨텐츠를 여유롭게 보여주는 padding영역과 border(테두리)영역과 컨텐츠와 컨텐츠 사이에 여백을 넣어주는 margine영역이 있다.
padding: 안쪽 여백
컨텐츠의 바깥부분에 생기는 여백으로 박스의 안쪽으로 빈 공간을 넣어서 컨텐츠를 여유롭게 보여주는 역할을 한다.
[기본형]
paddig: 숫자px; 전체적용
padding-left;
padding-right;
padding-top;
padding-bottom;
[기본형]
padding: 값1 값2 값3 값4;
=> top right bottom left
padding: 값1 값2 ;
=> top/bottom left/right margin: 컨텐츠 사이 여백
컨텐츠와 컨텐츠 사이를 간격을 벌리고 싶을때 사용한다.
[기본형]
1.
-margin : 값px 또는 %;
2.값을 2개로 나눠 쓸 경우 앞의 자리는 상하 여백을, 뒤의 자리는 좌우 여백을 뜻한다.
-margin : 값1, 값2
3. top부터 시작하여 시계방향으로 적용된다.
-margin : 값1, 값2, 값3, 값4
4.
-margin-top;
-margin-left;
-margin-bottom;
-margin-right;
테두리 속성
테두리 속성은 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-colour)를 테두리 속성이라고 하며 이 중 하나라도 없으면 브라우저에 테두리가 나타나지 않는다.
테투리 스타일
1. none★: 테두리가 나타나지 않는다. 기본값.
2. hidden: 테두리를 나타내지 않는다. border-collapse가 collapse로 설정되어 있을 경우 다른 테두리도 표시하지 않는다.
3. dashed△: 테두리를 직선형태의 점선으로 표시한다.
4. dotted:△ 테두리를 도트 형태의 점선으로 표시한다.
5. double: 이중 실선으로 테두리를 나타낸다.
6. groove: 테두리를 입체적으로 보여준다.
7. inset: 테두리를 안쪽으로 들어간 액자처럼 보여준다.(입체)
8. outset: inset의 반대 모양으로 나타낸다.
9. ridge: 테두리를 창에서 튀어나오는 것처럼 보여준다. groove의 반대모양.
10. solid★: 테두리를 실선으로 나타낸다.
[기본형]
1.border : 두께 스타일 색상 ;
-> 박스의 사방에 동일한 테두리를 적용한다. 순서가 틀리면 오류!
2.border-top: 두께 스타일 색상;
3.border-bottom: 두께 스타일 색상;
4.border-left: 두께 스타일 색상;
5.border-right: 두께 스타일 색상;
border-radius : 박스를 둥글게 만드는 속성
[기본형]
border-radius: 숫자px 또는% ;
% 정원이나 타원만들고 싶을때 주로 사용
[기본형]
border-radius : 값1 값2 값3 값4;
top /right/ bottom/ left
[기본형]
border-radius : 값1 값2
border-radius의 값을 두개로 나눠 적을 경우 앞에 있는 자리는 왼쪽상단-오른쪽하단의 자리이고 두번째 자리는 오른쪽 상단-왼쪽하단의 자리로, 대각선으로 둥글기가 적용된다.
