CSS를 더욱 풍요롭게 만드는 속성들에 대해 학습했다.
나는 개인적으로 bootstrap을 사용하는 걸 좋아하진 않지만,
몰라서 안하는 것과 할 줄 알지만 안하는 것은 다르기 때문에 배운 여러가지 정보들을 정리해보았다.

CDN으로 라이브러리를 불러올 때 플러그인들의 CDN 순서 신경쓰기
예를 들어 jquery를 사용하는 라이브러리들의 CDN보다 jquery의 CDN이 밑에 있는 경우, 라이브러리가 제대로 작동하지 않을 수 있음. 따라서 항상 jquery의 CDN을 제일 위에 배치시켜야 한다.

bootstrap

부트스트랩 시작하기
모듈로 나뉘어있어 원하는 템플릿을 가져다가 쓸 수 있다.
단점은 이미 완성된 형태로 클래스가 지정되어있어 디테일한 부분을 수정하기 어려움.

이를 보완하기 위해 다양한 사이트들에서 부트스크랩을 활용한 다양한 디자인의 모듈들을 제공한다.
ex )

• bootstrap select
• bootstrap template

Toast UI

toast ui 시작하기
NHN에서 제작한 JS UI 라이브러리
차트, 마크다운 에디터, 캘린더 등 다양한 API를 제공한다.
나중에 프로젝트할 때 써먹으면 좋을 거같다.

Tailwind

tailwind 시작하기
설치 방법 참고

부트스트랩보다 활용도가 높은 프레임워크.

npm모듈을 이용해 설치가 가능하며, CDN으로도 사용 가능하나 약간의 제약이 있다.

별도의 css 파일 없이 html에서 클래스 이름을 이용해 조작한다.
단점은 클래스 이름으로 하나하나 속성들을 지정해줘야 하기 때문에 html파일이 너무 지저분해진다.

사이트에서 ctrl + k 를 눌러 원하는 속성을 빠르게 검색할 수 있다.

그래서 오늘은 tailwind로 이력서 테플릿 만들기를 시도해봤다.

제한사항
여러분을 표현할 수 있는 단 한장의 모의 이력서!

• 커리큘럼 대로 skill set을 갖추고 있다고 가정
• github push는 60회
• github push 비중은 html 30% / css 30% / js 40%
• project는 총 4건
  • 1만시간의법칙(1일), 벤딩머신(2일), 렌딩페이지(3일), 감귤마켓(1주일)
• 이미지 프로필 단 하나의 이미지
• 별도 CSS 불허

직접 사용 후 느낀 점

1. 부스트코스보다 유연하다고 하지만 CSS만 못하다

css로 만들었다면 더 빠르고 예쁘게 만들 수 있었을 텐데, 아무래도 이것도 이미 디자인된 클래스를 적용하는 방식이라 숫자 디테일을 결정하거나 선택자 우선순위를 조절할 수 없어 힘들었다.

<abbr> 태그를 사용해 각 스킬당 설명을 표현하려 했는데, 기본 속성인 밑줄이 어떤 스타일을 입혀도 사라지지 않았다. stackoverflow에서는 !important로 우선순위를 높여 적용하는 방법을 추천했는데, tailwind에선 모두 클래스로 통일되어있어 적용할 수 없었다.

2. 수정이 어렵다.

또 선택자로 묶어서 표현할 수 없다보니 수정을 할 때 하나하나 해야하는 단점이 있다.

3. HTML의 가독성이 떨어진다.

css속성을 class로 하나하나 적어 넣다보니 html태그가 자연스럽게 길어진다. 그렇다보니 html 구조가 한눈에 보이지 않고 기본 스타일을 제거하기 어렵다.

4. 재사용성이 용이하다.

태그에 각각 스타일을 적용했기 때문에 부모 요소의 영향을 크게 받지 않는다.
어느 위치에 옮겨놔도 스타일을 유지하고 있어 레이아웃 변화에 쓰게 신경쓰지 않고 배치할 수 있었다.