[모던 웹] 3. CSS 기본 프로퍼티

24siefil·2022년 4월 2일
Box Modelbackgroundblockfontinline
0

JavaScript, HTML, CSS

목록 보기
3/11
post-thumbnail

1. CSS Box Model (박스 모델)

block 또는 inline 특성을 가지는 요소는 box 형태를 가지며, box 형태의 세부 사항을 수정할 수 있음

Box Model 프로퍼티

프로퍼티설명
contentwidth, height
padding프로퍼티 값은 패딩 영역의 두께를 의미, 기본색은 투명이므로, 요소에 적용된 배경의 컬러, 이미지가 패딩 영역에 적용
border프로퍼티 값으로 테두리 두께 지정 가능
margin프로퍼티로 마진 영역의 두께 지정 가능, 기본색은 투명이며, 배경색 지정 불가

1.1. 주요 프로퍼티

width/height 프로퍼티

  • box-sizing 프로퍼티는 디폴트로 content-box가 지정되어 있음
    • 이 경우 width/height는 content 영역의 너비와 높이가 됨
  • box-sizing 프로퍼티가 border-box로 지정하면, content + padding + border 영역의 너비와 높이가 됨 (margin은 제외)
  • width/height 포함, 모든 box model 관련 프로퍼티는 상속되지 않음

컨텐츠가 지정된 width/height를 넘어가는 경우, overflow 프로퍼티를 hidden으로 설정하면 넘친 컨텐츠를 감출 수 있음 (차지했던 영역도 삭제)

max-width/max-height 프로퍼티

요소 너비가 브라우저 너비보다 큰 경우 가로 스크롤바가 만들어진다. 이때 max-width를 사용하면 자동으로 요소 너비가 줄어든다.

margin/padding 프로퍼티

  • margin 또는 padding에 -top, -right, -bottom, -left를 붙여서 윗쪽, 오른쪽, 아랫쪽, 왼쪽 margin/padding을 각각 설정 가능
  • margin 또는 padding 프로퍼티에 윗쪽, 오른쪽, 아랫쪽, 왼쪽 (시계방향) 설정 값을 순서대로 작성해서 한번에 설정 가능 (단축 프로퍼티)
margin: 10px 20px 30px 40px

// 다음과 동일
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
margin: 10px 20px 30px

// 다음과 동일
margin-top: 10px;
margin-right: 20px; margin-left: 20px
margin-bottom: 30px;
margin: 10px 20px

// 다음과 동일
margin-top: 10px; margin-bottom: 10px;
margin-right: 20px; margin-left: 20px;
margin: 10px

// 다음과 동일
margin-top: 10px; margin-bottom: 10px; margin-right: 10px; margin-left: 10px;

block 특성을 가진 요소에 대한 중앙 정렬 (margin 이용)

width: 100px // 명시적으로 지정해야 함
margin-left: auto;
margin-right: auto;

// 다음과 동일
margin: 10px auto;

border 프로퍼티

border 단축 프로퍼티

border-width, border-style, border-color 순으로 한번에 세가지 프로퍼티를 설정

div {
	border: 4px solid orange;
}

1.2. box-sizing

width, hieght 대상 영역 설정

  • content-box: content 영역 (디폴트)
  • border-box: content + padding + border 영역

css 적용 시 모든 block 요소는 border-box로 설정하는 것이 일반적이다.

전체 요소에 box-sizing을 border-box로 설정하기 위해 다음과 같은 CSS 설정을 많이 사용한다.

*,
*::before,
*::after {
	box-sizing: border-box;
}

2. CSS background

해당 요소의 배경 이미지 또는 색상 설정

background-image 프로퍼티

요소에 배경 이미지를 설정

background-repeat 프로퍼티

배경 이미지가 요소 사이즈보다 작을 때, 반복해서 해당 사이즈를 채울 것인지를 설정

프로퍼티 값설명
repeat요소의 배경 영역을 채울 때까지 이미지 반복, 이미지가 넘치면 자름
space요소가 잘리지 않을 만큼만 이미지 반복, 처음과 마지막 반복 이미지는 요소의 양쪽 끝에 고정 후, 각 이미지 사이의 남은 여백을 고르게 분배, 이미지 크기가 요소 사이즈보다 큰 경우 이미지 잘림
round요소 사이즈가 늘어나면 반복해서 이미지를 채우고, 이미지가 잘리지 않도록 전체 반복 이미지 사이즈 재조정
no-repeat이미지를 반복하지 않음, 반복하지 않는 이미지의 위치는 background-position 프로퍼티로 설정

반복 세부 설정

한 개의 값으로 설정두개의 값으로 설정
repeat-x (가로로만 이미지 반복)repeat no-repeat
repeat-y (세로로만 이미지 반복)no-repeat repeat
repeat (가로/세로 모두 이미지 반복)repeat repeat
spacespace space
roundround round
no-repeatno-repeat no-repeat

background-size 프로퍼티

배경 이미지가 요소 사이즈보다 작을 때 반복해서 해당 사이즈를 채울 것인지를 설정 (backgroud-repeat 프로퍼티와 기능은 동일)

  • auto: 이미지 크기 유지 (기본값)

  • length: 값을 두개 넣으면 첫번째 값이 가로 크기, 두번째 값이 세로 크기, 값을 한개 넣으면 가로 크기로 설정되며, 이때 세로 크기는 원본 이미지의 가로 세로 비율에 맞게 자동 설정, px, % 등의 값으로 설정 가능

  • cover: 요소 사이즈를 다 채울 수 있게 이미즈를 확대 또는 축소, 가로 세로 비율 유지

  • contain: 요소 사이즈를 벗어나지 않는 최대 크기로 이미지를 확대 또는 축소, 가로 세로 비율 유지

  • 참고

복수 이미지 설정 시 background-size는 ,로 각 이미지 사이즈 설정 가능

background-attachment 프로퍼티

스크롤과 무관하게 배경 이미지 고정 설정

background-attachment: fixed;

background-position 프로퍼티

  • background-image는 디폴트로 좌측 상단에 이미지 위치

  • background-position으로 좌표(x, y)를 지정할 수 있음

  • 두 값으로 설정 가능, 한가지 값으로 설정하는 경우 나머지 값은 center

    • left top
    • left center
    • left bottom
    • right top
    • right center
    • right bottom
    • center top
    • center center
    • center bottom
    • x y: %, px, em 등으로 지정 가능

background-color 프로퍼티

CSS 색상 단위로 배경색 설정 가능

transparent: 투명 설정 (디폴트)

background 단축 프로퍼티

다음 순서로 다양한 background 프로퍼티 한번에 설정

background: color image repeat attachment position

보통 length: rem 사용하는것이 가장 안전


3. CSS blockinline

CSS block과 inline

모든 HTML 태그는 각 태그마다 디폴트로 block 또는 inline 특성을 가짐

해당 속성은 display 프로퍼티를 통해서 변경 가능

3.1. block 특성*

  • 항상 새로운 라인에 표시
  • 화면 전체 너비를 차지 (width: 100%, height: auto)
  • width, height, margin, padding 프로퍼티 설정 가능
  • block 요소 안에, inline 요소 포함 가능
  • 디폴트로 block 특성을 가지는 주요 HTML 태그
    • div
    • h1 ~ h6
    • p, ol, ul, li
    • hr, table, form

3.2. inline 특성*

  • 새로운 라인으로 시작하지 않음 (동일한 라인에 다른 요소와 함께 위치 가능)
  • content 너비만큼 가로폭 차지
  • width, height, margin, padding 등의 프로퍼티 지정 불가
    • 상, 하 여백은 line-height로 지정 가능
  • inline 특성을 가지는 요소 뒤에 공백 (엔터나 스페이스 등)이 있는 경우 정의하지 않은 space(4px)가 자동으로 추가 (공백, 엔터, 스페이스 등 space(4px)로 변환되어 표현됨)
  • inline 특성을 가지는 요소 안에 block 특성을 가지는 요소를 포함할 수 없음
  • 디폴트로 inline 특성을 가지는 주요 HTML 태그
    • span
    • a
    • strong
    • img
    • br
    • input
    • select
    • textarea
    • button

display 프로퍼티

요소의 display 프로퍼티를 설정

  • block
  • inline
  • inline-block
  • none: 해당 요소를 화면에 표시하지 않는다 (해당 요소가 차지하는 공간가지 사라짐)

visibility 프로퍼티

요소를 보이게 할 것인지 아닌지를 설정

  • visible
  • hidden
  • collapse: table 요소에 사용하여 행이나 열을 보이지 않게 한다.
  • none: table 요소의 row나 column을 보이지 않게 한다. 호환성 이슈로 사용 지양

display: none;은 해당 요소가 차지하는 공간까지 사라지지만, visibility: hidden;은 해당 요소가 차지하는 공간은 남겨둠

inline-block 특성

block과 inline 특성 모두를 가짐

inline 요소와 같이 한 라인에 표현되면서도 width, height, margin, padding 등의 프로퍼티 지정 가능

  • 다른 요소와 함께 동일 라인에 표시
  • width, height, margin, padding 등의 프로퍼티 지정 가능
    • 상, 하 여백은 margin 또는 line-height로 지정 가능
  • content 너비 만큼 가로폭 차지
  • inline-block 특성을 가지는 요소 뒤에 공백이 있는 경우 정의하지 않은 space가 자동으로 추가
// 자동 추가되는 space 삭제 트릭
// 1. 태그와 태그 사이를 붙임
<strong>프론트엔드</strong><strong>
프론트엔드</strong>

// 2. 태그 닫기와 열기를 붙임
<strong>프론트엔드</strong
><strong>프론트엔드</strong>

// 3. 태그와 태그 사이를 주석 처리
<strong>프론트엔드</strong><!--
--><strong>프론트엔드</strong>

4.CSS font

font-size 프로퍼티

문자 크기 서정

  • medium: 웹 브라우저에서 정한 기본 글자 크기 (디폴트)
  • xx-small, x-small, small, large, x-large, xx-large: medium에 대한 상대적인 크기 설정값
  • smaller, larger: 부모 요소의 글자 크기에 대한 살대적인 글자 크기 설정값
  • length: px, %, em, rem 등의 CSS 단위를 사용한 글자 크기 설정값

font-family 프로퍼티

font-family를 통해 설정된 맨앞의 폰트를 먼저 찾고, 해당 폰트가 없으면 다음 포트, 그 다음 폰트 순으로 폰트 설정 시도

일반적으로 font-family에 세가지 폰트를 설정하며, 세번째 폰트로는 seif, sans-seif를 많이 사용한다.

웹폰트

웹폰트를 사용하면, 각 사용자 PC에 해당 폰트가 설치되어 있지 않아도 웹브라우저에서 해당 폰트를 다운로드 받아서 웹페이지가 표시됨 (경량화된 형태)

Google Fonts

  1. link 태그 복사

  2. font-family 설정에서 폰트 이름 확인

  3. 작성할 html 페이지에 head에 복사한 link 태그를 넣은 후 font-family 이름으로 폰트 설정

...
<head>
...
	<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stlyesheet">
	<stlye>
		.font-black-han-sans { font-family: 'Black Han Sans', sans-serif; }
  </style>
</head>
<body>
	<p class='font-black-han-sans'>테스트</p>
</body>

font-style 프로퍼티

  • normal
  • italic
  • oblique

font-weight 프로퍼티

글자 굵기 설정

  • number: 100, 200, 300, 400, 500, 600, 700, 800, 900
  • normal == 400
  • bold == 700
  • bolder: 상속된 값(font-weight 미설정 시의 굵기 값) 보다 굵은 굵기
  • lighter: 상속된 값(font-weight 미설정 시의 굵기 값) 보다 얇은 굵기

font-variant 프로퍼티

소문자를 소문자 크기의 대문자로 바꾸는 설정

  • normal
  • small-caps

line-height 프로퍼티

라인 높이 설정

  • normal: 보통 1.2 (브라우저 디폴트 설정값)
  • length: px, %, em, rem 등
  • number: 글자 크기의 n배

font 단축 프로퍼티

font: font-style(optional) font-variant(optional) font-weight(optional) font-size(optional) line-height(optional) font-family(essential)
// font-size font-family
font: 1.2em "Fira Sans", sans-serif;

// font-style font-variant font-weight font-size/line-height font-family
// font-size와 line-height는 font-size/line-height와 같이 설정 가능
font: italic small-caps lighter 16px/1.5 sans-serif

letter-spacing, word-spacing 프로퍼티

글자 사이 간격은 letter-spacing, 단어 사이 간격은 word-spacing으로 설정

보통 px 단위를 사용하여 설정, 음수 가능

text-align 프로퍼티

글자 수평 정렬 설정

  • left
  • right
  • center
  • justify: 양쪽 정렬

text-decoration 프로퍼티

  • none
  • line-through
  • overline
  • underline

white-space 프로퍼티

스페이스, 탭, 줄바꿈, 자동 줄바꿈 설정

프로퍼티 값스페이스와 탭줄바꿈자동 줄바꿈
normal병합병합O
nowrap병합병합X
pre보존보존X
pre-wrap보존보존O
pre-line병합보존O

text-overflow 프로퍼티

문자열이 부모 영역을 벗어나는 경우 자동 줄바꿈이 되지 않은 문자열 처리 설정

다음 조건이 설정되어 있는 상태에서만 설정 가능

  1. width 프로퍼티 설정
  2. white-space: nowrap
  3. overflow 프로퍼티가 visible 이외의 값 성정(hidden)

text-overflow 프로퍼티 값

  • clip: 텍스트를 잘라냄
  • ellipsis: 텍스트가 잘렸음을 말줄임표(…)로 표시

이 외의 string 등의 프로퍼티 값은 호환성 이슈로 사용 지양

profile
신성우
프론트엔드 엔지니어가 되기 위해 공부한 것들을 정리하고 공유합니다.
이전 포스트

[모던 웹] 2. CSS 기본

다음 포스트

[모던 웹] 4. CSS 배치와 애니메이션

0개의 댓글