Optional

브라우저가 하는 일 1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 일 HTML 은 뼈대, CSS 는 꾸미기, Javascript 는 움직이게 하는 것 CSS 기초 안에 로 공간을 만들어 작성합니다. mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것 기억하기 배경관련 CSS background-color background-image background-size 사이즈 width height 폰트 font-size font-weight font-famliy color 간격 margin padding 자주 쓰이는 CSS 연습하기 [연습할 것들] h1, h5, background-image, background-size, background-position ..

제목 메시지 만들기 .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..