본문 바로가기
[SeSAC] 웹 풀스택 과정_뭐든 만들어 보기(미니프로젝트) 1. 시작 3주차 마지막 수업과 더불어 그동안 배운 HTML, CSS , Js, 부트스트랩, Jquery 등을 사용해서 개인 미니 프로젝트를 진행하는 시간이 있었습니다. 2. 요구사항 - 주제는 자유 - 배운것 들을 활용(HTML, CSS , Js, 부트스트랩, Jquery 등) 3. 주제 스스로 문구를 적고 애니메이션을 통해 화면에 보여주는 간단한 웹 어플리케이션을 만들어봤습니다. 스마트폰 어플인 '모두의응원 LED' 를 써보고 제가 따라해볼 수 있을것 같아서 진행해 봤습니다. 4. 화면 화면은 CSS와 부트스트랩 Grid System 을 사용해서 모바일웹 에서 잘보이는 것을 목적으로 만들었습니다. PC의 브라우저에의 화면을 바꾸고 싶을 수도 있을것 같아서 가능성을 열어두었습니다. 1번 / 전광판 : .. 2023. 8. 7.
[SeSAC] 웹 풀스택 과정_JavaScript DOM(2) DOM 1. DOM의 객체화와 노드 DOM은 문서 내의 모든 요소를 노드라는 객체로 나타냅니다. 이 노드들은 계층 구조로 연결되어 있으며, 각각의 노드는 문서 내의 특정 부분을 나타냅니다. 노드는 HTML의 요소, 속성, 텍스트 등을 추상화하여 프로그래밍적으로 다룰 수 있게 해 줍니다. 이때, "객체"라는 표현은 DOM의 노드들을 프로그래밍 언어에서 다룰 수 있는 객체로 변환해 주는 것을 의미합니다. 각 노드는 특정 유형을 나타내며, 이러한 노드 객체들을 통해 JavaScript 등의 스크립트 언어를 사용하여 웹 페이지를 동적으로 조작할 수 있습니다. 2. 노드 유형과 태그 DOM에서 각 요소들은 노드로 표현됩니다. 노드에는 여러 종류가 있으며, 주요한 노드 유형으로는 다음과 같은 것들이 있습니다: - .. 2023. 8. 7.
[SeSAC] 웹 풀스택 과정_JQuery 1. JQuery JQuery는 라이브러리이며, HTML의 DOM 조작 등을 지원해 자바스크립트를 간편하게 사용하기 위한 목적으로 만들어졌습니다. 2. 사용 현황 요즘에는 주로 JQuery보다 리액트(라이브러리)나 Vue(프레임워크) 등등 을 사용한다고 합니다. 사용률은 낮아졌지만 어느 정도 점유율을 유지하고 있어 개발자를 확보하는데 용이하며 정적이고 가벼운 웹페이지를 신속하게 제작하는 용도로는 쓰기 좋다고 합니다. 3. 사용해 보기 위해 사전 작업 https://releases.jquery.com/ 에서 CDN 링크를 복사해 HTML 파일에 붙여 넣는다. 4. 기본 작성문법 $(선택자).동작함수(); - $(선택자).동작함수() - $(): HTML 요소를 선택하는 함수 - 동작함수: 선택된 요소에 대.. 2023. 8. 4.
[SeSAC] 웹 풀스택 과정_CSS/Bootstrap 반응형 이란 동일한 웹 페이지를 상황에 따라 레이아웃을 다르게 보여주는 것입니다. 예로 https://www.kakaomobility.com 웹사이트에서 브라우저의 크기를 변경하거나 모바일로 웹사이트를 볼 때 같은 내용의 레이아웃들이 변경되는 것을 볼 수 있습니다. 1. 뷰포트 뷰포트(viewport)는 현재 화면에 보이고 있는 다각형(보통 직사각형)의 영역입니다. 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면 전체)을 말합니다. 2. CSS 미디어 쿼리 CSS Media Query는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다. 2-1. 미디어 쿼리 구문 @me.. 2023. 8. 1.
[SeSAC] 웹 풀스택 과정_JavaScript DOM(1) 시작 자바스크립트 언어는 웹 브라우저, 웹 서버 또는 그외 다른곳에서 동작할 수 있습니다. 각각 동작하는 곳들을 호스트 라고 합니다. 자바스크립트로 작성된 코드가 웹 브라우저에서 동작한다면 호스트는 웹 브라우저 입니다. 웹 브라우저는 자바스크립트 코드가 잘 동작할 수 있도록 기능들을 제공하고 이 기능들을 우선은 라이브러리(API),객체 라고 이해해도 될것 같습니다. 이렇게 호스트들이 제공하는 기능들까지 포함해서 호스트 환경 이라고 합니다. 이번 회고에서는 호스트 환경이 웹브라우저일때 브라우저에서 제공하는 기능중 하나인 DOM에 대해서 학습하고 내용 정리해 보겠습니다. - window : 자바스크립트 코드의 최상단 전역 객체 - DOM(Document Object Model) - BOM(Browser O.. 2023. 7. 31.
[SeSAC] 웹 풀스택 과정_JavaScript 함수와 메서드 지난 수업시간에 이어서 자바스크립트의 함수, 메서드, 조건문, 반복문, DOM (Document Object Model)에 대해서 개념을 학습하고 실습을 해볼 수 있는 시간이었습니다. 그중 가장 재밌었던?? 함수와 메서드에 대해서 간략하게 정리하는 것으로 2주 차 회고를 작성하겠습니다. 자바스크립트에서 함수와 메서드 자바스크립트에서 메서드와 함수의 의미는 다릅니다. 메서드는 사용자가 정의한 객체의 프로퍼티가 함수인 경우입니다. 즉, 객체는 키와 밸류로 이루어진 프로퍼티를 가지고 있고, 프로퍼티가 함수인 경우 메서드입니다. - 함수 호출 시 : 함수() - 메서드 호출시 : 객체.메서드() - function 함수명 (){} 일 때 함수명을 쓰지 않고 사용했을 때 이 함수는 익명함수입니다. 1. 함수 선언.. 2023. 7. 31.

티스토리툴바