본문 바로가기

JS & TS34

[JS] 다이얼로그 사용하기 [JS] 다이얼로그 사용하기 자바스크립트가 처음이시라면 해당 글을 먼저 보시는 것을 추천합니다. 2021/02/10 - [Javascript/Javascript정리] - [JS] Javascript 자바스크립트 기본 개념 [JS] Javascript 자바스크립트 기본 개념 [JS] Javascript 자바스크립트 기본 개념 자바스크립트 언어란? 자바스크립트 언어는 퍼즐 조각처럼 코드 형태로 HTML 페이지에 내장된다. 또한 컴파이 과정이 없고, 브라우저 내부의 자바스크립 heekng.tistory.com HTML 웹페이지에서 사용자에게 값을 입력받는 방법에는 태그가 있다. 하지만 간단한 자바스크립트 코드를 이용해 별도의 창에서 값을 입력받거나, 확인, 경고창을 띄울 수 있다. prompt(), confi.. 2021. 2. 11.
[JS] Javascript 자바스크립트 기본 개념 [JS] Javascript 자바스크립트 기본 개념 자바스크립트 언어란? 자바스크립트 언어는 퍼즐 조각처럼 코드 형태로 HTML 페이지에 내장된다. 또한 컴파이 과정이 없고, 브라우저 내부의 자바스크립트 처리기(인터프리터)에 의해 실행된다. 위와 같은 형태로 진행되어 컴퓨터는 내가 적은 코드 그대로를 읽는다. 웹 페이지에서 자바스크립트의 역할 웹 페이지는 HTML, CSS, Javascript(JS) 세 가지 언어가 결합되어 작성된다. HTML이 페이지의 구성을 담당하고, CSS가 웹 페이지의 디자인을 담당한다면 JS는 웹 페이지의 동적 제어를 담당한다. 예를 들어 버튼을 누르거나, 사용자 또는 내부적으로 어떠한 연산, 행위가 필요할 때 사용한다. 1. HTML의 form을 이용하여 입력 창을 제공하였다.. 2021. 2. 10.
[CSS] 시맨틱태그 SemanticTag 시맨틱이라는 단어는 "의미", "의미론적인"이라는 뜻을 가지고 있다. HTML5 이전에는 각각의 id에 header, footer과 같은 id를 주고 구별했지만, 개발자마다 다른점이 있다는 단점이 있었다. 따라서 HTML5에 시맨틱 태그를 도입해 개발자와 브라우저에게 의미있는 태그를 제공하게 되었다. 시맨틱 태그는 역할만 본다면 블록태그와 다른점이 없지만, 각각 의미를 가지고 브라우저가 해당 블록이 어떤 역할을 하는지를 알려준다. 예를 들면 태그의 경우 non-semantic태그이고, 단락을 나눈다는 것 이외에는 내용에 대한 의미를 유추하기 힘들다. 와 태그는 semantic태그이고, 어떠한 형태의 글이 포함될 것이라는 유추가 가능하다. 시맨틱 태그의 종류는 다음과 같다. , , , , , 검색 엔진 최.. 2021. 2. 7.
[CSS] 폰트 사이즈, 웹 폰트 사용하기 폰트 크기 조절 폰트의 사이즈를 조절하는 방법은 대표적으로 %, px, em, rem 세 가지가 있다. %: 기본 크기를 100%로 놓고 상대적인 비율로 크기 조절 px: 픽셀, 단순한 숫자로 크기를 조절하는 단위 em: 기본값을 바로 상위(부모) 태그의 폰트 크기 값으로 두고 상대적인 비율로 크기 조절 (ex. 1em = 100%, 1.5em = 150%) rem: 상위 태그의 폰트 크기 상관없이 html기본 폰트 크기(16px)에 상대적인 비율로 크기 조절 See the Pen mdOPEjZ by Heekng (@heekng) on CodePen. div1: html기본 폰트 크기인 16px에 100%인 16px div2: em이므로 부모 태그의 폰트 크기 16px의 1.5배인 24px div3: 1.. 2021. 2. 6.
[CSS] 속성 상속 css문서를 작성할 때, 상위 태그에 적용한 스타일을 하위 태그에서 선택적으로 상속받아 사용할 수 있다. 상위 태그에서 css속성을 정의한 후에 하위 태그에서 속성명:inherit; 으로 작성하면 상위 태그의 속성을 같은 옵션으로 사용할 수 있다. See the Pen eYBZzpB by Heekng (@heekng) on CodePen. 2021. 2. 6.
[CSS] 캐스캐이딩 Cascading 선택자를 이용하여 스타일을 지정할 때, 태그에 이미 스타일을 지정한 후 태그 안에 속해있는 다른 태그에는 다른 스타일을 지정해야 할 때가 있다. 이때 선택자의 우선순위인 캐스캐이딩(Cascading)을 잘 이해하고 있어야 스타일 충돌 없이 내가 원하는 html을 작성할 수 있다. 중요도에 따른 우선순위 인라인 스타일 > 내부 스타일 시트 > 외부 스타일 시트 > 웹 브라우저 기본 스타일 위의 형태로 우선순위가 달라진다. 인라인 스타일: html요소 내부에 style 속성으로 사용 내부 스타일 시트: HTML 문서의 style태그 안에 위치 외부 스타일 시트: CSS파일을 따로 만들어서 불러오는 방법 1. 웹 브라우저의 기본 스타일이 있더라도 외부 CSS파일로 작성된 스타일 시트가 있다면 외부 스타일 시트.. 2021. 2. 6.
[CSS] CSS 시작, 문법, 선택자 CSS는 무엇이고 왜 쓰는가? CSS는 Cascading Style Sheet의 약자이다. CSS는 HTML요소들이 미디어에서 어떻게 보이게 할지 정의하는데 이용하는 스타일 시트 언어이다. 기존의 HTML은 HTML 문서 내에서 스타일을 지정해야 했기 때문에 협업에 있어서 시간적으로 비효율적이었다. 하지만 스타일을 CSS로 외부에서 작성하여 연결시킴으로써 작업의 효율이 좋아졌다. CSS 문법 선택자 { 속성명:속성값; 속성명:속성값; ...} CSS의 기본적인 작성 문법은 위와 같다. 크게 보면 선택자 { 선언부 }의 형태로 구성된다. 여기서 선택자는 CSS를 적용하고자 하는 HTMl요소를 가리키고 선언부는 중괄호 {}를 이용하여 전체를 둘러싼다. 각각의 선언은 속성명과 속성 값을 가지며 속성명:속성 값.. 2021. 2. 6.
[html] FORM태그 사용하기 웹 페이지 내에서 사용자로부터 입력을 받을 때에는 태그를 사용한다. 태그를 사용하면 사용자가 입력한 데이터를 다른 페이지로 전송하거나 페이지 내에서 사용할 수 있다. 입력 양식 일반적으로 위와 같이 작성한다. action: 전송 버튼을 눌렀을 때 form의 내용이 전달되는 URL을 지정한다. 생략 시 현재 페이지로 지정된다. method: 전송방식을 설정한다. 생략 시 get방식으로 설정된다. ★전송방식: get, post, delete,... 등이 있으며 일반적으로 get방식과 post방식이 사용된다. 입력 양식: , , , , ,... 이 있다. 태그는 입력받기 위해 사용되는 태그이다. 을 기본 형식으로 사용된다. input 태그의 속성 size : 글 상자의 크기 maxlength : 값의 최대 길.. 2021. 2. 4.
[HTML] anchor태그, <a>, 페이지 내에서 이동 링크 HTML에서 anchor태그는 링크를 거는 태그다. 이때 링크는 웹페이지로 연결되는 링크 뿐만이 아닌 현재 페이지 내 특정 위치로 이동시키는 역할도 할 수 있다. 책갈피 사용하기 기존의 태그와 사용방법은 같다. 하지만 이동을 원하는 태그에 id를 지정하고 해당 id로 이동시키는 과정을 사용한다. See the Pen OJbydeK by Heekng (@heekng) on CodePen. 위처럼 이동을 원하는 태그에 id="아이디"를 지정하고, 태그 href속성값에 [#아이디]의 형태의 속성값을 주면 해당 id가 위치한 태그로 이동한다. 실제로 해당 이동하기 버튼을 눌렀을 때, 지정한 태그로 이동됨을 확인할 수 있다. 2021. 2. 4.

티스토리툴바