REVIEW/FRONTEND

CSS 기초 정리 - 기본 형식 및 선택자 등

진자이 2023. 6. 30. 09:23

안녕하세요 진자이입니다 :) 이번 포스팅에서는 CSS 기초로 CSS의 기본 형식과 선택자(기본, 속성, 복합, 구조)와 상속에 대해 기록하고, 단위에 대해 기록하겠습니다. Typhograpy, Box Model, Table 등과 같은 내용은 저에게는 필요하지 않으므로 기록하지 않겠습니다.

 

CSS

CSS란 웹 페이지에 디자인이라는 시각적 가치를 담당하는 언어(도구)이다. HTML의 Presentation 모듈을 댗체하는 언어로서 개발되었고, HTML의 소스구성, 레이아웃 배치 등의 한계점을 극복하였다. 또한, 웹 페이지에 자주 적용되는 디자인을 미리 정리하고 모아서 정의한 뒤 필요로 할 때 마다 가져다 적용할 수 있는 것이 장점이다.

/* 기본 원칙 */

선택자{
	속성:값;
	...
}

CSS를 적용하는 방법은, 역할 별로 분리해서 작성하는 것을 권장하며 크게 다음과 같다. (중복되는 경우에는 마지막 또는 가까이서 작성한 것이 우선권을 가진다)

  1. (External Style Sheet) 외부에 스타일시트 파일을 만들고 HTML 문서에서 불러다 사용하는 것 - 권장
    1. <link rel='stylesheet' href = '스타일시트 파일의 url'>
    2. <style type='text/css'> @import url('filename')</style>
    3. <style type='text/css'> @import 'filename</style>
  2. (Internal Style Sheet) HTML 문서 내에 STYLE 이라는 태그를 이용해서 사용하는 것 - 비추천
  3. (Inline Style Sheet) 태그 내에 STYLE을 적용하여 사용하는 것 - 가장 비추천

 

 

설정 방법

기본 형식

selector(선택자){
			속성:값;
			...
}
  • selector(선택자) : 스타일을 적용하는 대상으로 어떤 개체에 적용할 지를 결정
  • property(속성) : 스타일의 종류(성질)
  • value(값) : 속성이 가질 수 있는 값 → 속성의 값의 쌍으로 이루어져야 하며 콜론으로 구분된다. 또한, 적용할 데이터는 문자열과 예약어를 구분하므로 'red'(문자열)와 red(예약어)는 다른 것이 되니 주의!
  • 사용 예시 : body{color:gray; font-size:small;}

 

규칙

  • 속성 과 같은 쌍으로 지정되어야 하며 콜론으로 구분한다.
  • 하나의 속성과 값만 존재하는 경우는 ;을 생략해도 되지만 여러 개의 속성과 값이 있는 경우는 반드시 ; 으로 속성을 구분해야함.
  • 들여쓰기나 줄바꿈은 기능에는 아무런 영향을 주지 않음
  • 주석 : /* 주석은 이렇게 써요 */ 
    • 예전에는 주석을 많이 작성하는 게 무조건 좋았는데, 최근에는 주석을 작성하는 것보다 그 시간에 기능을 구현하는 것이 더 효율적이라는 얘기도 있음.

 

 

선택자 종류

기본 선택자(Selector)

/* 전체 선택자 */
* {
	margin:0;
    padding:0;
}


/* 태그 선택자 */
p{
	color:orange;
}

/* class 선택자 */
.note{
	color:blue;
}

/* id 선택자 */
#gnb{
	list-style-type:none;
}

 

속성 선택자(Selector)

/* 선택자[속성] : 속성을 가지는 선택자에 적용 */
[disabled]{
	color:red;
}

/* 선택자[속성=값] : 속성의 값이 일치하는 선택자에 적용 */
[type='password']{
	color:red;
}

속성 선택자는 부분일치 속성도 사용 가능하다

  • A^=B : A 속성의 값이 B로 시작하는
  • A$=B : A 속성의 값이 B로 끝나는
  • A*=B : A 속성의 값이 B를 포함하는

 

복합 선택자(Selector)

/* 일치 선택자 */
/* 선택자를 두 개 이상 붙여 작성하는 것으로 사용된 선택자를 동시에 만족시키는 요소 선택 */
span.orange{
	color:res;
}

/* 자식 선택자(왼쪽 부등호(>)로 구분*/
/* 부모 요소 바로 뒤의 자식 요소를 대상으로 스타일을 적용 */
.wcag > p{
	border:1px solid red;
}

/* 하위 선택자(공백으로 구분) */
/* 부모 요소에 포함된 모든 자식 요소를 대상으로 스타일을 적용 */
.note p{
	color:'orange';
}

/* 인접 형제 선택자(플러스(+)로 구분) */
/* 문서 트리 구조 상 동일한 부모 요소를 가진 병렬 관계 요소 가운데, 나중에 등록한 바로 뒤 요소에만 적용*/
h1+h2{
	color:gray;
}

/* 일반 형재 선택자(~ 로 구분)*/
/* 문서 트리 구조 상 동일한 부모 요소를 가진 병렬 관계에 있는 요소 가운데 나중에 있는 모든 요소에 적용*/
.orange ~ li{
	color:gray;
}

/* 그룹 선택자(,로 구분)*/
/* 그룹화하고 복수의 요소에 같은 스타일 적용 */
div >p, #wrap, p.note, blockquote p, h1[title]{
	color:red;
}

 

구조 선택자(Selector)

  • root : 최상위 요소
  • fisrt-child, last-child : 첫 번째 자식 요소와 마지막 자식 요소
  • nth-last-child(n) : 뒤에서 n번째 자식 요소
  • nth-child(n) : n번째 자식 요소
  • only-child : 자식이 하나인 요소
  • not(선택자) : 부정
  • empty : 자식이 없는
  • first-line, first-lettet, nth-of-type(n) 등

 

의사 클래스(pseudo-class)

상황에 따라 스타일을 적용하는 방법으로 선택자 뒤에 :를 적고 기재하면 된다.

링크

  • link 일반 링크
  • visited : 방문한 링크

사용자 동작

  • hover : 마우스가 올라오면
  • active : 클릭하면
  • focus : 포커스가 오면 - input에서만 가능

ui요소 체크 상태에 따라

  • checked : 체크 된것
  • enabled : 활성화
  • disabled 비활성

 

상속(inherit)

하위 요소가 상위 요소의 값을 물려 받느냐 아니냐를 나타내는 것으로, 요소의 상속은 되는 것이 있고 안 되는 것이 있다(대부분 폰트와 관련된 속성이 많다(font-style, font-weight, font-size, line-height, font-family, color,text-align 등)) 상속되지 않는 경우, inherit 키워드를 이용하여 강제로 상속시킬 수 있다. 또한, 상속된 스타일을 재정의하고 싶다면 원하는 선택자에 적용을 원하는 스타일을 정의하면 된다.

<p>상속
	<a href='inherit.html'>상속(inherit)</a>
</p>

p{
	border:1px solid red;
}
a{
	border:inherit;
}

 

우선순위

  • 스타일의 충돌 : 두 개 이상의  규칙이 동일한 한 개의 요소에 적용한다.
  • 스타일은 단계적으로 적용 : 특정도가 높은 순서대로 적용
  • 동일한 선택자에 여러 개의 스타일이 설정되면 마지막에 지정된 스타일이 마지막에 적용된다.

 

단위(UNITS)

단위 종류는 크게 상대 단위와 절대 단위로 나뉜다. 스크린에 표시할 때는 상대 단위가 적합하고, 인쇄할 때는 절대 단위가 적합하다. 특별히 글자 크기를 지정하지 않으면 브라우저는 기본 크기대로 표시를 하게 되는데, 브라우저의 기본 크기는 12pt, 16px, 1em, 100%와 같이 표시하며, 웹에서는 px나 em을 많이 사용하는데 px 단위는 절대 단위로 일정한 크기를 갖는다. 단위 변환은 http://pxtoem.com 사이트를 이용하면 좋다.

  • 절대 단위 종류 : cm, mm, in(인치), px, pt, pc
  • 상대 단위 종류 : px, %, em, 뷰 포트(vw, vh, vmin, vmax), ex, ch, 각도(deg, rad)

px, 픽셀은 디바이스가 표현할 수 있는 화면의 점을 의미하며, 화면의 확대/축소 등에 따라 달라질 수도 있어 절대 단위가 아닌 상대 단위로 보기도 한다. em은 font-size 값을 기준으로 크기를 설정하며, 만약 글꼴 크기가 16px이라고 하면 1em은 16px이 된다. ch는 숫자 0의 너비 크기이다.

 

 

저작자표시 (새창열림)