css

tailwind css 공홈에서 font-size를 찾으면 위와 같이 나오고 그대로 element에 class로 넣어주면 된다. text color도 마찬가지이다. 다양한 색상을 사용할 수 있다. 이 밖에도 bold와 uppercase 등도 사용할 수 있으니 참고하도록 하자

npm으로 tailwindcss를 설치한다 나는 유튜브 외국강의를 따라했는데 src에 styles.css를 만들고 public에 styles.css를 만들었는데 tailwindcss로 빌드한 결과물은 public의 styles.css안에 존재하게 된다. package.json에 위와 같이 추가해주고 npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch 위 명령어를 사용하면 live server로 바로바로 적용된 스타일을 볼 수 있다. src에 있는 styles.css에 위와 같이 적어준다. 위와 같이 추가해주고 index.html에서 클래스로 스타일을 적용하면 된다.

flex-basis를 썼을 때 flex-basis는 최소 너비는 보장하지만 최대너비는 보장하지 않는다. 컨텐츠의 양이 많아지면 레이아웃 박스가 커질 위험이 있다. 유지보수 측면에서 좋지 않다. width를 썼을때 텍스트의 크기가 길어지더라도 너비는 고정되기에 over-flow: hidden 을 쓸 수 있고, 말줄임표를 쓸 수 있게 된다.

See the Pen white-space by Taejin Kim (@kimtaejin3) on CodePen. 위를 보면 white space가 없을 경우에는 텍스트의 길이가 부모의 너비보다 커지면 그대로 벗어나게 됩니다. 그러면 한 번 white space를 만들어 봅시다. See the Pen white-space2 by Taejin Kim (@kimtaejin3) on CodePen. 위와 같이 부모의 너비를 벗어나지 않으며 줄바꿈이 됩니다. 대체 왜 줄바꿈이 생기는 걸까요???? css의 white-space 속성을 알면 궁금증이 풀리게 됩니다. mdn으로 가보죠!! white-space 속성의 초기값이 normal 이라고 되어 있습니다. normal의 의미는 무엇일까요? 위를 통해 norma..

width auto See the Pen css auto and % by Taejin Kim (@kimtaejin3) on CodePen. 위에서 block element를 하나 만들어 주고 안에 글자까지 채워 놓았다. body의 containg box만큼 가득찬 것을 확인할 수 있다 width 프로퍼티의 기본값이 auto이기 때문이고 width: auto의 의미는 부모의 containg box만큼의 영역을 다 채운다는 의미이다. See the Pen auto and %02 by Taejin Kim (@kimtaejin3) on CodePen. auto의 신기한 점은 위와같이 margin-left를 주면, margin 을 적용함과 동시에 부모영역을 벗어나지 않고 꽉채운다. 그렇다면 %는 어떨까? See ..

개요 혼자 온라인 강의를 보며 css를 공부했을 때는 cascade의 의미를 정확하게 이해하지 못했다. 막연하게 Selector가 더 정확한 것. 더 아래에 작성된 것이 우선순위가 높다는 지식만 가지고 있었다. specificity의 개념을 모르고 있었던 것이다. cascading mdn에서 cacading에 대한 설명은 아래와 같다. The cascade is an algorithm that defines how user agents combine property values originating from different sources. 즉, 최종적으로 요소에 적용이 되는 스타일을 어떻게 정하는 가에 대한 알고리즘이다. 만약 서로 같은 요소를 가리키는 selector의 property가 겹친다면 어떤..