본문 바로가기

IT/HTML & CSS & JavaScript47

자바스크립트 문자 -> 숫자 형변환(parseInt, number) 문자형과 10과 문자형 10을 더하게 되면 계산이 되는 것이 아닌 단순히 1010으로 붙여서 표시되어 나온다. 이번시간에는 문자형을 숫자형으로 변경하는 방법에 대해서 알아보겠습니다. 먼저 기본적인 자료형은 다음과 같습니다. String() : 문자형으로 변환 Number() : 숫자형으로 변환 -> ""로 입력하면 NAN을 반환하니 주의 Boolean() : 불린 형으로 변환 -> 0, "", null, undefined, NAN -> false이고 나머지는 true 문자형 계산식 결과 프롬프트에 값을 입력받아서 계산한 결과입니다. 결과는 85가 나와야 정상이지만 다른 결과값인 4045를 보여줍니다. const mathscore = prompt("수학 점수를 입력하세요", "점수"); //80 const.. 2021. 9. 3.

[자바스크립트] alert, prompt, confirm (경고 & 입력 & 확인창) 기본적으로 브라우저에서 제공되는 윈도우 창 3가지에 대해서 알아보겠습니다. 아래는 윈도우창을 불러오는 3가지 문자입니다. 1. alert 2. prompt 3. confirm 기본적으로 제공되어진 함수이기 때문에 사용하기 편리하지만 단점도 존재하는데요. 윈도우 창이 뜬 다음 확인을 누르기 전까지 스크립트가 일시 정지됩니다. 그리고 웹브라우저 마다 창의 스타일과 위치가 있어서 수정이 불가능합니다. 1. alert (경고창) 자바스크립트에서 alert는 경고창으로 사용됩니다. 보통 로그인 화면에서 아이디나 패스워드를 잘못 입력한 경우 경고창으로 표시되는 경우를 볼 수 있을 텐데요. 일방적으로 원하는 메시지를 뛰우고 확인을 누르면 종료됩니다. alert("패스워드가 잘못되었습니다."); 2. prompt 사용.. 2021. 9. 3.

[자바스크립트] 자료형 / 문자(String), 숫자(Number), 불린(boolean), typeof 사용법 이번 시간에는 자바스크립트(javascript)의 자료형인 문자(String), 숫자(Number), 불린(boolean) 3가지에 대해서 알아보겠습니다. 1. 문자형(String) 문자형은 단어 입력 시 큰따옴표나"" 홑 따옴표''로 감싸주어야 합니다. 자바스크립트에서 변수를 쌍따움표"" 문장에 표시하자고 할 경우에는 다음과 같이 ${변수명}으로 입력합니다. 여기서 중요한 것은 문자를 감싸고 있는 구분자가 `(백띡)이라는 것에 주의합시다. (백띡은 키보드 1번 옆에 있음) const name1 = "코마"; const age =20; console.log(name1); const message1 = `내 "이름"은 ${name1}입니다. 그리고 "나이"는 ${age+10}살 입니다.`; //숫자 1번키.. 2021. 9. 3.

[자바스크립트] 문자형 - var, let, const 변수 차이점 설명 및 사용법 변수는 어떤 정보에 이름을 붙여서 저장하고 싶은 경우에 사용합니다. 예약어인 class와 같이 미리 정해져 있는 경우 사용이 불가합니다. JavaScript 변수 구분(var, let, const) var 변수명 : 일반적으로 사용되며 중복 선언이 가능합니다. let 변수명 : 한번 선언했던 변수와 동일하게 생성되는 것을 방지합니다.(중복 사용금지) const 변수명 : 절대로 변경되지 않을 값을 사용할때 쓰게 됩니다.(주민번호) 1. 변수는 문자와 숫자, $, _ 만 사용가능 var test1 = "문자"; let _tt = "1"; const $ = "3"; console.log(test1); console.log(_tt); console.log($); 2. 첫 글자는 숫자가 될 수 없습니다. 변수 .. 2021. 9. 3.

HTML 기초 핵심요약 - 10분만에 완성하는 웹사이트 웹사이트 개발을 빨리 하고싶은 분들을 위해서 웹사이트 제작에 필요한 HTML 기초 핵심 내용들을 공부해 보겠습니다. 이렇게 속성으로 필요한 핵심 내용들만 공부하고 나머지 세부적인 기능들은 웹페이지를 만들면서 하나씩 찾아보시기 바랍니다. 사이에 사용됩니다. 문법 타이틀 결과 2. link 다른곳에 저장된 파일들을 해당 HTML 문서에 불러오는 기능을 합니다. 사이에 사용됩니다. 문법 결과 3. meta mate 태그는 내 웹사이트가 어떤 정보를 가지고있는지 검색 엔진에게 더 자세하게 알려주는 역할을 합니다. 문법 결과 4. style HTML 크기, 색깔 등의 스타일을 컨트롤 하는 태그입니다. HTML 문서 안에서 직접 스타일이 적용되었습니다. 결과2 문법2 style.css파일을 별도로 만들어서 연동해서.. 2021. 8. 27.

HTML 테이블 만들기- tr, td HTML 테이블의 기본 구조는 과 태그로 구성됩니다. 이번 시간에는 테이블은 만드는 방법에 대해서 알아보겠습니다. 1. 테이블의 기본 구조 태그는 테이블에서 열을 구분해 줍니다. -> 태그는 테이블의 열을 각각의 셀(cell)로 나누어 줍니다. 태그는 각 열의 제목을 나타내며, 굵은 글씨와 가운데 정렬이 됩니다. 순번 물품 가격 1 사과 500 2 바나나 1000 2. 테이블 행,열 합치기 테이블의 구조를 봐가면서 합치기를 진행하면 쉽게 알수 있습니다. rowspan : 테이블 행 합치기 colspan : 테이블 열 합치기 순번 물품 가격 1 사과 바나나 1000 3. 테이블 제목 달기 태그안에 태그를 사용하면 상단에 제목이나 짧은 설명을 넣을 수 있습니다. 가격표 순번 물품 가격 1 사과 바나나 100.. 2021. 8. 27.

HTML 리스트 - li, ul, ol, dl 리스트란? HTML에서 작성한 문자들을 일렬로 나열하여 목록으로 표현해주는 태그입니다. 리스트의 종류에는 ul, ol, dl 있는데요 이번 시간에는 3개의 사용법에 대해서 알아보도록 하겠습니다. 1. 순서가 없는 리스트 ul 태그를 사용하며 작은 점으로 리스트가 표시 됩니다. 이 모양은 스타일 속성을 통해서 모양을 변경할 수 있습니다. - disc : 검정색 작은 원 모양 (기본) - circle : 흰색 작은 원 모양 - square : 사각형 모양 검정색 작은 원 모양 (기본) 돼지고기 1 돼지고기 2 돼지고기 3 흰색 작은 원 모양 소고기 1 소고기 2 소고기 3 검정색 사각형 모양 양고기 1 양고기 2 양고기 3 2. 순서가 있는 리스트 ol 태그를 사용하며 숫자로 리스트가 표시됩니다. 다양한 순.. 2021. 8. 27.

HTML img src, map - 이미지 넣기, 이미지 링크 추가 이번 시간에는 HTML 이미지를 넣는 태그에 대해서 알아보겠습니다. 문법 예제 1. 이미지 크기조절 이미지를 넣고나면 style 태그를 사용하여 크기 및 테두리 등을 설정 할 수 있습니다. border: 테두리 width : 넓이 height : 높이 2. 이미지 링크설정 이미지에 태그를 추가해서 링크를 넣을 수 있습니다. 이미지 위에 마우스를 올려보면 다음 사이트로 어떤 사이트로 연결되어 있는지 볼 수 있습니다. 3. 이미지 맵 생성 태그를 이용해서 이미지맵을 만들 수 있습니다. 여기서 coords 속성은 좌표 값이며 shape="rect" 속성과 같이 사용합니다. 먼저 이미지 크기가 가로, 세로 200으로 설정되어 있는것을 생각하고 cords의 첫번째 두번째 2개의 값이 x1,y1 로 첫번째 좌표점 .. 2021. 8. 27.

HTML 하이퍼 링크 사이트 연결 - a href 웹사이트에서 글자를 누르면 다른사이트로 이동하는 것을 볼수 있습니다. 이번시간에는 HTML의 중요한 기능중 하나인 하이퍼링크 기능에 대해서 알아보도록 하겠습니다. 1. 하이퍼 링크 기본문법 HTML 링크 네이버와 다음 웹사이트로 연결하는 구문입니다. 네이버로 연결 다음으로 연결 2. target 속성값 _blank : 링크로 연결된 문서를 새 창이나 새 탭에서 오픈. _self : 링크로 연결된 문서를 현재 프레임(frame)에서 오픈. (기본설정) _parent : 링크로 연결된 문서를 부모 프레임(frame)에서 오픈. _top : 링크로 연결된 문서를 현재 창의 가장 상위 프레임(frame)에서 오픈. 프레임(frame) 이름 : 링크로 연결된 문서를 지정된 프레임(frame)에서 오픈. top m.. 2021. 8. 26.

HTML 배경색 & 배경 이미지 변경 - background-color HTML 문서 배경색은 기본적으로 하얀색으로 되어있습니다. 이번시간에는 배경색을 다른 색상으로 변경하는 방법과 배경색 대신에 이미지로 적용하는 방법에 대해서 알아보도록 하겠습니다. 1. HTML 배경색 변경 배경색을 변경하기 위한 style 속성은 background-color 입니다. 다음과 같이 색상을 변경할 수 있습니다. body : lightgreen h1 : red p : yellow 배경은 lightgreen 입니다. 빨간색이 적용되었습니다. 노란색이 적용되었습니다. 2. 배경을 이미지로 변경 배경을 색상말고 이미지로 지정하여 설정할 수도 있습니다. 문법 : ...... ....... 이상으로 HTML 배경색상 변경 및 이미지로 배경을 설정하는 방법에 대해서 알아보았습니다. 2021. 8. 26.

이전 1 2 3 4 5 다음

티스토리툴바