2024.03.13 16일차 CSS font, text, background, float

글꼴 font

font-size

글자의 높이 = px

font-weight

값	의미
normal	기본 글자 두께, 400 (기본값)
bold	두꺼운 글자, 700
bolder	부모 요소보다 더 두껍게
lighter	부모 요소보다 더 얇게
숫자	100 ~ 900 (폰트 지원 X면 적용X)

* 100 400 700 900 단위로 bolder, lighter 적용

font-style

font-weigth 처럼 italic, oblique를 폰트에서 지원하지 않으면 적용 안됨

값	의미
normal	스타일 없음 (기본값)
italic	이탤릭체
oblique	기울어진 글자

font-family

font-family: 글꼴후보1, 글꼴후보2, 글꼴후보n, 글꼴계열;
font-family: Arial, “Open sans”, “바탕”, dotum, sans-serif;

글꼴후보 중 사용자가 갖고 있는 폰트가 있다면 왼쪽부터 사용
만약 후보1 없다면 Arial 다운받으면서 글꼴 후보2로 일단 보여줌
없다면 계속 다음 후보로 가다가 마지막에 글꼴계열 중 선택 (글꼴계열 필수)
특수문자 없는 영어는 “ ” 안 써도 됨 (가능하면 “” 사용)

값	의미
글꼴명	글꼴 후보 목록을 지정
serif sans-serif cursive 등	글꼴 계열 이름을 지정 (필수 입력)

https://fonts.google.com/

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

line-height

줄 높이 (행간은 아님)
1.2 ~ 1.5 권장

값	의미
normal	브라우저의 기본 정의 사용 (1~1.4)
숫자	요소 자체 글꼴 크기의 배수로 지정
단위	px, em 등 단위로 지정
%	요소 자체 글꼴 크기의 비율로 지정

** font 단축속성이 있지만 필수 속성 때문에 바꾸지 않을 부분도 작성해야 함

문자 text

color

값	의미
색상이름	브라우저에서 제공하는 색상의 이름
16진수 색상코드	16진수 색상코드로 지정
RGB	빛의 삼원색
RGBA	빛의 삼원색, 알파값으로 투명도 0 ~ 1 조절

color: rgb(0, 255, 200);
color: rgba(36, 223, 107, 0.7);

* 색상이름을 사용하면 브라우저 마다 사용자가 보는 색상이 다르므로 사용 지양

ex) white, blue ...

text-align

요소의 너비에 영향 받음
width 70% , margin auto 해야 text-align center 적용

값	의미
left	왼쪽 정렬(기본값)
right	오른쪽 정렬
center	중앙 정렬
justify	양쪽 정렬(2줄 이상일 경우 작동)

text-decoration

underline처럼 text-decoration 색은 color 속성을 따라감
text-decoration-line을 설정 후 text-decoration-color 를 사용하면 색 지정 가능
text-decoration에도 하위 속성이 다양하니 필요에 따라 검색 후 사용

* border-bottom 색상 등 다른 요소로도 표현 가능함

값	의미
none	선 없음 (기본값)
underline	밑줄을 지정
overline	윗줄을 지정
line-through	문자를 가로지르는 선(취소선)

text-indent

들여쓰기
다른 용도로도 많이 씀
배경 사진을 넣고 싶을 때 ( background: url(#) no-repeat center/cover )
img의 alter 처럼 대체텍스트 속성이 없으니까 글자를 직접 적고
text-indent: -999%; 텍스트를 보이지 않게 하는 방법이 있음

letter-spacing, word-spacing

letter-spacing 글자 사이의 간격
word-spacing 단어 사이의 간격
px, em, % 등 단위로 지정

배경 background

background-color

배경 색상
transparent : 투명색 (기본값)

background-image

none : 이미지 없음(기본값)
url(”경로”)

background-image: url('../../img/sky.jpg');

** 요소 너비가 550px → 사진 800px 인 경우

→ 왼쪽 상단을 기준으로 맞추고 남는 건 안 보임

→ 실무에선 미세조정을 위해 배경이미지의 사이즈를 조정함

background-repeat

background-repeat: no-repeat;
repeat(기본값)
repeat 배경이미지를 수직, 수평으로 반복(기본값)

값	의미
repeat	배경이미지를 수직, 수평으로 반복 (기본값)
repeat-x	배경이미지를 수평으로 반복
repeat-y	배경이미지를 수직으로 반복
no-repeat	반복 없음

background-position

background-position: left top;
background-position: left bottom;
background-position: 300px center;

% : 왼쪽 상단 모서리 0% 0% (기본값), 오른쪽 하단 모서리 100% 100%
방향 top, bottom, left, right, center
px, % 단위로 미세조정 가능

background-size

cover 속성을 많이 사용
auto: 원본 이미지 크기로 표시 (기본값)
background-size: 100px 100px;
이렇게 크기를 지정했을 때 이미지 크기와 비율이 맞지 않다면 화질이 뭉개지고 바둑판 방식으로 반복함

    .box {
      /* 사진 액자 400 X 300 -> 4:3 */
      width: 400px;
      height: 300px;
      border: 2px solid pink;
      margin: 50px auto;

      /* 사진 사이즈 600 X 385 -> 3:2  */
      /* 액자 가로   400 X 260 */
      /* 액자 세로   450 X 300 */
      background-image: url('../../img/tulip.jpg');
      background-repeat: no-repeat;
      /* background-size: 470px; */
      /* background-size: contain; 가로 */
      background-size: cover; /* 세로 */
      background-position: -10px 0;
    }

값	의미
단위	px, em, % 등 단위로 지정 width, height 형태로 입력 (200px 150px) width만 입력하면 비율에 맞게 지정
cover	배경 이미지의 크기 비율을 유지하며, 요소의 더 넓은 너비에 맞춰짐 이미지가 잘릴 수 있음
contain	배경 이미지의 크기 비율을 유지하며, 요소의 더 짧은 너비에 맞춰짐 이미지가 잘리지 않음, 다만 빈 공간이 보일 수 있음

background-attachment

배경 이미지를 뷰포트 내에서 고정할지, 아니면 자신의 컨테이닝 블록과 함께 스크롤할지 지정
요소가 스크롤될 때 배경 이미지의 스크롤 여부 설정

값	의미
scroll	배경 이미지가 요소를 따라서 같이 스크롤 됨 (기본값)
fixed	배경 이미지가 뷰포트에 고정되어, 요소와 같이 스크롤되지 않음
local	요소 내 스크롤 시 배경 이미지가 같이 스크롤 됨

    body {
      height: 2000px;
    }
    .box {
      width: 90%;
      height: 700px;
      margin: 200px auto;
      background: url('../../img/sky.jpg')
      no-repeat center/cover;
      background-attachment: fixed;
    }

아래 스타벅스 홈페이지를 보면
짙은 회색 배경의 원두와 머그잔 이미지는 스크롤 해도 고정되어 있는 걸 볼 수 있음

이런 경우가 fixed

Starbucks

background - 단축 속성

나열 순서는 상관 없음
단, 위치 크기 나열 시 주의! '/' 사용해서 구분
앞 위치 position / 뒤 크기 size
블록 요소 태그에 백그라운드 속성 적용 가능

      /* bg 단축 속성 예시 */
      background: no-repeat red 
        url('../../img/sky.jpg')
        100px 50px / 200px 70px
      ;
      
      /* bg 단축 속성 position, size */
      left center / 200px 70px

float

float - 박스 수평 정렬하기

값	의미
none	요소 float 없음 (기본값)
left	왼쪽으로 float
right	오른쪽으로 float

좌측 display: inline-block → 마진 없어도 기본 마진 있음 / 우측 float: right

clear - 박스 수평 정렬 해제하기

1행에 3열 레이아웃 : 3n + 1

    .box:nth-child(3n + 1)
    {
      clear: both;  // float 속성에 따라 결정되기 때문에 both로 설정
    }

중첩 레이아웃에서 float로 인한 부모요소 높이값 상실 문제

float 사용 중 중첩 시 부모요소 높이값이 상실되는 문제 발생
clear 로 float 속성을 해제하려고 했으나 대상이 없음

** 해결 방법

빈 형제 요소를 추가하여 clear 속성 사용 → 시맨틱 요소 방법에서는 옳지 못하다, 사용X
부모 요소에 overflow:hidden; 적용 → 정석X, 사용X
부모요소에 가상 클래스를 추가하여 해제 → 권장
부모요소::after → content: ‘’; display: block;

따라서 float 사용 시 항상 해제 전용 클래스를 생성

ex ) .clearfix::after { 해제 코드 } , 필요한 곳의 부모요소에 클래스 추가

    .clearfix::after {   // 해제 전용 클래스 생성
      clear: both;
      content: '';
      display: block;
    }
    .container2 {
      border-color: blue;
    }
    .container3 {
      border-color: orange;
    }
    .box {
      width: 200px;
      height: 150px;
      border: 3px solid green;
      background: yellowgreen;
      border-radius: 20px;
      float: left;
    }
    
    
    // HTML
    <div class="ct container1 clearfix"> // 부모 요소에 clearfix 클래스 추가
    	<div class="box"></div>
    	<div class="box"></div>
    	<div class="box"></div>
    </div>

좌측 중첩 시 부모 요소(테두리) 높이값 상실 / 우측 해결방법 1 (빈 형제 요소 추가)

좌측 해결방법 2 (overflow: hidden) / 우측 해결방법 3 (부모 요소에 가상 클래스 추가)

수평레이아웃 마진 분배

margin: 10px 만으로는 위의 사진처럼 균일한 마진 분배가 이뤄지지 못하고

아래 사진처럼 첫 번째 박스의 오른쪽 마진과 두 번째 박스의 왼쪽 마진이 중복

전체 너비 100% 중에서 각 여백을 1% 균일 분배하고 싶다면

5% 가로 여백 : 첫 번째 요소의 왼쪽부터 마지막 요소의 오른쪽까지 여백이 5군데

1) .box의 margin-right: 1%

2) 첫번째 요소의 margin-left: 1%

95% 모든 박스의 너비

1) 박스는 4개이므로 95 / 4 = 23.75

2) 즉, .box의 width는 23.75%

    균일한 좌우 여백 5군데 -> 계산
    .box {
      width: 23.75%;  // 총 95%   95/4=23.75
      height: 100px;
      background: orange;
      border: 2px solid red;
      float: left;
      margin: 10px 0;
      margin-right: 1%;  // 마진 5% 중 4%
    }
    .box:first-child {
      margin-left: 1%; // 마진 5% 중 1%
    }

@import와 공통 CSS 파일

@import는 css 파일이 다른 css 파일을 불러오는 것
@import url('현재 파일 기준 common.css 상대경로')
common.css 파일에 매번 사용하는 css 작성 ( ex. reset css, box-sizing 등)
커스텀 css 파일에서 common.css 파일을 import
이제부터 HTML 문서에서 커스텀 css 파일만 링크하면 됨

// common.css 파일 생성
// 모든 css 파일에서 공통으로 사용하는 속성들 모음
// reset css 링크도 import
@import url('https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css');

// layout-prac2.css 파일 안에
@import url('../../common.css');

// HTML head 안에
<link rel="stylesheet" href="layout-prac2.css">

코딩 일지

2024.03.13 16일차 CSS font, text, background, float

글꼴 font

font-size

font-weight

font-style

font-family

line-height

문자 text

color

text-align

text-decoration

text-indent

letter-spacing, word-spacing

배경 background

background-color

background-image

background-repeat

background-position

background-size

background-attachment

background - 단축 속성

float

float - 박스 수평 정렬하기

clear - 박스 수평 정렬 해제하기

중첩 레이아웃에서 float로 인한 부모요소 높이값 상실 문제

수평레이아웃 마진 분배

@import와 공통 CSS 파일

티스토리툴바

2024.03.13 16일차 CSS font, text, background, float

글꼴 font

font-size

font-weight

font-style

font-family

line-height

문자 text

color

text-align

text-decoration

text-indent

letter-spacing, word-spacing

배경 background

background-color

background-image

background-repeat

background-position

background-size

background-attachment

background - 단축 속성

float

float - 박스 수평 정렬하기

clear - 박스 수평 정렬 해제하기

중첩 레이아웃에서 float로 인한 부모요소 높이값 상실 문제

수평레이아웃 마진 분배

@import와 공통 CSS 파일

관련글

티스토리툴바