글 쓰는 시간

이모션으로 변수 이용하기

팀원이 작성한 코드를 보면서 이모션으로 변수를 이용하여 스타일을 적용하는법을 배웠다.

폰트 스타일과 처럼 정해진 여러개의 스타일을 하나의 변수로 지정해서 쓰면 중복 코드를 많이 줄일 수 있다.

아마 스타일드 컴포넌트에서도 똑같은 문법으로 쓸 수 있을것 같다.

변수 설정

아래처럼 따로 ts 파일을 만들어서 폰트 스타일을 변수로 지정한다.

fontStyles.ts

변수 사용

아래처럼 필요한 곳에 ${변수명} 의 형식으로 import 하여 사용한다.

Emotion

팀 프로젝트에서 CSS를 이모션으로 쓰기로 했다.

덕분에 CSS 종류 찍어먹어보기 컬렉션에 이모션도 추가되서 만족스럽다.

VS Code 익스텐션

스타일드 컴포넌트나 이모션이나 스타일을 쓸 때 백틱에 문자열 형식으로 입력해야 한다.

그래서 기본적으로 자동 완성을 지원하지 않아서 불편하다.

하지만 위의 VS Code 익스텐션을 쓰면 아래 사진처럼 자동 완성을 도와주기 때문에 편하다.

사용평 및 후기

스타일드 컴포넌트와 같은 CSS in JS 이다.

스타일드 컴포넌트를 써봤다면 문법도 거의 똑같아서 바로 쓸 수 있을 정도이다.

본인은 이미 스타일드 컴포넌트를 써봐서 이모션을 쓰기에는 별로 힘들지는 않았다.

하지만 스타일드 컴포넌트에서 적용되는 문법을 지원하지 않는건지 아니면 내가 잘못 쓴건지 적용이 안돼서 좀 헤맸다.

아래의 문법인데, 기존 컴포넌트에 스타일을 입히려는 목적으로 썼는데 적용이 안됐다.

공식 문서에도 지원하는 문법이던데 왜 안된건지는 모르겠다.

const StyledComponent = styled(Component)`
  ...
  ...
  ...
`

Tailwind CSS

CSS 종류 찍어먹어보기의 일환으로 테일윈드를 써보기로 했다.

VS Code 익스텐션

위의 VS Code 익스텐션을 설치하면 아래 사진처럼 자동 완성을 도와준다.

intellisence 적용

바로 적용이 안된다면 Ctrl + Shift + P를 눌러서 Open User Settings를 열고 아래를 추가해줘야 한다.

setting.json

{
  ...
  // 추가
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": true
  },
  // 끝
  ...
}

사용평 및 후기

일단 테일윈드 css는 어느정도 틀이 갖춰진 UI를 제공한다.

예전에 템플릿 엔진 써보면서 쓰곤 했던 부트 스트랩과 비슷한 느낌인것 같다.

그래서 DSL 느낌으로 정해진 문법을 입력하면 그게 맞는 디자인이 입혀진 컴포넌트가 나온다.

디자인 시안이 있을때는 그에 맞춰서 다시 CSS 설정을 해야하는듯 해서 굳이 테일윈드를 쓸 필요는 없을것 같다.

하지만 혼자서 디자인 시안 없이 개발할때는 생산성이 좋을것 같다.

참고하면 좋을 글)

position 속성

글의 흐름에서 벗어나서 요소를 자유롭게 배치할 때 쓰는 속성이며, position 값에 따라 위치를 정하는 기준이 달라진다.

기본 값은 static이고, static인 경우 원래 있어야 할 위치에 배치된다.

위치 정하기

위치를 정하는 기준에 대해서 top, right, bottom, left 속성으로 위치를 정할 수 있다.

top, right, bottom, left 속성 값이 모두 똑같은 경우  inset 속성을 쓴다.

relative 포지션

요소의 원래 위치를 기준으로 배치한다. 이때 요소의 원래 자리는 그대로 차지하고 있다.

.green {
  position: relative;
  top: 15px;
  left: 10px;
}

absolute 포지션

가장 가까운 포지셔닝이 된 조상 요소를 기준으로 배치된다.

포지셔닝이 되었다는 건 static이 아니라는 (position 속성을 지정했다는) 의미이다.

아래 예시에서는 .red가 relative 로 포지셔닝이 됐으므로 .blue는 .red를 기준으로 배치된다.

이때 글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않는다.

.red {
  position: relative;
  top: 0;
  left: 10px;
}

.blue {
  position: absolute;
  right: 10px;
  bottom: 15px;
}

fixed 포지션

브라우저 화면을 기준으로 고정된 배치이다.

글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않는다.

따라서 겹치지 않도록 마진 등을 이용해 설정할 필요가 있다.

.red {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

sticky 포지션

static처럼 원래 위치에 배치되어 있다가, 정해진 위치에 브라우저가 스크롤되면 그때부터 fixed처럼 고정되어 배치된다.

기본적으로는 static처럼 배치되기 때문에 요소의 원래 자리를 차지한다.

.red {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
}

z-index 속성

앞뒤 우선순위를 정할 때 쓰는 속성이며 순서기 때문에 단위 없이 쓴다.

값이 높을수록 화면에서 앞쪽에 보이며, 값이 같으면 코드에서 아래 줄에 있는 요소가 앞쪽에 보인다.

시맨틱 태그

<div>와 기능은 똑같지만 의미가 담겨있는 태그들을 '시맨틱 태그'라고 한다.

엄격한 사용법이 있는 건 아니고 작성하는 사람의 의도가 중요하다.

시맨틱 태그를 잘 활용하면 검색 엔진 최적화(SEO)나 접근성(Accessibility)을 높이는데 도움이 된다.

시맥틱 태그를 사용하면 좋은 점

1. 검색 엔진 최적화(SEO) 

구글이나 네이버 같은 사이트에서 크롤링을 통해 사이트의 정보를 수집한다.

메타 데이터와 시맨틱 태그가 잘 작성돼있으면 검색 엔진에서 정보를 더 잘 수집하여 더 높은 수준의 최적화를 할 수 있다.

2. 접근성(Accessibility)을 높일 수 있다.

접근성은 A11y 라고도 한다. 

시각 장애인은 스크린 리더를 통해 인터넷을 이용하는데, 스크린 리더는 <div> 태그로 되어있는 사이트 보다는

뜻하는 바가 뚜렷한 시맨틱 태그를 이용한 사이트 쪽을 더 잘 읽는다.

3. 협업 시 가독성을 높일 수 있다.

개발자끼리 협업을 하면서 코드를 주고 받는다.

<div> 태그보다는 시맨틱 태그를 사용하는게 개독성 측면에서 더 좋아 이해하기도 쉽고, 따라서 생산성을 높일 수 있다.

input 태그

같은 <input> 태그이지만 type 속성을 추가하면 여러가지 <input> 태그를 만들 수 있다.

체크박스 checkbox

1. 한 항목만 선택하는 경우

아래 예시에서는 "동의합니다"에 체크하는 경우 agreement의 값이 on이라는 문자열로 지정된다.

<label>
  <input name="agreement" type="checkbox">
  동의합니다
</label>

2. 여러 항목 중에서 몇 항목을 선택하는 경우

<input> 태그에 value 속성으로 값을 지정해 주면, 선택된 항목의 지정된 값이 쓰인다.

아래 코드에서는 "액션"이랑 "코미디"를 선택했을 때 film의 값으로 action과 comedy라는 문자열이 지정된다.

폼을 전송했을 때 쿼리 스트링에서는 &film=action&film=comedy 로 전송된다.

<label for="film">좋아하는 영화 장르</label>
<label>
  <input type="checkbox" name="film" value="action">
  액션
</label>
<label>
  <input type="checkbox" name="film" value="comedy">
  코미디
</label>
<label>
  <input type="checkbox" name="film" value="romance">
  로맨스
</label>

날짜 date

선택한 날짜로 값을 지정할 수 있다.

<input name="birthdate" type="date">

파일 file

파일을 선택할 수 있는 인풋이다. 자주 쓰일테니 기억해두자.

<input name="avatar" type="file">
파일 형식 지정하기

accept라는 속성을 써서 허용할 파일 확장자들을 정해 줄 수 있다.

<input name="avatar" type="file" accept=".png,.jpg">
파일 개수 지정하기

multiple이라는 참/거짓 속성을 사용하면 여러 개 또는 한 개만 선택하도록 정할 수 있다.

<input name="photos" type="file" multiple> <!-- 여러 개 선택 가능 -->
<input name="avatar" type="file"> <!-- 한 개만 선택 가능 -->
이메일 email

텍스트를 입력할 수 있는 건 똑같지만, 버튼을 눌러서 폼을 전송할 때 올바른 이메일 형식인지 자동으로 검사해준다.

<input name="email" type="email">

숫자 number

숫자를 입력하고, 최소 최대 값이나 버튼을 눌렀을 때 증가, 감소할 양을 정할 수 있다.

<input type="number">

<!-- 100에서 1000사이 -->
<input type="number" min="100" max="1000">

<!-- 100에서 1000사이, 버튼을 눌렀을 때 100씩 증가, 감소 -->
<input type="number" min="100" max="1000" step="100">
비밀번호 password

값을 입력했을 때 입력한 내용이 가려진다.

<input type="password">

라디오 radio

동그란 선택 버튼이며, 체크박스와 다르게 여러 항목 중 하나의 항목만 선택할 수 있다.

value 속성과 같이 사용하면 같은 name을 가진 <input> 태그들 중에 선택한 <input>의 value 값을 입력하도록 할 수 있다.

아래 코드에서 "좋음"을 선택하면 feeling의 값으로 3이라는 값이 들어간다.

<input id="very-bad" name="feeling" value="0" type="radio">
<label for="very-bad">아주 나쁨</label>

<input id="bad" name="feeling" value="1" type="radio">
<label for="bad">나쁨</label>

<input id="soso" name="feeling" value="2" type="radio">
<label for="soso">보통</label>

<input id="good" name="feeling" value="3" type="radio">
<label for="good">좋음</label>

<input id="very-good" name="feeling" value="4" type="radio">
<label for="very-good">아주 좋음</label>

범위 range

범위 안에서 선택할 수 있는 인풋이다.

<label for="signup-feeling">현재 기분</label>
<input id="signup-feeling" name="feeling" min="1" max="10" type="range">

텍스트 text

인풋 타입의 기본 값이며 일반적인 텍스트를 입력할 때 사용한다.

<input name="nickname" type="text">

옵션 선택 <select>

미리 정해져 있는 여러 값들 중에서 하나를 선택할 수 있는 태그이다.

<select> 태그 안에 <option> 태그를 value와 함께 사용한다.

아래 코드에서 드라마를 선택하면 genre의 값이 drama가 된다.

<label for="genre">장르</label>
<select id="genre" name="genre">
  <option value="korean">한국 영화</option>
  <option value="foreign">외국 영화</option>
  <option value="drama">드라마</option>
  <option value="documentary">다큐멘터리</option>
  <option value="vareity">예능</option>
</select>

긴 글 <textarea>

긴 글을 입력할 수 있는 인풋이며 <input> 태그와 달리 반드시 종료 태그(</textarea>)를 써 줘야한다.

<textarea name="content"></textarea>

CSS 선택자(CSS Selector)

CSS 규칙에서 맨 앞에 적어 주는 걸 CSS 선택자라고 부른다.

선택자를 사용해서 이 규칙을 어떤 요소들에 적용할지 선택할 수 있다.

선택자 {
  선언;
  선언;
  선언;
}

선택자 목록

콤마(,)로 선택자를 연결하면 여러 선택자에 같은 규칙을 적용할 수 있다.

선택자1,
선택자2 {
  ...
}

선택자 붙여 쓰기

여러 조건을 동시에 만족하는 요소를 선택하고 싶다면 선택자를 붙여서 쓸 수 있다.

// HTML
<h2 id="mongolia" class="large title">몽골 대자연으로 떠나는 여행</h2> 


// CSS
예시 1. 아이디 + 클래스
#mongolia.title

예시 2. 클래스 + 클래스
.large.title

예시 3. 태그 + 아이디 + 클래스
h2#mongolia.large.title

자식 결합자 (Child Combinator)

오른쪽 꺾쇠로 선택자를 이어 준다.

아래 코드에서 tesla-y-2025.png를 보여 주는 이미지 태그를 선택하려면 .article > img로 선택할 수 있다.

// HTML
<div class="article">
  <img src="tesla-y-2025.png">
  ...
</div>

// CSS
.article > img {
  width: 100%;
}

자손 결합자 (Descendant Combinator)

스페이스(띄어쓰기)로 선택자를 이어 준다.

아래 코드에서 tesla-w-2025.png를 보여주는 이미지 태그를 선택하려면 .article img로 선택할 수 있다.

// HTML
<div class="article">
    <p> 이번에 리뷰해 볼 차량은 테슬라 모델 W 입니다.
      <img src="tesla-w-2025.png">
  </p>
  ...
</div>

// CSS
.article img {
  width: 100%;
}

가상 클래스 (Pseudo-class)

가상 클래스는 의사 클래스, 가짜 클래스라고도 부른다.

요소의 상태 같은 걸 선택할 때 사용하는 클래스이며, 정해진 이름 앞에 콜론(:)을 붙여서 사용한다.

• :hover(마우스를 올렸을 때),
• :active(클릭한 상태)
• :visited(방문한 적이 있는 링크)
• :focus(포커싱 됐을 때)

예를 들어서 밑줄이 없는 링크에 마우스를 올렸을 때 밑줄이 생기도록 하려면 :hover를 활용하면 된다.

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

전체 선택자 (Universal Selector)

* 라는 선택자는 모든 요소를 선택하는 선택자이다.

// 모든 요소를 선택하기
* {
  box-sizing: border-box;
}

// .gallery의 모든 자식 요소 선택하기
.gallery > * {
  width: 120px;
  height: 90px;
}

n번째 자식 선택자(n-th child Selector)

:nth-child()를 사용하며, 괄호 안에는 숫자나 even, odd, 2n 같은 값이 들어갈 수 있다.

0부터 시작할 거라고 생각할 수도 있지만, 여기서는 1부터 시작한다. (첫 번째 자식은 1이고, 세 번째 자식은 3임)

// .gallery의 세 번째 자식
.gallery :nth-child(3) { ... }

// .gallery의 짝수 번째 자식
.gallery :nth-child(even) { ... }
.gallery :nth-child(2n) { ... }

// .gallery 의 홀수 번째 자식
.gallery :nth-child(odd) { ... }
.gallery :nth-child(2n+1) { ... }

// 첫 번째 자식, 마지막 자식은 아래처럼 선택한다
.gallery :first-child { ... }
.gallery :last-child { ... }

Display 속성

Display 속성은 블록과 인라인으로 나눌 수 있다.

블록(Block)

위에서 아래로 차례대로 배치되는 요소이며, 크기를 지정할 수 있다.

다음 태그들은 기본적으로 display 값이 block이다.

• <h1>, <h2>, …, <h6>
• <p>
• <div>

인라인(Inline)

글을 쓰는 방향으로 줄이 바뀌면서 배치되며, 블록과 달리 크기를 지정할 수 없다.

다음 태그들은 기본적으로 display 값이 inline이다.

• <a>
• <br>
• <img>
• <span>

예외적으로 이미지 같이 외부 데이터를 보여 주는 태그는 인라인이지만 크기를 지정할 수 있다.

인라인 블록 (Inline-block)

인라인처럼 배치되지만 블록처럼 크기를 가지고 싶을 때 사용하는 display 속성이다.

float 속성

float 속성은 요소를 페이지 왼쪽이나 오른쪽에 삽화처럼 배치하고, 그 주변으로 인라인 요소들을 배치할 수 있다.

블록, 인라인 블록, 인라인 비교