1. Next.js와 tailwindcss로 캐러셀 구현하기
- 실패
-
발단 : 구성은 맨위 div(캐러셀 컨테이너) => ul(캐러셀 컨텐츠) => li(각각 이미지)로 만들었다.
이 구성은 react와 styled-components를 사용하여 만들때 이렇게 만들었다.먼저 내가 만들었던 로직은 컨테이너와 컨텐츠 width를 지정해주고 ul태그에 flex를 주면 li가 가로로 넘어가면서 ul에 over-flow:hidden을 주게 되면 ul컨텐츠 만큼만 보이게 되고, 그대로 index를 사용하여 함수를 만들고 애니메이션 transform: translateX를 주면 되었다.
하지만 next에서는 react와 다르게 내가 알던 화면이 아닌 위 그림과 같이 ul(핑크색 배경) 안에 이미지들이 다 작게 들어가는 거였다. 내가 생각하기에는 next Image컴포넌트가 있는데 이미지를 최적화 해준다. 이부분 때문일까 라는 고민도 하고 친구에게도 물어보았는데 flex자체가 사실 부모 컴포넌트에 맞게 작아진다고 설명을 해주었다.
- 성공
- 결과 : 결론적으론 다른 방법을 찾았다. 구글과 유튜브를 통해 찾다가 해외 유튜버가 올린 코드를 도움받아 만들었다.
=> 그 후 다시 처음부터 만들어서 테스트를 해보았는데 잘 됐다... 단순 내가 코드를 잘못 쳤나보다...
=> 여기서 tailwind에 단점이 나오는듯 싶다... 가독성이 매우 어려웠다. 아직은 익숙하지 않아서 그런가 ㅠㅠ
2. tailwindcss 기본 스타일 초기화(preflight) - .md 파일로 작업시 에러
- 실패
- 발단 : 강의를 통해 배운 Next.js중 마크다운을 사용한 섹션이 있었고, 이번 포트폴리오 프로젝트에 프로젝트 설명 부분을 .md(마크다운)파일을 노트모듈을 사용하여 읽어서 react-markdown으로 표시 하려고 하였다. 하지만 h1태그와 p태그 등 많은 기본 스타일이 나오지 않아서 당황을 하였다.
- 성공
- 결과 : 검색을 통해 알게 된것은 tailwind는 기본적으로 html태그들에 기본 스타일을 제거해준다는 거였다. li와 h1태그 등 기본적으로 가지고 있는 부분이 있는데 prefilght라는 기본 기능으로 다른 브라우저들에서 접속시 css적으로 통일이 되게 해준다고 한다.
preflight관련 설명 블로그
=> 해결방법 : tailwind에서 따로 플러그인을 지정해주고 기본 스타일이 제거가 안됐으면 하는곳에 prose를 추가해주면 html기본 태그들을 그대로 사용가능하다.
태일윈드 플러그인
3. 배경 투명도주기
- 실패
- 발단 : 인트로에 배경을 주고 투명도를 주니 하위 태그들도 투명도가 같이 들어갔다.
- 성공
- 결과 : globalscss를 사용하여 클래스 네임을 주고 그 해당 클래스 네임에 가상요소를 추가하여 가상요소에 투명도를 주었다.
4. 글씨 단어별로 끊어지게하기
- 실패
- 발단 : 글씨가 많아지고 화면이 좁아질때 어설프게 글자가 밑으로 내려가는 상황이 나왔다.
- 성공
- 결과 :
break-keep라는 속성이 있다.(한국어,일본,중국어 단어로 잘라줌)
블로그 설명
[태일윈드 공식 문서](https://tailwindcss.com/docs/word-break
5. 드롭다운 메뉴
- 성공
=> 모바일 화면에서 좋은 선택지는 메뉴 드롭다운이라고 생각이 들어서 찾아보았고,
드롭다운 상태를 만들어 클릭시 ture/false가 되도록 클릭 함수를 만들고 => 반응형과 삼항연산자를 사용하여 list들을 absolute를 주고 w-full을 주어서 넓게 만든후 text-center을 주었다.
6. 파비콘
- 성공
next.js가 13버전으로 변경이 되면서 layout.js에서 html관련 처리를 해주면 되는데,
metadata에 icons를 추가하고 icon키와 값에 파비콘 경로를 지정해주면 된다.
파비콘은 .ico 확장자이다.
