Optional

제목 메시지 만들기 .title { font-size: 32px; color: darkred; text-align: center; } 2021년 쥐띠의 운세는! 운세 메시지 만들기 .msg { color: darkred; text-align: center; font-size: 32px; line-height: 48px; } 마음을 알아주는 따뜻한 사람을 만날 것이야! 일이 잘 안 풀리는 것 같아도 연말에는 호탕하게 웃을 수 있을 지어니 너무 걱정하지 말고 하루하루 잘 나아가봐~ 버튼 만들기 버튼 배치하기 우선, div와 button 태그를 이용해서 버튼을 배치하기 btns 클래스 뒤로가기 공유하기 버튼을 가운데로 가져오기 내용물을 정리시키는 방법! display:flex .btns { display: f..

HTML과 CSS의 개념 HTML은 뼈대, CSS는 꾸미기 HTML은 구역과 텍스트를 나타내는 코드로, CSS는 잡은 구역을 꾸며주는 것으로 생각하기 HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다. head 안에 들어가는 대표적인 요소들: meta, script, link, title 등 CSS 기초 안에 로 공간을 만들어 작성합니다. div 태그에 클래스 라는 명찰을 붙여줄 수 있다. 로 감싼 곳에 .클래스{ ... } 로 지칭해주면 꾸밀 수 있다. 글씨 가운데 정렬 text-align: center; 만약에 .mytitle 안에 있는 h1 태그를 가리키고 싶다면? .mytitle > h1 { font-size: 56px; ..

@ManyToOne 어노테이션을 통해 다른 테이블에서 FK를 참조하여 사용할 수 있다. @ManyToOne은 단방향 다대일[N:1] 연관관계 매핑을 나타낸다. 테이블은 FK(외래 =키)를 통해서 두 테이블이 연관관계를 맺게 되는데, 객체 양방향 관계(테이블 둘 다 참조하는 경우) 외래 키를 관리하는 곳을 지정해야 한다. 다대일 (@ManyToOne)의 경우 외래키를 관리하는 곳이 N이므로, 연관관계의 주인이 된다. 내가 관리하는 Post 테이블에서는 user의 PK인 Id 값과, category의 키 값인 id 값이 필요하다. 이때 @ManyToOne(fetch = LAZY)를 각각 FK에 추가하고, @JoinColumn(name)을 이용해 연관관계 매핑이 가능하다. 그러면 어떻게 User와 Catego..

[한 것] 앱 개발 프로젝트에서 팀원 분들과 함께 만나 개발 및 협업 PostControllerTest / PostServiceTest 오류 고치기 API 명세서 Swagger UI를 통해서 작성해보기 [배운 것] Swagger UI를 스프링 내부에서 사용하면, 자동으로 API 명세서를 편하게 작성 할 수 있다. 프로젝트를 진행할 때 git pull을 빠르게 진행하여, 업데이트해야 함을 알게 되었다. Jpa에서 LocalDateTime 사용법과, SwaggerConfig 작성법을 알게 되었다. [느낀점] 비대면으로 프로젝트 하는 것보다, 팀원 분과 같이 대면으로 만나서 프로젝트를 해보니 더 잘 진행되는 것 같다. 프로젝트를 진행할 때 1인분을 하기 위해서 더 공부해야 겠다. API 명세서를 작성할 때, ..

타임리프에서 변수를 사용할 때는 변수 표현식을 사용한다. 변수 표현식 : ${...} SpringEL 다양한 표현식 사용 Object user.username : user의 username을 프로퍼티 접근 -> user.getUsername() user['username'] : 위와 같음 -> user.getUsername() user.getUsername() : -> user의 getUsername() 을 직접 호출 List users[0].username : -> List에서 첫 번째 회원을 찾고 username 프로퍼티 접근 list.get(0).getUsername() users[0]['username'] : 위와 같음 Map userMap['userA'].username : Map에서 userA..

타임리프는 기본적으로 HTML 테그의 속성에 기능을 정의해서 동작한다. HTML의 콘텐츠(content)에 데이터를 출력할 때는 th:text 를 사용하면 된다. HTML 콘텐츠 영역안에서 직접 데이터를 출력하고 싶으면 [[...]] 를 사용하면 된다. Escape HTML 문서는 같은 특수 문자를 기반으로 정의된다. 뷰 템플릿으로 HTML 화면을 생성할 때는 출력하는 데이터에 특수 문자가 있는 것을 주의해 사용해야 한다. 우리가 Spring 이런식의 출력을 원한다면 소스는 Spring! 의 출력으로 바뀐다. Unescape unescape를 하기 위해서 타임리프의 th:text -> th:utext [[...]] -> [(...)] 로 변경하면 된다. HTML 엔티티 웹 브라우저..