CSS 태그 정리

CSS tags

---

Height, Width, and Max-width

The height and width properties may have the following values:

• auto - This is default. The browser calculates the height and width
• length - Defines the height/width in px, cm, etc.
• % - Defines the height/width in percent of the containing block
• initial - Sets the height/width to its default value
• inherit - The height/width will be inherited from its parent value

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

---

Margin

• margin-top
• margin-right
• margin-bottom
• margin-left

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

auto value

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

inherit value

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

---

Padding

• padding-top
• padding-right
• padding-bottom
• padding-left

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

div {
  padding: 25px 50px 75px 100px;
}

box-sizing

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Use the box-sizing property to keep the width at 300px, no matter the amount of padding:

---

Colors

Background Color

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Text Color

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Border Color

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Color Values

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

---

Fonts

• Serif
• Sans-serif
• Monospace
• Cursive
• Fantasy

font-family property

.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

---

Text Alignment

text alignment

• set the horizontal alignment of a text

  h1 {
    text-align: center;
  }
  
  h2 {
    text-align: left;
  }
  
  h3 {
    text-align: right;
  }
  

  div { text-align: justify; } ```

text align last

• how to align the last line of a text.

  p.a {
    text-align-last: right;
  }
  
  p.b {
    text-align-last: center;
  }
  
  p.c {
    text-align-last: justify;
  }
  

text direction

• change the text direction of an element

  p {
    direction: rtl;
    unicode-bidi: bidi-override;
  }
  

vertical alignment

• set the vertical alignment of an element

  img.a {
    vertical-align: baseline;
  }
  
  img.b {
    vertical-align: text-top;
  }
  
  img.c {
    vertical-align: text-bottom;
  }
  
  img.d {
    vertical-align: sub;
  }
  
  img.e {
    vertical-align: super;
  }