부트스트랩은 외부 CSS 레이아웃 시스템 중 하나입니다. 직접 레이아웃을 만들 필요없이 외부에서 만들어진 시스템을 가져와서 적용하기만 하면 자기가 원하는 레이아웃으로 구성할 수 있습니다. Bootstrap 사이트에 들어가면 다양한 예시 CSS 레이아웃들을 확인할 수 있고 적용할 수 있습니다. Bootstrap 장단점 장점 - 직접 만들 필요없이 빠르게 적용하여 만들 수 있습니다. - 고려해야 될 CSS 내용들을 머리 아프게 직접 생각할 필요가 없습니다. 단점 - 부트스트랩에 사용되는 대부분의 html 태그에는 class 속성이나 사용되는 css스타일에 너저분하게 많은 값들이 들어가 있을 수 있습니다. 이는 어떤 컨텐츠에 어떤 스타일이 적용되야 되는지 일일히 파악하기에 어려울 수 있다는 단점이 있습니다. ..

이번에는 만든 Grid에 아이템을 어떻게 배치해야 하는지 그리고 원하는 영역에 어떻게 배치해야 하는지에 대해 알아보겠습니다. 그 전에 다시 한번 Grid를 사용하기 위한 기본적인 용어들을 정리해보겠습니다. 1. Grid를 적용할 컨텐츠들을 전체적으로 담는 영역을 Grid 컨테이너라고 합니다. 2. 컨테이너 내부에 존재하는 컨텐츠들을 Grid 아이템이라고 합니다. 3. Grid를 생성하게 되면 안보이지만 아이템들을 배치하기 위한 격자선이 존재합니다. 이것을 트랙이라고 말합니다. 트랙에는 row트랙, column트랙이 있습니다. 각각 행과 열의 격자선을 뜻합니다. 4. row트랙과 column 트랙이 교차한 영역을 Grid 셀이라고 합니다. 이 Grid 셀에 컨텐츠들을 배치하게 됩니다. Grid 아이템을 G..

Grid 로 레이아웃을 구성했다면 이제 해당 Grid의 Size를 지정해주는 CSS 옵션들에 대해 알아보고 적용해보겠습니다. Size를 지정해줄 때 px을 사용하여 고정적인 크기를 가지게 할 수도 있으며, rem 과 같은 크기 키워드를 적용해 줄 수 있습니다. grid-template index.html 1 2 3 4 style.css .grid-container{ display: grid; grid-template: 100px 200px / 400px 800px; } .grid-container > *{ border: 1px black solid; } 앞서 grid는 행과 열에 대한 크기와 수를 지정해줄 때 grid-template-rows, grid-template-columns 옵션을 사용해주었는데..

display: flex 를 사용하면 같은 축에있는 아이템들에 한해 반응형 CSS를 적용시켜줄 수 있습니다. 하지만 여러 가변적인 크기를 가진 요소들이 복합적으로 조합되어 보여져야 될 경우에는 일반적으로 grid CSS옵션을 사용합니다. 이런식으로 복합적인 형태의 레이아웃들로 구성되야 한다면 grid를 사용하는 것이 좋습니다. Flex 와 Grid의 차이점 Flex 1차원적인 선을 따라 컨텐츠들을 정렬하는 도구라고 볼 수 있습니다. 보편적인 수평 flex 형식은 아이템들을 배치하고 페이지에서 어떻게 정렬할지 정의하는 데에 아주 쉽게 사용할 수 있습니다. Grid 2차원적인 형태로 컨텐츠들을 레이아웃 하는 도구라고 볼 수 있습니다. 위의 이미지처럼 오른쪽 사이드에 바를 추가할 수도 있듯이 여러 형태의 2차..

Pod 에서 데이터베이스에 접근하는 방법에 대해서 알아보겠습니다. 이는 단지 데이터베이스에 접근하기 위한 방법이 아니라 여러 다양한 서비스 컨테이너들과 통신하기 위한 공통적인 방법 중 하나입니다. vi {데이터베이스 연결 설정 yml 파일 명} 명령어를 입력하여 연결할 데이터베이스 설정값들이 저장되어있는 yml 파일을 만들어줍니다. 해당 파일 내부에 MySQL 데이터베이스 image를 불러와 Pod 로 래핑하고 그 Pod를 Service로 로컬 (port 번호 3306) 연결해주었습니다. MySQL 버전은 5버전으로 했습니다. 최신버전을 적용하려면 latest 로 입력하면 됩니다. 해당 설정들은 Docker의 yml 양식을 가져와 값을 기입해주었습니다. 이렇게 Pod 부터 Service 까지 한 파일에 ..

독립적인 컨테이너 Service들끼리 연결할 때 사용되는 쿠버네티스 DNS 서비스는 어디서 실행되고 있는지 get all 명령어를 입력해도 확인할 수 없습니다. 이를 알려면 쿠버네티스에서 네임 스페이스를 먼저 알 필요가 있습니다. 네임 스페이스는 쿠버네티스의 리소스를 별도의 영역으로 분할하는 방법입니다. 예를 들어, 위의 이미지처럼 수천 개의 리소스가 있는 시스템에서 작업하고 있다고 가정할 때 그곳에는 수천 개의 Pod 와 수천 개의 Service가 있을 것입니다. 그리고 Deployment, Replica Set 등과 같은 리소스들도 마찬가지로 수천 개가 있을 것입니다. 이러한 시스템에서 작업하는 게 쉽지는 않을 것입니다. 이 때 네임 스페이스가 필요합니다. 이 Pod 와 Service들을 네임 스페이..