'웹 언어 배우기' 카테고리의 글 목록

웹 언어 배우기 (44)

자바스크립트 ES6(ECMAScript 6) 정리

웹 언어 배우기/JavaScript 다한(dahan) 2021. 2. 3. 12:30

자바스크립트 ES6(ECMAScript 6) 정리해봤습니다. ECMAScript는 자바스크립트 프로그래밍 언어를 정의하는 국제 표준의 이름입니다. 템플릿 문자열(리터럴) 문자열 안에 변수와 연산식을 혼합하여 사용할 수 있습니다. let id = '12345'; console.log(`id값은 ${id}입니다.`); //결과: id값은 12345입니다. `${}` 백틱(`)으로 감싸고 문자열은 그대로 적고 ${연산식}으로 작성합니다. 화살표 함수 기존의 함수보다 구문이 짧고 자신의 this, arguments(함수에 전달된 인수에 대항하는 배열 형태의 객체), super 또는 new.target을 바인딩하지 않습니다. (매개변수) => {함수 기능} let arr = ['css','html','javasc..

버튼 클릭 시 HTML 코드 복사하여 나타내는 방법

웹 언어 배우기/JavaScript 다한(dahan) 2021. 1. 27. 11:10

버튼 클릭 시 HTML 코드 복사하여 나타내는 방법에 대해 알아보겠습니다. 이름 아이콘 목표 추가 폰트패밀리 폰트 추가 저는 form 태그를 이용하여 목표 추가 버튼 또는 폰트 추가 버튼을 클릭하면 label과 input을 복사하여 아래에 나타나는 HTML 코드를 짜봤습니다. let addButton = document.querySelectorAll('button'); const addButtonClickHandle = (e) =>{ e.preventDefault(); let id = e.target.id; let appendArea = document.querySelector(`#${id}Add`); let html = document.querySelector(`.${id}__item--add`); l..

자바스크립트 배열 특정 문자열 찾기, match 함수

웹 언어 배우기/JavaScript 다한(dahan) 2021. 1. 25. 19:56

특정 텍스트 안에 검색할 단어, 찾고 싶은 단어가 있는 경우 해당 텍스트가 문구에 포함되어 있는지 확인할 수 있습니다. 또한, 정규표현식을 이용하여 특정 패턴을 검색할 수 있습니다. match 함수를 이용하여 자바스크립트 배열 특정 문자열 찾아보는 시간을 갖도록 하겠습니다. match 사용 방법 자바스크립트 배열 특정 문자열 찾기 전에 match 함수 사용 방법을 익히겠습니다. 문자열.match(찾을 단어) 간단한 예제와 함께 match 함수를 이해해보겠습니다. let str = 'hello world'; str.match('hello') 'hello world' 문자열에서 'hello'가 있는지 찾습니다. 일치하면 다음과 같이 결과가 나타납니다. [ 'hello', index: 0, input: 'he..

HTML 상대경로와 절대경로 표기법

웹 언어 배우기/HTML 다한(dahan) 2020. 6. 24. 10:30

HTML과 CSS에서 이미지를 넣는 방법은 img와 background:url()로 삽입할 수 있습니다. 이 과정에서 경로를 설정해야 하는데 상대경로와 절대경로를 이용할 수 있습니다. 상대경로 상대경로는 HTML, CSS 파일을 기준으로 경로를 설정하는 방법입니다. 만약, img 태그를 사용하여 jpg 파일을 삽입하고 싶을 때 어떻게 해야 할까요? 일단 img 태그는 HTML에 속하므로 index.html를 참고할 것입니다. index.html 파일은 루트에 있고 jpg 파일은 images 안에 logos에 있습니다. 그렇다면 최종 경로는 './images/logos/xxx.jpg'가 될 것입니다. 마찬가지로 CSS에서 jpg 파일을 삽입하고 싶을 때 어떻게 해야 할까요? index.css 파일은 sty..

CSS 생략기호 만들기(한줄, 멀티)

웹 언어 배우기/CSS 다한(dahan) 2020. 6. 23. 16:00

박스 형태나 한정된 width 값을 가지고 있을 때 CSS로 생략 기호를 만들 수 있습니다. See the Pen css 생략기호 1줄 / 멀티 by Cho-YoungHo (@choyoungho-web) on CodePen. CSS에서는 한줄과 멀티의 형태로 생략기호를 만들 수 있습니다. 공통적인 코드는 다음과 같습니다. width:300px; overflow: hidden; text-overflow: ellipsis; overflow 속성은 width 값과 height 값을 넘어간 글자에 대해서 숨기거나 스크롤이 생기게 할 수 있습니다. text-overflow 속성은 overflow된 내용을 사용자에게 어떻게 전달할지 지정합니다. 기본값은 clip으로 잘린 채 아무 것도 없습니다. 반면 ellipsi..

javascript로 이미지 업로드 및 미리보기 기능 구현하는 방법

웹 언어 배우기/JavaScript 다한(dahan) 2020. 6. 14. 13:26

이번에 간단한 프로젝트를 기획하면서 사진 업로드와 미리보기 기능을 구현하게 되었다. 처음에는 쉬울거라고 생각했지만 막상 하려고 하니 계속 막혔다. 무엇보다 시간을 잡아먹었던건 사진 10장 초과시 업로드를 불가능하게 만드는 것을 구현하는 것이였다. 이 과정에서 IT커뮤니티 사이트 OKKY에 질문을 많이 했었다. 약 2일 동안 이것만 한거 같다. 이미지 업로드 HTML 사진업로드 input 태그에는 file형태와 image만 업로드할 수 있게 설정했다. 또한, 최대 10장까지 업로드할 수 있기 때문에 multiple 속성도 추가했다. 구현하고 싶은 것은 input 태그에 클릭해서 업로드하는 것이 아닌 button 태그를 클릭해서 업로드하고 싶었다. 왜냐하면 input 태그는 CSS 입히기가 쉽지 않기 때문이..

CSS 가상 요소 before, after 의미

웹 언어 배우기/CSS 다한(dahan) 2020. 5. 29. 07:00

가상 요소 CSS에서 제공되는 가상 요소 중 before 요소와 after 요소를 사용하면 HTML에서 사용하지 않아도 페이지에 내용을 삽입할 수 있습니다. 흔히 사용하는 곳에는 메뉴에서 선을 표시하거나 생성된 콘텐츠가 요소 콘텐츠보다 앞에 혹은 뒤에 위치하기를 원할 때 사용합니다. 사용법 가상 요소를 사용하기 위해서는 필수로 있어야 하는 것이 content입니다. 이것은 문자열, 이미지, 카운터, 공백을 입력할 수 있지만, HTML 코드는 입력할 수 없습니다. 다음의 예를 살펴보겠습니다. See the Pen pseudo element, ::before, ::after by Cho-YoungHo (@choyoungho-web) on CodePen. 문자열의 경우 텍스트를 기준으로 앞에서 나타나게 하려면..

HTML nav 태그 사용법

웹 언어 배우기/HTML 다한(dahan) 2020. 5. 25. 07:00

nav 태그 현재 또는 다른 페이지로 이동하는 링크를 하나로 묶어 네비게이션 역할을 합니다. 대표적으로 메뉴, 목차 등에서 사용할 수 있습니다. 사용법 리스트1 리스트2 리스트3 예시 금융서비스 노후준비 및 재무상태 추천금융상품 고객이벤트 직접해보기 참고 사이트 nav 태그 설명 MDN

1
2
3
4
···
6

Copyright © 다한의 웹 블로그 All Rights Reserved

Designed by JB FACTORY

티스토리툴바