어제 오늘 내일

CSS에 주석은 보통 스타일의 목적을 설명하기 위해 추가하는 경우가 많습니다. CSS 주석 CSS의 주석은 아래와 같이 '/*'로 시작해서 '*/'로 끝납니다. /* 주석 */ CSS 주석 예제 /* 파란 박스 */ .blue-box { background-color : blue; height : 50px; width : 50px; } HTML과 Javascript에 주석을 추가하는 방법은 다음 포스팅을 참조하세요. 2017.06.13 - [IT/HTML] - [HTML] 주석 달기 (Comment) [HTML] 주석 달기 (Comment) HTML 파일의 코드가 길어지면 도대체 이 코드들이 무슨 말을 하는 건지 알아보기가 힘들다. 그래서, HTML은 브라우저가 알아보는 언어이지, 인간이 쉽게 알아보기 ..

CSS를 이용하여 세로줄 긋는 방법을 소개합니다. CSS를 이용하여 세로줄 그리기 가로줄은 태그를 이용해서 비교적 쉽게 그릴수 있었는데요. 세로줄을 그려주는 HTML 태그는 없기 때문에 여기서는 CCS를 이용해서 세로줄을 그리는 방법을 소개합니다. border-left 속성 .v-line { border-left : thick solid #32a1ce; height : 50px; } 세로줄을 그리기 위해서 를 하나 생성하고, css의 border-left 속성을 사용하여 div의 왼쪽 border의 스타일을 지정해주었습니다. border-left에는 3개의 값을 지정할 수 있습니다. 첫번째 값 : width 기본값 : medium 허용값 키워드 값 thin : 얇은 테두리 medium : 중간 테두리 t..

Javascript를 이용하여 DOM 객체를 다루는 방법을 알아보고 있습니다. [Javascript] 선택자, DOM 특정 요소(element) 찾기 [Javascript] class 추가/변경/삭제/읽기 (className, classList) [Javascript] innerHTML, innerText, textContent 차이점 이번에는 DOM의 CSS Style을 변경하고, 읽어오는 방법을 정리해 보도록 하겠습니다. 1. style 속성값 변경 (1) style 속성 사용하기 - css 속성 하나씩 추가하기 (2) style.cssText 사용하기 - css 속성 한번에 여러개 추가하기 (3) style, style.cssText 사용시 주의할 점 2. style 속성값 읽어오기 (1) styl..

답답한 마음에 갑자기 바다가 보고 싶었다. 멀리서부터 밀려오고, 부서지는 파도 소리 비릿한 냄새 차가운 바람 이미 오후로 들어선 시간. 일몰까지 얼마나 남았는지 찾아보고, 도착지까지 얼마나 걸리는니 찾아보니 아슬아슬했다. 망설이다가 그래도 가지 않으면 계속 후회할 것 같아 길을 나섰다. 오후 4시쯤 아야진 해변에 도착했다. 도착해보니 역시 후회없는 선택!! 오길 잘했다!!! ♡

Javascript에서 주석을 다는 방법은 2가지가 있습니다. 한줄 주석 달기 여러줄 주석 달기 한줄 주석 달기 ( // ) // id가 greeting인 element에 '안녕하세요~' 메제지를 추가합니다. document.getElementById('greeting').innerText += '안녕하세요~'; 간단하게 한줄짜리 주석을 달때 사용합니다. 여러줄 주석 달기 ( /* 주석내용 */ ) /* id가 greeting인 element에 '안녕하세요~' 메제지를 추가합니다. */ document.getElementById('greeting').innerText += '안녕하세요~'; 여러줄의 주석을 한번에 추가해야 할때 사용합니다. '/*'(주석 시작)와 '*/'(주석 종료) 표시가 항상 대꾸가 ..

요즘 오랜 재택으로 집밖에 거의 두문불출 중이지만, 왠지 인후통이 있는 것 같아 혹시나 하는 마음에 코로나 자가 진단 키트로 검사를 했다. 동네 약국에서 1박스를 16,000원에 구입! (1박스에 2번 시험할 수 있는 도구가 들어있다.) 사용 방법은 1. 동봉된 면봉으로 양쪽 코 안을 문질문질 한다. (깊숙히 문질문질 하지 않아도 되고, 코 안쪽 1.5cm 정도 깊이에서 10회 이상 회전시켜서 문질문질한다.) 2. 면봉을 시험 용액에 담가서 10회이상 휘젓는다. 3. 시험 용액을 검사지에 3-4방울 떨어뜨린다. 4. 15분정도 기다린다. 진단 키트에는 검사시간이 15분 정도 걸린다고 되어 있었지만 사실 검사결과는 시험용액을 검사지에 떨어뜨리자마자 나오기 시작했다. 결과는 다행히 음성 사진처럼 진단지의 C..

재택근무를 계기로 장만한 스테인리스 모카포트 비알레띠 비너스 2컵. 매일매일 나를 위해 열심히 커피를 맛있게 내려주고 있는 고마운 녀석이다. 원래 모카포트는 세제를 사용하지 않는 거라고 해서 (세제 냄새가 모카포트에 배어서, 커피맛을 해칠수 있기 때문에) 항상 물로만 세척을 했었는데, 오늘은 오랜만에 본격적으로 세척을 해보기로 했다. 준비물 물 베이킹소다(또는 식초) 먼저 밑에 있는 보일러에 물을 채우고, 베이킹 소다 투입! 국민 수저인 베스킨라빈스 스푼을 이용하였다. 바스켓을 넣고, 컨테이너를 닫고, 끓이기 시작했다. 이러면, 커피를 내릴 때처럼 보일러에 담긴 베이킹소다 물이 컨테이너로 올라오면서 세척이 될거라고 생각했지만... 물은 올라오지 않고...... 생각해보니, 뭔가 압력이 있어야 보일러의 물..

이전 글에서 React에서 주로 사용하는 webpack과 babel의 차이를 알아보았다. [React] babel과 webpack의 차이 [React] babel과 webpack의 차이 React의 개발 환경을 구성하려면, 여러가지 도구들이 필요하고, 이 도구들에 대한 설정을 해 주어야 한다. 대표적으로 webpack + babel 설정을 해 주어야 한다. webpack : JavaScript의 static module bundler bab.. hianna.tistory.com Create React App 이란? React 개발 환경을 설정하기 위해서는 대부분 위 2가지 도구에 대한 설정이 필요하고, 이 외에도 다양한 개발 환경 설정이 필요하다. 이러한 설정을 간단하게 대신 해주는 것이 CREATE-R..

React의 개발 환경을 구성하려면, 여러가지 도구들이 필요하고, 이 도구들에 대한 설정을 해 주어야 한다. 대표적으로 webpack + babel 설정을 해 주어야 한다. webpack : JavaScript의 static module bundler babel : JavaScript Compiler (Transpiler) babel babel은 Javascript의 compiler라고 할 수 있다. Java나 C의 컴파일러처럼, 소스코드를 바이너리 파일로 변환하는 것은 아니지만, 아래와 같이 React의 JSX문법을 Vanilla JavaScript로 변경하거나, 최신버전의 문법을 구 버전 문법으로 변환해 준다. JSX 를 Vanilla JavaScript로 변경해 준다. React에서는 JSX라는 R..

Java에서 사용하는 명령어인 java 와 javac의 차이점을 소개합니다. 1. javac javac 명령오는 텍스트 파일로 작성된 java 파일을 bytecode로 컴파일 합니다. 컴파일된 파일은 '.class' 파일로 저장됩니다. 위 예제에서는 Main.java 파일을 javac 명령어를 이용하여 컴파일 하였습니다. 컴파일 후 Main.class 파일이 생성된 것을 확인 할 수 있습니다. 2. java java 명령어로는 javac 명령어로 컴파일한 '.class' 파일을 실행시킬 수 있습니다. Main.java public class Main { public static void main(String[] args) { System.out.println("Hello Anna"); // abc } }..