개발/HTML & CSS
-
[Next.js] css 파일 import개발/HTML & CSS 2023. 1. 9. 22:52
프로젝트 폴더 구조를 아래와 같이 만들고 난 후, _app.tsx에 css 파일 2개를 import 하였으나 제대로 스타일이 적용되지 않았다. public ├── images └── fonts src ├── pages └── styles ├── globals.css └── layout.css Next.js 에서는 _app.tsx에서만 css 파일을 import 할 수 있게 하는 것까지는 알고 있었지만 css 파일 역시 global.css 하나만 import 하도록 막는지는 몰랐기 때문에 이런 참사가 벌어졌다... globals.css 에서 다른 css 파일을 import 선언하는 꼼수로 해결 /* _app.tsx */ import '../styles/globals.css' import type { App..
-
Table 요소 내 th 또는 td 에 최소 높이 지정하기개발/HTML & CSS 2019. 7. 21. 15:19
테이블을 만들었는데 th 태그 내에 들어가는 텍스트 길이가 제각각이다보니 또 안 예쁘게 나온다. 바로 이렇게 모든 행이 동일한 높이로 출력되게 하려고 tr에도 높이를 지정해보고, th나 th에도 높이를 지정해줘봤지만 소용없을 무.... 헤매던 끝에 div를 이용해 높이를 주는 방법을 시도했더니 먹혔다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 First Row testing 1 Second Row testing 2 Third Row cs 24번 행처럼 th 태그 내에 div를 넣고 그 div에 min-height 속성을 지정해주면 이렇게 일정한 간격을 지닌 테이블이 나온다.
-
체크박스를 열에 맞춰 정렬하기 (inline & block 속성 활용)개발/HTML & CSS 2019. 7. 20. 11:00
지난 프로젝트에 이어 이번 프로젝트에서도 체크박스 여러 개를 2개 이상의 행에 걸쳐 뿌려주는 화면을 개발했다. 그런데 체크박스 옆에 붙는 텍스트 길이가 제각각이다보니 css를 따로 잡아주지 않으면 생각보다 되게 꼴보기 싫게 화면이 나온다. 무슨 말이냐 하면 요렇게 나온다는 뜻 지난번 프로젝트에서 같이 일했던 웹디자이너는 안타깝게도 요 부분을 못 잡겠다고 하셨고.. 이번 프로젝트에서는 잠시 퍼블리셔가 들어와서 이 부분을 수정하시는 모습을 분명 봤던 것 같은데 놀랍게도 수정된 파일을 넘기지 않고 그냥 철수해버리셔서ㅋㅋㅋㅠㅠ 할 수 없이 내가 잡았다. 포인트는 label 태그가 inline 속성을 가진다는 점이라고 생각한다. 결과부터 말하자면 1 label{ display:inline-block; width:..