[css] 기본 개요

환테크 2023. 1. 4. 09:54

본 실습은 VS CODE로 작성했습니다.

CSS는 독립적으로 사용하지 못한다.

그렇기에 기본 웹사이트를 세팅 후 CSS 알아보기

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modern CSS</title>
  <link rel="stylesheet" href="index.css" />
</head>
<body>
<header>This is the header.</header>
<div class="container">
  <nav>
    <h4>This is the navigation section.</h4>
    <ul>
      <li>Home</li>
      <li>Mac</li>
      <li>iPhone</li>
      <li>iPad</li>
    </ul>
  </nav>
  <main>
    <h1>This is the main content.</h1>
    <p>...</p>
  </main>
  <aside>
    <h4>This is an aside section.</h4>
    <p>...</p>
  </aside>
</div>
<footer>
  <ul>
    <li>개인정보 처리방침</li>
    <li>이용 약관</li>
    <li>법적 고지</li>
  </ul>
</footer>
</body>
</html>

index.css

body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #4a4a4a;
}
header, footer {
  font-size: large;
  text-align: center;
  padding: 0.3em 0;
  background-color: #4a4a4a;
  color: #f9f9f9;
}
nav {
  background: #eee;
}
main {
  background: #f9f9f9;
}
aside {
  background: #eee;
}

실습) layout.css 추가하기

index.html

<link rel="stylesheet" href="layout.css" />

layout.css

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.container {
  display: flex;
  flex: 1;
}
main {
  flex: 1;
  padding: 0 20px;
}
nav {
  flex: 0 0 180px;
  padding: 0 10px;
}
aside {
  flex: 0 0 130px;
  padding: 0 10px;
}

기본적인 셀렉터(selector)

id로 이름 붙여서 스타일링 적용하기

index.html

<h4 id="navigation-title">This is the navigation section.</h4>

index.css

#navigation-title {
  color: red;
}

class로 스타일 분류하여 적용하기

index.html

<!-- 바른 예제 -->
<ul><li class="menu-item">Home</li><li class="menu-item">Mac</li><li class="menu-item">iPhone</li><li class="menu-item">iPad</li></ul>

index.css

.menu-item {
  text-decoration: underline;
}

id와 class 적용 결과

id와 class의 차이점

id	class
#으로 선택	.으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙이는 데 사용	스타일의 분류(classification)에 사용