CSS -html안에서 css효과 적용

참고 : 브라우저가 CSS를 읽을 때 위에서부터 순서대로 읽는다.
만약 같은 selector를 가리키는 css가 여러개면 가장 마지막 스타일이 적용된다.
-> 즉, 코드의 순서가 결과에 영향을 미침

📌Blocks and Inlines

<head>
    <style>
      div {
        height: 150px;
        width: 150px;
        background-color: tomato;
      }
      span {
        background-color: turquoise;
      }
    </style>
  </head>

  <body>
    <div></div>
    <div></div>
    <div></div>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
  </body>

👉결과
저 빨간 네모가 하나처럼 보이지만 아니야!
네모가 3개 붙어있는거임
span은 옆에 다른 요소가 올 수 있는데 box는 올 수 없는모습

block : 옆에 다른 요소가 못 오는거
inline : 다른요소 올 수 있는거 ex) span, a, image.. 이거 제외 나머지 대부분들은 block임

📌Margin Part One

<!--display속성 : block을 inline으로 inline을 block으로 바꾸는거-->

      div {
        display: inline;
        height: 150px;
        width: 150px;
        background-color: tomato;
      }
      span {
        display: block;
        background-color: turquoise;
      }

👉결과
빨간박스 어디감?
⇒ inline요소는 높이와 너비를 가질 수 없어서 사라짐

inline은 높이와 너비가 없고 block은 높이와 너비가 있음

<head>
    <style>
      html {
        background-color: tomato;
      }
      div {
        height: 150px;
        width: 150px;
        background-color: white;
      }
    </style>
  </head>

  <body>
    <div></div>
  </body>

👉결과
근데 하얀 네모랑 빨간 네모에 저 틈 보여?? 하얀 네모가 왜 왼쪽위로 딱 안붙어있고 좀 띄어있을까?

margin은 box의 border(경계)의 바깥에 있는 공간.

<style>
      html {
        background-color: tomato;
      }
      body {
        background-color: thistle;
      }
      div {
        margin: 0;
        height: 150px;
        width: 150px;
        background-color: white;
      }
    </style>

👉결과

<!--margin 없애는 방법-->

body {
        margin: 0;
        background-color: thistle;
      }

👉결과

<!--margin값 주기-->

div {
        margin-left: 100px;
        height: 150px;
        width: 150px;
        background-color: white;
      }

👉결과

📌Margin Part Two

margin-top,left,right,bottom등등 여러가지 있어

margin: 20px;
⇒ 위아래왼쪽오른쪽 사방전부 20px

margin: 20px 15px;
⇒ margin값이 2개면 맨 처음값은 상하, 뒤에값은 좌우를 뜻함 위아래 20px 왼쪽오른쪽 15px

margin: 20px 5px 12px 9px;
⇒ 위20 오른쪽5 아래12 왼쪽9. 시계방향임

      body {
        margin: 0;
        background-color: thistle;
      }
      div {
        margin: 50px 100px;
        height: 150px;
        width: 150px;
        background-color: white;
      }

👉결과
Q) 나는 하얀box만 margin 위아래를 50px로 지정했는데 왜 body부분 box까지 50px로 margin이 설정된거야? 왜?

A) 그게 바로collapsing margins 현상. 이 현상은 흰box의 경계가 보라색 box의 경계가 같을때 일어나고 그때 두 box의 margin은 하나가됨. 위 아래쪽만 일어나. 왼쪽오른쪽은 안그럼

Author And Source

이 문제에 관하여([코코아톡 클론] 3.3~3.5 필기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@123cjstj/코코아톡-클론-3.33.5

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[코코아톡 클론] 3.3~3.5 필기

CSS -html안에서 css효과 적용

📌Blocks and Inlines

📌Margin Part One

📌Margin Part Two

Author And Source

좋은 웹페이지 즐겨찾기