소상공인 감자네

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) 를 인수로 받는다. 이 콜백 함수는 배열의 각 요소..

웹페이지 구성시 다양한 레이아웃을 위해 배경 혹은 요소들의 투명도를 관리하기도 한다.배경(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진수) :..

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

자바스크립트를 이용해 개발함에 있어 가장 중요한 것 중 하나인 객체(Object). 문자열, 숫자, 불리언 같은 원시타입들이 각각 하나의 값만 담을 수 있는 기본적인 데이터라면,객체는 이름, 나이, 주소 등 서로 연관된 여러개의 데이터를 한 묶음으로 관리해주는 데이터 묶음 상자라고 할 수 있다.객체는 관련있는 데이터들을 체계정으로 정리해줘 데이터를 구조화 할 수 있게 도와준다. 예를 들어 어느 한 사람의 정보를 저장해야 한다면,let name = "김철수";let age = 20;let adress = "서울시"; 객체를 사용하지 않는다면 각각의 정보를 따로 담아서 저장을 해야 할 것이다.하지만 객체를 이용한다면,let user = { name: "김철수", age: 20, adress: "서울시"..

HTML 요소의 안쪽 여백을 조절하는 패딩(padding)이 있었다면,테두리 바깥쪽에 공간을 만들어 다른 요소들간의 간격을 조절하는 역할을 하는 것이 마진(margin)이다. 요소들을 배치하다 보면 세부적으로 요소들의 간격을 조절하고 싶은 상황이 생기게 되고,그때 적절하게 사용할 수 있는 속성이 마진이다. Margin 사용하기1. margin 각 방향 사용padding 속성과 같이 4가지 방향 상(top), 하(bottom), 좌(left), 우(right)로 각각 조절 할 수 있다..top { margin-top: 20px;}.bottom { margin-bottom: 20px;}.left { margin-left: 20px;}.right { margin-right: 20px;} margin-..

웹페이지를 CSS로 꾸미다 보면 HTML 요소들은 하나의 상자안에 들어 있다는 것을 알 수 있다.이 상자 안에 텍스트를 넣을수도 이미지를 넣을수도 있는 것이다. 패딩(padding)은 이 상자에서 상자 속의 컨텐츠(텍스트, 이미지 등)와 상자의 테두리 사이에 존재하는 안쪽 여백을 조절하는 역할을 한다.여백을 조절함으로써 시각적으로 편안한 디자인을 보여줄 수 있다. padding 사용하기1. padding 각 방향 사용padding 속성은 4가지 방향 상(top), 하(bottom), 좌(left), 우(right)로 각각 조절 할 수 있다. .top { padding-top: 20px;}.bottom { padding-bottom: 20px;}.left { padding-left: 20px;}.ri..