[CSS] CSS 기초(1)

CSS

​ CSS(Cascading Style Sheets, 종속형 스타일 시트)는 브라우저에서 웹페이지의 외형을 결정하는 선언형 언어를 말한다. 브라우저는 선택한 요소에 CSS 스타일 선언을 적용해 화면에 적절히 표현한다. 하나의 스타일 선언은 속성과 그 값으로 이루어져있다. 다시 말하면, HTML이 뼈대를 구조한다면 CSS는 그 위에 옷을 입히는 디자인적 요소들을 말한다.

​ CSS는 HTML, JavaScript와 함께 웹의 3대 핵심 기술을 이룬다. 보통 HTML 요소의 스타일을 결정하지만, SVG, XML 등 다른 마크업 언어에도 사용할 수 있다.

• 기본 구성 요소

  

  1. 셀렉터(Selector) : 태그, id, class를 선택
  2. 선언 블록 (declaration block) : 중괄호 안에서 이 요소에 적용할 내용들을 작성

CSS 파일 추가

CSS 파일을 HTML 파일에 연결: link 태그 안 href 속성을 통해 연결

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

• link : HTML 파일과 다른 파일을 연결

• rel : 연결하고자하는 파일의 역할이나 특징

• CSS(Cascading Style Sheet)는 Style sheet ➡️ rel속성에 stylesheet을 추가

• href 속성에는 파일의 위치를 추가
  

  • 한 폴더 내에 있는 경우, 파일이름만 입력
  • 다른 폴더에 파일이 존재하는 경우, 절대경로 또는 상대경로를 입력
  • 반드시 rel을 표기해야 한다.

셀렉터 (Selector)

​ : id와 class로 그룹을 불러와 사용한다.

​ - id : 스타일 지정 시 한 가지만 지정할 때 사용한다. (#이름)

​ - class : 그룹으로 묶어서 동일한 요소를 적용할 때 사용한다. (.이름)

id, class 모두 이름은 자유지만 숫자로 시작해선 안된다.

id VS Class

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

유용한 사이트

www.Jsbin.com

더 공부해볼만한 내용

CSS pseudo-class

​ hover

​ active

​ focus