[Javascript] Node.js를 설치하고 React를 사용하는 방법

안녕하세요. 명월입니다. 이 글은 Node.js를 설치하고 React를 사용하는 방법에 대한 글입니다. 제가 알바나 공부한 시기 빼고, 학교에서 졸업해서 제대로 프로그램을 개발한 지가 벌써 14년~15년에 가깝네요. 처음부터 웹 개발을 해야지 하고 시작한 건 아니고 CS(Client Server) 프로그램부터 임베디드 프로그램 등 여러 분야로 방황(?)하다가 결국에는 수요가 가장 많은 웹 개발에 정착했습니다. 웹이라는 것은 초기에는 그렇게 어렵게 생각하지는 않았는데 어느 분야든 마찬가지지만 깊이 갈수록 알아야 하는 규약도 많고 하루가 다르게 나오는 라이브러리와 프레임워크를 배워가야 하는게 엄청 많네요. 사실 그런 것이 웹 개발의 메리트일지도 모르겠습니다. 사람마다 개발의 가치관이 다르지만 저의 경우는 새..

Study/Javascript, Jquery, CSS 2022. 3. 23. 17:59

[Javascript] 쓰레드(웹 워커-Web worker)를 사용하는 방법

안녕하세요. 명월입니다. 이 글은 Javascript에서 쓰레드(웹 워커-Web worker)를 사용하는 방법에 대한 글입니다. 프로그램이 실행하고 종료되기까지 작업을 우리는 프로세스라고 합니다. 그 프로세스 안에는 프로그램 코드가 있고, 코드의 순서에 따라 위에서 아래로 실행됩니다.이 때 Javascript의 경우는 요청해서 응답받은 html에 Javascript의 링크와 코드가 태그의 순서대로 실행됩니다. 그것을 single thread 또는 main thread라고 합니다.간혹 그 코드 순서대로 실행을 하는 것이 아니라 동시에 실행되는 병렬 처리를 원할 때가 있습니다. 하나의 처리는 for문의 루프로 특정 텍스트를 작성하고 또 다른 하나는 동시에 다른 요소의 값을 계산하는 식의 병렬 처리입니다.우리..

Study/Javascript, Jquery, CSS 2020. 3. 31. 19:48

[Javascript] 비동기 통신(Ajax)를 하는 방법

안녕하세요. 명월입니다. 이 글은 Javascript에서 비동기 통신(Ajax)를 하는 방법에 대한 글입니다. 먼저 Ajax(Asynchronous JavaScript And XML) 란 비동기 자바스크립트와 XML를 뜻하는 말로써, 웹 서버와 클라이언트 통신(웹 서버에 http protocal 형식으로 요청하면 http protocal 응답을 받는 형식)를 동기식(브라우저 화면에서 요청을 하고 결과를 기다리는 형태)가 아닌 백그라운드로 통신을 하여 정보를 교환하는 방식을 뜻힙니다. Ajax를 통신을 하기 위해서는 Javascript에서는 XmlHttpRequest를 이용하여 정보를 주고 받습니다. click {"test":"hello world"} 버튼을 클릭하면 test.json을 GET방식으로 비동..

Study/Javascript, Jquery, CSS 2020. 3. 31. 00:01

[Javascript] async, await의 사용법

안녕하세요. 명월입니다. 이 글은 Javascript의 async, await의 사용법에 대한 글입니다. 제가 이전에 프로미스(Promise)에 대해 설명한 적이 있습니다. 링크 - [Javascript] 프로미스(Promise) 사용법 이 프로미스를 사용하는 이유는 Javascript의 single thread로 사용되는 것을 timer를 이용해서 비동기적 계산하기 위한 오브젝트입니다. 보시면 end라는 값이 textarea에 가장 하단에 출력됩니다. 뭐 당연한 소리입니다. 이걸 Promise를 통해 비동기 처리식으로 바꾸면 아래와 같습니다. 이번에는 end라는 값이 textarea에 먼저 출력이 되었습니다. 이는 single thread가 먼저 처리가 되고 메시지 큐의 순서대로 처리되기 때문에 for..

Study/Javascript, Jquery, CSS 2020. 3. 28. 09:00

[Javascript] 프로미스(Promise) 사용법

안녕하세요. 명월입니다. 이 글은 Javascript의 프로미스(Promise) 사용법에 대한 글입니다. 프로미스(Promise)란 Javscript의 단점인 무한 콜백의 단점을 해소하기 위해 만들어진 일종의 패턴이라고 할 수 있습니다. 제가 이전에 callback과 타이머 함수(setTimeout, setInterval)에 대해 설명한 적이 있습니다. 링크 - [Javascript] 익명함수, 람다식, 클로저 그리고 callback (DOMContentLoadedd와 load이벤트 예제) 링크 - [Javascript] 타이머 함수(setTimeout, setInterval) 이게 제 기준에 설명을 하면 Javascript은 스크립트 언어이기 때문에 Java와 C#처럼 메모리 구조(stack, heap..

Study/Javascript, Jquery, CSS 2020. 3. 26. 23:22

[Javascript] 타이머 함수(setTimeout, setInterval)

안녕하세요. 명월입니다. 이 글은 Javascript의 타이머 함수(setTimeout, setInterval)에 대한 글입니다. 자바스크립트를 작성하다보면 성능에 대한 압박을 받게 됩니다. 왜냐하면 Javascript의 처리는 서버에서 하는 작업이 아닌 클라이언트에서 하는 작업입니다.그러므로 서버의 입장에서는 클라이언트의 모든 환경을 알 수가 없습니다. 물론 성능이 좋은 클라이언트 PC라면 문제가 없지만, 성능이 안 좋은 클라이언트 PC라면, 싱글 스레드로 많은 제어문과 함수를 실행하면 overflow가 발생할 수도 있고 브라우저가 멈출 수도 있습니다.그럴 때는 적당히 작업을 분산 처리시키는 작업에 대한 요구가 생기게 됩니다. Javasciprt는 기본적으로 single thread로 처리됩니다. 그래..

Study/Javascript, Jquery, CSS 2020. 3. 26. 01:46

[Javascript] 익명함수, 람다식, 클로저 그리고 callback (DOMContentLoadedd와 load이벤트 예제)

안녕하세요. 명월입니다. 이 글은 Javascript에서 익명함수, 람다식, 클로저 그리고 callback (DOMContentLoadedd와 load이벤트 예제)에 대한 글입니다. Javascipt는 함수 지향 프로그램이라 그런지 익명함수나 람다식을 통한 callback 함수를 정말 많이 사용하는 것 같습니다.그리고 함수를 변수처럼 취급이 가능한데, 다른 언어에서는 이를 함수 포인터나 델리게이트 선언해야 하는 것들을 쉽게 처리가 가능합니다. test1은 일반적인 함수 선언법입니다. test2와 test3은 각각 익명 함수와 람다식 선언법입니다.여기까지 작성하면 일반 함수 선언과 크게 달라보이지 않습니다. test1의 함수는 파라미터에서 함수를 받으면 함수를 실행하는 형식입니다. 즉, 위와 같은 로직을 ..

Study/Javascript, Jquery, CSS 2020. 3. 25. 18:42

[Javascript] 브라우저에서 Javascript 프로그래밍 디버깅하는 방법

안녕하세요. 명월입니다. 이 글은 브라우저에서 Javascript 프로그래밍 디버깅하는 방법에 대한 글입니다. 이전에 브라우저에서 css style를 개발하는 방법, 브라우저 개발 모드를 설명한 적이 있습니다. 링크 - [CSS] 브라우저에서 CSS를 개발하는 방법(브라우저 개발 모드) 이 브라우저의 개발 모드는 document의 element 구성 표시와 css 상태 뿐 아니라 javascript와 cookie, console, network 등 개발에 필요한 개발 도구가 있습니다. 위 이미지는 크롬(Chrome) 기준입니다. 먼저 network를 살펴 보면, browser와 웹 서버간에 link 파일과 이미지등의 다운로드 속도에 대한 성능을 나타냅니다. 간단하게 제 블로그를 클릭해서 들어갔는데 모든 ..

Study/Javascript, Jquery, CSS 2020. 3. 25. 01:55

[Javascript] Html 요소(element)의 이벤트(Event)를 추가하는 방법

안녕하세요. 명월입니다. 이 글은 Javascript에서 Html 요소(element)의 이벤트(Event)를 추가하는 방법에 대한 글입니다. 먼저 프로그램에서 이벤트라는 것은 컨트롤이나 요소가 특정 동작이나 액션을 감지하여 함수를 호출하는 프로시져를 말합니다. 쉽게 이야기하면, 사용자가 마우스로 버튼을 클릭하면, 버튼에 대한 클릭 이벤트가 발생하여 지정된 함수를 호출하는 것입니다. click html 요소에서 속성으로 「on + 이벤트 타입」명으로 이벤트를 추가 할 수도 있습니다. 이 방법은 html 인라인 이벤트로 위처럼 함수를 호출하면 호출의 함수 재사용은 가능하지만, 각 요소에서 이벤트를 직접 수정하는 경우나 가독성의 문제(각 요소에서 이벤트가 어떻게 작성되는지 한눈에 알기가 힘들다)때문에 사실 ..

Study/Javascript, Jquery, CSS 2020. 3. 24. 16:21

[Javascript] Html 요소(element)의 속성(attribute)을 추가, 삭제 그리고 수정하는 방법

안녕하세요. 명월입니다. 이 글은 Javascript에서 Html 요소(element)의 속성(attribute)을 추가, 삭제 그리고 수정하는 방법에 대한 글입니다. Html 요소에서 데이터 값을 설정하고 취득하는 방법은 꼭 value의 속성이 아니더라도 설정이 가능합니다. 다만 class와 id, style 속성에 관해서는 브라우저의 탐색과 랜더링이 달라질 수 있습니다. 먼저 textbox의 data-value속성과 value속성을 설정했습니다.data-value속성은 html 랜더링에는 영향이 가지 않지만 value의 속성에는 textbox 안에 text가 들어가게 됩니다. 결과를 보면 textbox안에 test의 값이 들어가 있습니다.setAttribute로 속성을 설정을 하는데 속성이 없으면 추..

Study/Javascript, Jquery, CSS 2020. 3. 23. 23:43

[Javascript] Html 요소(element)의 생성(CreateElement), 추가(appendChild)하는 방법

안녕하세요. 명월입니다. 이 글은 Javascript에서 사용되는 Html 요소(element)의 생성(CreateElement), 추가(appendChild)하는 방법에 대한 글입니다. Html에서 Javascript를 사용하게 되면 값을 취득하는 것 만큼 동적으로 생성하는 것도 많이 있습니다. 이유는 동적의 효과를 나타내기 위한 것도 있고, 사용자의 환경이나 액션(event)에 따라 페이지의 결과를 달리 나타낼 때 사용합니다. 가장 단순하게 요소를 생성하는 방법은 요소를 선택하고 innerHtml를 사용해서 Node의 값을 바꾸거나 outerHTML를 이용해서 태그 내용을 수정하는 방법이 있습니다. innerHTML과 outerHTML의 차이는 선택된 요소의 태그를 포함하느냐 안하는냐의 차이입니다. ..

Study/Javascript, Jquery, CSS 2020. 3. 23. 15:17

[Javascript] Html 요소(element)의 셀렉터(selector - getElementById, getElementByClass, querySelector...)

안녕하세요. 명월입니다. 이 글은 Javascript에서 Html 요소(element)의 셀렉터(selector - getElementById, getElementByClass, querySelector...)에 대한 글입니다. Html에서 Javascript를 사용한다는 것은 Html 태그의 값을 취득하거나 수정하거나 삭제등으로 태그의 값을 변경하기 위해 사용하는 경우입니다. 그렇다면 값을 취득하거나 수정, 삭제를 하기 위해서는 태그의 요소를 취득을 해야합니다. 그때 요소의 id나 class, tagname 그리고 css 선택자를 사용해서 요소를 선택할 수 있습니다. 요소에서 id는 사양으로는 오직 한 개입니다. html은 컴파일 언어가 아니기 때문에 두개를 작성할 수도 있지만, 그러면 한개의 id만 ..

Study/Javascript, Jquery, CSS 2020. 3. 23. 13:10

[Javascript] 변수 선언, 제어문, 함수 사용법

안녕하세요. 명월입니다. 이 글은 Javascript의 변수 선언, 제어문, 함수 사용법에 대한 글입니다. 웹 서비스에서 Html을 구성하는 것은 html 태그이고 그 태그를 디자인 스타일을 설정하는 것은 css입니다. 그리고 그런 html을 서버가 아닌 브라우저 클라이언트에서 동적으로 값을 설정하거나 태그를 수정하고 스타일을 재설정할 수 있는 프로그래밍 언어가 Javascript입니다. 쉽게 이야기해서 브라우저와 서버와스 요청, 응답없이 클라이언트에서 html를 재설정하는 것을 이야기하는 것입니다. Javascript의 언어는 꼭 웹 서비스에서만 사용되는 프로그래밍 언어는 아닙니다. 로컬 스크립트 언어로도 사용되고, 최근에는 google의 node.js 플랫폼을 통해 web-service를 구축까지 할..

Study/Javascript, Jquery, CSS 2020. 3. 23. 01:30

[CSS] 브라우저에서 CSS를 개발하는 방법(브라우저 개발 모드)

안녕하세요. 명월입니다. 이 글은 브라우저에서 CSS를 개발하는 방법(브라우저 개발 모드)에 대한 글입니다. 웹 서비스을 개발하면 딱히 CSS 개발를 돕는 툴을 따로 없습니다. CSS는 어차피 화면 디자인에 관계된 스타일이기 떄문에 직접 클라이언트(browser)에서 직접 색을 바꿔보고 테스트를 하는게 훨씬 효율적입니다.즉, 로컬에서 직접 html를 작성하고 브라우저로 바로바로 확인하면서 개발하는 방식이 편합니다. 브라우저의 종류도 10년 전까지만 해도 IE(윈도우 익스플로러)가 한국에서는 사용율이 가장 높았는데, 최근에는 chrome이 독보적으로 사용율이 높네요.제 블로그 접속 통계만 보더라도 PC에서의 크롬 접속율이 압도적으로 높습니다.같은 css 스타일이라도 각 브라우저마다 약간식 차이가 있기 때문..

Study/Javascript, Jquery, CSS 2020. 3. 13. 15:26

[CSS] 색 스타일(color style) - 그라데이션(gradient)

안녕하세요. 명월입니다. 이 글은 CSS에서 색 스타일(color style) - 그라데이션(gradient)에 대한 글입니다. CSS에서 색깔을 표현하는 방법은 3가지가 있습니다.첫번째는 대표적인 색명으로 표현하는 방법입니다.즉, color: blue라던가 color: red같이 표현하는 방법입니다. 두번째는 RGB식으로 표현하는 방법입니다. RGB(255,255,255)로 첫번째는 빨간색, 두번째는 녹색, 세번째는 파란색의 16진수 값입니다.빛의 3색 기준이므로 RGB(0,0,0)은 검은색이고 RGB(255,255,255)는 흰색입니다.RGB(255,0,0)은 빨간색, RGB(0,255,0)은 녹색, RGB(0,0,255)은 파란색입니다. 세번째는 HEX(16진수)값으로 설정하는 방법입니다. #000..

Study/Javascript, Jquery, CSS 2020. 3. 10. 18:57

[CSS] 애니메이션(animation)

안녕하세요. 명월입니다. 이 글은 css의 애니메이션(animation)에 대한 글입니다.css의 애니메이션은 html의 동적 요소를 만드는 style이라고 할 수 있습니다. 이전에 제가 트랜지션(transition)에 대해 설명한 적이 있습니다.링크 - [CSS] 트랜지션 (transition) 트랜지션(transition)도 css의 동적 요소를 만드는 것으로 애니메이션(animation)과 비슷한 기능을 하는 css style입니다.차이점은 트랜지션은 정해진 css style 요소에 style이 변하는 설정에 시간(duration)과 변화 패턴을 주어서 동적으로 나타내는 것입니다.애니메이션은 요소 변화 시간(duration)을 설정하고 그 시간 구간안에 css style를 설정하여 동적으로 변하는 ..

Study/Javascript, Jquery, CSS 2020. 2. 28. 00:02

[CSS] 트랜스폼 (transform)

안녕하세요. 명월입니다. 이 글은 CSS의 트랜스폼 (transform)에 대한 글입니다. 트랜스 폼(transform)은 요소를 3차원적인 회전, 확대, 축소하는 스타일을 뜻합니다. 아래와 같은 형태라고 생각하면 됩니다. 안녕하세요. 명월일지입니다. 트랜스 폼의 속성은 transform, transform-origin, perspective, transform-style, perspective-origin, backface-visibility의 6가지의 속성이 있습니다. transform의 속성은 변경 스타일을 지정하는 것입니다. 회전(rotate), 이동(translate) 3D 축 이동(translate3d) 옵션이 있습니다. 스크루 옵션(scew), 확대, 축소(scale), 3차원적인 확대, 축..

Study/Javascript, Jquery, CSS 2020. 2. 19. 00:16

[CSS] 트랜지션 (transition)

안녕하세요. 명월입니다. 이 글은 CSS에서 트랜지션(transition)에 대한 글입니다. CSS의 트랜지션(transition)은 속성을 변경할 때 변경 속도를 조절하고, 변경 주기를 설정하는 것이라고 생각합니다. 예를 들어, "div" 태그의 배경색을 노란색으로 설정하고 마우스를 태그 위에 올리면(hover) 녹색으로 설정한다고 했을 때, 실제로는 변경 속도나 주기가 없이 바로 바뀌게 될 것입니다. 예 마우스를 위에 올려 주세요. 하지만 트랜지션(transition)을 설정하게 되면 순식간에 바뀌지 않고 천천히 바뀌게 될 것입니다. 예 마우스를 위에 올려 주세요. 마우스를 위에 올려 주세요. div { /* div 태그 배경색 설정이 노란색으로 설정 */ background-color: yellow..

Study/Javascript, Jquery, CSS 2020. 2. 18. 00:11

[CSS] Column 요소 스타일

안녕하세요. 명월입니다. 이 글은 CSS에서 Column 스타일에 대한 설명입니다. Column 스타일은 저도 자주 사용하는 기능은 아닙니다만, 프로젝트 사양에 따라 사용하기도 하기 때문에 정리해 두었습니다. Column 스타일 종류는 아래와 같습니다. 스타일 프로퍼티 설명 column-count 컬럼의 열 수를 지정하는 것 column-width 컬럼의 열 폭을 지정하는 것(실제 열 폭은 영역 크기에 따라 변화) columns: -width -count; 위 두 스타일의 Shorthand 스타일 column-gap 컬럼 사이의 간격 column-span 복수의 컬럼을 건너는 요소 column-rule-width 각 컬럼을 구분하는 선의 굵기 column-rule-style 각 컬럼을 구분하는 선의 종류..

Study/Javascript, Jquery, CSS 2020. 2. 17. 22:59

[CSS] 정렬 스타일(float)

안녕하세요. 명월입니다. 이 글은 CSS에서 정렬 스타일(float)에 대한 글입니다. 이전 글에서 position를 재 배치에 대한 글 작성한 적이 있습니다.링크 - [CSS] 위치(postion)과 요소 객체 스타일(display) 태그의 배치를 설정하는 것 중에는 float로 태크를 정렬 배치를 할 수 있습니다.float는 position이 absolute인 경우는 정상적으로 작동하지 않을 수 있습니다. 1 2 3 위에 예를 보면 p태그는 높이가 50px인 1번 사각형과 20px인 2번, 3번 사각형이 있습니다. 사실 div는 block 스타일이기 때문에, 기본적으로 너비가 100%입니다만 float가 적용되면 inline스타일로 바뀌는데 50% - 12px 크기로 변합니다. 그렇다고 실제 태그 스..

Study/Javascript, Jquery, CSS 2020. 2. 12. 00:06

[CSS] 위치(postion)과 요소 객체 스타일(display)

안녕하세요. 명월입니다. 이 글은 CSS에서 위치(postion)과 요소 객체 스타일(display)에 대한 글입니다. HTML은 기본적으로 태그가 위에서 아래로, 왼쪽에서 오른쪽 순으로 배치가 됩니다. 사람이 문서를 해독할 때, 가장 자연스러운 흐름이 위에서 아래이고 왼쪽에서 오른쪽으로 흐르기 때문에 이런 흐름도 크게 나쁘지 않습니다. 그러나 UX나 UI의 디자인 패턴으로는 이런 흐름의 디자인으로 한계가 있습니다. 각 태그마다 위치와 객체 스타일이 정해져 있지만 이것을 CSS 스타일에서 재설정할 수 있고, 위에서 아래, 왼쪽에서 오른쪽의 형태가 아닌 자유스럽게 브라우져의 픽셀 위치로 계산해서 강제적으로 위치를 설정할 수 있습니다. item div.item { /* div는 기본적으로 display가 b..

Study/Javascript, Jquery, CSS 2020. 1. 29. 23:01

[CSS] 테두리 및 여백 스타일 - border, margin, padding

안녕하세요. 명월입니다. 이 글은 CSS에서 테두리 및 여백 스타일 - border, margin, padding에 대한 글입니다. CSS 스타일이라고하면 기본적으로 문자열, 여백, 테두리, 위치, 상태 스타일이 기본적으로 많이 사용되는 스타일입니다. 문자열에 대해서는 예전에 설명한 적이 있습니다. 링크 - [CSS] 문자 스타일 html태그 중에서 가장 많이 사용되는 태그라고 하면 div태그와 table태그가 있습니다. 그 중 table태그가 테두리 태그를 많이 사용합니다. 테두리 태그라고 해서 꼭 table만 사용하는 것은 아니고 다른 태그에서도 사용됩니다. title description test1 data1 test2 data2 예제에서 테이블을 만들고 그 중 해더 태그(thead)와 바디 태그(..

Study/Javascript, Jquery, CSS 2020. 1. 28. 23:40

[CSS] 문자 스타일

안녕하세요. 명월입니다. 이 글은 CSS에서 문자열 스타일에 대한 글입니다. CSS는 웹 페이지에서 style sheet, 레이아웃과 스타일에 대한 정의 마크업입니다. 그중 문자열 스타일은 웹페이지에서 사용되는 글자에 대한 스타일입니다. 문자열은 아마 제가 생각하기로 웹 페이지를 만드는 요소 중에 가장 많은 요소를 차지하지 않나 싶습니다. 물론 웹 페이지의 특성상 이미지나 동영상, 글자보다는 다른 요소가 많은 경우도 있습니다만, 대부분은 문자열이 대부분일 것입니다. 문자열 스타일은 css에서 어미에 거의 font라는 키워드를 포함하고 있습니다. Hello World!!!! html { font-size: 12px; } body { font-size: 12px; } div.test { /* 문자 사이즈 설..

Study/Javascript, Jquery, CSS 2020. 1. 27. 22:58

[CSS] 의사 선택자 - link, visited, target, enabled, disabled, not, active, hover, focus

안녕하세요. 명월입니다. 이 글은 CSS에서의 의사 선택자(link, visited, target, enabled, disabled, not, active, hover, focus)에 대한 글입니다. 의사 선택자는 유저의 action과 관계가 있는 선택자입니다. 예를 들면, link의 선택자는 a태그에서 한번도 클릭한 적이 없는 선택이고 visited의 경우는 선택을 클릭한 적이 있는 선택자입니다.즉, 같은 a태그의 style이라도 유저의 선택한 경험에 의해 적용되는 선택자입니다. 또 hover의 경우는 마우스가 해당 요소 위에 있는 지 없는 지에 따른 style선택입니다. 명월일지1 명월일지2 명월일지3 명월일지1 명월일지2 명월일지3 /* a 태그 중에 방문한 적이 없는 태그*/ a:link { co..

Study/Javascript, Jquery, CSS 2020. 1. 23. 23:44

[CSS] 의사요소 - fist-line, first-letter, before, after

안녕하세요. 명월입니다. 이 글은 CSS에서의 의사요소 (fist-line, first-letter, before, after)에 대한 글입니다. 지금까지 의사클래스 선택자에 대해서 설명했는데, 명명이 조금 다른 의사요소 선택자입니다. (다른 전문 분야의 전문 용어는 잘 모르겠는데, IT 관련 전문 용어도 일본에서 온 경우가 많아서 명명이 참 더럽습니다. 지금이야 한국 IT도 많이 발전해서 영어 직독해한 전공 서적이 많은데, 예전에는 영어로 된 전공 서적이 일본어로 번역되고 다시 한국어로 번역된 것이 많아 이상한 명명들이 참 많습니다.) 의사요소는 태그와 속성를 선택하는(의사클래스) 선택자가 아니고 태그 안의 Text 요소를 선택하는 선택자입니다. 의사요소 선택자의 특징은 (:)으로 선택 요소를 설정합니..

Study/Javascript, Jquery, CSS 2020. 1. 22. 23:35

[CSS] 의사클래스 - only-child, only-of-type, empty, empty, root

안녕하세요. 명월입니다. 이 글은 CSS에서의 의사클래스(only-child, only-of-type, empty, empty, root)에 대한 글입니다. 이전에 의사클래스의 선택자를 설명한 적이 있습니다.링크 - [CSS] 의사클래스 - nth-child, nth-of-type, nth-last-child, nth-last-of-type링크 - [CSS] 의사클래스 - first-child, last-child, first-of-type, last-of-type 의사클래스 선택자는 태그(요소)의 위치에 따른 선택이 되는 것입니다만 이 글에서의 의사클래스는 유일한 요소인지, 존재하지 않는 지에 대한 선택자입니다. This is p tag. This is span tag. This is p tag. Th..

Study/Javascript, Jquery, CSS 2020. 1. 21. 23:22

[CSS] 의사클래스 - first-child, last-child, first-of-type, last-of-type

안녕하세요. 명월입니다. 이 글은 CSS에서의 의사클래스(first-child, last-child, first-of-type, last-of-type)에 대한 글입니다.first-child와 first-of-type 에 대해서는 nth-child(1)와 nth-of-type(1)과 같은 의미의 의사 클래스입니다.의사클래스는 오브젝트의 속성이나 태그를 이용한 선택이이 아닌 html의 배치에 따른 선택자이기 다른 라이브러리나 javascript로 동적으로 작성된 오브젝트에 관해 사용되는 선택자이기도 합니다. 링크 - [CSS] 의사클래스 - nth-child, nth-of-type, nth-last-child, nth-last-of-type 1 2 3 4 위 예제를 보면 table태그에 제가 테두리(bor..

Study/Javascript, Jquery, CSS 2020. 1. 16. 23:05

[CSS] 의사클래스 - nth-child, nth-of-type, nth-last-child, nth-last-of-type

안녕하세요. 명월입니다. 이 글은 CSS의 의사클래스(nth-child, nth-of-type, nth-last-child, nth-last-of-type)에 대한 글입니다. 이전에 태그의 속성(attribute)를 이용해서 html 요소를 선택하는 방법에 대해 설명했습니다. 링크 - [CSS] 속성 선택자 이번에는 요소의 위치에 대해서 선택하는 방법입니다. 이 CSS의 의사클래스를 사용하는 곳에서는 class나 id, 혹은 속성으로 선택하기 힘든 영역이 있습니다. 특히나 오픈 라이브러리를 사용하는 경우에는 class와 id의 구조가 정확하게 구분하기가 시간도 많이 걸리고 복잡하기 때문에 보통 그때는 의사클래스(태그의 위치)를 이용해서 요소를 선택, 스타일을 적용합니다. 1 2 3 4 5 6 7 8 nt..

Study/Javascript, Jquery, CSS 2020. 1. 15. 23:29

[CSS] 범위와 지정에 대한 선택자(전체 선택자, 요소 선택자, 자손 선택자, 자식 선택자, 인접 선택자)

안녕하세요. 명월입니다. 이 글은 CSS에서 범위와 지정에 대한 선택자(전체 선택자, 요소 선택자, 자손 선택자, 자식 선택자, 인접 선택자)에 대한 설명입니다.지난 글에서 속성과 id, class를 통해 요소를 선택하는 속성 선택자에 대해 설명했습니다.링크 - [CSS] 속성 선택자 이번에는 그 선택된 속성을 기준으로 인접된 요소나 파생(하위) 요소들을 선택하는 방법입니다.먼저 style에서 별 표시(*)는 모든 요소를 선택하는 방법입니다. 모든 요소는 보통 font-style 정도나 기본 padding이나 margin 설정을 할 때 사용하기는 하는데 많이 사용되는 선택자는 아닙니다.그리고 style 설정에 태그 혹은 id나 class, 속성을 선택합니다만, 콤마(,)를 사용하면 복수로 선택이 가능합니..

Study/Javascript, Jquery, CSS 2020. 1. 15. 00:04

[CSS] 속성 선택자

안녕하세요. 명월입니다. 이 글은 CSS의 속성 선택자에 대한 글입니다. 이전 글에서 CSS 선택자에 대해서 간략하게 설명했었습니다.링크 - [CSS] Selector(선택자) CSS의 선택자는 여러가지 방식이 있는데 그중 가장 많이 사용되는 오브젝트(element) 선택 방법이지 않을까 싶습니다.먼저 속성 선택자는 html의 태그를 살펴보면 태그 명이 있고 속성(attribute)가 있는 형태로 구성됩니다. 여기서 우리가 흔히 사용되는 id와 클래스도 xml 구성으로 보면 결국은 속성(attribute)의 종류입니다.그러나 id와 class는 자주 사용하고 object를 구분하는 중요한 속성이기 때문에 id의 경우는 「#」를 사용해서 class의 경우는 「.」를 사용해서 선택이 가능합니다. 명월일지 명..

Study/Javascript, Jquery, CSS 2020. 1. 15. 00:02