이것 저것 공부 (23) 썸네일형 리스트형 SELECT 사용하여 원하는 정보 가져오기 AS, WHERE, ORDER BY, LIMIT 을 사용하여 원하는 정보 가져오기 WHERE은 조건을 통해 원하는 행만 뽑아서 볼 수 있게 하는 기능이다. 원하는 갯수만큼 가져올 때는 LIMIT를 사용한다. 구글이나 게시판의 목록 번호에서 사용 인자가 하나라면 가져올 갯수이지만 인자가 두개라면 건너뛸 갯수와 가져올 갯수를 의미한다. ORDER BY의경우 디폴트 값은 오름차순이다. ASC는 오름차순, DESC는 내림차순이다. AS, WHERE, ORDER BY, LIMIT을 활용하여 SELECT문 짜기 멕시코나 런던에 사는 사람의 정보를 0번 이후부터 탐색하여 ID 오름차순으로 10개 가져오기 테이블의 컬럼이 아닌 값도 선택할 수 있다. MVC와 템플릿 엔진 MVC는 model view controller view는 말 그대로 화면을 그리는 데에 모든 것을 집중하는 것이다. view와 controller로 구분하게 된 이유는 여러 개발자가 협업하다보니 구분하는 것이 기본이 되었다. 컨트롤러 클래스안에서 매핑되어 있으면 모델의 키와 값을 넘겨준다. viewResolver가 화면과 관련된 동작을 하고 view를 찾아 템플릿 엔진을 연결한다. 템플릿 폴더에서 html 파일을 찾아서 타입리프의 템플릿 엔진에 처리를 넘겨 렌더링해서 변환한 HTML을 웹브라우저에 반환 정적 컨텐츠 정적 컨텐츠는 파일 그대로 사용자에게 전달해주는 것이고 MVC와 템플릿 엔진은 HTML을 동적으로 바꿔서 내려준다. 웹 브라우저에서 주소를 치면 먼저 내장 톰캣 서버에서 요청을 받는다. 그것을 스프링에서 넘겨서 스프링 컨테이너에서 컨트롤러에 해당 컨트롤러를 먼저 찾음. 그러나 관련 컨트롤러가 없다면 리소스 안의 HTML을 찾아서 그것을 그대로 반환한다. 클라우드 AWS 네트워크가 모든 ip 자산의 기초가 된다. 간단하게 땅을 사서 건물을 짓는 것에 비유 AWS 가입 : 땅을 계약 AWS 가입 상태는 public한 상태이다. (public cloud) VPC(virtual private cloud) : 건물 subnet : 호실 서버(EC2) : 책상 VPC IP 대역대 : 빌라 주소 subnet IP 대역대 : 상세 주소 인터넷 : 바깥 세상 인터넷 게이트웨이 : 현관문 routing / router / routing table : 도어락 security group : 책상 잠금 3-tier 트랜젝션과 트래픽은 사이즈가 아니라 횟수를 세는 것이다. 서버를 직접 구매 -> 임대(IDC) -> 클라우드 3-tier Client Tier Web server -tomcat nginx - html, css Application Tier web application server [WAS] -java, python, c++, kotlin Data Tier DataBase DB 요소의 가운데 정렬 요소의 가운데 정렬 margin : auto div 태그는 block 레벨이기 때문에 콘텐츠 영역 외에 나머지 부분이 모두 마진으로 들어간다. 그렇기에 text-align : center로는 컨텐츠를 가운데 정렬할 수 없다. 그렇다면 이러한 경우에는 어떻게 해야할까? 이 경우에는 오른쪽으로 치우쳐져 있는 margin 값을 통해 가운데 정렬을 할 수 있다. margin : auto를 사용하면 먹히지 않던 정렬이 된다. CSS .box { width: 200px; height: 100px; background-color: red; } .inner { width: 100px; height: 100px; background-color: blue; } HTML margin: auto text-align:cente.. Position Sticky VS Fixed Sticky Position이 sticky인 요소로 평소에는 static으로 처리되지만 가장 가까운, 스크롤 되는 조상의 컨테이너 블록을 기준으로 자신이 지정한 임계값을 넘으면 fixed 처럼 화면에 고정된다. 임계값을 넣지 않으면 static과 다를 바 없다. 그렇기에 top, bottom, right, left 중 하나는 꼭 입력해주어야 한다. static처럼 처리되다가 top: 20px에 도달하는 순간 fixed처럼 화면에 고정되어 있는 것을 확인할 수 있다. 그러나 전체 페이지에서 fixed 처럼 되는 것은 아니고 조상 컨테이너의 내용이 모두 스크롤되어 화면에서 사라진다면 sticky 요소도 화면 밖으로 나간다. Fixed Position이 Fixed인 요소로 absolute와 비슷하지만, 컨테이.. Position Relative vs Absolute CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정한다. static 요소를 일반적인 문서 흐름에 따라 배치한다. 기본값이며, top, right, left, bottom, z-index 속성이 아무런 영향을 주지 못한다. relative 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left 값에 따라 적용된다. 이 요소는 다른 요소에 영향을 주지 않는다. 따라서 차지하는 공간은 static일 때와 같다. absolute 요소를 일반적인 문서 흐름에서 제거하고 가장 가까운 조상 요소에 상대적으로 배치한다. 하지만 조상 중에 위치 지정 요소가 없다면(이 경우 부모 요소가 absolute 이든 relative 이든 상관은 없다) bo.. Box-sizing box-sizing CSS 속성은 요소의 너비와 높이를 계산하는 방법을 지정한다. 테두리나 패딩이 있다면 이것을 고려하여 크기를 설정하여야 합니다. 그럴 때 box-sizing 속성을 사용합니다. content-box와 border-box가 있다. content-box는 CSS 표준이 정의한 초기 기본 값이고 width와 height 속성이 콘텐츠 영역만 포함하고 콘텐츠 영역에 테두리와 패딩이 포함되지 않는다. 그러나 border-box의 경우 패딩과 테두리를 추가되면 콘텐츠 영역이 줄어든다 그러나 마진은 포함하지 않는다.. Content box Border box 위의 코드는 MDN 예제이다. https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing box-.. 2일차 복습 텍스트 관련 태그 사용자에게 정보를 전달하기 가장 쉬운 방법은 텍스트를 이용하는 것이다. 대부분의 사이트에서 텍스트를 사용한다. HMTL은 텍스트를 사용자에게 전달하기 용이하도록 여러 태그를 제공한다. 텍스트 관련 태그 - 제목 제목은 다른 텍스트보다 크고 진하게 표시 자주 사용하는 스타일은 미리 태그로 정의한 것이다. h1 ~h6 순서로 크기가 작아진다. 종료태그도 있어야 한다. 텍스트 관련 태그 - 단락 웹 문서에서 단락 구분을 위해 사용 되는 태그 편집기에서 엔터키를 입력하여 줄을 바꾸더라도 웹 브라우저에서는 줄바꿈이 되지 않음 단, 한 줄로 표시할 수 없는 경우 자동으로 줄바꿈 태그 수평선을 그리는 태그로 문단이나 단락을 구분하기 위해 사용 종료 태그가 없다. 태그 HTML의 단락은 텍스트 앞뒤로.. 이전 1 2 3 다음
