폰트
단위
색상
CSS상속
Box model
Box 관련 속성
가운데 정렬
Normal Flow
Position
Flexbox

CSS 속성

CSS 참고서 - CSS: Cascading Style Sheets | MDN

CSS 참고서를 이용해 알파벳 순서로 정리한 모든 표준 CSS 속성, 의사 클래스, 의사 요소, CSS 자료형과 @규칙을 찾아보세요. 또한 유형별로 정리한 CSS 선택자와 주요 CSS 개념도 찾아볼 수 있습니다.

developer.mozilla.org

폰트

font-size : 글꼴의 크기를 결정
font-weight : 글꼴의 두께를 결정
font-family : 글꼴의 종류를 결정

Browse Fonts - Google Fonts

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

fonts.google.com

line-height : 줄의 높이를 결정
text-align : 텍스트를 정렬
- text-align : center; - 가운데 정렬
- text-align : left; - 좌측 정렬

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    .font {
      font-family: 'Arial';
      font-size: 2rem;
      font-weight: bold;
      line-height: 4rem;
      text-align: center;
      color: orange;
    }
  </style>
</head>

<body>
  <div>
    <span>Hello world!</span>
  </div>
  <div class="font">
    <span>Hello world!</span>
  </div>
</body>

</html>

단위

px : pixel, 화소 단위로 크기를 지정
rem : 16px을 기준으로 배수로 크기를 지정
- 2rem : 32px
% : 부모를 기준으로 크기를 지정
- 50% : 부모의 절반 크기

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    div {
      height: 50px;
      margin: 10px;
    }

    .px {
      width: 100px;
      background-color: red;

    }

    .rem {
      width: 10rem;
      background-color: green;
    }

    .percent {
      width: 50%;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="px"></div>
  <div class="rem"></div>
  <div class="percent"></div>

</body>

</html>

색상

color : 폰트의 색상을 결정
background-color : 배경색을 지정

CSS상속

일반적으로 텍스트에 영향을 미치는 속성들은 상속이 된다.
추후에 학습할 구조에 영향을 미치는 속성들은 상속이 되지 않는 경우가 많다.

Layout

Box model

CSS의 요소들은 기본적으로 네모난 영역을 가진다.
겉모습은 동그라미지만, 네모난 영역의 가장자리 부분이 깎이는 형태로 구현이 된다.

content : 내부 콘텐츠(text) 영역
padding : 콘텐츠와 테두리 사이의 간격
border : 테두리
margin : 테두리와 다른 요소 사이의 간격

Box 관련 속성

height : 요소의 높이를 지정
width : 요소의 너비를 지정
border : 테두리의 생김새를 지정 (두께, 모양, 색상)
border-radius : 테두리의 곡률을 지정
padding : 콘텐츠와 테두리 사이의 간격을 지정 (상 - 우 - 하 - 좌 순으로 지정)
margin : 테두리와 다른 요소 사이의 간격을 지정

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      border-radius: 30%;
      padding: 10px 20px 30px 40px;
      margin: 10px 20px 30px 40px;
      background-color: violet;
    }
  </style>
</head>

<body>
  <div>안에 내용이 들어감!</div>
  <div>안에 내용이 들어감!</div>

</body>

</html>

가운데 정렬

block
- margin: auto를 활용하여 수평 가운데 정렬을 할 수 있다.
inline
- text-align을 활용하여 수평 가운데 정렬을 할 수 있다.
- line-height 를 활용하여 수직 가운데 정렬을 할 수 있다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 200px;
      height: 200px;
      border: 1px solid black;
      /* display: flex; */
    }

    .horizontal {
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 0 auto 0 auto;
    }

    .text-horizontal {
      text-align: center;
    }

    .text-vertical {
      line-height: 100px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="horizontal text-horizontal">Hello</div>
  </div>
  <div class="container">
    <div class="horizontal text-vertical">Hello</div>
  </div>
</body>

</html>

Normal Flow

Inline element는 Inline Direction으로, Block element는 Block Direction으로 배치된다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span {
      color: red;
    }

    div {
      color: blue;
    }
  </style>
</head>

<body>
  <span>Hello</span>
  <span>World</span>
  <div>Hello</div>
  <div>World</div>
  <hr>
  <span>Hello</span>
  <div>World</div>
  <div>Hello</div>
  <span>World</span>


</body>

</html>

Position

Normal Flow를 벗어나 위치를 자유롭게 지정할 수 있는 방식

position - CSS: Cascading Style Sheets | MDN

CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다.

developer.mozilla.org

Flexbox

Normal Flow를 벗어나 요소들의 배치를 지정할 수 있는 방식
배열이 되는 축을 지정하여 배치를 지정할 수 있다.
div는 block 속성이지만, flex로 인해 축이 변경되어 가로로 배치된다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      height: 100px;
      border: 1px solid brown;
    }

    .flex-item {
      border: 1px solid black;
      padding: 10px;
      margin: 10px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="flex-item">Hello</div>
    <div class="flex-item">World</div>
    <div class="flex-item">HTML</div>
    <div class="flex-item">CSS</div>
  </div>
</body>

</html>

flex를 설정한 container에 대해 정렬이 가능하다
- justify-content: center; : 축 기준 가운데 정렬
- justify-content: space-between; : 축 기준 나열
- align-items: center; 축 반대 기준 가운데 정렬

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      height: 120px;
      border: 1px solid brown;
    }

    .flex-item {
      border: 1px solid black;
      padding: 10px;
      margin: 10px;
      height: 20px;
    }

    .center {
      justify-content: center;
    }

    .horizontal {
      justify-content: space-between;
    }

    .vertical {
      align-items: center;
    }
  </style>
</head>

<body>
  <div class="container center">
    <div class="flex-item">Hello</div>
    <div class="flex-item">World</div>
    <div class="flex-item">HTML</div>
    <div class="flex-item">CSS</div>
  </div>
  <div class="container horizontal">
    <div class="flex-item">Hello</div>
    <div class="flex-item">World</div>
    <div class="flex-item">HTML</div>
    <div class="flex-item">CSS</div>
  </div>
  <div class="container vertical">
    <div class="flex-item">Hello</div>
    <div class="flex-item">World</div>
    <div class="flex-item">HTML</div>
    <div class="flex-item">CSS</div>
  </div>
</body>

</html>

container에 들어있는 item이 하나라면, flex를 활용해서 정렬을 할 수 있다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      height: 120px;
      border: 1px solid brown;
      justify-content: center;
      align-items: center;
    }

    .flex-item {
      border: 1px solid black;
      padding: 10px;
      margin: 10px;
      height: 20px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="flex-item">Hello</div>
  </div>
</body>

</html>

참고) https://flexboxfroggy.com/#ko

'Html' 카테고리의 다른 글

사용자 에이전트 스타일시트(User agent stylesheet) (0)	2024.03.22
HTML(실습) (0)	2024.03.22
HTML(3) (0)	2024.03.21
HTML(2) (0)	2024.03.21
HTML(실습) (0)	2024.03.21

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

HTML(4)

CSS 속성

폰트

단위

색상

CSS상속

Layout

Box model

Box 관련 속성

가운데 정렬

Normal Flow

Position

Flexbox

'Html' 카테고리의 다른 글

CSS 속성

폰트

단위

색상

CSS상속

Layout

Box model

Box 관련 속성

가운데 정렬

Normal Flow

Position

Flexbox

'Html' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역