실습강의
컴퓨터의 구조
CPU(Central Processing Unit) 중앙 처리 장치 - 작업자(복잡한 연산일수록 좋은 CPU) RAM(Random Access Memory) 주기억 장치- 작업 테이블(다다익선) STORAGE 보조 기억장치 - 주기억장치(Main Memory)의 용량 부족을 보완하기 위해 사용하는 외부 기억 장치. 주기억장치보다 느리지만 휘발성이 없어 드라이브에 저장된 정보는 컴퓨터의 전원이 꺼진 이후에도 유지된다. C드라이브,D드라이브가 휘발된다...?어질어질해짐 동시에 디스코드,크롬,카톡을 실행하는 것이 아니라 순차적으로 한개씩 하는 것이다.지금 이 순간도!반응형 웹
반응형 웹
하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법. 같은 네이버 사이트라도 pc에서 접속하는 것과 모바일에서 접속하는 화면은 다르다.
미디어 쿼리
반응형 웹을 구현하기 위해 사용하는 CSS기술.CSS3부터 지원된다.
미디어 쿼리 사용법
@media 미디어의 타입 (조건문){
적용하고 싶은 CSS 속성들
background-color:green; 등 CSS 문법에 맞춰 적으면 됨
}@media screen=미디어 타입 and (max-width: 900px) {
body {background-color: green;}}미디어 타입에 어떤 값이 오는지 꼭 외울 필요는 없다. 따로 입력하지 않으면 all로 적용
// 가로가 900px 이상인 화면에 적용
@media (min-width: 900px) { ... }
// 가로가 700px 이하인 화면에 적용
@media (max-width: 700px) { ... }
// 가로가 300px 이상이고 1200px 이하인 화면에 적용, and를 활용해 한번에 두 가지 조건을 적용할 수 있다.
@media (min-width: 300px) and (max-width:1200px){ ... }min-width: 모바일 우선, 작은 가로폭부터 큰 가로폭 순서로 만듬
ex) min-width: 900px : 900px 이상의 사이즈인 화면에 적용
max-width: 데스크탑PC 우선, 큰 가로폭부터 작은 가로폭 순서로 만듬
ex)max-width: 1200px: 1200px 이하의 사이즈인 화면에 적용
break point
크게 의미가 없다고 해서 그냥 지나가기로~ 나중에 필요하면 그때 공부하기.
뷰포트 Viewport
뷰포트(Viewport)는 웹페이지가 사용자에게 보여지는 영역을 말한다.
meta태그: html5에서 해당 문서에 대한 정보인 메타데이터를 정의할 때 사용된다. head 태그 내의 코드들이 대부분 그렇듯이, 웹페이지에 나타나지 않는다. charset,content,name 등의 속성을 갖는다.
설명이 잘 되어 있어서 긁어옴
<meta name="viewport" content="width=device-width, initial-scale=1.0">위 코드는 메타데이터의 이름을 viewport로 하고, 너비는 웹사이트를 여는 장치의 너비, 처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용하겠다는 의미이다.
CSS Transition
transition:특정 조건 하에 애니메이션이 동작되는 과정을 보여주고자 할 때 사용.
transition-property: transition을 적용할 CSS속성. 여러개 지정시 width,height; 기본값은 all이다.
transition-delay: transition이 실제로 시작할 때까지의 지연시간
transition-timing-function: transition의 진행 속도
transition-duration:transition이 지속되는 시간
Transition의 조건
:hover
사용자의 마우스 커서가 태그 위에 올라가 있는 상태
GIT
깃=형상관리도구
변경 관리: 변경한 사항에 대한 관리, 어플리케이션 업데이트 사항같은거
버전 관리: 레포트_최종, 레포트-최종-진짜,레포트-최종-진짜-마지막... 대신 ver1.01,ver1.02,ver1.03...의 식으로 변경사항을 버전이라는 개념으로 관리
형상관리: 이전 버전의 코드를 확인해 볼수도 있고, 누가 수정을 했는지 추적할 수도 있음
윈도우,맥-GUI
리눅스,깃-CLI(Commad line interface)
CLI:가상 터미널 또는 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식
shell:CLI로 명령을 받는 프로그램
외울 필요는 없음
깃은 CLI이기 때문에 add,commit 등의 명령어로 사용
git init:새 git 프로젝트 생성
add/commit:수정작업이 끝났을 때 마침을 알리는 작업, 어떤 코드를 수정했고, 어떤 코드는 올리지 않겠음 등을 정리함,실제 업로드는 안 된 것/push: commit한 내용을 git저장소에 전송
clone: 프로젝트를 처음 시작할 때 복사하기 위해 사옴
pull: 최신 버전과 동기화
ls -al:현재 디렉토리의 파일 확인
git reset --hard 바꿀commit의 ID값 입력
git다시 정리
1,2,3번 버전 중
문제 풀때 배운 것
#main article.first_article
여러개 선택자 사용시 id선택자 뒤에는 띄고 태그와 클래스는 연결하는 것 같다.
