'웹 언어 배우기' 태그의 글 목록

웹 언어 배우기 (24)

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

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

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

border-collapse / 표의 테두리와 td의 테두리 사이의 간격 처리 속성

웹 언어 배우기/CSS 다한(dahan) 2019. 8. 22. 10:57

border-collapse : 표의 테두리와 td의 테두리 사이의 간격을 어떻게 처리할 지 정하는 속성이다. 속성값에는 기본값인 separate, collapse, inital, inherit이 있다. border-collapse 속성값 separate : 표의 테두리와 td의 테두리 사이에 간격을 둔다. 이때, border-spacing 속성으로 간격의 크기를 나타낼 수 있다. collapse : 표의 테두리와 td의 테두리 사이의 간격을 없앤다. 겹치는 부분은 한 줄로 나타낸다. inital : 기본값 설정 inherit : 부모 속성의 속성값을 상속받는다. border-collapse 속성 예제 Separate 속성값 a b c aa bb cc Collapse 속성값 a b c aa bb cc

javascript로 특정 URL 값 가져오는 방법

웹 언어 배우기/JavaScript 다한(dahan) 2019. 8. 1. 21:15

개인 프로젝트를 진행하던 중 검색 페이지에서 select로 된 값을 검색 결과 페이지로 그 검색어를 가져오는 것을 구현하려고 한다. 가령 검색 페이지에 서울, 경기, 강원 등의 지역을 선택할 수 있는 검색창이 있고 값을 선택하면 검색 결과 페이지로 이동하여 'searchResult.html?vaule="서울"' 이라는 URL이 표시된다. 그래서 검색 결과 페이지에 서울 이라는 값을 가지고 오는 것을 구현하고자 한다. window.location.href javascript는 URL를 보여주는 객체가 있다. 바로 window.location.href이다. 이 객체를 크롬이나 다른 브라우저 console창에 가서 입력하면 주소가 출력된다. 이외에도 hostname, pathname, protocol등을 가지..

jQuery $.getJSON 자바스크립트에서 데이터 가져오는 방법

웹 언어 배우기/JavaScript 다한(dahan) 2019. 7. 23. 22:49

JSON형태의 데이터를 가지고 오기 위해 jQuery의 $.getJSON를 사용하여 데이터를 가져오는 방법에 대해 알아보겠다. 그 전에 필자는 동기식 즉, 요청과 동시에 처리하는 방식으로 하기 위해 $.getJSON을 선택했다. 하지만, 비동기식으로 처리하기 위해서는 $.ajax를 사용하면 된다. $.getJSON 사용법 const URL = "url address"; $.getJSON(URL,function(data){ const items = data.item.items; console.log(items); }) json파일이 item안에 items에 데이터가 있다고 할때를 가정해보면 위와 같이 쓸 수 있다. console창에 가보면 json파일의 데이터가 그대로 나타나는 것을 볼 수 있다. 이것을 ..

html h1 tag "제목 태그"

웹 언어 배우기/HTML 다한(dahan) 2019. 1. 16. 07:00

html에서 글자를 크게 하거나 꾸며주는 태그, 속성은 대표적으로 font-size, color 등이 있습니다. 그 중 이것을 활용하면 검색엔진에 효과적인 태그입니다. 바로 h 태그입니다. h 태그는 부터 까지로 숫자가 클수록 글자 크기가 작아지고 자동으로 줄바꿈이 됩니다. 그리고 이 태그는 html5 이후부터 속성이 없습니다. ※ html5 이전 h 태그는 align 속성이 있었습니다. 이 속성은 글자를 정렬할 수 있습니다. 없어진 계기는 CSS에 똑같은 의미가 있는 text-align이 있어 없어진 것이라고 생각됩니다. h tag별 용도 h tag는 총 6가지가 있습니다. 가장 크게 보여야 하고 돋보이게 해야 하는 제목은 태그를 사용합니다. 따라서 가장 중요한 태그라고 할 수 있습니다. 그러므로 태그..

html 폰트 크기에 비례하는 rem 단위 "font-size 속성"

웹 언어 배우기/CSS 다한(dahan) 2019. 1. 15. 07:00

웹 표준이라는 말을 들어보셨나요? 이 용어는 W3C가 지정한 표준안을 지켜 웹사이트를 제작하는 것을 말합니다.이렇게 작성하면 어떤 운영체제나 웹 브라우저 상에서도 비교적 같은 디자인과 기능을 구현하는 데에 목적이라고 할 수 있습니다. 웹 표준이란? 반응형 웹을 만들 때 중요한 반응형 폰트 크기에 대해 알아보겠습니다. px x em x rem 단위 px, em, rem은 상대 단위와 절대 단위로 나뉠 수 있습니다. px와 em은 오래전부터 있었지만, rem은 최근에 만들어진 단위입니다. px : 크기가 고정된 단위em, rem : 사용자가 브라우저 설정에 따라서 폰트의 크기가 달라지는 단위 px rem 즉, 사용자가 브라우저의 폰트 크기를 키웠을 때 px는 바뀌지 않고 rem은 바뀝니다.오늘날에는 일반적으..

javascript "자바스크립트는 동적으로 변경해주는 언어"

웹 언어 배우기/JavaScript 다한(dahan) 2019. 1. 14. 07:00

HTML과 CSS는 정적인 언어입니다. 코드를 작성하면 그 코드에 대해서만 화면에 보인다는 뜻입니다. 하지만 javascript는 HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어입니다. 즉, 기능을 만드는 언어라고 할 수 있습니다. 경고창을 띄운다거나 더 보기 기능을 만들 수도 있고 움직이는 이미지를 만들 수 있습니다. 웹페이지를 만들 때 필요한 언어는 크게 3가지입니다. HTML로 뼈대를 만들고 CSS로 디자인적인 요소를 관리하고 javascript로 웹페이지의 기능 즉, 동작을 관리합니다. 라이브러리와 프레임워크 자바스크립트는 웹 개발은 물론 다른 곳에서도 사용할 수 있습니다. 그래서 응용할 수 있는 범위가 무궁무진합니다. 그래서 자바스크립트는 라이브러리나 프레임워크가 개발자들 사이에..

웹사이트에서 게시판 구조 만드는 방법 "<table> 태그"

웹 언어 배우기/HTML 다한(dahan) 2019. 1. 11. 07:00

웹사이트에서 게시판 구조 만드는 방법" 태그" 웹사이트를 만들게 되면 여러가지 디자인을 할 때 레이아웃을 잡아야 합니다.과거에는 웹페이지의 전체를 표로 잡아 개발했지만 W3C에서 테이블로 레이아웃 개발을 하지말자라고 해서 지금은 보다 간편한(?) 방법으로 레이아웃을 잡고 있습니다. 웹사이트에서는 주로 게시판 구조를 만들 때 사용됩니다. 기본 구조 : 표를 만들기 위해 전체적인 구조를 구성하는 태그 : table row를 뜻하며 한 줄을 의미하는 태그 : table data를 뜻하며 하나하나의 데이터를 의미하는 태그 의미론적 구조 : 텍스트 진하게 표시 : 테이블의 제목부분으로 가장 맨 위로 지정되는 태그 : 테이블의 본문 태그 : 테이블의 끝을 의미하며 가장 아래로 지정되는 태그 수직, 수평 병합 이 때..

1
2
3

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

Designed by JB FACTORY

티스토리툴바