[20231221 TIL] CSS selector/CSS transition/SVG/Form 요소

Haizel·2023년 12월 21일

🧹 유데미 취업부트캠프

목록 보기

8/45

01. CSS 선택자 유형

* 선택자(별표 선택자/범용 선택자, Universal selector)

범용 선택자는 웹 페이지의 모든 요소를 선택한다.

범용 선택자(*)는 웹페이지를 구성하는 모든 요소를 선택해, 한번에 동일한 스타일을 부여할 때 사용된다.

주로 box-sizing, margin: 0;, padding: 0; 과 같이 box-model의 default 값을 정할 때 많이 사용한다.

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

:root 가상 선택자(의사 선택자)

문서의 최상위 요소에 적용된다.

❌ 항상 `html` === `:root` 인건 아니다.

html 요소 선택자와 :root 선택자는 HTML 문서에서 모두 최상위 요소를 의미하기 때문에 동일하다고 생각할 수 있다.

하지만 이는 HTML 문서에서만 국한되는 조건으로, xml 문서에서는 xml, xhtml문서에서는 xhtml 태그가 :root 선택자가 된다.

따라서 HTML 문서에 한해서는 html === :root 이지만, 항상 두 선택자가 같은 건 아니다.

💡 HTML 문서에서`html` 선택자와 `:root` 선택자의 우선 순위는?

결론부터 말하자면, :root 선택자가 더 우선 순위(명시도;specifity)가 높다.

따라서 아래 HTML 파일은 30px로 font-size가 적용된다.

html {
    font-size: 16px;
}
:root {
    font-size: 30px; 
}

✅ 범용 변수를 선언하는데 사용

:root 선택자는 주로 범용 변수를 선언하는데 사용된다. 반복되는 스타일에 대해서 범용 변수를 사용하면 스타일에 대한 유지보수나 관리가 용이하다.

:root{
  primary-color: red;
  secondary-color: yellow;
}

h2{
	color: var(--primary-color); /*red*/
}

p{
	color: var(--secondary-color); /*yellow*/
}

html 선택자

HTML 문서의 최상위 요소인 < html > 태그 요소로, < html > 태그의 하위 태그 모두 선택된다.

❌ html 선택자 === body 선택자가 아니다.

html 태그의 자식 요소인 <head /> 와 <body /> 에 모두 영향을 미친다.

하지만 실제 화면에 보여지는 부분은<body /> 태그의 요소이기 때문에, html 선택자와 body 선택자를 동일하다고 혼동하기 쉽다.

그러나 html은 <head /> 와 <body /> 에 모두 영향을 끼치기 때문에 두 선택자는 동일하다고 할 수 없다.

💡 html 선택자는 언제 사용할까?

우선 실제 렌더링되어 브라우저에 보여지는 부분은 <body /> 태그의 요소이기 때문에, 가시적인 스타일링은 <body /> 태그에만 부여해주는 것이 좋다.

단 font-size의 단위인 rem은 루트 요소(html)의 font-size를 기준으로 크기를 정하기 때문에, 기준 크기를 변경하고 싶을 때 사용할 수 있다.

html {
    font-size: 16px;
}
.div {
    font-size: 1.5rem;
    /* 24px */ 
}

body 선택자

<body /> 태그의 요소에 적용되며, 웹 브라우저에 보이는 모든 요소를 선택한다.

*body 선택자는 html의 자식 요소기 때문에 부모 요소의 모든 스타일을 상속 받는다.

주로 font-family, color, background-color와 같이 전역 스타일링을 부여할 때 사용한다.

body {
        background: #cbcbcb;
        font-family: Pretendard_Medium;
        font-size: 16px;
        color:  black;
      }

02. CSS transition

트랜지션(Transition)은 CSS 프로퍼티 값의 변화가 일정시간(duration)에 걸쳐 일어나도록 하는 것을 말한다.

✴︎ transition property(속성)

p {
	transition : background-color 2s ease-out 0.5s;
}

p:hover {
	background-color : red;
}

property(속성) : 트랜지션의 대상이 되는 CSS 프로퍼티를 지정하며, 대표적으로 transform, background-color 등이 있다. (기본값 : all)
duration(지속 시간) : 트랜지션이 일어나는 지속시간을 초 단위(s) 또는 밀리초 단위(ms)로 지정한다. (기본값 : 0s)
timing-function(타이밍 기능) : 트렌지션 효과를 위한 함수를 지정한다. (기본값 : ease)
delay(지연 시간) : 트랜지션 시작을 위해 대기하는 시간으로, 초 단위(s) 또는 밀리초 단위(ms)로 지정한다. (기본값 : 0s)

✴︎ transition-timing-function

트랜지션 효과의 변화의 흐름/변화의 리듬을 지정한다.

property	effect	gragh
ease	기본값. 느리게 시작하여 점점 빨라졌다가 느리지면서 종료한다.
linear	시작부터 종료까지 등속 운동을 한다.
ease-in	느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동한다.
ease-out	일정한 속도의 등속으로 시작해서 점점 느려지면서 종료한다.
ease-in-out	ease와 비슷하게 느리게 시작하여 느리지면서 종료한다.

03. SVG(Scalable Vector Graphics)

SVG는 .png, .jpg 등과 같이, 이미지 파일 형식(Image file format) 중 하나이다.

SVG

SVG는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 마크업 언어이다.

※ XML(Extensible Markup Language) : W3C에서 개발한 특수한 목적을 갖는 마크업 언어

브라우저가 렌더링할 수 있는 확장형 이미지의 텍스트 기반 묘사를 위해 생성된 언어로, 웹 등에서 스크립트가 가능한 다목적 벡터 포맷이 주 목적이다.

💡 SVG의 장단점 및 적합한 이미지

✴︎ 장점
: PNG나 GIF보다 용량이 적고, 확대/축소를 해도 해상도가 깨지지 않아 → 깔끔한 이미지 표현이 가능하다.

✴︎ 단점
: 색 표현의 한계가 존재하며, 수학적 계산이 필요하기 때문에 이미지가 복잡할수록 로딩 시간이 오래 걸릴 수 있다.

✴︎ 언제 사용하면 좋을까?

확대/축소해도 선명한 이미지 표현이 필요한 CI, BI 로고 및 홍보물, 인쇄물

🖼️ Vector(벡터) vs Raster(레스터)

레스터 방식으로 표현하는jpg, png, gif, bmp

벡터화된 그래픽 이미지인 svg

Raster(레스터)

레스터 방식을 이미지의 모양과 색을 색상 정보가 담긴 픽셀(pixel)로 표현하는 방식이다.
흔히 비트맵 방식이라고 불리며, 각각에 색을 입힌 픽셀을 한데 모아 그림이나 선으로 표현한다.

각각 하나의 픽셀을 이용하는 만큼 자연스러운 이미지 표현이 가능하지만 확대할 경우 그림이 깨져보이는 현상인 계단식 현상이 발생하며, 픽셀 수가 많이질수록 파일 크기도 커지는 단점이 있다.

Vector(벡터)

수학적 함수를 이용하여 도형이나 선을 그려 표시하는 방법으로, 확대해도 계단식 현상이 일어나지 않고, 선명함을 유지한다. 그리고 레스터 방식에 비해 용량이 작다는 장점이 있다.

하지만 벡터 이미지는 레스터 방식에 비해 색상의 자연스러운 변화나, 세밀한 표현이 어려워 복잡한 이미지를 그리기엔 제약이 있다.

04. Form 요소

🏷️ form tag

• action / method

action 속성은 폼 데이터를 서버로 보낼 때, 해당 데이터가 도착할 URL를, method 속성은 HTTP 메서드를 명시한다.

action : URL 서버주소
method : HTTP method (GET/POST)

<form action="/examples/media/action_target.php">
  ...
</form>

🏷️ label tag

for 속성

해당 라벨(label)과 결합할 요소를 명시하는 속성으로, 주로<label>요소의 for 속성 값으로 <input>요소의 id값을 부여한다.

<form action="/examples/media/action_target.php" method="get">
   <input type="text" name="name" id="user-name">
    <label for="user-name">User Name</label>
</form>

🏷️ input tag

• type 속성

<input> 요소가 나타낼 타입을 명시하며, default type은 'text'이다.

type	description
text	type 속성의 기본값으로, 한 줄로 된 텍스트 필드를 정의
number	숫자를 입력할 수 있는 입력 필드 정의
email	이메일 주소를 입력할 수 있는 입력 필드 정의
password	비밀번호를 입력할 수 있는 입력 필드 정의
date	날짜를 선택할 수 있는 입력 필드 정의 (year, month, day)
radio	라디오 버튼(radio button) 정의 (라디오 요소 중 한가지만 선택 가능)
checkbox	체크박스(checkbox) 정의
file	업로드할 파일을 선택할 수 있는 입력 필드와 “파일 선택” 버튼 정의
range	슬라이드 바를 조정하여 범위 내의 숫자를 선택할 수 있는 입력 필드 정의

• name 속성

<input> 요소의 이름을 명시하며, 폼(form)이 제출된 후 서버에서 폼 데이터를 참조하기 위해 사용하거나, 자바스크립트에서 요소를 참조할 때 사용한다.

<form action="/examples/media/action_target.php" method="get">
    <input type="text" name="username" id="user-name'>
    <label for="user-name">User name</label>
    <input type="submit">
</form>

• placeholder 속성

: <input> 요소에 사용자가 적절한 값을 입력할 수 있도록 도와주는 힌트 역할로, 가이드를 주고 싶을 때 사용한다.

    <input type="text" placeholder="홍길동" name="username" id="user-name'>

🏷️ Textarea tag

• cols/rows 속성

<textarea> 태그의 초기 열과 행(height과 width) 속성을 명시한다.

<textarea name="opinion" form="myForm" cols="30" rows="5"></textarea>

🏷️ select tag

• option tag

option 요소 중 하나의 항목을 선택(select)할 때 사용한다.

<form action="/examples/media/action_target.php" method="get">
	<select name="selectCurrency" id="selectCurrency" class="selectCurrency">
		<option value="USD" selected>USD</option>
		<option value="UYU">UYU</option>
		<option value="VND">VND</option>
		<option value="ZAR">ZAR</option>
		<input type="number" value="1" placeholder="1" >
	</select>
</form>

🏷️ button tag

• type 속성

type	description
button	클릭할 수 있는 버튼 정의
submit	제출 버튼으로, 선택한 요소가 URL의 파라미터 속성으로 추가된다.
reset	리셋 버튼으로, 해당 form 요소의 모든 input요소의 값(value)가 초기화된다.

05. Form 요소의 유효성 검증

form 요소의 유효성 검증

• novalidate 속성

<form> 태그의 속성으로, 폼 데이터를 서버로 제출할 때, 해당 데이터의 유효성을 검사하지 않고 싶을 때 사용한다.

novalidate 속성은 boolean 값으로, 해당 속성을 명시하지 않으면 기본 값으로 false값이 부여되며, 속성을 부여하면 true값으로 변환된다.

<form action="/examples/media/action_target.php" novalidate>
  <input type="email" name="user-email" id="user-email">
  <label for="user-email">Email</label>
    <input type="submit">
</form>

input 요소의 유효성 검증

required 속성 (boolean 값) : 해당 input의 입력이 필수로, 공란으로 제출 시 경고 메세지가 발생한다.
min (number, 날짜 등) : 최소 값
max(number, 날짜 등) : 최대 값
minlength (number 값 필요) : 최소 길이
maxlength (number 값 필요) : 최대 길이

06. Form Challenge

※ 참고자료

Haizel

한입 크기로 베어먹는 개발지식 🍰

이전 포스트

[유데미 취업부트캠프] 프론트엔드&백엔드 1주차 회고

다음 포스트

[20231221 TIL] CSS selector/CSS transition/SVG/Form 요소

🧹 유데미 취업부트캠프

01. CSS 선택자 유형

* 선택자(별표 선택자/범용 선택자, Universal selector)

:root 가상 선택자(의사 선택자)

❌ 항상 html === :root 인건 아니다.

💡 HTML 문서에서html 선택자와 :root 선택자의 우선 순위는?

✅ 범용 변수를 선언하는데 사용

html 선택자

❌ html 선택자 === body 선택자가 아니다.

💡 html 선택자는 언제 사용할까?

body 선택자

02. CSS transition

✴︎ transition property(속성)

✴︎ transition-timing-function

03. SVG(Scalable Vector Graphics)

SVG

💡 SVG의 장단점 및 적합한 이미지

🖼️ Vector(벡터) vs Raster(레스터)

Raster(레스터)

Vector(벡터)

04. Form 요소

🏷️ form tag

• action / method

🏷️ label tag

for 속성

🏷️ input tag

• type 속성

• name 속성

• placeholder 속성

🏷️ Textarea tag

• cols/rows 속성

🏷️ select tag

• option tag

🏷️ button tag

• type 속성

05. Form 요소의 유효성 검증

form 요소의 유효성 검증

• novalidate 속성

input 요소의 유효성 검증

06. Form Challenge

[유데미 취업부트캠프] 프론트엔드&백엔드 1주차 회고

[20231222 TIL] 브라우저 렌더링 / HTML script 비동기 호출 / JavaScript Data Type

0개의 댓글

관련 채용 정보

❌ 항상 `html` === `:root` 인건 아니다.

💡 HTML 문서에서`html` 선택자와 `:root` 선택자의 우선 순위는?