Box Model이란 ? HTML element가 웹 페이지에서 차지하는 공간입니다. 키보드의 F12를 누르게되면 개발자 도구를 펼칠 수 가 있는데, 가령 Google에 접속하여 로고 공간에 대해서 생각을 해보겠습니다. 아래와 같은 영역을 선택하여 Element -> "Computed"로 진입하면 네모박스 형태의 CSS를 볼 수 있습니다. Computed탭을 자세히 보겠습니다. Google 로고인 box는 파란색 공간(Content)으로 width : 272, height : 92로 구성 되어있습니다. Google 밑에 있는 키보드 모양의 박스를 살펴보겠습니다. 아래의 CSS표기처럼, 1) div태그의 Umvnrc className의 파란색공간(Content)은 23.993 px * 43.993 px의 ..
1. 사용자가 브라우저를 통해 웹사이트 접속 (www.naver.com) 2. DNS를 통해 HOST의 IP주소 파악 (웹브라우저가 DNS 에게 물어봄) 3. 브라우저와 서버가 3-Way Handshake과정을 거치는데 이는 데이터를 주고받기위한 랜덤한 번호표를 주고 받음 4. http request : 브라우저 -> 서버에게 데이터 요청 5. http response : 서버 -> 브라우저에게 데이터를 보내줌 6. 주고받은 데이터 출력 7. 브라우저는 w3c 명세에 따라 html과 css 파싱 (=해석하는 것을 파싱이라 함) -------------------- Contstruction ---------------------- 1. HTML 파싱 → DOM Tree 생성 2. 렌더링 엔진이 태그가 나오..
!important란? CSS 코드를 살펴보다보면, 속성값에 !important를 어쩌다 한번쯤은 목격했을 것이라 생각됩니다. !important는 선택자의 우선순위 중에서도 가장 최우선으로 적용하고 싶을 때 사용됩니다. 인라인 스타일, id selector, class selector보다도 최최최최최우선 순위로 CSS를 입히고 싶을 때 사용합니다. 사용 방법은 속성값에 !important만 붙여주면 됩니다. [ CSS 적용 우선순위 ] !important > id > class , 가상클래스 > 요소 [예제] id가 first인 h1 요소들이 있습니다. 어떤 CSS를 적용했든 h1의 첫번째 요소를 파란색으로 입히고자 합니다. begin CSS1 begin CSS2 begin CSS3 begin CSS4..
쿠버네티스란 컨테이너화로 이루어진 Application을 관리 (배포, 확장) 하는 오픈 소스 시스템입니다. 여기서 컨테이너는, 앱을 구동시키는데 역할을 할 수 있는 것이고, 예를들면 node js를 Docker 컨테이너에 만들 수 있습니다. 쿠버네티스의 장점 1. 지속적인 모니터링 여러개의 컨테이너들 중 하나의 컨테이너가 죽게 되더라도 자동으로 구동해주기때문에 모니터링을 지원해줍니다. 2. 단순화된 어플리케이션 배포 컨테이너화 된 애플리케이션을 인프라 구성없이 손쉽게 배포할 수 있다 3. 리소스 활용 배포할 애플리케이션이 요구하는 리소스 등을 고려해 배포될 노드를 자동으로 선택해 준다 [출처] 쿠버네티스, 이것만 알면 된다! - #1 쿠버네티스란 무엇일까? 쿠버네티스란 무엇일까요? 쿠버네티스란 컨테이너..