javascript30 (JAVASCRIPT) 원시 타입과 객체 타입 차이 정리 데이터 타입 객체는 Object라고 불립니다. 이번에는 데이터 타입인 단일 데이터와 복합 데이터의 차이에 대해 알아보도록 하겠습니다. 단일 데이터 원시 타입 단일한 값을 하나씩 담을 수 있는 단일 데이터인 원시(primitive) 타입. 단일 데이터는 원시 타입인 숫자 타입, 문자열 타입, 불리언 타입, null 타입, undefined 타입, symbol 타입이 있습니다. let Alphabet = ['A', 'B', 'C']; 단일 데이터인 원시 타입이 메모리에 어떻게 보관이 되냐 하면, 변수에 값을 할당하게 되면 메모리 셀에 값이 들어가게 되고, 변수는 값이 들어있는 메모리셀의 주소를 가리키게 됩니다. 복합 데이터 객체 타입 연관된 데이터를 함께 묶어서 보관할 수 있는 복합 데이터인 객체(objec.. FRONT-END/JAVASCRIPT 2022. 8. 9. (JAVASCRIPT) 단일 데이터 타입 - 불리언 타입 (Boolean) 데이터 타입 중에 하나인 불리언 타입에 대해 알아보도록 하겠습니다. 불리언 타입 불리언(Boolean)은 참/거짓을 의미하는 true와 false 두 개의 값을 가지고 있는 데이터 타입입니다. 숫자 0은 false로 변환되고 0 이외의 모든 숫자는 true로 변환 됩니다. 문자열은 False 이다! 불리언 값을 변수의 값으로 할당하여 사용할 때 큰따옴표 및 작은 따옴표 안에 값을 넣지 않도록 주의해야 합니다. let isTrue = true; let isFalse = false; console.log('isTrue is', isTrue); console.log('isFalse is', isFalse); /* isTrue is true isFalse is false */ Truthy & Falsy 불리언에.. FRONT-END/JAVASCRIPT 2022. 8. 9. (JAVASCRIPT) 단일 데이터 타입 - 문자열 타입 (String) 데이터 타입 중에 하나인 문자열 타입에 대해 알아보도록 하겠습니다. 문자열 타입 Javascript 에서 문자열을 사용하는 방법은 여러 가지가 있습니다. "" 큰따옴표 '' 작은따옴표 `` back-quote let string = '서근 개발 노트'; let string2 = "서근 개발 노트" string = `서근 개발 노트 입니다.` console.log(string); console.log(string2); /* 서근 개발 노트 입니다. 서근 개발 노트 */ 특수문자 출력 문자열 안에 작은 또는 큰따옴표를 사용하고 싶다면 밖에 오는 기호를 반전시켜주면 됩니다. let name = '"서근 입니다."' console.log(name) name = "'미진 입니다.'" console.log(name.. FRONT-END/JAVASCRIPT 2022. 8. 9. (JAVASCRIPT) 단일 데이터 타입 - 숫자 타입 Data Type에는 여러가지 타입들이 존재하는데 오늘은 단일 데이터 원시(primitive) 타입중 하나인 number 타입에 대해 알아보도록 하겠습니다. 숫자 타입 숫자 타입에는 정수, 음수, 실수 그리고 2진수, 8진수, 16진수 등을 모두 담아줄 수 있습니다. let integer = 12345; //정수 let negative = -12345; //음수 let double = 12.345; //실수 console.log('integer:', integer); console.log('negative:', negative); console.log('double:', double); console.log('/*===============*/') let binary = 0b11000000111001;/.. FRONT-END/JAVASCRIPT 2022. 8. 3. (JAVASCRIPT) 변수 이름을 효과적으로 짓는 방법 자바스크립트에서 변수의 이름을 짓는것은 쉬워 보이지만, 아주 중요한 부분중에 하나입니다. 오늘은 변수의 이름을 어떻게 효과적으로 짓는지에 대해 알아보도록 하겠습니다. 변수 이름 짓는 방법 만약 let a = '서근'; 과 같이 변수 이름을 아무 의미 없이 a 로 지어주게 되면, 나중에 찾기도 힘들고 연관성이 전혀 없기 때문에 변수 이름에는 최악인 변수명이라고 볼 수 있습니다. Naming Variables란 저장된 값을 잘 나타낼 수 있는 이름이라는 의미를 지니고 있습니다. 즉, 이름이 구체적이고 연관성이 있으면 좋겠죠. mdn web docs_ 라는 사이트에 변수와 변수 이름 짓는 방법에 대해 아주 잘 설명되어있는데, 이 사이트를 참고하여 작성되었습니다. 사용하면 안 되는 변수 이름 ( 예약어 ) 변수.. FRONT-END/JAVASCRIPT 2022. 8. 3. (JAVASCRIPT) ESMAScript란? ES6 / ES7 ESMAscript JavaScript는 1995년 넷스케이프(Netscape) 웹페이지에 동적인 요소를 구현하기 위해서 발명되었습니다. 그 후 넷스 케이브뿐만 아니라 다른 웹 브라우저들까지 이를 탑재하기 시작했고, 다양한 웹 브라우저들에서 JavaScript가 공통되게 잘 작동되기 위해서는 표준 규격이 필요성이 커지게 되었습니다. 때문에 ECMA 국제기구에서는 'ECMAScript standard'라는 스크립트 표준을 만들었습니다. ECMAScript는 ECMA 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어입니다. ES6는 ECMA라는 국제 기구에서 만든 표준문서인 ECMAScript(=ES)의 6번째 개정판 문서에 있는 표준 스펙을 하고, ES의 6번째 버전이 .. FRONT-END/JAVASCRIPT 2022. 8. 2. [HTML #8] 표 table, tbody, tr, td, thead, caption HTML 에서 간단하게 태그를 통해 표를 만드는 방법에 대해 알아보겠습니다. Table 태그는 이름 그대로 표를 생성해주는 HTML 태그입니다. 의 태그는 아래와 같습니다. 태그 속성 설명 테이블을 생성하는 태그 각 열의 제목을 정의 테이블의 행 (세로) 테이블의 열 (가로) / 하나의 테이블 셀을 정의 테이블을 하나의 그룹으로 묶을 때 사용 테이블의 헤더 부분을 그룹화 테이블 캡션을 붙일때 태그 바로 뒤에 사용 태그 속성 사용 그럼 위 태그를 을 사용해보도록 하겠습니다. 시작은 로 시작하고 행과 열을 와 태그로 정해 주면 됩니다. 바로 위에 사용된 표를 그대로 HTML로 작성해보려고 합니다. 가로가 7줄, 세로가 2줄로 정해주고, 태그를 총 7개, 그리고 태그 안에 태그를 총 2개씩 넣어주면 됩니다. .. FRONT-END/HTML 2022. 7. 24. [HTML #7] 이미지 img (src를 CSS로 대체 하는 방법) Img 태그는 이미지를 삽입할 수 있게 해주는 HTML 태그 입니다. 오늘은 HTML에서 태그 속성을 사용하는 방법과 CSS로 src를 대체하는 방법에 대해 알아보았습니다. Img 태그는 웹페이지에 이미지를 삽입할 수 있게 도와주는 태그인데, 이 속성으로는 src, width, height, alt, title로 총 5가지가 존재합니다. src : 이미지의 경로 width : 이미지의 가로 크기 height : 이미지의 세로 크기 alt : 이미지가 표시되지 않거나, 잘못된 경로일 때 출력되는 메시지 title : 이미지의 간략적인 정보 표기를 위한 말풍선 태그 사용 방법 태그는 닫는 태그 없이 속성만으로 사용이 가능합니다. 만약, 경로에 오류가 있거나 삭제 또는 존재하지 않는 이미지 일시에는 alt에 .. FRONT-END/HTML 2022. 7. 24. [HTML #5] DOCTYPE - !doctype html HTML을 디버깅 하다보면 상단에 과 같은 선언을 보게 되는데 오늘은 이것에 대해 간단하게만 알아보려고 합니다. HTML DOCTYPE HTML에 들아가는 문자인 은 줄 여말 해 DTD라고 불리기도 하며, Document Type Declaration의 약자 입니다. 직역해보면 문서 형식 선언이라고 보면 되겠네요..! DTD란 HTML을 작성할 때, 작성된 코드가 어떤 방식의 HTML 코드로 선언되었는지 브라우저에게 알려주는 문자라고 볼 수 있습니다. HTML5은 구조상 DTD로 충분히 정의될 수 없으나 표준 문서를 명시할 필요성이 있으므로 아래와 같은 문서 형식 선언을 갖게 됩니다. DOCTYPE은 복잡하게 생각할 필요 없이, HTML으로 웹을 만들 때 최상단에 을 선언해주시기만 하면 됩니다. 참고로 .. FRONT-END/HTML 2022. 7. 24. [HTML #3] 태그 중첩 조합 li, ul, ol HTML에서는 태그를 중첩해서 사용하는 경우도 빈번한데 이번에는 왜 태그를 중첩해서 사용해야 하는지 알아보도록 하겠습니다. HTML 중첩 태그 대표적으로 중첩 태그를 흔하게 사용하는 것은 바로 리스트입니다. 태그를 사용해 보면서 중첩 태그란 무엇인가에 대해 알아보죠. 리스트형식인 텍스트를 정렬하고 싶을 때는 태그를 사용하여 쉽게 정렬해줄 수 있습니다. 서근 미진 희진 유진 만약 섹션이 있는 리스트를 만들고 싶다면 태그를 중첩 사용해야 합니다. 예를 들어 아래와 같이 단순히 공백만 준다고 해도 HTML에서는 이를 인식하지 않고 그대로 나열된 상태로 출력하게 됩니다. 서근 미진 희진 유진 HTML CSS JS 이를 해결하기 위해서는 태그를 중첩 사용 하면 됩니다. See the Pen Untitled by .. FRONT-END/HTML 2022. 7. 24. [HTML #1] 태그 티스토리 블로그를 꾸미다 보니, 웹에 대한 매력에 빠져 좀 더 자세하고 깊게 배워보고 싶은 마음이 들어 HTML/CSS/JS 에 대한 지식을 정리하고 공유해 볼까 합니다. HTML HyperText Markup Language HTML은 웹 브라우저에 표시되는 기본적인 틀이라고 생각하면 됩니다. HyperText 하이퍼텍스트를 가장 중요한 특징으로 한다. 쉽게 말해 태그의 href 즉, 링크라고 생각하면 됩니다. Markup 마크업이라는 문법적인 형식을 가진 프로그래밍 언어 Language 컴퓨터 프로그래밍 언어 태그란? HTML은 확장자 로 시작해 로 마무리되어야 합니다. 서근 개발 노트 처음 등장하는 태그를 '시작 태그'라 칭하고, 슬래시가 있는 태그를 '닫히는 태그'라고 칭합니다. 그리고 그 태그 .. FRONT-END/HTML 2022. 7. 24. (티스토리) 태그 쉼표 제거 하는 방법 - Javascript 티스토리 스킨을 꾸미다 보면 태그 부분 뒤에 쉼표( , )가 나타나는 경우가 있는데, 오늘은 이 태그 쉼표를 제거하는 방법에 대해 알아보겠습니다. (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 태그 쉼표 제거 방법 태그 클래스 찾기 방법은 아주 간단합니다. 우선, 티스토리 스킨 편집 HTML 부분에서 찾기로 태그 클래스를 찾아줘야 합니다. 보통은 티스토리 태그 치환자인 를 찾아주신뒤, 해당 부분의 클래스가 있다면 그 클래스를 복사하시고, 클래스가 없다면 클래스명을 추가해주시면 됩니다. 제 스킨의 경우.. FRONT-END/JAVASCRIPT 2022. 7. 2. (Javascript) HTML SVG파일에 원하는 색상 적용하는 방법 HTML SVG파일 색상 변경 코드 Html에서 Img 태그에 SVG파일을 업로드하고 난 후, 색상을 변경하고 싶을 때가 있는데, 그때 CSS Filter 효과를 통해 원하는 색상을 입혀줄 수 있습니다. 먼저, 원하는 HEX 코드가 필요합니다. HEX 코드는 다양한 경로를 통해 알 수 있는데 아래 사이트에서 Color Picker를 통해 알아내거나, 원하는 이미지를 업로드해서 HEX코드를 따올 수 있습니다. 👍 Color Picker online | HEX Color Picker | HTML Color Picker Color Picker:Color Picker: With this online tool you can upload an image or provide a website URL and get t.. FRONT-END/JAVASCRIPT 2022. 6. 30. (티스토리) 날짜를 현재 중심적 시간표시 하는 방법 (며칠 전, 몇 개월전..) 오늘은 댓글에서 요청해주셨던 포스팅 또는 댓글 등의 날짜를 현재 중심적인 시간으로 동적 표시하는 방법에 대해 알아볼까 합니다. 이 스크립트를 사용하게 되면, 하루 전, 며칠 전, 몇 개월 전, 약 몇 년 전처럼 나타낼 수 있습니다. 날짜를 현재 중심적 시간 표시하는 방법 제 블로그에 적용되어있는 스크립트는 크게 두 가지입니다. 하나는 nubiz 님께서 만드신 스크립트와 또 하나는 timeago 플러그인입니다. 둘 다 각자의 장점이 있는 거 같아서 저는 둘 다 사용하고 있습니다. nubiz 스크립트 nubiz님께서 작성하신 스크립트는 아래 블로그에서 그대로 적용하면 되는데, 왜인지 모르게 옛날에 작성하신 스크립트인지 본문의 게시글에서는 적상적으로 표시가 되지 않는 오류가 있었습니다. 또, 1년이 넘어가면 .. TIP/CSS & Tistory 2022. 6. 28. (티스토리) 스킨 편집 자바스크립트 및 CSS가 많을 때 한 파일로 몰아넣는 방법! 이번에는 티스토리의 스킨에서 HTML부분 자바스크립트 및 CSS가 너무 길 거나 많을 때, HTML 부분을 깔끔하게 한파일로 넣고 호출하는 방법까지 알아보도록 하겠습니다. HTML의 자바스크립트가 너무 많거나 중복되면 구글 SEO에 안 좋기 때문에 해당 방법을 사용하는 것을 추천드립니다. 만약 티스토리 스킨 편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 스킨 편집 자바스크립트 및 CSS 정리 방법 파일 생성 HTML에서 자바스크립트를.. TIP/CSS & Tistory 2022. 3. 17. 이전 1 2 다음 한국어 (기본) English Русский 日本語 👉🏻 잠깐만요! 이 글도 한 번 보고 가세요 이전글 다음글 티스토리툴바 서근 개발노트구독하기