대구 AI스쿨_웹프로그래밍

웹 프로그래밍 이란? 웹프로그래밍김인권1웹프로그래밍이란?210501

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인원2HTML_210505 주제 : HTML html 설계도 웹사이트의 구성 그리기 설계도면의 개념은 건축물의 도면을 그리듯 웹사이트의 레이아웃에 따라 텍스트, 이미지 그리고 다른 다양한 컨텐츠 들이 배치되는

과정명 : 대구 AI 스쿨 일반과정강의 : 웹프로그래밍\_김인원\_3_CSS_210508주제 : CSShtml이 웹문서의 구조를 세우고 정보를 입력하는 가장 기초적인 작업을 수행하는 언어라면 CSS는 웹문서의 디자인적 속성을 정의하는 언어라 이해된다. html과 유사한

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인원3CSS210508 주제 : css css 가상 선택자 가상 선택자는 css에 내장되어 있는 선택자 이다. 따로 지정하지 않더라도 선택자를 사용할 수 있으며 태그를 지정하여 속성을 적용할 수 있다. 예를

과정명 : 대구 AI 스쿨 일반과정강의 : 웹프로그래밍김인권\_4레이아웃\_210509주제 : css각 태그로 만들어진 객체들의 위치를 조정하기 위해서는 margin속성과 padding속성을 활용할 수 있다. margin : border를 기준으로 브라우저와 객체의 거

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권4레이아웃210509 주제 : css 레이아웃 z-index 속성 객체에 Z값을 주는 속성 객체는 기본적으로 Z값 0을 갖고 있다. Z값이 높은 객체가 더 높이 올라온다. 3차원 속성을 부여하는 po

과정명 : 대구 AI 스쿨 일반과정강의 : 웹프로그래밍김인권\_4레이아웃\_210509주제 : css그 동안의 수업내용을 토대로 웹페이지의 레이아웃을 구성하는 실습을 진행했다. 또한 또 다중페이지로 구성된 사이트의 특성을 적용하여 여러 웹페이지를 연결하는 작업까지 진행

과정명 : 대구 AI 스쿨 일반과정강의 : 웹프로그래밍김인권\_4레이아웃\_210509주제 : csscss의 animation속성은 오프젝트를 회전시키거나 동적 움직임을 주는 속성이다. 뿐만 아니라 color속성 등을 함께 적용하여 다채롭게 구성할 수 있다. 오브젝트

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권5애니메이션_210512 주제 : css Animation library animate css https://animate.style/ cord pen https://codepen.io/ animation

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권6미디어쿼리210514 주제 : css css 미디어쿼리 적응형/ 반응형 홈페이지 브라우저 크기에 따라 홈페이지의 여러 오브젝트 또한 변하게 되는데, 이런 오브젝트가 변화하는 방법에 따라 홈페이지를 적응형

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권6미디어쿼리210514 주제 : css 미디어 쿼리 실습 ![](https://images.velog.io/images/hwanginchang/post/ecf56ea3-674f-4f2e-806e-4beba

과정명 : 대구 AI 스쿨 일반과정강의 : 웹프로그래밍김인권\_7키즈가오\_210515(1/2)주제 : css지금까지의 내용을 바탕으로 그동안 강의에서 샘플로 많이 등장했던 키즈가오 웹페이지 카피켓 실습을 진행하였다. 웹페이지 구성에 필요한 이미지 소스들은 사전에 준비

과정명 : 대구 AI 스쿨 일반과정강의 : 웹프로그래밍김인권\_7키즈가오\_210517(2/2)주제 : css이제 겨우 하나의 홈페이지를 만들었다. 만들었다기 보다 배껴 쓴것과 다름없지만 설계도면 작업과 레이아웃작업을 위주로 많은 코드를 입력하고 오류를 경험했다. 대부

과정명 : 대구 AI 스쿨 일반과정강의 : 웹프로그래밍김인권8덴마크\_210516주제 : csshttps://www.helbak.com/덴마크 쇼핑몰의 레이아웃을 카피해보는 실습을 해보았다. HELBAK은 반응형 웹사이트로 브라우저의 크기에 따라 상단 로고와

과정명 : 대구 AI 스쿨 일반과정강의 : 웹프로그래밍김인권10네이버메인2_210517(2/2)주제 : html / css어제에 이어서 네이버 메인페이지를 카피해보는 작업을 이어갔다. 메인영역의 오른쪽 로그인 구역과 배너 그리고 여러 쇼핑 정보들이 배열되는 공간이다.

과정명 : 대구 AI 스쿨 일반과정강의 : 웹프로그래밍김인권12네이버쇼핑2_210518(2/2)주제 : html / css어제 부터 작업한 네이버 쇼핑페이지 카피작업을 마무리했다. 여러 제품들과 정보들을 확인할 수 있는 메인 구역의 레이아웃은 다소 차제롭게 되어있어 까

과정명 : 대구 AI 스쿨 일반과정강의 : 웹프로그래밍김인권12네이버웹툰1_210519(1/4)웹프로그래밍김인권12네이버웹툰2_210519(2/4)주제 : html / css네이버의 메인 페이지, 쇼핑 페이지에 이어 웹툰 페이지를 카피하는 실습에 들어갔다. 태그의 깊

과정명 : 대구 AI 스쿨 일반과정강의 : 웹프로그래밍김인권15네이버웹툰3_210519(3/4)웹프로그래밍김인권16네이버웹툰4_210519(4/4)주제 : html / css네이버 웹툰 페이지의 오른쪽 영역은 여러 정보들이 1열로 정렬되어 되어 있다. 웹 페이지에서 공

과정명 : 대구 AI 스쿨 일반과정강의 : 웹프로그래밍김인권17네이버블로그1_210519(1/3)주제 : html / css설계도면 작업과 레이아웃 작업을 강의 내용에 따라 같이 작업하는 과정의 반복이였다. p태그의 말줄임 효과를 설명한 블로그https://c

과정명 : 대구 AI 스쿨 일반과정강의 : 웹프로그래밍김인권18네이버블로그1_210519(2/3)웹프로그래밍김인권19네이버블로그1_210519(3/3)주제 : html / css블로그 메인의 오른쪽 영역은 이전의 작업과 크게 다르지 않았다. 로그인 영역은 네이버 메인

과정명 : 대구 AI 스쿨 일반과정강의 : 웹프로그래밍김인권20네이버블로그1_210520(1/5)주제 : html / css네이버 뉴스 탭의 페이지 이다. 기존의 작업과 유사한 작업의 연속으로 수월하게 강의를 따라 갈 수 있었다. 검색창에 해당하는 input영역에 주석

과정명 : 대구 AI 스쿨 일반과정강의 : 웹프로그래밍김인권23네이버뉴스4_210521(4/5)주제 : html / css이전에 강의에 이어서 네이버 뉴스 페이지 TV연예 페이지를 카피했다. 어느 정도 진도가 지나면서 큰 작업들은 이전 과정의 반복이지만 곳곳에 디테일한

과정명 : 대구 AI 스쿨 일반과정강의 : 웹프로그래밍김인권24네이버뉴스5_210521(5/5)주제 : html / css네이버 뉴스의 TV연예 페이지의 마지막 강의, 메인 영역의 오른쪽 부분을 설계하고 디자인 했다. 개인 적으로 지금 까지의 강의 중에서 다소 어렵게

과정명 : 대구 AI 스쿨 일반과정강의 : 웹프로그래밍김인권26 네이버ㅓ게임2_210525(2/3)주제 : html / css네이버의 게임 페이지 메인영역은 몇가지 특징이 있다. 컨텐츠를 이루고 있는 오브젝트들의 구성이 비슷하고 오브젝트들에 border-radius 속

과정명 : 대구 AI 스쿨 일반과정강의 : 웹프로그래밍김인권24네이버뉴스5_210521(5/5)주제 : html / css네이버의 게임 페이지를 카피하는 작업을 진행 했다. 상단 부분이 다른 페이지 보다. 화려 한 것이 특징이고 광고가 들어가는 3개의 배너 영역은 마우

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권26 네이버게임2_210525(2/3) 주제 : html / css 네이버 게임 페이지 카피 네이버 게임의 페이지의 특징인 통일성은 반복적인 코딩작업의 품을 줄일 수 있는 것과 함께 디자인의 동질감 이라

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권27 네이버게임3_210525(3/3) 주제 : html / css 네이버 게임 페이지 카피 네이버의 게임 페이지, 오른쪽 영역은 왼쪽영역의 컨텐츠 오브젝트와 크게 다르지 않다. 공간의 width값 정도

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권28 네이버게임2_210605(1/3) 주제 : html / css 네이버 이스포츠 페이지 카피 네이버의 이스포츠 페이지를 카피하는 작업을 진행했다. 기본적인 설계도면과 디자인 작업에서 크게 특별한 것은

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권28 네이버게임2_210605(1/3) 주제 : html / css 네이버 이스포츠 페이지 카피 네이버 이스포츠 페이지는 컨텐츠를 담은 오브젝트의 숫자도 많지만 특히 텍스트가 전반적으로 만이 들어가 있는

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권30 네이버이스포츠_310605(3/3) 주제 : html / css 네이버 e스포츠 페이지 카피 네이버 e스포츠 페이지에서 오른쪽 영역이다. '많이 본 뉴스' 섹션에서는 이미지에 배치된 순위를 표시하는

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권31 네이버오디오1_210605(1/3) 주제 : html / css 네이버 오디오클립 페이지 카피 네이버의 오디오클립 페이지를 카피해보았다. 상단영역을 작업했는데 상단영역 또한 좌/우로 구분하여 오브젝

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권33 네이버오디오3_210605(3/3) 주제 : html / css 네이버 오디오클립 페이지 카피 네이버 오디오 클립 페이지의 왼쪽 영역을 작업했다. 컨텐츠가 들어가가는 영역을 좌우로 나눠 진행한 작업

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권34 트위치1_210612(1/2) 주제 : html / css 트위치 페이지 카피 스트리밍 서비스를 제공하는 인터넷 방송 플랫폼, 트위치 사이트 카피작업을 시작했다. 그동안 반복했던 네이버 페이지와는

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권34 트위치1_210612(1/2) 주제 : html / css 트위치 페이지 카피 트위치 페이지에서 눈에 띄는 점은 왼쪽 영역이다. 일반적인 트위치의 컨텐츠가 배치되는 영역과 별개로 스크롤이 적용되어

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권35 트위치2_210612(2/2) 주제 : html / css 트위치 페이지 카피 트위치의 서비스 컨텐츠가 담긴 메인의 오른쪽 영역은 스트리밍 채널로 연결되는 여러 오브젝트의 배치로 이루어져 있다.

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권35 트위치2_210612(2/2) 주제 : html / css 트위치 페이지 카피 트위치 페이지의 메인영역, 공간을 차지하는 콘텐츠 오브젝트들의 대략적인 설계도면 그리고 디자인/ 배치작업을 끝내고 세부

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권36CSS추가설명_210612 주제 : html / css CSS추가설명 reset.css/ normalize.css | reset.css > [ reset.css ] code website htt

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권37 유튜브1_210613(1/3) 주제 : html / css 유튜브 페이지 카피 유튜브 페이지 또한 직전에 작업했던 트위치 페이지와 같이 상단영역과 왼쪽 영역이 스크롤에 상관없이 고정되어 있는 것을

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권38 유튜브2_210613(2/3) 주제 : html / css 유튜브 페이지 카피 페이지 상단의 nav영역, 그곳을 채우는 여러 오브젝트들의 설계도면, 디자인 작업이다. nav 영역을 유튜브 로고, 검

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권36CSS추가설명_210612 주제 : html / css 유뷰브 페이지 카피 유튜브 페이지의 왼쪽 영역은 그냥 보기에도 많은 오브젝트들이 담겨있다. 아이콘과 메뉴의 텍스트로 구성된 리스트들의 연속이다

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권38 유튜브2_210613(2/3) 주제 : html / css 유튜브 페이지 카피 - 유튜브 채널 유튜브 채널의 페이지 이다. 윗쪽에 배너가 배치되고 채널의 프로필 이미지와 제목이 들어가고 그 밑으로는

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권40네이버모바일1210619(1/2) 주제 : html / css 네이버 모바일 페이지 카피 이전에 모바일화면에 맞춘 페이지를 작성했었다. 모바일 버전이라기 보다.화면의 크기, 정확히는 브라우저의 크기

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권41네이버모바일1210619(2/2) 주제 : html / css 네이버 모바일 페이지 카피 네이버 모바일 페이지의 메인, 마무리 과정이다. 광고를 담은 오브젝트들이 채팅창과 같이 배치되는 영역이다.

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권42자바스크립트1210623(1/2) 주제 : html / css / Java script Java script - 변수와 데이터 타입 Java script시작 웹을 프로그래밍 하는 언어 중, html은

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권43자바스크립트1210623(2/2) 주제 : html / css / Java script Java script null, undefined null : 변수 초기화로 값이 없다는 의미의 null값을

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권44자바스크립트2210626(1/3) 주제 : html / css / Java script 제어문, 전역/지역 변수, 스코프, 호이스팅, 반복문 제어문 if문 if문의 조건에 만족(참)하면 작동한다.

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권45자바스크립트2_210626(2/3) 주제 : html / css / Java script 제어문, 전역/지역 변수, 스코프, 호이스팅, 반복문 반복문 일정한 조건을 만족할때까지 코드를 반복 실행하는

과정명 : 대구 AI 스쿨 일반과정강의 : 웹프로그래밍김인권\_7키즈가오\_210515(1/2)주제 : css약 2주 동안 웹프로그래밍에 대해 배운 내용들을 어제 그리고 오늘 그리고 앞으로의 실습에서 모두 쏟아 내는 기분이다. 물론 배운 범위 안에서...분명 배웠던 내

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권9네이버메인1_210517(1/2) 주제 : html / css - 웹 개발에 도움이 되는 크롬 확장 툴 https://wpastra.com/chrome-developer-extensions/ 크롬 브라

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권11네이버쇼핑1_210518(1/2) 주제 : html / css 네이버_쇼핑 페이지 카피 네이버 메인페이지 카피작업을 마치고 네이버의 쇼핑 페이지를 카피하는 작업에 들어갔다. 작업폴더는 그대로 사용하고

과정명 : 대구 AI 스쿨 일반과정강의 : 웹프로그래밍김인권21네이버뉴스\_210520(2/5)주제 : html / css'헤드라인 뉴스'와 '정치' 그리고 '세계'의 카테고리로 나누어진 리스트는 코드를 사용하여 커스텀하였다.커스텀을 하더라도 오브젝트이 레이아웃의 디자

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권22네이버뉴스3_210520(3/5) 주제 : html / css 네이어 뉴스 페이지 카피 [ TV연예 홈 ] 네이버 뉴스 페이지의 'TV연예' 세션을 카피하였다. 네이버 뉴스 중에서도 연예관련된 내용을

네이버 오디오 클립 페이지 카피 네이버 오디오클립 페이지의 컨텐츠가 담긴 영역을 카피했다. 좌우로 분리되어 있고 컨텐츠의 구조가 유사하여 컨텐츠의 레이아웃 구조를 디자인 하는 속성을 따로 만들어 사용하였다. 각각의 컨텐츠를 구성하는 div태그에 class="audi