전체 글
-
31일차 - 자바 스크립트 기본 문법(4)AI 솔루션 개발자과정(Java, Python) 2022. 11. 21. 16:58
HTTP (HyperText Transfer Protocol) HTTP는 웹 브라우저와 웹 서버가 데이터를 주고받을 수 있게 디자인된 통신 규약이다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 이 규약을 암호화하여 보안을 확보한 규약은 HTTPS라 한다. HTTP 통신 HTTP에서는 클라이언트(사용자)가 서버(호스트)에 요청 메시지를 보내고 이에 대해 서버가 응답 메시지를 반환한다. 서버는 응답 메시지를 반환한 후에 초기 상태로 돌아간다. 이러한 특징으로 인해 HTTP를 stateless 규약이라고도 한다. 사용자가 인터넷 주소창에 주소를 입력하는것을 요청이라 하고, 해당 홈페이지 서버에서 HTML문서를 보내는 것을 응답이라 한다. HTTP 요청과 응답 - 요청 HTTP 요청 메시지는 요..
-
30일차 - 자바 스크립트 기본 문법 (3)AI 솔루션 개발자과정(Java, Python) 2022. 11. 18. 17:54
객체 리터럴 객체를 구성하는 속성(값이나 기능)의 이름과 실제 값을 한 쌍으로 묶어 표현하는 ‘객체 리터럴’을 이용하면 객체를 생성할 수 있다. 이때 속성의 이름을 키(key), 속성의 실제 값을 밸류(value)라 한다. cname과 cage은 키, "나비"와 3은 밸류이다. 속성의 밸류로 함수가 주어지면, 이 속성은 메소드가 된다. 객체 안의 속성 값을 참조할 때는(읽거나 쓸 때는) 도트(.) 연산자 또는 대괄호([]) 연산자를 사용할 수 있다. 스프레드 연산자(전개 구문) 스프레드 연산자를 사용하면 배열이나 객체 리터럴 등의 요소 목록을 펼칠 수 있다. 전개 구문, 전개 연산자 등으로 불린다. (펼치다 = spread) 스프레드 연산자 = ... 스프레드 연산자는 배열의요소를 복사할 때 효과적으로 ..
-
29일차 - 자바 스크립트 기본문법(2)AI 솔루션 개발자과정(Java, Python) 2022. 11. 17. 17:53
삼항 연산식 삼항 연산은 이름 그대로 세 개의 항을 이용해 결과를 반환하는 연산이다. 보통 if문의 단축 형태로 사용되기 때문에, 삼항 조건 연산식이라고도 부른다. 조건식 : 조건 역할을 하는 표현식 참일_경우의_결과 : 조건식의 결과가 참일 경우 반환될 결과 거짓일_경우의 결과 : 조건식의 결과가 거짓일 경우 반환될 결과 생성자 생성자란 객체를 생성할 때 사용하는 함수로서, ’생성자 함수’라고도 한다. 사용할 기능을 정의한 일반 함수와 생성자 함수 사이에 특별한 문법적 차이는 존재하지 않는다. 즉, 함수는 생성자 역할을 할 수 있다. 단, 생성자 함수는 객체생성을 목적으로 만드는 것이다. 생성자를 사용한다면 자바스크립트가 제공하지 않는 유형의 데이터를 창조할 수 있다. 생성자 함수 정의 시 this 키..
-
28일차 - 자바 스크립트 기본 문법 (1)AI 솔루션 개발자과정(Java, Python) 2022. 11. 16. 17:34
자바 스크립트 자바 스크립트는 프로그래밍 언어이다. 자바 스크립트는 서버 개발, 어플리케이션 개발 등 다양한 목적을 위해 사용할 수 있는 언어이지만, 주된 활동 분야는 웹 개발 이다. html로 콘텐츠를 정의하고, css로 스타일링하여 java script로 어떤 동작을 하고 상호작용을 할지 정의한다. 웹 사이트 개발에 있어, 자바 스크립트의 역할은 웹 브라우저가 가진 기능을 실행 시키거나 HTML / CSS 를 통해 렌더링된 화면을 조작할 수 있다. 웹 페이지에 자바스클비트를 더하는 방법은 두 가지 방법이 있다. HTML문서 내부에 작성하기 자바스크립트 파일을 만들고, 그 안에 작성한 코드를 HTML 문서에 연결하기 html문서에 작성할 때 스크립트는 바디의 하단에 들어간다. 소스를 통해서 스크립트를 ..
-
26일차 - 반응형 웹, 플렉스 박스와 그리드 레이아웃AI 솔루션 개발자과정(Java, Python) 2022. 11. 14. 17:23
반응형 웹 반응형 웹이란, 다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해 가며 반응하는 웹문서 또는 이를 위해 사용하는 기법을 뜻하는 말이다. 스마트 모바일 기기의 등장으로, 데스크톱 화면을 위해 존재했던 웹문서의 설계에도 변화가 요구되기 시작했다. 변화의 초기에는 모바일 전용 URL을 제공 하는 방법이 주로 사용 되었다. 태블릿, 스마트 워치, 자동차 (네이버처럼)모바일 환경과의 격리가 성공적으로 정착한 사례도 물론 있지만, 기기의 유형이 갈수록 다양해짐에 따라 한계를 드러낼 수밖에 없다. 기기에 최적화된 콘텐츠를 계속해서 생산해내는 것은 현실적으로 어렵기 때문에, 사용하는 기기에 적절하게 맞춰지는 사이트를 개발하는 것이 바람직하다. 즉 반응형 웹사이트를 만드는 것이 좋다. 그리고 반응형..
-
25일차 - CSS / flexbox, 선택자, 의사 클래스, 의사 요소, 상속과 공용 키워드, z-index, %와 미디어 쿼리, 변형과 전환, 애니메이션AI 솔루션 개발자과정(Java, Python) 2022. 11. 11. 17:11
레이아웃을 유연하게 flexbox flexbox 란 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다. flexbox 를 1차원 모델이라 부르는 이유는, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 특성 때문이다. flexbox 만들기 flexbox를 flex 컨테이너라고도 한다(요소들을 포함하기 때문이다). flex 컨테이너를 만들기 위해서는 컨테이너에 display:flex; 를 적용해야 한다. flexbox에는 ‘주축(main-axis)’과 ‘교차축(cross-axis)’이 있다. flex-direction flex-direction 속성은 flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정 방향, 역방향)을 지정한다. flexbox를..
-
24일차 - HTML 마무리(뷰포트, 시맨틱 태그, 미디어 태그), CSS 선택자, 텍스트 관련 속성, 박스 모델, 부동 요소AI 솔루션 개발자과정(Java, Python) 2022. 11. 10. 17:07
뷰포트(viewport) 뷰표트(viewport)란 현재 화면에 보여지고 있는 영역을 의미한다. 기기 별로 뷰포트가 다르기 때문에, 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타난다. 동일한 HTML 문서를 각각 pc와 모바일로 확인한 결과이다. 태블릿, 스마트폰 등 모바일 기기가 등장하기 전에는 웹 페이지가 컴퓨터 화면 만을 위해 설계 되었다. 컴퓨터 화면에서의 웹 페이지는 웹브라우저라는 소프트웨어를 통해 페이지 크기를 조절해가며 웹을 조회할 수 있지만, 모바일 기기에서는 고정된 사이즈(스크린 크기)로 조회해야 하므로 웹의 모든 콘텐츠를 표시하기 위해서는 배율 조정 을 해야만 한다. 때문에 PC용 웹페이지와 모바일 웹페이지를 따로 만드는 경우도 있다. 기..
-
23일차 - 프론트 엔드 HTML 문단, 태그, 속성, 컨테이너, 전역 속성, 링크, 타겟, 목록, 입력, 폼(form)AI 솔루션 개발자과정(Java, Python) 2022. 11. 9. 12:17
웹 개발 - 프론트 엔드 : 사용자에게 보여지는 부분. ex) 네이버 다음 홈페이지 => HTML, CSS, 자바 스크립트 - 백 엔드 : 사용자들이 이용할 수 있는 정보를 보관.관리하는 부분. ex) 데이터 서버 => 자바, 파이썬, Golang 선택 가능 HTML HTML은 HyperText Markup Language를 의미한다. •HyperText : 하이퍼링크를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트 •Markup : (콘텐츠를) 표시하다 •Language : 언어 HTML은 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어이다. HTML은 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어이다. 개발자는 HTML 코드로 웹페이지에 어떤 내용이 표시될지를 정..