소상공인 감자네

1. 요소의 내용 조작하기HTML 요소의 태그 사이에 들어가는 텍스트나 다른 HTML 태그를 조작하는 방법이다.두 가지 속성이 사용되며, 역할이 명확히 다르다.a. 텍스트만 변경 - textContenttextContent 는 요소 내부의 순수한 텍스트 내용만을 가져오거나 설정할 때 사용한다.보안상 가장 안전하며, 성능도 준수하다. - 용도 : 사용자에게 보여줄 단순한 텍스트나 숫자만 변경 시- 특징 : 새로운 HTML 태그가 삽입되면, 그것을 태그가 아닌 일반 텍스트로 처리/*HTML 예시기존 텍스트*/// 1. 변경할 태그 선택const messageDiv = document.querySelector('#message');// 2. 내용 설정 (순수한 텍스트만 삽입)messageDiv.textCont..

자바스크립트의 기본 반복문이라 할 수 있는 while, for 문을 알았다면 현대적인 반복문인 forEach() 매서드를 알 차례이다. forEach() 는 단순히 반복을 수행하는 것을 넘어, 코드를 훨씬 간결하고 읽기 쉽게 만들어 준다. 1. forEach() 란?for 문 같은 경우는 let i=0; i이는 매우 유연하지만 대신 코드가 길고 복잡해지는 단점이 있다. forEach() 는 배열(Array)이 기본적으로 가지고 있는 내장 매서드이다.직접 반복 횟수를 관리하지 않아도, 배열의 모든 요소를 순서대로 하나씩 꺼내어 지정된 작업을 수행할 수 있다. a. forEach() 의 구조forEach() 는 콜백 함수(Callback Function) 를 인수로 받는다. 이 콜백 함수는 배열의 각 요소..

DOM 에 대해 기초개념을 이해했다면 이제 DOM 트리에서 우리가 원하는 특정 요소를 정확히 찾아내는 DOM 선택자(Selector)에 대해서 알아야 한다. 자바스크립트로 웹 페이지를 동적으로 만들기 위해서는 가장 먼저 "어떤 요소"를 변화시킬지 지정해야 한다.예를 들어 회원가입을 하려면 회원가입 버튼을 눌러야 하는데 그러려면 회원가입 버튼을 선택할 수 있어야 한다.또는 특정 클래스의 요소들의 배경색을 일괄적으로 변경하고 싶다면 해당클래스를 가진 요소들을 선택할 수 있어야 한다.이렇기 때문에 DOM 조작의 첫 단추는 바로 요소의 선택이다. 1. 단일 요소 선택대부분의 동적 작업은 단 하나의 특정 요소를 대상으로 하게 된다.이럴 때 유용하게 사용되는 두 가지 핵심 매서드가 있다. a. ID로 선택HTML ..

DOM(Document Object Model)DOM은 Document Object Model의 약자로HTML 이나 XML 같은 문서(Document)를 프로그래밍 언어(여기선 자바스크립트)가접근하고 조작할 수 있는 객체(Object) 형태로 모델링(Model)한 것이다. 쉽게 말해 HTML은 단순한 텍스트 파일이지만, 웹 브라우저가 HTML을 읽어 자바스크립트가 이해할 수 있는 메모리상의 데이터 구조로 변환한 것이 DOM이라고 할 수 있다. 자바스크립트(Javascript)와 DOM의 관계자바스크립트의 역할은 웹 페이지의 동적인 동작을 구현하는 것이다. 예를 들어 "버튼을 클릭해 배경색을 바꿔라" 는 명령을 내리려면, 자바스크립트가 웹페이지의 '버튼'이라는 요소와 '배경색'이라는 스타일에 접근 할 수..

웹페이지 구성시 다양한 레이아웃을 위해 배경 혹은 요소들의 투명도를 관리하기도 한다.배경(background)의 투명도를 관리하는 rgba 도 있지만글자 등 요소들 자체의 투명도를 조절할 수 있는 속성이 바로 Opacity 이다. 1. opacity 란?opacity는 CSS에서 요소의 불투명도를 설정 하는 속성이다.'불투명도'는 투명하지 않는 정도를 의미하고 이 값을 조절하여 요소가 얼마나 뒤쪽을 비추게 할지를 결정한다. 요소에 opacity 값을 주는 것에 따라 불투명도가 조절된다.opcity 값불투명도투명도 설명1100% 불투명뒤쪽이 전혀 비치치 않는다.(완전히 불투명)0.550% 불투명뒤쪽이 50%정도 비쳐 보인다.00% 불투명요소 자체가 사라진 것처럼 보인다.(완전히 투명) opacity속성은 ..

CSS 속성 중 하나인 position 을 사용하다보면 요소들을 겹칠 수 있는 기술을 활용 할 수 있다.요소들이 겹치게 되면 요소의 순서가 중요한 상황이 생기게 되는데,그때 활용할 수 있는 속성이 바로 z-index 속성이다. 팝업창, 드롭다운, 고정된 헤더등 z-index 를 이용해 순서를 조정하는 것이다. 1. z-index 필요성우리가 만드는 웹페이지들은 기본적으로 가로축(X), 세로축(Y)이 존재하는 평면이다.하지만 CSS 속성인 position 을 사용하게 되면 요소들이 서로 겹칠 수 있는 상황이 생기고,그렇게 되면서 깊이(Z축)의 개념이 생겨나게 된다. 이 상황에서 어떤 요소가 위로 오고 아래로 갈지 결정해주는 것이 바로 z-index이다. z-index 의 값이 클수록 사용자가 보이는 쪽에 ..

HTML 문서들을 읽다 보면 태그에 id와 class 라는 속성이 추가 된 것을 많이 볼 수 있다.아이디(ID)와 클래스(Class)는 HTML 태그에 붙이는 하나의 이름표라고 생각 하면 된다. 이런 이름표를 붙이는 이유는태그에 스타일(CSS)을 입히거나 동작을 제어(Javascript)하기 위해특정 태그를 찾는데 도움을 주기 때문이다. 1. ID 와 Class 의 필요성우리가 본격적으로 CSS나 Javascript 작업을 하기 위해서 ID나 Class를 사용하게 되는데,우선 하나의 예시를 살펴보자.안녕하세요.새로운 블로그를 만들었습니다.html에 대한 내용을 다루고 있습니다.초보들에게 도움이 될 것 같네요. 이렇게 작성을 한 후, 글자에 색을 바꾸고 싶다면p{ color: red;} 이런식으로 태그..

웹페이지를 만들면 요소들의 색상이나 배경을 넣는 작업이 필요할 때가 있다.보통 요소들은 눈에 보이지않는 투명한 영역들을 가지고 있는데 그 배경을 꾸며 주는 CSS의 속성이 바로 background 이다. 배경 속성은 여러 개의 개별 속성으로 이루어져 있고, 우선 가장 많이 쓰이는 5가지를 알아보자. 1. background-color가장 흔하게 쓰이고 많이 쓰이는 기본 속성이다.요소의 뒷면에 원하는 색상을 채워 넣을 때 사용한다..background-color{ background-color: 색상값;} 색상값으로는 키워드, HEX(16진수), RGB/RGBA 를 이용해 작성을 할 수 있다. 키워드 : 미리 정의된 이름의 색을 지정한다. 예를 들어 red, blue, green 등 HEX(16진수) :..

웹페이지를 만들기 위해 html 을 구성하면 사용자의 입력을 받아야 하는 상황이 생기기 마련이다.우리가 인터넷에서 흔히 만나는 댓글, 설문조사, 로그인 등 이런 기능을 위해선 폼을 사용하고 이해해야 한다. 폼 (Form)HTML 페이지는 기본적으로 정적인 정보만을 보여준다.하지만 일반적인 웹사이트는 사용자와 상호작용을 필요하는 경우가 많다. 로그인이나 회원가입을 하거나, 게시글을 작성하거나 댓글을 작성하는 등 사용자의 입력을 받아 이를 처리할 곳으로 보내는 역할을 하는 것이 바로 태그이다. 1. form 의 기본 구조폼을 만들 때는 태그를 사용해서 만든다.모든 입력 필드(텍스트상자, 버튼 등)는 이 태그 안에 포함되어야 한다.// 이곳에 여러 입력 필드들이 들어간다// , 등 a. actionacti..

코딩을 하는데 있어 가장 핵심적인 주제는 아마 반복의 최소화 이지 않을까 싶다.우리가 100개가 넘은 정말 많은 데이터를 작성해야 한다면,하나하나 입력을 통해 100번이 넘는 코딩을 직접 하는건 매우 비효율 적이라고 할 수 있다. 그런 비효율적인 행동을 효율적으로 만들어 줄 수 있는것이 바로 반복문이라고 할 수 있다.반복문에는 몇 가지가 존재하는데 이번에는 while 반복문에 대해서 알아보도록 하자. 1. while 반복문의 기본 구조while 반복문은 하나의 핵심요소인 조건식만을 가진다.while(조건식){ // 조건식이 참(true)일 경우 실행할 코드블록 // !! 반드시 조건식이 거짓(false)이 되어 반복문이 무한정 반복되지 않게 하는 코드가 있어야 한다.} 조건식은 while 문이 매..