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:..
-
Spring + MyBatis + DB = 작은 웹사이트 - (9) CRUD개발/Web Project (1) - Spring MVC + java + DB 2018. 1. 28. 21:01
전체 글 목록을 읽어오는 기능과 페이징 처리 기능을 넣었으니 새로 글쓰기, 상세 데이터 조회, 글 수정, 글 삭제 기능을 구현해서 CRUD 풀셋을 완성할 차례다. 처음 밝혔듯이 원래는 상세 조회, 수정, 삭제, 입력을 모두 하나의 jsp 에서 처리할 수 있게 구현하려고 했으나...구체적인 설계 계획없이 일단 만들기 시작하다가 꼬이면서 수정, 입력을 각각의 별도 화면에서 처리하는 것으로 바꿨다. 1. 글 신규 작성 + CKEditor 삽입 목록 조회 화면에서 글 쓰기 버튼을 클릭하면 loaction.href 를 이용하여 글 작성 화면으로 이동한다 $("#toWrite").click(function(){location.href="/home/note/writeNoteView"; }); //게시물 작성 화면@R..
-
Spring + MyBatis + DB = 작은 웹사이트 - (7) 본격 게시판 만들기 서막개발/Web Project (1) - Spring MVC + java + DB 2018. 1. 17. 22:48
오잉 별것도 안했는데 벌써 7번째 포스팅이라니 이게 무슨 일이오아무튼 이번에는 드디어ㅠㅠ 게시판을 붙여보는 시간이다. 되도록이면 한방에 포스팅을 정리하고 싶어서 페이징 처리까지 끝낸 뒤에 글을 쓰려다보니 조금 시간이 걸렸다.참 신기하게도 분명 내가 예전에 써서 잘 돌아갔던 기능들인데 다시 이 프로젝트를 진행하면서 재활용하려니까 안 먹는 것들이 있다.물론 내가 능력이 부족해서 개발환경 세팅이라던가 뭐 그런데서 실수했겠지 ㅠㅠ 하면서도 짜증나는 이 기분덕분에 실무에서는 하루만에 개발 완료할 것을 엄청나게 질질 끌면서 개발했다 흑흑 1. 게시판용 테이블 생성 먼저 DB가 있어야 게시물을 읽고 쓸테니 DB 생성부터 CREATE TABLE `myhome`.`note` ( `sn` VARCHAR(45) NOT NU..
-
Spring + MyBatis + DB = 작은 웹사이트 - (5) 폴더 및 소스 분리개발/Web Project (1) - Spring MVC + java + DB 2018. 1. 17. 17:04
이제 진짜진짜진짜 본격적인 소스 구현을 시작하기에 앞서,폴더 구조를 구축해두고 로그인 소스를 home.jsp에서 빼내어 별도의 로그인 화면을 만들고 header.jsp 를 만들어서 붙여줄 예정이다. 진작에 처음부터 따로 만들었으면 몸이 편했겠으나 나는 어리석은 닝겐.... 1. 폴더 구조 만들기 css파일, js파일, 배경화면 등에 쓰일 이미지 파일을 담을 폴더들을 만들어줬다.위치는 scr > main > webapp > resources 아래에 뒀다. 화면들 역시 폴더를 만들어서 각 폴더 안에서 관리하겠다. src >main > webapp > WEB-INF > views 아래에 'admin', 'guest', 'note' 폴더를 각각 생성해줬다.로그인 실패화면인 fail.jsp, 화면의 헤더로 쓰일 ..