Study (11) 썸네일형 리스트형 [NGINX HTTP SERVER] 2장 기본 엔진엑스 구성 구성 파일 구문 지시어 기본적으로 엔진엑스는 하나의 기본 구성 파일을 사용하며, 기본 경로는 /usr/local/nginx/conf/nginx.conf이다. 엔진엑스 구성 파일은 지시어의 목록으로 이뤄져 있고, 지시어에 정의한 값으로 애플리케이션의 전체 동작을 정의한다. user 지시어: 문자열 두 개를 받는다. 첫째는 엔진엑스가 작업자 프로세스를 실행하기 위한 사용자 계정, 둘째는 사용자 그룹. worker_processes 지시어: 작업자 프로세스 동작 개수를 설정한다. include 지시어: 지정된 파일을 인클루드시킨다. 엔진엑스는 모듈 방식으로 동작하며, 각 모듈은 각각의 지시어를 갖고 있다. 대부분의 기본 지시어는 엔진엑스 핵심 모듈을 갖고 있다. 지시어 블록 중첩된 블록 ex) http 블록은.. [NGINX HTTP SERVER] 1장 엔진엑스 설치 1장 엔진엑스 설치 1장에서 다루는 내용은 다음과 같다. 엔진엑스 실행 파일을 컴파일하는데 필요한 사전 구성 요소의 다운로드와 설치 엔진엑스 소스코드 다운로드 엔진엑스 컴파일 옵션 구성 init 스크립트로 애플리케이션 제어 시작할 때 자동으로 엔진엑스를 구동하도록 시스템 구성 엔진엑스 플러스 플랫폼이 제공하는 기능 개요 확인 사전 구성 요소 설치 GCC: 엔진엑스는 C로 작성된 프로그램이기 때문에 GCC 같은 컴파일러 도구를 먼저 OS에 설치해야한다. PCRE 라이브러리: 엔진엑스를 컴파일하는데 필요하다. pcre와 pcre-devel라는 두 가지 패키지를 설치해야 한다. zlib 라이브러리: 엔진엑스의 다양한 모듈에서 gzip 압축을 하는 데 필요하다. zlib와 zlib-devel이 필요하다. Ope.. [동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - Javascript 자바스크립트와 첫 만남 자바스크립트로 무엇을 할까 다양한 라이브러리를 사용할 수 있다. D3.js - 정보시각화 라이브러리. tensorflow.js - 머신러닝 라이브러리. React, Angular, Vue 서버를 구성하고 서버용 프로그램을 만들 수 있다. node.js - 프런트엔드 개발에 사용하던 자바스크립트를 백엔드 개발에서 사용할 수 있게 만든 프레임워크. 간단한 입출력 방법 alert, confirm, prompt document.write console.log 자바스크립트 스타일 가이드 자바스크립트 소스를 작성할 때 지켜야 할 기본 규칙 코드를 보기 좋게 들여쓴다. Tab 키나 스페이스바를 눌러 2칸이나 4칸을 들여씀 최근에는 공백 2칸 들여쓰기를 많이 사용함 세미콜론으로 문장을 구분한다... [동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - 반응형 웹과 미디어 쿼리 뷰포트 뷰포트 지정하기 [동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - 트랜지션과 애니메이션 변형(transform, 트랜스폼) 웹 요소의 위치나 크기를 바꿈으로써 시각적인 효과를 만드는 것 2차원 변형 x축, y축 좌우, 위아래로만 변형이 일어나면 2차원 변형 3차원 변형 x축, y축, z축 앞, 뒤로 이동 추가. 원근감이 추가됨. 보는 사람 쪽으로 다가올수록 값이 더 커짐 transform 속성 뒤에 원하는 함수를 추가해주면 됨. transform: translateX(50px); /* x축(가로 방향)으로 50px 이동 */ transform: translateY(50px); /* y축(세로 방향)으로 50px 이동 */ transform: translate(10px, 20px); /* x축(가로 방향)으로 10px, y축(세로 방향)으로 20px 이동 */ transform: scaleX.. [동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - CSS 고급 선택자 연결 선택자 하위 선택자: container 안에 있는 모든 p 태그 #container p 자식 선택자: container의 자식 요소인 p태그에만 적용 #container > p #container > div > p 형제 선택자: h1 다음에 오는 형제 요소들 중 모든 p태그에 적용 h1 ~ p 인접 형제 선택자: 바로 다음에 있는 형제 p태그에만 적용 h1 + p 속성 선택자 href 속성이 있는 a태그에만 적용 li a[href] href 값이 #인 a태그에만 적용 li a[href="#"] { cursor:default; } 가상 클래스와 가상 요소 가상 클래스 링크에 사용 가능한 가상 클래스 :link :visited - 방문했던 링크 :hover - 마우스를 올렸을 경우 :active - 마.. [동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - 이미지와 그라데이션 효과로 배경 꾸미기 Background background-color: 배경색 지정. 색상명, RGB, HSL, 16진수 모두 사용 가능. background-image: 배경 이미지 적용. 웹 브라우저에 가득 차도록 가로 세로로 계속 반복해서 보여줌. ex) url('image/bg1.jpg'); background-repeat: 반복 여부 지정. ex) no-repeat, repeat-x, repeat-y, repeat; background-position: 이미지 위치 변경. ex) bottom, center... background-attachment: 고정시킬 때 자주 사용 ex) fixed background: 위에 4가지 속성을 묶어서 표현 가능. 속성 값의 순서는 상관없음. background: url('im.. [동영상 강의] Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - 레이아웃을 구성하는 CSS 박스 모델 블록 레벨 요소와 인라인 레벨 요소 블록 레벨 요소 한 줄을 다 차지 p 태그 인라인 레벨 요소 필요한 영역만큼만 차지 span 태그 박스 모델 실제 콘텐츠 영역, 패딩, 박스의 테두리, 마진의 요소로 구성됨. 개발자 도구의 computed 탭에서 확인 가능 박스 모델의 4개의 방향 값을 한 번에 지정할 때는 방향 순서를 지켜야 함(top -> right -> bottom -> left) 콘텐츠 영역 실제 내용이 들어가는 영역 크기는 width와 height로 지정 box-sizing 속성 박스 모델의 전체 너비 값은 콘텐츠 영역만이 아니라 패딩, 테두리 너비에 의해 영향을 받게 됨 그래서 나온 속성 border-box: 테두리와 패딩을 포함해서 너비를 정해줌 계산이 더 편리해짐 테두리 스타일 지정하기 .. 이전 1 2 다음
