밤토리
728x90
article thumbnail
[CSS] Box Model (Content, Padding, Border, Magin)
Frontend/CSS 2022. 10. 26. 22:48

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의 ..

브라우저 동작 순서
IT기술용어/CS지식 2022. 10. 25. 21:23

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. 렌더링 엔진이 태그가 나오..

article thumbnail
[CSS] !important 란?
Frontend/CSS 2022. 10. 25. 20:54

!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..

[쿠버네티스] Kubernetes란?
IT기술용어/CS지식 2022. 10. 20. 22:02

쿠버네티스란 컨테이너화로 이루어진 Application을 관리 (배포, 확장) 하는 오픈 소스 시스템입니다. 여기서 컨테이너는, 앱을 구동시키는데 역할을 할 수 있는 것이고, 예를들면 node js를 Docker 컨테이너에 만들 수 있습니다. 쿠버네티스의 장점 1. 지속적인 모니터링 여러개의 컨테이너들 중 하나의 컨테이너가 죽게 되더라도 자동으로 구동해주기때문에 모니터링을 지원해줍니다. 2. 단순화된 어플리케이션 배포 컨테이너화 된 애플리케이션을 인프라 구성없이 손쉽게 배포할 수 있다 3. 리소스 활용 배포할 애플리케이션이 요구하는 리소스 등을 고려해 배포될 노드를 자동으로 선택해 준다 [출처] 쿠버네티스, 이것만 알면 된다! - #1 쿠버네티스란 무엇일까? 쿠버네티스란 무엇일까요? 쿠버네티스란 컨테이너..

728x90