[fwywd] 초보자는 Next입니다.js tailwindscss JavaScript를 사용하여 포트 보고서 작성 학습

개시하다
처음으로 Qiita에 투고했습니다.
이번엔 조합을 만들 기회가 있다.글을 써서 나는 걸려 넘어진 곳에서 배운 것을 출력했다.
같은 고전의 초보자들에게 참고가 되었으면 좋겠습니다.
어떤 조합이 만들어졌는지 이쪽 링크에서 확인하세요.
대상 링크: 10147 시도; 콤비네이션
가져오기 방법
도입 방법도 모르는 상황이라 이쪽링크 대상을 보면서 도입했다.
Vs Code를 사용하는 경우 간편한 확장 기능도 설명되어 있으므로 반드시 참조하십시오.
tailwindcss
css가 조금 접촉했기 때문에 자꾸 이해가 가는 것 같아요.또한tailwindcss 사용에 큰 저항이 없습니다.
css를 접촉한 적이 없는 사람이 갑자기 Tailwindcss로 이루어진다면 사용 인상을 잘 잡지 못할까?내 생각엔
참고 자료
참고 자료의 링크 주소는 다음과 같다.
TailwindCSS
Tailwind CSS Cheat Sheet
Tailwind CSS 추천
시늉
① "class Name"에 tailwindscss 속성을 할당하면 됩니다.
②연속으로 속성을 작성할 수 있다
③ Vs 코드는 자동으로 보완되어 속성을 이해하더라도 쉽게 쓸 수 있다

例）
className='mt-5 py-5 font-bold text-white'

코드
"margin-top에서 5px,padding y 방향으로 5px를 누르면 글씨체는 굵고 문자는 흰색입니다."
설치 과정 중 겪은 좌절
응답 디자인에서 아래 부분이 걸려 넘어졌다.
어떻게 사용해야 할지 모르니 스스로 규율성을 찾아내야 한다
해결책
DevTools를 사용하여 sm:md:lg:를 하나하나 테스트하여 변화점과 규칙성을 발견하였다.
사용법
DevTools 사용 방법
DevTools의 Responsive를 사용하여 화면 크기를 수동으로 변경했습니다.
여기서 발견한 규칙성으로.
"지정된 치수부터 변경되며, 아래는 적용되지 않습니다."

예를 들어'sm(640px)'을 살펴보자.

例）
sm:font-bold
// 640pxからフォントを太文字に変更

이 경우 640px 이상의 사이즈에 반영되지만 640px(639px부터)의 사이즈에 반영되지 않는다.
이곳의 규칙성을 발견하는 데 많은 시간이 걸렸다.
이 규칙성으로 보면'최소 사이즈(스마트폰)부터 만드는 게 더 효율적일 것 같다'는 생각이 든다.
이 부분에 관해서는 앞으로 웹 개발을 진행하는 과정에서 검증해 보려고 합니다.
구성 요소
개념을 이해하기 위해 처음에는 곤혹스러웠다.한 마디로 구성 요소를 요약하면'분업 후의 업무를 총괄하는 것'이다.
말로 표현해도 애초에 반응이 없어서 간단하게 그림으로 정리했다.


말이 나쁠 수도 있지만 일하지 않는 상사(Index)는 열심히 일하고, 관련 부서의 부하들은 임무를 관리한다.
중간관리자(Layout)는 각 부서에서 작성한 자료를 점검해 상사(Index)에 제출한다.
자신의 언어로 표현하면 이해도가 높아진다.
최후
첫 학자라 잘못된 이해가 있을 수 있다.있다면 지적해 주십시오.
내용은 수시로 추가, 갱신한다.