LGHV3기_공부정리
1.LGHV_3기_웹 개발 기초 정리_HTML/CSS(1)
사용자가 방문하고 싶은 특정 사이트를 사용할 수 있도록 만드는 모든 과정을 뜻한다.정적 사이트 (static site)웹 브라우저 화면에 보이는 겉모습을 만드는 것동적 사이트 (dynamic site)웹 사이트에서 사용자에게 제공할 기능과 서비스까지 모두 담을 수 있음
2.LGHV_3기_웹 개발 환경 구축_HTML/CSS(2)
수업시간에 실습을 위한 웹 브라우저는 크롬 브라우저를 사용한다. 주로 크롬 브라우저를 사용한다!!!웹 편집기는 Visual Studio Code, 즉 VS Code를 사용한다!!무료 소프트웨어 Windows, Mac, Linux 플랫폼에 구애받지 않음 Python
3.LGHV_3기_HTML 기본 문서 만들기_HTML/CSS(3)
H T M LHyper Text Markup LangugeHyper Text문서를 서로 연결해주는 링크, 즉 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어이다.Mark Up텍스트뿐만 아니라 이미
4.LGHV_3기_웹 문서에 다양한 내용 입력하기_HTML/CSS(4.1)
기본형 : <hn> 제목 </hn>제목을 표시할 때 사용하는 태그크기h1 > h2 > h3 > h4 > h5 > h6기본형 : <p> 텍스트 </p>입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어짐기본형 : <br>줄을 바꿀 위치에
5.LGHV_3기_웹 문서에 다양한 내용 입력하기_HTML/CSS(4.2)
Chap 04-2. 웹 문서에 다양한 내용 입력하기 웹 문서에 다양한 내용 입력하기 1. 이미지 삽입하기 `` 태그 웹 문서에 이미지를 삽입할 때 사용 기본형 img 태그의 src 속성 웹 문서 파일의 위치를 기준으로 이미지 경로 지정 **`HTML과 이미지
6.LGHV_3기_입력 양식 작성하기_HTML/CSS(5.1)
사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼(form)폼과 관련된 대부분의 작업들은 정보를 저장하거나 검색하거나 수정하는 일들 이런 작업은 모두 데이터베이스를 기반으로 함 아이디를 입력하는 텍스트 필드나 버튼 같은 폼의 형태를 만드는 것은 HTML
7.LGHV_3기_입력 양식 작성하기_HTML/CSS(5.2)
페이지를 불러오자마자 원하는 폼 요소에 마우스 커서 표시입력란에 표시하는 힌트로, 필드를 클릭하면 사라짐코드 예시 ) - autofocus와 placeholder 속성 사용하기 ✔ 결과내용을 보기만 하고 입력하지 못하게 함. (수정 불가함!)필수 필드 체크필수 필드는
8.LGHV_3기_CSS 기본_HTML/CSS(6)
HTML로는 웹 사이트의 내용을 나열하고, CSS로는 웹 문서의 디자인을 구성! 스타일을 사용하면 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다.반응형 웹 디자인반응형 웹 디자인 예시 )PC화면모바일 화면
9.LGHV_3기_텍스트를 표현하는 다양한 스타일_HTML/CSS(7.1)
font-family : 웹 문서에 사용할 글꼴 지정 (대체 글꼴 설정 가능)<body> 태그를 비롯해 <p> 태그나 <hn> 태그처럼 텍스트를 사용하는 요소들에서 사용지정한 글꼴이 없을 경우에 대비해 두 번째, 세 번째 글꼴까지 지정.둘 이상의 글꼴
10.LGHV_3기_텍스트를 표현하는 다양한 스타일_HTML/CSS(7.2)
Chap 07-2 텍스트를 표현하는 다양한 스타일 텍스트를 표현하는 다양한 스타일 4. 목록 스타일 list-style-type 속성 순서 없는 목록의 불릿이나 순서 목록의 숫자를 바꾸는 속성 | 종류 | 설명
11.LGHV_3기_레이아웃을 구성하는 CSS 박스 모델_HTML/CSS(8.1)
Chap 07-2 텍스트를 표현하는 다양한 스타일 텍스트를 표현하는 다양한 스타일 4. 목록 스타일 list-style-type 속성 순서 없는 목록의 불릿이나 순서 목록의 숫자를 바꾸는 속성 | 종류 | 설명
12.LGHV_3기_레이아웃을 구성하는 CSS 박스 모델_HTML/CSS(8.2)
현재 요소 주변의 여백마진을 이용하면 요소와 요소 간의 간격 조절 가능기본형 : margin : <크기> | <백분율> | auto코드 예시 )결과 )배치할 요소의 너빗값이 정해져 있어야 함.margin-left와 margin-right의 속성값을 auto로
13.LGHV_3기_이미지와 그라데이션 효과로 배경 꾸미기_HTML/CSS(9.1)
웹 문서의 요소에 배경색 지정16진수나 rgb 값, rgba 값 또는 색상 이름 사용코드 예시 )결과 )배경을 어디까지 적용할지 지정기본형 : background-clip : border-box | padding-box | content-box코드 예시 )결과 )배경
14.LGHV_3기_이미지와 그라데이션 효과로 배경 꾸미기_HTML/CSS(9.2)
수직 방향이나 수평 방향으로, 방향으로 색상이 일정하게 변하는 것선형 그라데이션을 지정할 때는 방향과 색상이 필요함.기본형 - linear-gradient(to <방향> 또는 <각도>, <색상 중지점>, <색상 중지점>, ……);끝 지점을 기준으로
15.LGHV_3기_CSS 고급 선택자_HTML/CSS(10.1)
연결 선택자 : 선택자와 선택자를 연결해 적용 대상을 제한하는 선택자‘컴비네이션 선택자’ 또는 ‘조합 선택자’ 라고도 함부모 요소에 포함된 모든 하위 요소에 스타일이 적용됨.자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용하위 선택자를 정
16.LGHV_3기_CSS 고급 선택자_HTML/CSS(10.2)
:link - 방문하지 않은 링크에 스타일 적용:visited - 방문한 링크에 스타일 적용:active : 웹 요소를 활성화했을 때의 스타일 적용:hover - 웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용:focus - 웹 요소에 초점이 맞추어졌을 때의 스타일
17.LGHV_3기_CSS 고급 선택자_HTML/CSS(10.3)
문서의 최상위 요소 선택. 태그에 해당하는 부분CSS 변수를 사용할 때변수 이름 앞에 하이픈 (—) 2개를 붙임변수의 용도를 알 수 있도록 이름 붙이기사용자가 미리 만든 CSS 변수를 사용할 때괄호 안에 변수 이름 넣기괄호 안에는 크기 값이나 각도, 시간, 백분율 숫
18.LGHV_3기_트랜지션과 애니메이션_HTML/CSS(11.1)
변형(transform, 트랜스폼) : 특정 요소의 크기나 형태 등 스타일이 바뀌는 것2차원 변형수평이나 수직으로 웹 요소 변형크기나 각도만 지정하면 됨2차원 좌표 사용 3차원 변형x축과 y축에 원근감 추가z축은 앞 뒤로 이동. 보는 사람 쪽으로 다가올수록 값이 더
19.LGHV_3기_트랜지션과 애니메이션_HTML/CSS(11.2)
트랜지션(transition) : 웹 요소의 스타일 속성이 조금씩 자연스럽게 바뀌는 것트랜지션의 속성트랜지션을 적용할 속성 선택이 속성을 지정하지 않으면 모든 속성이 트랜지션 대상이 됨기본형transition-property: all | none | <속성 이름>
20.LGHV_3기_반응형 웹과 미디어 쿼리_HTML/CSS(12)
웹 사이트의 내용을 그래도 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법다양한 화면 크기의 모바일 기기들이 계속 쏟아져 나오는데 그 때마다 그 크기에 맞춘 사이트를 별도로 제작하는 것은 비효율적 화면 크기에 ‘반응’해 화면 요소들을 자동으로 바꾸어 사이
21.LGHV_3기_플렉스 박스 레이아웃_HTML/CSS(13.1)
플렉스 컨테이너 (부모 박스)플렉스 박스 레이아웃을 적용할 대상을 묶는 요소플렉스 항목 (자식 박스)플렉스 박스 레이아웃을 적용할 대상으로 a~f 까지 작은 박스들이 모두 해당주축 (main axis)플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향이다.기본적으
22.LGHV_3기_플렉스 박스 레이아웃_HTML/CSS(13.2)
플렉스 항목의 기본 크기width 값이 지정되어 있다면 그 값을 사용width 값이 없다면 콘텐츠 영역만큼의 크기!코드 예시 )width 값 지정한 코드결과 )flex-basis를 지정했을 시! -> 150px로 지정됨flex-basis를 지정하지 않았을 시! -> 콘
23.LGHV_3기_CSS 그리드 레이아웃_HTML/CSS(14)
플렉스 박스 레이아웃은 주축/교차축 개념이 있지만 CSS 그리드 레이아웃은 양쪽 방향 모두 사용(플렉스 그리드 레아웃은 1차원, CSS 그리드 레이아웃은 2차원 이라고도 함)행(row)과 열(column)로 화면을 구성하고, 필요할 경우 그리드 항목 사이에 간격을 둘
24.LGHV_3기_자바스크립트_JavaScript(1)
자바스크립트는 객체 기반의 스크립트 언어이다.HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있다.웹 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있음.웹 사이트 UI 부분에 많이 활용예 ) 마
25.LGHV_3기_자바스크립트 기분 문법_JavaScript(2.1)
VSCode에서 여러 실습을 해보기 위해 Extenstions에서 ‘Code Runner’를 설치하였다! (모든 코드를 code runner로 실행하지는 않았다!)VSCode에서 Code Runner를 설치하기 전에, node.js를 먼저 설치해야한다!node.js 설
26.var과 let의 차이점과 호이스팅_JavaScript
1-1. 전역 변수 문제블록 스코프가 아닌 함수 스코프를 가지기 때문에 블록 { } 내부에 선언한 변수가 바깥에서도 접근 가능한 상황이 발생함예 )1-2. 중복 선언 가능var는 같은 이름으로 변수를 다시 선언해도 에러가 발생하지 않는다.예 )1-3. 호이스팅 문제 (
27.LGHV_3기_자바스크립트 기본 문법_JavaScript(2.2)
수학 계산을 할 때 사용하는 연산자나누기 연산자(/) : 나눈 값 자체나머지 연산자(%) : 나눈 후에 남은 나머지 값수학 계산을 할 때 사용하는 연산자피연산자 2개의 값을 비교해서 true나 false로 결괏값 반환== 연산자와 ! = 연산자피연산자의 자료형을 자동으
28.LGHV_3기_함수와 이벤트_JavaScript(3)
Chap 3 함수와 이벤트 함수와 이벤트 3. 연산자 산술 연산자 수학 계산을 할 때 사용하는 연산자 | 종류 | 설명 | 예시 | |------|------|------| | + | 두 피연산자의 값을 더한다. | c = a + b | | - |
29.LGHV_3기_자바스크립트와 객체_JavaScript(4)
프로그램에서 인식할 수 있는 모든 대상데이터를 저장하고 처리하는 기본 단위자바스크립트 안에 미리 객체로 정의해 놓은것!문서 객체 모델 (DOM)문서 뿐만 아니라 웹 문서 안에 포함된 이미지, 링크, 텍스트 필드 등을 모두 별도의 객체로 관리브라우저 관련 객체웹 브라우저
30.LGHV_3기_문서 객체 모델(DOM)_JavaScript(5)
자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법웹 문서와 그 안의 모든 요소를 ‘객체’로 인식하고 처리함요소의 계층 관계예 )웹 문서에 있는 요소들 간의 부모, 자식 관계를 계층 구조로 표시한 것!나무 형태
31.API란?_JavaScript
💡 API(application programming interface 애플리케이션 프로그래밍 인터페이스, 응용 프로그램 프로그래밍 인터페이스)는 컴퓨터나 컴퓨터 프로그램 사이의 연결이다. 일종의 소프트웨어 인터페이스이며 다른 종류의 소프트웨어에 서비스를 제공한다.(
32.LGHV_3기_통계 분석_통계(1)
통계 (statistics) 어떤 현상을 종합적으로 한 눈에 알아보기 쉽게 일정한 체계에 따라 숫자로 나타낸 자료통계학 (statistics) 통계로부터 의미 있는 정보를 추출하고 이를 토대로 불확실한 사실에 대한 합리적인 의사결정을 할 수 있게 하는 학문통계학의
33.LGHV_3기_통계 분석_통계(2)
통계적 관찰 대상이 되는 개체의 전체 집합을 의미즉, 연구 대상이 되는 전체 집합을 의미모집단에서 조사 대상으로 추출된 부분 집합을 의미즉, 모집단에서 추출한 일부 데이터를 의미모집단에서 표본을 선택하는 과정전수조사모든 개체를 조사 (예 : 인구조사) → 비용과 시간이
34.LGHV_3기_표본 분포와 검정_통계(3)
확률변수가 취할 수 있는 값들과 그에 대응하는 확률을 나타내는 함수모집단에서 일부를 추출한 데이터 집합인 표본을 기반으로 특정 통계량(예 : 표분 평균 등)의 분포를 의미함중요성 : 모집단을 추정하고 가설 검정을 수행하는데 중요한 역할표본 크기가 충분히 크면, 표본 평