36일차 - [CSS] box model, font
안녕하세요. pitang입니다.
오늘은 CSS 속성의 box model과 font에 대해 알아보도록 하겠습니다.
알아보기 전, emmet 조금 알아보고 넘어가도록 하겠습니다.
emmet
emmet은 34일차-기초(2,block-inline) 게시물에서 조금 알아봤지만 더 자세하게 알아보자.
^ 은 부모 요소로 이동할 수 있다. ^의 개수에 따라 개수만큼 위로 올라간다.
{} 는 컨텐트를,
[] 으로는 attribute를 작성할 수 있다.
class 선택자를 만들고 싶을때는 . 을,
id 선택자를 만들 때는 # 을,
1, 2, 3, 4... 순으로 numbering을 매길 때는 $을
형제 요소를 만들 때는 +를,
태그명을 생략하게 되면 무조건적으로 div로 만들게 된다.
boxmodel
box model은 설계 및 레이아웃에 대해 말할 때 사용한다.
기본적으로 모든 HTML 요소를 감싸는 상자이다. 여백, 테두리, 패딩 및 실제 내용으로 구성된다.
Content - 텍스트 및 이미지가 나타나는 상자의 내용이다.
Padding - 내용 주위의 영역을 지우고, 패딩이 투명하다.
Border - 패딩 및 내용 주위를 도는 테두리이다.
Margin - 경계 밖의 영역을 지운다. 여백이 투명하다.
예제를 보며, 하나하나 정리해보도록 하자.
ex1)
border style은 테두리 스타일이다.
ex2)
border width는 테두리 너비이다.
ex3)
border color는 테두리 색상이다.
ex4)
border는 width, style, color를 한 번에 설정할 수 있다.
ex5)
margin은 테두리 외부에 요소 주위 공간을 만드는 데 사용된다.
ex6)
pedding은 정의된 테두리 내부에 요소의 내용 주위에 공간을 생성하는 데 사용된다.
content와 border 사이이다.
ex7)
height는 높이, width는 너비를 설정한다.
높이 및 너비 특성에는 pedding, borders 또는 margin이 포함되지 않는다.
요소의 pedding, borders 그리고 margin 내부 영역의 높이/너비를 설정한다.
ex8)
font
font는 웹 사이트에 맞는 글꼴을 선택하는 것이 중요하다.
구글 폰트를 사용하는 방법은 다음과 같다.
1. 구글 폰트를 검색하면 아래의 사이트가 나온다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
2. 카테고리 별로도 검색할 수 있고 검색해서 원하는 폰트를 찾은 뒤 Select this style을 클릭한다.
3. link를 전부 복사해 head 밑에 붙여 넣어주고, CSS rules to specify families를 복사해 style에 넣어주면 사용 가능하다.
ex1)
ex2)
font-style은 대부분 기울임 꼴 텍스트를 지정하는 데 사용된다.
normal - 텍스트가 정상적으로 표시된다.
italic - 텍스트가 기울임 꼴로 표시된다.
oblique - 텍스트가 "기울어짐"이다. (보기에 italic과 유사하지만 다르다.)
ex3)
font-size는 텍스트 크기를 설정한다.
글꼴 크기 값은 절대 크기 또는 상대 크기일 수 있다.
절대 크기는 출력의 물리적 크기를 알 때 유용하고, 상대 크기는 주변 요소를 기준으로 크기를 설정한다.
상대크기는 절대 크기와 다르게 브라우저에서 텍스트 크기를 변경할 수 있다.
ex4)
ex5)
감사합니다.
*m1 맥북을 사용 중입니다.*