![]()
박스 모델(Box Model) 1. 박스 모델(Box Model) - 박스 형태의 콘텐츠 - 박스 모델의 구조 - 실제 콘텐츠 영역 - 박스와 콘텐츠 사이의 여백인 패딩(padding) - 박스의 테두리(border) (border은 따로 정리) - 여러 박스 모델 사이의 여백인 마진(margin) 2. width, height 속성 - 콘텐츠 영역의 크기 - 너비(width), 높이(height)를 설정하여 콘텐츠 영역의 크기를 정함 - , , auto로 설정 가능
![]()
● margin 속성 - 요소 주변 여백 설정 - margin-top: | | auto - margin-right: | | auto - margin-bottom: | | auto - margin-left: | | auto - margin: - margin: - 크기 : 너비 or 높이 값을 ps 나 cm 같은 수치로 지정 - 백분율 : 너비 or 높이 값을 %로 지정 - auto : display 속성에서 지정한 값에 맞게 자동으로 지정 ● padding 속성 - 콘텐츠 영역과 테두리 사이 여백 설정 - padding-top: | | auto - padding-right: | | auto - padding-bottom: | | auto - padding-left: | | auto - padding: - ..
![]()
한칸 띄우기 1. 한칸 띄우기 - 여러 칸을 띄우고 싶지만 html에서는 제한적임 - 그래서 를 사용 (공백을 의미) 안 녕 하 세 요
![]()
반응, 상태, 구조 선택자 1. 반응 선택자 - 사용자 반응으로 생성되는 특정한 상태를 선택함 - :active : 사용자가 마우스로 클릭한 태그 선택 - :hover : 사용자가 마우스 커서를 올린 태그 선택 반응 선택자 반응 선택자 2. 상태 선택자 - 입력 양식의 상태를 선택할 때 사용 - :checked : 체크 상태의 input 태그 선택 - :focus : 포커스를 맞춘 input 태그 선택 - :enabled : 사용 가능한 input 태그 선택 - :disabled : 사용 불가능한 input 태그 선택 사용 가능 사용 불가능 /* input 태그가 사용 가능일 때, */ input:enabled {background-color: white;} /* input 태그가 사용 불가능일 때, *..
![]()
텍스트 관련 태그 ※ abc 순으로 정렬 ● blockquote 태그 - 인용문 넣기 - ● br 태그 - 줄 바꿈 태그 - (닫힌 태그 필요 X) ● em 태그, i 태그 - 이탤릭체로 표시 - - ● hn 태그 - 제목 표시 태그 - - hn 태그는 크기 순으로 1~6까지 존재 ● hr 태그 - 수평 줄 넣기 - (닫힌 태그 필요 X) - 가로선이 삽입됨 ● mark 태그 - 형관헨 효과 내기 - - 선택된 부분의 배경색이 노란색으로 변함 ● p 태그 - 단락 생성 태그 - - p 태그는 줄바꿈 없이텍스트를 한 줄로 표시 ● pre 태그 - 입력하는 그대로 화면에 표시 - 소스의 형태를 그대로 브라우저 화면에 표시함 ● q 태그 - 인용내용 표시 - - blockquote는 블록레벨 태그이지만, q ..
![]()
● a 태그 - 하이퍼링크를 걸어주는 태그 - - _self : 링크 내용을 현재 페이지에 표시 (기본값) - _blank : 링크 내용을 새 창 or 새 탭에 표시 - _parent : 프레임 사용 시, 링크 내용을 부모 페이지에 표시 - _top : 프레임 사용 시, 링크 내용을 전체 화면에 표시 - 프레임명 : 직접 프레임명을 명시해서 사용 ● img 태그 - 이미지를 삽입하는 태그 - 닫는 태그는 없음 - - src=" " : 이미지 파일 경로 지정 - alt=" " : 이미지를 설명해 주는 대체 텍스트 (이미지가 나오지 않을 경우를 대비) - width, height : 이미지 크기 조정 (CSS로 대체 가능) ※ , 태그로 이미지에 설명 글 붙이기 가능
![]()
● display 속성 - 어떻게 보여줄 지 결정 - display: block | inline | inline-block | none; - block : 블록 박스 - inline : 인라인 박스 - inline-block : block과 inline의 중간 형태 - none : 아무것도 보이지 않음
![]()
nginx 컨테이너 실행1. nginx 컨테이너 실행 - docker pull nginx : nginx 이미지 설치 - docker run nginx - 문제점 : 제어권을 nginx가 잡고 안 놔줌 - 외부에서 접근할 수 없음 → 원래 도커 컨테이너는 독립적인 공간에서 실행되기 때문에 접근이 안되는 것이 정상 - docker run -d nginx - detach 옵션 : 프로세스를 백그라우드로 돌리고 제어권 유지 - 여전히 외부에서 접근할 방법이 없음 - docker run -d -p 8031:80 nginx - 포트포워딩, 외부에서 접근 가능 (http://(enp0s3에서 inet 주소):8031) ※ enp0s3의 inet 주소는 ip addr..
![]()
컨테이너 관련 명령어 1. 컨테이너 관련 명령어 - docker ps : 조회 - 현재 실행중인 컨테이너 목록 - 전체조회 : docker ps -a (종료된 컨테이너도 표시) ※ 컨테이너 ID와 이름은 고유함 - 아래 명령어 3개는 전부 같은 의미 - docker logs 7daa850a1d69 (CONTAINER ID) - docker logs 7d (CONTAINER ID) - docker logs intelligent_faraday (NAME)
![]()
도커 명령어1. 도커 이미지 관련 기본 명령어 - 도커 명령어 공식 문서 - 도커 허브 : 여러 이미지들을 볼 수 있음 - 여기서 이미지는 컨테이너를 생성하는 데 필요한 파일 시스템과 설정을 정의한 템플릿을 뜻함 - docker pull 이미지명 : 다운로드 - docker rmi -f 이미지명 : 삭제 - docker images : 목록
![]()
도커 1. 도커의 목적 - 프로그램은 운영체제 위에서 돌아감 - 운영체제는 커널 + 패키지로 이루어져 있음 ※ 커널 : OS의 기본 기능을 실행하는 부분 - ex) 응용프로그램 or 주변장치 or 조작 감시, 디스크나 메모리 등을 자원 배분, 응용 프로그램의 실행 등 - 이 패키지 구성이 어떠냐에 따라 배포판이 달라짐 - 배포판들은 커널을 공유 - 운영체제 위에서 돌아가는 프로그램은 운영체제의 패키지 or 외부 패키지를 이용하여 실행 - 프로그램의 실행이 운영체제와 관련 패키지에 종속(운영체제 or 패키지가 바뀌면 잘 안될 수 있음) - 일반적으로 서로 다른 한경에서 애플리케이션이 구축됨 - 개발은 대부분 mac, windows에서 이루어지며, 완성된 어플리케이션을 서버에 배포하는 방식 - 이 과정에서 ..
![]()
※ abc 순으로 정렬 ● font-size - 글자 크기 조절 - font-size: medium | xx-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit - medium : 기본 글자 크기 - xx-small, x-small, small, x-large, xx-large, : medium의 상대적인 크기 - smaller, larger : 부요 요소의 글자 크기에 대한 상대적인 크기 - length : px, %, em, rem 등으로 크기 설정 - initial : 기본 값으로 설정 - inherit : 부모 요소의 속성 값을 상속 받음 ● font-weight - 글자의 두께 조절 -..
![]()
엘리먼트의 부모, 자식, 형제관계 1. 엘리먼트의 부모, 자식, 형제관계 - 부모 엘리먼트 : 나를 감싸는 엘리먼트 - 자식 엘리먼트 : 내가 감싸는 엘리먼트 (div > a 처럼 표시) - 후손 엘리먼트 : 부모를 기준으로 자식의 자식인 엘리먼트 (div a 처럼 표시) - 형제 엘리먼트 : 같은 부모를 둔 엘리먼트 2. 예시 html에 다음과 같이 있다고 가정 1 2 1 2 3 - 여기서 div가 부모 엘리먼트이며 h1, h2, ul이 자식 엘리먼트 - h1, h2, ul은 형제 엘리먼트 - li는 ul의 자식 엘리먼트 - css를 div에 적용하면 자식 엘리먼트 또한 적용되며, css를 h2에 적용하면 다른 h1과 ul는 적용되지 않음
![]()
display 속성 정리 1. display 속성 (CSS 사전 바로가기) - 웹 페이지의 레이아웃(Layout)을 결정하는 CSS의 중요한 속성 중 하나 - inline-bolck or inline, block, none이 있음 종류 inline-block, inline block none 너비 너비가 설정되어 있지 않다면, 최소한으로 줄어듦 너비가 설정되어 있지 않다면, 최대한으로 넓어짐 없어짐 높이 높이가 설정되어 있지 않다면, 최소한으로 줄어듦 높이가 설정되어 있지 않다면, 최소한으로 줄어듦 없어짐 line 사용 한 줄에 최대한 여러개가 나옴 한 줄을 무조건 혼자 사용 정렬 부모의 text-align에 의해서 정렬 스스로 margin-left, margin-right를 사용해서 정렬 ※ 예외 사항..
![]()
PHP의 DB연동 1. PHP의 DB연동 - 관리자 로그인 - mysql -u root -p1234 - site1 DB 생성 (CREATE DATABASE site1;) - site1 계정 생성과 동시에 해당 계정에 site1안에 들어있는 모든 테이블에 관한 권한을 부여 - GRANT ALL PRIVILEGES ON site1.* TO site1@`%` IDENTIFIED BY 'korea1234'; - DB 생성 및 세팅 (SQLyog에 작성) DROP DATABASE IF EXISTS site1; CREATE DATABASE site1; use site1; CREATE TABLE article ( id INT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT, reg_d..
