Published 2021. 8. 18. 16:22

CSS

CSS는 밋밋한 HTML 태그에 디자인을 씌워주는 언어입니다.

보통 웹 개발을 할 때 HTML 태그로 요소들을 구현하고 CSS로 디자인을 입히고 배치를 도와줍니다.

기본 문법

선택자 { 
	속성1 : 값;
	속성2 : 값;
}

선택자

선택자는 스타일을 적용할 대상입니다. 태그, id, class 등을 선택할 수 있습니다.

/* 태그를 선택자로 했을 때 */
p {
	color: orange;
}

/* 태그를 id로 했을 때 */
#title {
	color: blue;
}

/* 태그를 class로 했을 때 */
.item {
	color: red;
}

id는 딱 한 요소에게만 적용됩니다. 우리의 주민등록번호는 고유한 것처럼 id도 마찬가지로 한 요소에게만 적용됩니다 (태그에 동일한 id를 넣어도 한 개만 적용됨)
class는 class가 적용된 모든 요소에게 적용됩니다. 상품리스트에서 상품의 디자인이 다 동일한 것은 class를 부여해줬기에 가능한 일입니다.

<html>
  <head>
    <style type="text/css">
      p {
        color: orange;
      }
      #id-test {
        color: blue;
      }
      .class-test {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>Hello Pilly</p>
    <p>Hello Everyone</p>
    <div id="id-test">id applied only</div>
    <div class="class-test">class applied All</div>
    <div class="class-test">class</div>
  </body>
</html>

주석처리 꿀팁

command + /

복합 선택자

태그, id, class가 기본 선택자라고 한다면 이들을 결합한 선택자를 복합 선택자라고 합니다.

우리가 많이 사용하게 되는 복합 선택자로 하위 선택자(Descendant Selector) 와 자식 선택자(child selector) 가 있습니다.

하위 선택자는 선택자a 선택자b 로 띄어쓰기를 해주면 됩니다. 하위 선택자는 상위 선택자(선택자a) 내부에 있는 모든 요소들 중에서 선택자2에 해당하는 태그를 선택합니다.
자식 선택자는 선택자a > 선택자b로 >를 통해서 구분해줍니다. 자식 선택자는 상위 선택자(선택자 a)의 내부에서 가장 바깥에 있는 태그들 중에서 선택자2에 해당하는 태그를 선택합니다.

하위 선택자는 자식 선택자를 포함하는 넓은 선택자인 것을 알 수 있죠?

<html>
  <head>
    <style type="text/css">
        /* 하위 선택자 */
        #item-list p{
            color: red;
        }
        /* 자식 선택자 */
        #item-list > p{ /*첫번째 자식 선택자만 적영된다. red 적용 후 blue 적용.*/ 
            color: blue;
        }
    </style>
  </head>
  <body>
    <div id="item-list">
        <p>first child item1</p>
        <p>first child item2</p>
        <div>
            <p>second child item1</p>
            <p>second child item2</p>
        </div>
    </div>
  </body>
</html>

하위 선택자 전체에 빨간색 적용된 후,

첫번째 자식 선택자에게 파란색이 적용된 것을 확인할 수 있다.

2. CSS 에서 자주 쓰이는 속성들

속성과 값을 통해서 실질적으로 디자인을 씌운다고 보면 됩니다.

여기서는 필수적으로 알아둬야 할 속성들을 다룹니다.

2.1 크기 : width, height

크기는 웹의 기본 단위인 px 혹은 부모 태그의 크기를 기준으로 한 % 가 있습니다.
width: 선택자 태그의 너비
height : 선택자 태그의 높이

2.2 색상 : color, background-color

색상은 css에서 기본으로 설정되어 있는 예약 색상(red,blue 등)과 rgb로 표현됩니다.
color : 폰트의 색상을 정하는 속성
background-color : 선택자 태그의 배경색을 정하는 속성

2.3 폰트 : font-size, font-weight

font-size : 선택자 안에 있는 텍스트의 크기를 정하는 속성 (단위 : px)
font-weight : 선택자 안에 있는 텍스트의 굵기를 정하는 속성 (100 ~ 900)

<html>
  <head>
    <style type="text/css">
      #item1 {
        width: 100px;
        height: 100px;
        background-color: #ff0000;
        color: white;
      }
      #item2 {
        width: 100px;
        height: 100px;
        color: blue;
        font-size: 32px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id="item1">1st item</div>
    <div id="item2">2nd item</div>
    <div id="item-list">
      <div id="item3">3rd item</div>
      <div id="item4">4th item</div>
    </div>
  </body>
</html>

2.4 여백: margin, padding

태그의 여백을 나타내는 속성으로 margin 과 padding이 있습니다.
margin : 선택자의 바깥의 여백을 설정합니다
padding : 선택자의 내부의 여백을 설정합니다.

2.5 테두리: border

태그의 테두리에 선을 적용하는 속성입니다.
border 값은 순차적으로 너비 스타일 색상이 들어갑니다.

<html>
  <head>
    <style type="text/css">
      #item1 {
        width: 100px;
        height: 100px;
        background-color: #ff0000;
        color: white;
      }
      #item2 {
        width: 100px;
        height: 100px;
        color: blue;
        font-size: 32px;
        font-weight: bold;
      }
      #item-list {
        height: 200px;
        background-color: gray;
        padding: 16px;
      }
      #item-list > #item3 {
        margin-bottom: 16px;
        background-color: yellow;
      }
      #item-list > #item4 {
        margin-left: 16px;
        background-color: green;
        border: 5px solid blue;
      }
    </style>
  </head>
  <body>
    <div id="item1">1st item</div>
    <div id="item2">2nd item</div>
    <div id="item-list">
      <div id="item3">3rd item</div>
      <div id="item4">4th item</div>
    </div>
  </body>
</html>

'📱 Full-Stack' 카테고리의 다른 글

리액트 (0)	2021.09.18
javascript (0)	2021.09.15
웹 화면 구현하기 (0)	2021.08.23
html (0)	2021.08.18

CSS