CSS 기초 - 개념

개념

사용자에게 편의를 제공하기 위한 스타일링에 사용

독립적으로 사용되지 않고 반드시 HTML에서 동작

• 시맨틱 태그 : <div>와 같은 역할이지만 이름에 의미를 붙여서 부르는 태그

사용방법

body{ color: red; font-size: 30px; }

background와 background-color의 차이점

• background-color는 단순히 색 옵션만 가능
• background는 다양한 옵션 추가 가능
  ex) background-color/image/repeat/attachment/position

• CSS 파일을 사용하기 위해 HTML 파일과 연결 필요
  • <link rel="stylesheet" href="index.css" />
  • rel: 파일의 역할이나 특징
  • href: 파일의 위치

CSS 스타일 적용 방법

• 인라인 스타일(같은 줄에 바로 스타일 적용)
• 내부 스타일 시트(style 태그에 작성)
• 외부 스타일 시트(css 파일 html에 연결)

셀렉터

HTML 문서에는 이름이 같은 태그들이 많음.

• h4{color: red}를 적용할 시 모든 h4 태그의 색이 바뀐다.
• 이때 id 또는 class를 지정해서 특정 태그만 CSS 적용 가능.

id

• `
  테스트 타이틀
• #test-title{color: red;}
• id는 하나의 태그에만 사용 가능(중복 불가)
• id는 #으로 지정

class

• <div class="menu-item">사과<div>
• <div class="menu-item">배<div>
• <div class="menu-item">포도<div>
• .menu-item{text-decoration: underline}
• 클래스 명이 같은 모든 태그의 스타일이 바뀐다.