CSS 핵심개념(1)

CSS는 전에도 설명했듯이 HTML의 디자인을 담당하는 부분이라고 생각하면 된다. 우선 간단히 HTML 파일 내에서 css를 활용하는 부분을 알아보자.

HTML 내에서의 CSS 선언

<style>
  .place {
  	font-size: 16px;
  	font-weight: 400;
  }
  #hallasan {
  	color: #F56513;
  }
</style>

<h3 class="place">우도</h3>
<h3 class="place">성산 일출볼</h3>
<h3 id="hallasan">한라산</h3>

id는 고유의 값으로 중복이 되지 않지만 class는 여러 태그에 사용할 수 있다. 만약 어떤 것을 쓸지 헷갈린다면 class를 사용하는 것을 추천한다.

CSS 속성

CSS 속성에는 정말 다양한 값들이 존재한다. 모든 것을 외울 필요는 없지만 많이 사용하는 속성들에 대해서만 간단히 설명하고 넘어가도록 하겠다.

1. CSS 파일 불러오기

<link rel-"styleshee" href="파일명.css">

CSS 파일은 index.html 파일과 분리해서 사용한다. 그렇기 때문에 해당 css 파일을 불러오는 코드가 필요하다.

2. 다양한 색상 단위

body {
	background-color: red;
    background-color: #FF0000;
    background-color: rgb(255, 0, 0);
    background-color: rgba(255, 0, 0, 0.5);
}

색상 단위는 '색상 이름', '색상 코드', 'RGB', 'RGBA'로 나누어 생각해 볼 수 있다.

• 색상 이름 : red, yellow, white처럼 영어로 색깔을 입력하는 것이다. 많이 사용하지 않는다.
• 색상 코드 : 가장 많이 사용하는 방식으로 앞에 #을 쓰고 HEX(16진수)를 사용하여 색을 지정한다.(빨간색 = #FF0000, 노란색 = #FFFF00, 흰색 = #000000)
• RGB : red, green, blue의 색의 3원색을 사용하여 색을 표현한다. (빨간색 - rgb(255, 0, 0))
• RGBA: 마지막에 Alpha(불투명도)를 추가하여 색을 지정하는데, 불투명도는 0 ~ 1에 값을 가지며, 숫자가 0에 가까울수록 투명해진다.(반투명도 = 0.5)

3. 다양한 크기 단위

크기 단위에는 '절대적인 단위'와 '상대적인 단위'가 있다.

<절대적인 단위>

• 픽셀(pixel) : 화면을 표시하는 기준이 되는 가장 작은 정사각형을 의미하며, 촘촘할수록 세밀한 표현이 가능하다. 해상도를 말할때, 1280x720처럼 가로에 1280px, 세로에 720px이 들어간다는 것을 의미한다.

<상대적인 단위>

• 퍼센트(%) : 부모 태그에 대해서 상대적인 크기를 가지며, 크기를 바꾸고 싶을 때 부모의 크기만 바꾸면 되는 장점이 있다. (100% 값은 자주 사용되니 알아두면 좋다.)
• 엠(em) : 1em = 부모 태그의 font-size를 의미한다. 예) 16px(2em) = 16px(32px)
• 렘(rem) : 1rem = 최상위 태그(html 태그)의 font-size를 의미한다.

<div id="parent">
  저는 높이가 320px입니다.
  <div id="child">
    저는 높이가 160px이에요!
  </div>
</div>

html {
  font-size: 16px;
}

#parent {
  background-color: #A655ED;
  height: 320px;
}

#child {
  background-color: #6942D6;
  height: 50%;
}

.artist {
  color: rgb(0, 47, 167);
  font-family: Rajdhani;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 8px;
  margin: 0;
}

.title {
  color: #747780;
  font-size: 1.25em;
  font-weight: 400;
  margin: 0 0 24px 0;
}

.ikb {
  background-color: rgb(0, 47, 167);
  height: 320px;
  margin: 2.5em auto;
  width: 320px;
}

.date {
  color: rgba(0, 0, 0, 0.5);
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  margin: 8px 0;
}

letter-spacing 속성은 글자의 가로 간격을 조절할 때 사용된다. 즉, 글자 사이의 간격을 조정하는 속성이다. 값이 커질수록 간격이 커지게 된다.

4. 코멘트(주석)

/* 여기에 코드를 작성하세요. */

코멘트(주석)를 잘 작성하는 습관을 만드는게 좋을 것 같다. 나중에 협업할 때 많이 도움이 될 것이다.