다한의 웹 블로그

  • 페이스북
  • 트위터
  • 인스타그램
  • 핀터레스트

전체 글 (85)

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

더 읽기

react 조건부 렌더링 with 삼항연산자, AND 연산자

라이브러리/React js 다한(dahan) 2019. 8. 10. 17:37

렌더링은 클라이언트(사용자, 방문자 등)에서 서버의 파일을 브라우저에 뿌려주는 과정이다. 코드로 얘기하자면 처음 태그(돔, DOM)가 나오고 그 다음에 , 순으로 나오는 것을 확인할 수 있다. 그러면 여기서 문제, HTML, CSS, JavaScript 중에서 가장 먼저 렌더링되는 것은 무엇일까? 정답은 HTML이다. 생각해보자. 우리의 컴퓨터 및 프로그램은 위에서 아래로, 좌에서 우로 문서를 파싱한다. 즉, 문서의 바탕이 되는 html을 가장 먼저 읽고 head안에 CSS파일을 읽는다. 그리고 최종으로 JavaScript가 렌더링된다. 즉, HTML -> CSS -> JavaScript로 렌더링이 진행되며 렌더링은 브라우저에 뿌려주는 과정을 말한다. 그렇다면 React의 조건부 렌더링은 무엇일까? 조건..

더 읽기

자바스크립트) 이벤트 요소 가져오는 방법 [event.target]

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

특정한 DOM 객체의 요소에서 이벤트가 발생한 경우 해당 요소를 가져오는 방법에 대해 알아보겠다. 사용방법은 아래와 같다. event.target.? Hello const handleOnChange = e =>{ console.log(e.target.name); } document.querySelector("#hello").addEventListener("change",handleOnChange) input 태그에 어떤 행동을 할 때마다 name값인 helloName이 콘솔에 찍히는 소스이다. 즉, e.target에 input 태그의 속성을 넣어주고 그 속성을 e.target.(이곳) 이곳에 넣어주면 해당 요소를 가져온다.

더 읽기

React 기본적인 문법

라이브러리/React js 다한(dahan) 2019. 8. 4. 23:52

1. React 기본 문법 import React, {Component} from "react"; class App extends Component{ render(){ return( Hello ); } } export default App 2. css 적용 방법 App.css .App{ background: black; color: aqua; font-size: 36px; padding: 1rem; } App.js import React, {Component} from "react"; import "./App"; class App extends Component{ render(){ return( Hello ) } } export default App; 3. 두개 이상의 코드 처리하는 방법 - 두개 이상의..

더 읽기

React js 라이브러리란?

라이브러리/React js 다한(dahan) 2019. 8. 4. 22:53

React js는 프론트엔드 라이브러리이다. 요즘의 웹은 옛날과는 다르게 웹 페이지보다는 웹 애플리케이션으로 동작한다. 웹 페이지의 경우는 단순히 HTML, CSS, JavaScript로 이루워졌다면 웹 애플리케이션은 브라우저 상으로도 자연스러운 흐름으로 많은 것들을 할 수 있게 해준다. 예를들어, 아래와 같은 HTML코드가 있다고 가정해보자. Hello document.querySelector("#Hello").innerText = "aaa"; 이 Hello라는 문자열을 바꿔주려면 JavaScript를 이용해 DOM 엘리먼트에 대한 레퍼런스를 찾고, 해당 DOM에 접근하여 원하는 작업을 해줘야 한다. 이러한 작업은 소규모 프로젝트할 때는 상관없지만 대규모 혹은 다양한 인터페이스를 제공하게 된다면, 많은..

더 읽기

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파일의 데이터가 그대로 나타나는 것을 볼 수 있다. 이것을 ..

더 읽기

webpack(웹팩) 기본 개념 및 사용법

웹 서버 배우기/Node.js 다한(dahan) 2019. 6. 29. 13:57

webpack(웹팩)은 모듈 번들러(module bundler)이다. 모듈 번들러는 수 많은 파일(.js, .png, .sass 등)을 가져와서 웹팩에게 주면 웹팩은 그 파일들을 호환하는 static 파일들로 변환해주는 것을 의미한다. 만약 개발자가 모던 자바스크립트(ES6)를 사용한다면 웹팩에 그 파일을 집어넣은 다음 웹팩은 일반적인 CSS와 오래된 노멀한 자바스크립트로 변환하여 웹 브라우저가 알아들을 수 있도록 해준다. webpack 설치 및 entry, output 설정방법 npm install webpack webpack-cli webpack은 파일에서 사용하기 위함이고 webpack-cli는 터미널에서 webpack을 쓸 수 있도록 해주기 위해 설치한다. 설치가 완료되면 기본 파일인 webpac..

더 읽기

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

Designed by JB FACTORY

티스토리툴바