멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 10 (타이포그래피, 박스 모델, 리스트 스타일링, 배경 스타일링)

 

목차

• 타이포그래피
• 박스 모델
• 리스트 스타일링
• 배경 스타일링
• 오늘 하루를 돌아보며

 

 

타이포그래피

fonts는 글꼴, 글자 크기, 굵기 등 다양한 스타일링을 할 수 있는 속성이다.

더 자세한 정보 보러가기

CSS Fonts Module Level 3

 

 

font-family

font-family 속성은 텍스트의 폰트를 지정한다.

font-name은 OS에서 사용하는 폰트 이름으로, 폰트 파일 이름과는 다르다.

예) 윈도우의 기본 폰트 이름 = 맑은고딕, 파일 이름 = malgun.ttf

generic-family는 범용 폰트 그룹으로, serif, sans-serif, cursice, fantasy, monospace가 있다.

 

 

font-size

font-size 속성은 폰트의 크기를 지정하는 속성이다. 절대 크기(small, medium, large)와 상대 크기(smaller, larger)를 사용할 수도 있고, px, em, rem, vw 같은 단위를 사용할 수도 있다.

• em 단위(엠 단위)는 현재 글자 크기에 비례해서 계산한다. 따로 지정된 agent style(기본 스타일)의 글자 크기가 없다면 상속 받은 크기에 비례한다. 어디에서도 유연하게 적응하는 반응형으로 코드를 짜야 한다면 em 단위를 사용할 수 있다. 하지만 상속에 대한 이해가 어렵다면 사용하기 까다로울 수 있다.
• rem 단위(렘 단위)는 root(html)를 기준으로 계산한다. em 단위보다 유연성은 떨어지지만 사용하기 편하다.
• vw 단위는 뷰포트를 기준으로 계산한다. 뷰포트를 늘리면 폰트도 같이 늘어난다.

 

font-weight

font-weight 속성은 폰트의 굵기를 지정하는 속성이다. 100~900 사이의 굵기 단계를 표시하는 수치값이나 normal(400), bold(700) 등의 키워드로 선언할 수 있다.

• 100~400: 가는 굵기
• 500~600: 중간 굵기
• 700~900: 굵은 굵기

 

 

font-style

font-style 속성은 폰트의 형태를 지정하는 속성으로, 폰트의 기본 형태로 표시하는 normal 값과 이탤릭체 또는 기울임꼴로 표시하는 italic과 oblique가 있다. oblique 속성 값은 원래 폰트의 변경 없이 글꼴을 기울여 표시한다.

 

 

line-height

line-height 속성은 라인 박스의 높이를 설정한다.  일반적으로 줄 사이의 거리를 설정하며 블록 레벨 요소에서 요소 내 라인 상자의 최소 높이를 지정한다. line-height의 속성 값은 em이나 px보다 숫자 단위로 쓰는 것을 추천한다.

 

박스 모델

CSS 박스 모델은 기본적으로 모든 HTML 요소를 포함하는 상자다. 이러한 상자는 padding, border, margin 및 실제 콘텐츠로 구성되어 있다.

CSS 박스 모델

 

 

display

display 속성은 HTML 요소의 표현 방식을 지정한다. HTML 요소는 각각 기본으로 지정된 display 기본 값이 존재하며, 그 값도 매우 다양하다.

display 속성 값

• inline: 자신의 전후로 줄바꿈을 만들지 않으며, 포함하는 요소가 너비에 의해 자동 줄바꿈된다. 요소의 폭은 콘텐츠에 따라 결정되며, width 속성으로 요소의 너비를 직접 지정할 수 없다. 예) a 요소, span 요소
• block: 기본적으로 부모 요소의 너비 전체를 채우며, 요소 박스 전후로 줄바꿈이 생긴다. height와 width를 설정할 수 있다. 예) p 요소, div 요소
• inline-block: inline과 같이 요소 전후로 줄바꿈이 생기지는 않지만, block 요소처럼 width, height, 속성으로 요소의 크기를 직접 지정할 수 있다.
• float-root: 새롭게 BFC(Block Formatting Context: 독립적인 컨텍스트/독립 서식)를 생성한다. float 속성으로 생기는 레이아웃 문제를 해결할 수 있다.

뷰포트가 넓을 때는 inline과 inline-box가 같아 보일 수 있지만, 뷰포트(바디 사이즈)가 작아지면 inline은 상자를 쪼개면서 줄바꿈이 일어나지만, inline-box는 상자가 쪼개지지 않고, 통으로 줄바꿈이 일어난다.

 

border

border는 요소 박스에 테두리를 지정하는 속성이다. 단축된 속성을 사용할 때는 속성 값을 공백으로 구분한다. border는 border-width(선 굵기), border-style(선 종류), border-color(선 색깔)를 모두 지정해야 테두리가 생긴다.

• border: 단축 속성(Shorthand Porperty). 순서 상관 없이 속성 값을 공백으로 나눠서 width, style, color를 모두 지정한다.
• border-width: 위에서부터 시계 방향으로 각각 다르게 지정할 수 있다.
• border-[방향]으로 박스의 특정 위치만 지정할 수 있다. 방향은 top(위), bottom(아래), left(왼), right(오)로 선택할 수 있다. 논리 단위(block-start(위), inline-start(왼), block-end(아래), inline-end(오))를 사용할 수도 있다. 오른쪽에서 왼쪽으로 읽는 언어도 있기 때문에 요즘은 논리 단위를 더 많이 쓴다.

 

 

padding

padding은 content 영역과 border 사이의 안쪽 여백을 지정하는 속성이다. 속성 값은 1~4개까지 입력할 수 있으며, 입력 값의 개수에 따라 적용되는 방향이 다르다.

• 1개: 4방향 모두 동일하게 적용
• 2개: 위아래와 양옆을 각각 동일하게 적용
• 3개: 순서대로 각각 위, 양옆, 아래에 적용
• 4개: 위에서부터 시계방향(위>오>아래>왼)으로 적용

inline 상자는 하단 기준 선에 맞춰서 padding이 생겨서 다른 영역을 침범하기도 한다. 그럴 때는 display: inline-block;을 적용한다.

 

margin

margin 속성은 border를 기준으로 다른 요소와의 바깥쪽 여백을 지정하는 속성으로 padding 속성과 사용 방법이 동일하다.

margin의 특성 중에 상하로 인접한 박스의 display가 "block"인 경우, 마진 겹침(Margin Collapsing) 현상이 발생한다. margin은 큰 쪽으로 겹친다. 위아래 10px과 20px을 갖고 있다면 더 적은 10px은 겹쳐서 20px로 적용된다.

마진 겹침 현상

 

 

overflow

overflow는 콘텐츠가 요소의 콘텐츠 영역을 벗어나는 경우의 처리 방법을 지정하는 속성이다.

• visible(기본값) 속성 값은 오버 플로우된 콘텐츠를 그대로 표시한다. 이때 오버 플로우된 콘텐츠의 영역은 요소의 크기에 반영되지 않는다.
• hidden 속성 값은 넘치는 영역을 숨긴다.
• scroll 속성 값은 모든 영역(오른쪽 & 아래)에 스크롤바를 표시한다.
• auto 속성 값은 안 보이는 영역에만 스크롤바를 표시한다.

 

 

box-sizing

박스의 실제 사이즈 = content(width, height) + padding + border

박스의 사이즈를 padding과 border를 모두 합한 사이즈로 정하고 싶다면 box-sizing: border-box;를 정의하면 border까지 모두 포함한 사이즈로 width, height가 적용된다.

 

CSS reset

CSS reset을 하면 요소들의 기본 스타일을 초기화해서 이후의 스타일링을 편하게 할 수 있다. 다양한 CSS reset 파일들이 존재한다.

• index.css = 여백을 모두 제거하는 코드가 들어있다.
• mini-reset.css = 여백도 제거하고 폰트도 다 기본으로(16px) 초기화한다.
• normalize.css = css를 처리하는 방법이 브라우저마다 달라서 최대한 비슷하게 만들어준다.
• mordern-reset.css = 최소한의 reset만 한다.

 

CSS Nesting

CSS 선언문은 nesting(중첩)할 수 있다. 예를 들어, class1을 선언할 때 {} 안에 class2를 정의하면 class1 안에 있는 class2의 스타일을 정의할 수 있다. 여러 단계 중첩할 수 있지만, 3단계를 넘어가면 유지보수가 어려워진다.

/* CSS 중첩
.class1 .class2 {} */
.class1 {

  .class2{} 
}

 

리스트 스타일링

list-style-type

list-style-type은 목록 항목 요소의 마커를 설정하는 속성이다.

• ul: disc(●), circle(○), none, 등
• ol: decimal(1. 2. 3.), upper-roman(I. II. III.), 등

 

 

list-style-position

list-style-position은 목록 항목 마커와 텍스트 사이의 위치를 설정할 수 있는 속성으로 기본값은 outside다. inside로 설정하면 마커가 텍스트 안으로 들어온다.

 

 

list-style-image

list-style-image는 목록 항목 마커로 사용할 이미지를 설정할 수 있다. 마커로 그래디언트 효과를 적용할 수도 있다. type 대신 사용하기 때문에 type과 image는 공존할 수 없다. 하지만 같이 정의했어도 type보다 image가 우선순위가 높기 때문에 image가 적용된다. image를 로드할 수 없을 때는 type 속성이 적용된다(fallback=적용되지 않는 경우에 대체할 수 있는 것들을 단계별로 추가하는 작업).

 

 

list-style

list-style 속성은 list-style-type, list-style-image, list-style-position 속성 값을 한 번에 설정할 수 있는 단축 속성이다. 값은 공백으로 구분한다.

 

배경 스타일링

배경 색깔을 지정하거나 배경에 이미지를 삽입할 수 있다. , 기호를 사용하여 여러 이미지를 한 번에 지정할 수도 있다.

• background-color: 배경 색상을 지정한다. 색상 값을 주는 방법은 color(폰트 색상 정의하는 속성)와 동일하다.
• background-image: 요소 박스에 배경 이미지를 지정한다. 배경 이미지를 , 기호로 구분하여 하나의 요소에 다중 배경 이미지를 지정할 수도 있다. 여러 이미지를 지정하면 먼저 지정한 이미지가 위쪽에 위치한다.
• background-repeat: 배경 이미지의 반복 여부를 지정한다. repeat-x는 x 축으로만 반복, repeat-y는 y축으로만 반복, no-repeat는 반복하지 않는다.
• background-attachment: 배경 이미지를 고정시킬지 여부를 지정한다. fixed 값을 주면 배경이 고정되고 콘텐츠만 스크롤된다.
• background-clip: 배경 속성이 적용되는 영역을 지정한다. border-box(기본 값, border 영역), content-box(콘텐츠 영역), padding-box(padding 영역) 속성 값을 지정하면 해당 영역에만 배경 이미지를 표시한다.
• background-origin: 배경 이미지의 시작점을 지정한다. margin, border, padding, content-box 중 하나를 지정할 수 있다.
• background-size: 배경 이미지의 크기를 지정한다. 길이 단위, 백분율로 직접 크기를 지정하거나, contain(비율 유지하고 요소 박스 영역에 맞춰서 늘이기), cover(비율 무시하고 요소 박스 채우기) 속성 값을 사용할 수 있다.
• background-position: 배경 이미지의 위치를 지정한다. 가로 방향 위치 값과 세로 방향 위치 값을 함께 지정하는데, 하나의 키워드만 지정할 경우 나머지 하나는 center로 인식한다. px과 같은 지정 값을 주면 이미지의 왼쪽 위 꼭지점을 기준으로 이동한다. 백분율(%) 값을 주면 박스 높이의 %와 이미지의 %가 일치하는 점을 기준으로 이동한다.
• background: 위에 있는 모든 속성을 일괄적으로 지정하는 단축 속성이다. 단, 사이즈는 앞에 / 기호를 붙이고 지정한다.

 

git commit --amend와 git tag

git commit --amend

commit 메시지를 수정할 수 있는 파일이 열린다. 단, 마지막 커밋만 수정할 수 있다.

 

git tag

git tag 명령어는 Git 저장소에서 특정 시점에 특정 커밋에 대해 마크를 지정하는 데 사용한다. 소프트웨어의 버전 관리를 위해 사용할 수 있다.

버전 번호를 붙이는 규칙: 시맨틱 규칙/시맨틱 버전

v(major release).(minor release).(patch)

• major: 큰 변화를 줬을 때. 이전 버전과 호환이 안 될 수도 있을 정도의 변화
• minor: 작은 변화를 줬을 때. 기존에 있던 데에서 함수 하나 바꿨다던가 할 때
• patch: 버그 잡기

-a = annotated tag

git tag -a v1.0.0 -m "첫 번째 릴리즈 버전" HEAD~2

 

 

 

오늘 하루를 돌아보며

배운 건 많은데 아직 2주 밖에 안 됐다는 게 신기하기도 하고, 시간이 별로 안 지난 것 같은데 벌써 2주 차가 끝났다는 게 신기하기도 하다. 배운 것들이 익숙해지도록 많이 사용하고 자꾸 연습해야겠다. 이번 연휴를 이용해서 배웠던 내용도 다시 복습하고, 연습 문제도 만들어서 풀어봐야겠다. 블로그에 정리해 놓으니까 편하다. 원할 때 쉽게 찾아볼 수 있곘다. 마지막 쉬는 날에는 예습도 해야겠다.