- div 태그
block속성의 대표적인 예인 div태그는 공간을 나누는 역할을 한다. 투명한 빈 박스와 같은 상태라 레이아웃의 공간을 나눌 때 사용한다.
(ex. 제목과 본문을 하나로 묶기, 이미지 영역을 지정하기)
사진의 제일 가운데 파란부분을 컨텐츠영역이라고했을때,
컨텐츠 바로 바깥에 여백을 줘서 컨텐츠를 여유롭게 보여줄 수 있는 padding 이 있다.
padding 바깥쪽으로 테두리를 주면 그 부분이 border가 되고,
그 바깥쪽에 컨텐츠와 컨텐츠 사이의 공간(여백)을 margin이라고 한다.
컨텐츠영역에 backgruond를 지정하면 패딩과 보더는 background에 포함되지만, margin은 포함되지 않는다.
단 컨텐츠 영역이 줄어드는 것은 아니고, 컨텐츠영역의 넓이 + padding과 border의 크기 가 background의 넓이가 된다.
->css에서 작업할 때, padding과 border가 컨츠영역 안에 포함되게 하는 태그
: box-sizing: border-box
- padding
padding은 안쪽 여백으로, 컨텐츠의 바깥부분에 생기는 여백으로 박스의 안쪽에 빈 공간을 넣어 컨텐츠를 여유롭게 보여주는 역할을 한다.
(기본형)
style 태그 안에 선택자{} 를 연 후
padding: 값1 / 4곳 모두에 동일한 여백
padding: 값1 값2 값3 값4 (위쪽부터 시계방향)
padding: 값1 값2 (위아래 값1 / 왼오 값2)
단위 px, %
- margin
margin은 컨텐츠 사이의 여백으로, 기본형은 padding과 동일하다. 박스를 세로로 배치할때 사이에 생기는 margin은 서로 겹쳐서 나타나는데, 이를 마진중첩 이라고 한다.
- border
border란 컨텐츠 영역의 테두리로, 사진에 보이는 초록색 테두리를 의미한다. padding이 적용되어있으면 그 바깥쪽으로 적용된다.
border의 속성은 두께, 스타일, 색상 이 있는데
이 3가지중 하나라도 없으면, 브라우저에 테두리가 나타나지 않는다.
두께(border-width)
스타일(border-style_실선,점선 등)
색상(border-color)
자주 쓰이는 테두리 스타일
-none : 기본값. 테두리x
-solid : 실선 테두리
-dashed : 직선형태의 점선
-dotted : 도트형태의 점선
- border-radius
박스를 둥글게 만드는 속성으로, px이나 %의 단위로 모서리의 둥글기를 조절하는 태그이다.
기본형은 padding이나 margin이랑 비슷한데,
값을 2개만 적을 경우에는 대각선으로 적용된다는 차이가 있다.
(값1 - 왼쪽상단&오른쪽하단
값2 - 오른쪽상단&왼쪽하단)
정사각형에서 높이의 절반만큼 radius를 적용하면 정원이된다.
위의 네이버 검색창이나 흔히 생각하는 버튼처럼 둥근 모서리를 만들려면 꼭 px로 값을 지정해주어야하며,
%로 적용하게되면 찌그러진듯한 타원모양이 출력되게된다.
-전체 선택자 *
주로 css로 초기화작업을 할 때 사용되는데,
* 은 html 문서 전체를 의미하는 선택자이다.
따라서 head - style태그안에서 다음과 같이 사용된다.
* {
margin: 0;
padding: 0;
}
