css 기초 정리 (1) - css 기본 세팅, 박스모델, margin, padding

css 기초 정리 (1) - css 기본 세팅, 박스모델, margin, padding

Summary:

생활코딩 웹 기본수업 중 css에 대해 기억해야 할 내용입니다.


기본 세팅

css는 항상 html과 함께 간다. css는 html을 예쁘게 하기 위해 존재한다. html은 정보 에 집중! css는 시각적 측면에 집중!

<head><style> 태그 안에 css가 들어간다. 따라서 이 안은 css문법에 따라 작성한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>

    /*css코드*/
    h1 {color:red}

    </style>
    <title></title>
  </head>
  <body>

  </body>
</html>

h1 {color:red}


h1, h2, h3, h4에 각각의 속성을 넣어봤다.

<style>
  h1 {color: #427fed}
  h2 {
    text-decoration: underline;
    font-size: 10px
  }
  h3, h4 {
    color: #fff;
    background-color: #db4437
  }
  h4 {
    text-decoration: underline
  }
</style>

적용 결과


태그가 여러겹일 때

<body>를 보면 h1이 하나는 <header> 안에, 하나는 <header> 밖에 있다. 이 둘을 구분시키는 속성을 적용시켜보자.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      h1 {color: #333}
      header h1 {
        border: 1px solid #db4437;
        color: #db4437
      }
    </style>
    <title></title>
  </head>
  <body>
    <header>
      <h1>헤더 안 h1입니다.</h1>
    </header>
    <h1>헤더 밖 h1입니다.</h1>
  </body>
</html>

적용 결과


css 박스모델

1. 각 리스트에 빨간색 점선 박스를 씌우고 싶다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      li {
        border: 1px dotted #db4437;
        margin-bottom: 20px
      }
    </style>
    <title></title>
  </head>
  <body>
    <ul>
      <li>list1</li>
      <li>list2</li>
      <li>list3</li>
    </ul>

  </body>
</html>

2. list2에만 검정색 실선 박스을 채우고 싶다.

list2의 <li>id="selected"를 추가하고, 위

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      li {
        border: 1px dotted #db4437;
        margin-bottom: 20px
      }
      #selected {
        border: 1px solid #000;
        margin: 40px
      }
    </style>
    <title></title>
  </head>
  <body>
    <ul>
      <li>list1</li>
      <li id="selected">list2</li>
      <li>list3</li>
    </ul>

  </body>
</html>


3. 글자와 블럭 사이 간격이 좁은 것 같다. 늘리자.

padding 속성을 이용한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      li {
        border: 2px dotted #db4437;
        margin-bottom: 20px;
        padding: 30px
      }
    </style>
    <title></title>
  </head>
  <body>
    <ul>
      <li>list1</li>
      <li>list2</li>
      <li>list3</li>
    </ul>

  </body>
</html>



float

css로 이미지 편집하기

단순히 <body>에 그림과 글을 쓰면 아래 결과와 같이 그림이 너무 작거나 클 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <img src="https://imyeonn.github.io/assets/images/post/001/09_04.png" />
    merchandising 즉, 상품화(상품기획)이 중요하다고 한다. 브랜드들을 많이 입점시키는 것이 경쟁력이 아니라 상품을 어떻게 고객에게 매력적으로 표현할 수 있는지가 핵심이다. 문제는 그 상품기획과 더불어 고객에게 특별한 경험을 제공함과 동시에 수익까지 내야 한다는 것이다.
  </body>
</html>

그림이 너무 커서 오른쪽이 짤렸다.


float를 이용하면 이미지를 왼쪽 혹은 오른쪽으로 옮기고 그 빈공간에 글자를 채울 수 있다. 샘플 이미지가 너무 커서 width 속성으로 크기를 줄였다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      img {
        width: 200px;
        float: left; /*또는 float: right;*/
      }
    </style>
    <title></title>
  </head>
  <body>
    <img src="https://imyeonn.github.io/assets/images/post/001/09_04.png" />
    merchandising 즉, 상품화(상품기획)이 중요하다고 한다. 브랜드들을 많이 입점시키는 것이 경쟁력이 아니라 상품을 어떻게 고객에게 매력적으로 표현할 수 있는지가 핵심이다. 문제는 그 상품기획과 더불어 고객에게 특별한 경험을 제공함과 동시에 수익까지 내야 한다는 것이다.
  </body>
</html>


이어지는 내용은 css 기초정리 (2)에서 정리한다.


Hyeyeon

A Blog about E-Commerce and Product Management

comments powered by Disqus

    rss facebook twitter github youtube mail spotify instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora