2주차 학습 목표 1. 개발자 도구로 웹사이트 특정 요소 분석 2. 특정 요소를 HTML/CSS 로 구현하는 방법 이해 3. jQuery 활용 - 특정 요소에 이벤트와 기능을 부여 1. 개발자 도구로 웹사이트 특정 요소 분석 1.1. 네이버 화면 분석 1.1.1. 상단영역 1.1.1.1. 검색창 1.1.1.1.1. 검색어 입력창 (div.green_window) 1.1.1.1.2. 검색 버튼 (button#search_btn.btn_submit) 1.1.1.1.3. 자동완성 화살표 (a#nautocomplate.btn_arw._btn_arw.fold) 1. 개발자 도구로 웹사이트 특정 요소 분석 1.1. 네이버 화면 분석 1.1.1. 상단영역 1.1.1.1. 검색창 1.1.1.1.1. 검색어 입력창 (d..

2주차 학습 목표 1. 개발자 도구로 웹사이트 특정 요소 분석 2. 특정 요소를 HTML/CSS 로 구현하는 방법 이해 3. jQuery 활용 - 특정 요소에 이벤트와 기능을 부여 1. 개발자 도구로 웹사이트 특정 요소 분석 1.1. 네이버 화면 분석 1.1.1. 상단영역 1.1.1.1. 검색창 1. 개발자 도구로 웹사이트 특정 요소 분석 1.1. 네이버 화면 분석 네이버 화면을 보면 크게 상단, 좌측, 우측 영역으로 구분된 것을 확인할 수 있다. 크롬 브라우저의 개발자 도구를 통해 해당 영역별로 어떤 요소들이 있는지 분석해 보자. 1.1.1. 상단영역 개발자 도구를 통해 선택된 네이버 상단 div#header를 살펴보자. ... ... ... 으로 표기된 내용을 펼치면 보다 많은 태그를 가지고 있지만 ..

전공자가 아니다 보니 개발을 하거나 혹은 회사생활을 하면서 새로운 용어를 접할때가 많다. 나야 뭐 대충 말하고 다니니 상관없지만 외부 업체랑 미팅을 하거나 혹은 기획자, 디자이너, 다른 개발자 분들과 협업을 하기 위해선 공통의 약속된 단어와 개념을 익히는거도 중요하다. ... 상단영역엔 검생창 영역과 GNB영역이 있으신 걸 보실 수 있습니다. ... 대충 문맥과 맥락상..그래도 신이 날 버리지 않은건지 상단검색창 아래의 웬 버튼들 모음을 GNB라고 하는건 알겠는데.. 뭔 .. GNB 영어학원도 아니고.. 도대체 먼솔인고... GNB 란? '글로벌 내비게이션 바 (Global Navigation Bar)' 의 약자로 웹페이지와 웹페이지를 서로 연결하는 하이퍼링크를 모아두는 자리를 뜻한다. 우리가 매일 보고..

더보기 퍼블리싱 기초 개념 HTML/CSS/Javascript 기초 개념 퍼블리싱 기초 개념 웹 퍼블리싱 이란? 디자인 리소스를 HTML, CSS, Javascript와 같은 웹 리소스로 변경하여 웹 브라우저에 표현하는 일련의 작업. 디자인 리소스 포토샵, 파워포인트, 최근에 많이 사용되어지는 프로토타입 소프트웨어인 피그마 등으로 작업한 디자인 내용물 웹 퍼블리싱을 위해서라면 각 툴에서 제공되는 결과물을 이해할 필요가 있다. 퍼블리싱 퍼블리싱은 크게 마크업과 스타일링으로 나뉜다. 마크업 : HTML을 통해 기본 뼈대를 만듭니다. (와이어프레임, 뼈대 작업) 스타일링 : CSS로 마크업에 색상 등의 속성을 입혀 스타일을 지정합니다. 부가 기능 : Javascript로 특정 요소에 기능을 만들어 부여합니다...

학습내용 JavaScript 기본문법 JavaScript 라이브러리 활용 - jQuery JavaScript fetch 크롬 확장프로그램 JavaScript 기본문법 변수선언 자료형 함수선언 함수호출 JavaScript 라이브러리 활용 - jQuery 라이브러리란 소프트웨어 개발에 사용되는 코드 모음이며, 다른 프로그램에서 호출되어 사용될 수 있습니다. jQuery - js 라이브러리. DOM을 쉽게 접근하고 제어할 수 있다. jQuery는 빠르고 작고 기능이 풍부한 JavaScript 라이브러리로, HTML 문서 탐색, 이벤트 처리, 애니메이션 및 Ajax 상호 작용을 간소화하여 빠른 웹 개발을 지원합니다. // jQueyr import JavaScript fetch 자바스크립트 fetch는 웹 개발자..

학습내용 HTML, CSS 활용 정적 웹 페이지 작성 - 브라우저의 역할 - HTML 문서의 구조 - VSCode의 활용 - CSS 학습 - git pages를 통한 html 배포 HTML, CSS 활용 정적 웹 페이지 작성 브라우저의 역할 서버에 요청하는 역할. 서버는 브라우저의 요청에 따라 HTML, CSS, Javascript를 보내준다. HTML 문서의 구조 태그로 이루어져 있다. 크게 head 영역과 body 영역으로 구분 할 수 있다. head 영역에는 웹사이트 검색 시 사용되는 meta정보와 css, script 등 페이지 자체에 대한 정보들이 담긴다. body 영역에는 문서의 내용과 관련된 정보들이 담긴다. VSCode의 활용 개발을 편리하게 도와주는 에디터중 하나인 VSCode를 설치 후..