HTML,CSS,JS

CSS 기초편(1)

seung_ho_choi.s 2023. 5. 9. 19:00
728x90

개요: 필자가 클론코딩을 들으면서 정리한 게시물이다.(~3-7)

 

CSS : Cascading Style Sheet 

브라우저가 위에 코드를 차례되로 읽는다.  즉 위에서 아래로 차근차근 코드를 읽는다. 

 

CSS 작성하는 구조는 다음과 같다.

 

  <head>
    <title>CSH</title>
    <link href="style.css" rel="stylesheet" />
    <style></style>
  </head>

무조건 head 안에 적어야 하며 첫번째 방법은 따로 만든 CSS 파일을  link를 통해 연결하고 rel= 다음과 같이

작성해주면 된다. 

두번째는 html에 바로 style을 써서 해주는 방식이다. 보통 앞에껄 선호한다고 한다. 

 

 <style>
      h1 {
        color: blue;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>aaaaaaaaaa</h1>
      <h1>The Nico Times</h1>

다음과 같이 style 안에 h1 태그를 가르치는 {}쳐서 다음과 같이 작성하다. 속성들은 되게 많은데 다 외울 필요없고 

형식만 알아두면 된다고 한다. 

결과는 다음과 같다. 

    <style>
      h1 {
        color: blue;
        text-decoration: underline;
        text-align: center;
        font-weight: 200;
        font-style: italic;
        font-size: 20px;
      }
    </style>

이렇게 엄청 많다... 엄청... 

 

      div {
        height: 150px;
        width: 150px;
        background-color: antiquewhite;
      }
      span {
        color: greenyellow;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
    <span>hello</span>
    <span>hello</span>

div 는 박스여서 옆에 아무도 안온다. 하지만 span (img, <a> 등도)은 옆에 다른 요소들이 붙을 수 있다. 

이때 box를 block, 반대가 inline(in the same line)으로 정의하겠다. 

 

물론

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

이렇게 해서 서로를 바꿀 수 있다. 이때 inline은 높이와 너비가 없기 때문에 페이지에 안뜬다. 

 

box의 3가지 특징

1. margin - box의 경계의 바깥에 있는 공간

2. border

3. padding - box의 경계로부터 안쪽에 있는 공간

margin

 body {
        margin: 0;
        margin-top: 50px;
        margin: 10px 10px;
        margin: 10px 10px 11px 12px;

        background-color: black;
      }

1번은 전체를 0으로 해서 공간이 없고 2번은 윗부분 공간을 50px 해주겠다. 3번은 위 아래 10px 적용, 왼쪽 오른쪽

10px 적용한다는 뜻이다.  그리고 4번은 위 오 아 왼 시계방향!! 

 

collapsing margins 현상 - box들의 위쪽 경계가 같으면 안바뀐다. 그래서 이 두 box들은 하나의 margin이 되는 거다.

이 현상은 위 아래쪽에서만 일어난다. (3-5 참고)

그래서 저거를 없애고 싶으면 padding이 필요하다.

 

padding

   body {
        margin: 0;
        padding: 20px;
        background-color: black;
      }

이렇게 하면 아까말한 현상에서 벗어날 수 있다. 

 

 #f {
        background-color: teal;
      }
      #t {
        background-color: wheat;
      }
      span {
        display: block;
        color: greenyellow;
      }
    </style>
  </head>
  <body>
    <div id="f">
      <div id="t"></div>
    </div>
 

겹치는 태그를 id를 이용해 구분할 수 있다. \

 

border

 div {
        background-color: red;
        height: 100px;
        width: 100px;
        padding: 10px;
        border: 2px solid darkblue;
        border-style: dotted;
      }

border는 박스의 경계 저런식으로 구현할 수 있다. 

그러면 

이렇게 나온다. 

적용된 <div>안에 <span>을 써도 border가 적용된다. 

border은 block inline 모두 적용된다. 

728x90