[모던 웹] 2. CSS 기본

24siefil·2022년 4월 2일
selector단위
0

JavaScript, HTML, CSS

목록 보기
2/11
post-thumbnail

1. CSS 기본

CSS

  • Cascading Style Sheets
  • HTML로 구조화된 문서를 어떻게 브라우저 상에 렌더링할지 표현방법을 정의하기 위한 언어
    • HTML은 구조화에 집중 (Semantic Web 태그 기반, 의미 있는 표현 + 기본 HTML 태그로 구조 표현)
    • CSS를 통해 화면 렌더링 표현 방법을 정의함
    • javascript로 사용자 인터페이스 등을 정의함

1.1. Selector

  • 특정 부분을 선택하기 위한 문법
  • CSS Selector로 HTML 문서의 특정 부분을 정의한 구문을 Rule Set이라고 부르며, 이와 같은 Rule Set 집합을 Style Sheet라고 부름

1.2. HTML과 CSS 연동 방법

적용할 태그에 style 속성으로 넣기

가급적 사용하지 않아야 한다.

HTML 문서 head 안에 style 태그로 넣기

2번 방식 보다 3번 방식을 더 많이 사용한다.

HTML 문서 head 안에 CSS 파일로 링크하기

<head>
	<link rel="stylesheet" href="css/style.css">
</head>

1.3. Reset CSS*

  • 웹브라우저 마다 각기 다른 default 스타일이 지정되어 있으므로, 이를 초기화하여, 다양한 웹르라우저에서 동일한 스타일로 표시되도록 하는 설정

  • 최근에는 https://nicolasgallagher.com/about-normalize-css/를 많이 사용한다.

<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'>

2. CSS 단위

2.1. CSS 크기 단위

  • px: 해상도에 따라 상대적인 크기를 가짐

  • %

  • em

    • 배수 단위, 지정 사이즈를 기반으로 배수로 계산된 크기를 가짐
    • 중첩된 자식 요소에 em을 지정하면 모든 자식 요소(관련태그) 사이즈에 영향을 주므로 주의해야 한다.

  • rem(root em)

    • 최상위 요소(html) 사이즈를 기준으로 함
    • 중첩에 의한 오류를 방지한다.

2.2. 반응형 Viewport 단위

  • vw: viewport 너비의 1/100 (1%)
  • vh: viewport 높이의 1/100
  • vmin: viewport 너비 또는 높이 중 작은 쪽의 1/100
  • vmax: viewport 너비 또는 높이 중 큰 쪽의 1/100

2.3. 색상 표현 단위

  • 이름(대소문자 구분 X)

  • 16 진수 표기 방법(HEX 코드) ex) #ffffff

  • RGB ex) rgb(138, 43, 226)

  • RGBA ex) rgba(138, 43, 226, 0.5)

    • A == alpha

opacity 프로퍼티 값은 모든 자식 요소에 투명도 값이 상속되는 반면, RGBA 값으로 설정하면 상속되지 않음

  • 기타

    • HSL
    • HSLA

주요 색상 이름

Google Material Design

Adobe Color


3. CSS Selector

전체 selector

HTML 문서 전체를 선택

<style>
* { color: black; }
</style>

태그 selector

태그명으로 선택

<style>
	h1 { color: red; }
</style>

ID selector

#아이디명으로 선택

<style>
	#sshin { color: blue; }
</style>
...
<body>
	<h1 id='sshin'>Hello World</h1>
</body>

class selector

.클래스명으로 선택

<style>
	.sshin { color: green; }
</style>
...
<body>
	<h1 class='sshin'>Hello World</h1>
</body>

attribute selector

<style> [attr] { color: red; }</style>
<style> [attr='value'] {color: red;}</style>
<style> [attr~='value'] {color: red;}</style>
<style> [attr|='value'] {color: red;}</style>
<style> a[attr^='value'] {color: red;}</style>
<style> [attr^='value'] {color: red;}</style>
<style> a[attr$='value'] {color: red;}</style>
<style> [attr$='value'] {color: red;}</style>
<style> a[attr*='value'] {color: red;}</style>
<style> [attr*='value'] {color: red;}</style>

  • 속성: attr 속성을 가지는 모든 태그

  • 속성=값: attr 속성값이 정확히 속성을 가지는 모든 태그, 대소문자 구분하지 않음

  • 속성~=값: attr 속성값이 "value"를 (공백으로 분리된) 단어로 포함하는 모든 태그 (요소), 대소문자 구분하지 않음

  • 속성|=값: attr 속성값이 "value"이거나, "value"로 시작하면서 -문자가 곧바로 따라 붙는 모든 태그 (요소), 대소문자 구분하지 않음

  • 속성^=값: (a 태그의 요소 중) attr 속성의 값이 "value"로 시작하는 모든 태그 (요소), 대소문자 구분

  • 속성$=값: (a 태그의 요소 중) attr 속성의 값이 "value"로 끝나는 모든 태그 (요소), 대소문자 구분

  • 속성*=값: (a 태그의 요소 중) attr 속성의 값이 "value"를 포함하는 모든 태그 (요소), 대소문자 구분

3.1. 다양한 selector 조합

  • 태그, 아아디, 클래스 selector를 조합해서 복합적으로 사용 가능
  • HTML 문서 특정 태그에 여러 클래스가 지정될 경우, 다음과 같이 스페이스를 이용해서 클래스를 설정할 수 있음
    • class='클래스명1 클래스명2 클래스명3'
    • 이 경우 css selector는 .클래스명1.클래스명2.클래스명3 과 같이 사용 가능
<style>
	h1.sshin.funcoding#shin { color: gray; }
</style>
...
<body>
	<h1 class='sshin funcoding' id='shin'>Hello World</h1>
</body>

3.2. 복합 selector

  • 태그 안에 또다른 태그를 넣을 수 있으므로, 각 태그 또는 요소 간에 부모/자식 관계가 맺어진다.
  • 관계를 기반으로 HTML 문서 특정 부분을 선택할 수 있는 문법

후손 selector: 스페이스로 표시

  • 부모 태그 안에 있는 모든 하위 태그를 하위 요소, 후손 요소라고 부름
  • 부모 태그 (selector1) 안에 있는 모든 태그 중에 selector2를 선택, 모든 하위 레벨에 대해 작동한다.
selector1 selector2 { color: red; }

자식 셀렉터 (Child Selector): >로 표시

  • 부모 태그 (selector) 안에 있는 바로 다음 레벨의 태그 중에 selector2를 선택
selector1 > selector2 { color: red; }

인접 형제 셀렉터 (Adjacent Sibling Selector): +로 표시

  • 태그 (selector1)와 동일 레벨에 위치하고, selector1의 바로 뒤에 위치하는 selector2를 선택 (둘 모두를 선택)
    • 즉, selector1과 selector2 사이에 다른 태그 위치시 선택 안됨
selector1 + selector2 { color: red; }

일반 형제 셀렉터 (General Sibling Selector): ~로 표시

  • 태그 (selector1)와 동일 레벨에 위치하고, selector1의 뒤에 위치하는 selector2를 선택
    • 즉, selector1과 selector2 사이에 다른 태그가 위치해도 선택 가능
selector ~ selector2 { color: red; }

3.3. 가상 클래스 셀렉터 (Pseudo-Class Selector)

  • 요소에 특정 이벤트 발생시를 선택하는 문법
  • link: 방문하지 않은 링크가 적용된 요소 (a 태그로 링크가 적용된 요소를 한번또 클릭하지 않은 경우)
  • visited: 방문한 링크가 적용된 요소 (a 태그로 링크가 적용된 요소를 한번이라도 클릭한 경우)
  • hover: 특정 요소에 마우스가 올라간 상태
  • active: 링크 요소를 클릭한 상태 (a 태그로 링크가 적용된 요소를 마우스로 클릭하고 있는; 누르고 있는 상태)
  • focus: 특정 요소에 포커스가 있는 상태 (input 태그에 포커스가 있어서, 해당 창이 깜빡이고 있는 상태)

가상 셀렉터는 가상 요소 셀렉터 이외에는 한 개의 콜론을 사용함

3.4. UI 요소 상태 셀렉터 (UI Element States Pseudo-Class)

특정 UI 요소 상태에 따른 셀레기터

  • enabled: UI 셀렉터가 사용 가능한 상태
  • disabled: UI 셀렉터가 사용 불가능한 상태
  • checked: UI 셀렉터가 체크된 상태
  • indeterminate: UI 셀렉터 상태가 결정되지 않은 상태 (체크박스에 체크가 안되었거나, 라디오 버튼들이 하나도 체크되지 않은 상태)

3.5. 구조 가상 클래스 셀렉터 (Structured Pseudo-Class)

  • first-child: 부모의 첫번째 자식인 요소 선택

  • last-child: 부모의 마지막 자식인 요소 선택

  • nth-child(n): 부모의 첫번째 자식요소부터 시작해서 n번째 요소 선택 (0이 아닌 1이 첫 번째 요소)

  • nth-last-child(n): 부모의 마지막 자식 요소부터 뒤에서 시작해서 n번째 요소 선택

n번째 요소를 선택하는 것이지, n번째 자식 모두를 선택하는 것이 아니다!

2n은 짝수, 2n-1은 홀수와 같이 수기으로 표현 가능

  • first-of-type: 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중에 셀렉터에 해당하는 요소만 뽑아서, 이 중에 첫번째 요소를 선택
  • last-of-type: 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중에 셀렉터에 해당하는 요소만 뽑아서, 이 중에 마지막 요소를 선택
  • nth-of-type(n): 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중에 셀렉터에 해당하는 요소만 뽑아서, 이 중에 앞에서부터 n번째 요소를 선택
  • nth-last-of-type(n): 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중에 셀렉터에 해당하는 요소만 뽑아서, 이 중에 뒤에서부터 n번째 요소를 선택

3.6. 부정 셀렉터 (Negation Pseudo-Class)

  • not(부정) - 셀렉터에 해당하지 않는 모든 요소 선택

3.7. 정합성 체크 셀렉터 (Validity Pseudo-Class)

  • valid(셀렉터): 정합성이 검증된 input 또는 form 요소 선택
  • invalid(셀렉터): 정합성 검증이 실패한 input 또는 form 요소 선택

required 속성

  • input 태그로 생성된 입력창에 데이터를 무조건 넣어야 함 (데이터가 입력창에 들어가야 정합성이 검증되었다고 판단됨)
<style>
	input[type='text']:invalid { background-color:red; }
	input[type='text']:valid { background-color:yellow; }
</style>
...
<body>
...
	<form action="google.com">
		<input type="text" id="id" name="id" required>
		<input type="submit">
  </form>
</body>

patten 속성

  • input 태그로 생성된 입력창에 넣은 데이터가 원하는 데이터 포맷에 맞으면 정합성이 검증되었다고 판단함

  • pattern 값은 정규표현식

  • HTML patten Attribute

required 정도 까지만 사용하고 크로스 브라우징 이슈때문에 나머지는 자바스크립트로 처리하는것이 좋다.

<style>
	input[type='text']:invalid { background-color:red; }
	input[type='text']:valid { background-color:yellow; }
</style>
...
<body>
...
	<form action="google.com">
		<input type="text" id="id" name="id" pattern="[0-9]{6}" required>
		<input type="submit">
  </form>
</body>

3.8. 가상 요소 셀렉터 (Pseudo-Element Selector)

  • 선택한 요소 안의 특정 부분을 선택 (특정 요소의 첫 글자, 마지막 글자 등)

  • first-letter: 요소의 첫 글자 선택

  • first-line: 요소 첫 라인(줄) 선택 (block 요소에만 적용 가능)

  • after: 요소의 뒤에 위치하는 공간 선택, content 프로퍼티와 함께 사용

  • before: 요소의 앞에 위치하는 공간 선택, content 프로퍼티와 함께 사용

  • selection: 요소에서 드래그한 부분을 선택

다른 가상 셀렉터와 달리 두개의 콜론(::)을 사용함

profile
신성우
FE 엔지니어가 되기 위해 공부한 것들을 정리하고 공유합니다.
이전 포스트

[모던 웹] 1. 모던 웹 기술의 이해

다음 포스트

[모던 웹] 3. CSS 기본 프로퍼티

0개의 댓글