[모각코][210707] 공지사항 게시판 만들기

공부내용 정리

텍스트(폰트)와 관련된 프로퍼티

1. font-weight : 폰트 굵기를 지정할 때 사용
   • bold
   • 100 ~ 900
2. text-align : 텍스트 좌, 우, 중앙 정렬
   • left / center /right

박스모델

1. content : 이미지나 텍스트 같이 우리가 태그 사이에 담은 실제 내용을 담고 있는 부분

   • width와 height 사용

2. border : content(내용)을 감싸고 있는 테두리

   • border-style
   • border-width
   • border-color

3. padding : Content(내용)와 Border(경계선) 사이의 여백

   • Border(경계선) 내부의 여백
   • 네 방향 따로 적용 가능
   • 배경색을 지정하면 Padding까지 포함됨

4. margin : Border(경계선) 밖의 여백
   - Border(경계선) 외부의 여백
   - 네 방향 따로 적용 가능
   - 위 아래 다른 요소에서 마진을 적용하면 두 마진이 함께 공존하지 않음. 마진 상쇄(Margin Collapse)에 의해서 상하 요소 사이의 마진은 서로 상쇄가 됨.
   기준은 큰 쪽 마진.

5. box-sizing : 박스 전체 크기의 기준을 정하는 프로퍼티

   • content-box : 기본값
   • border-box : border의 두께까지 포함된 크기를 전체 크기로 지정

결과