JavaScript 기초 용어 정리 by 생활코딩

출처: 생활코딩 (https://opentutorials.org/)



용어 정리


표현 태그 기능
var 변수명 변수를 표현 (Variable)
background-color:색상 [style 속성] 웹페이지의 배경 색상을 변경
color:색상 [style 속성] 웹페이지의 텍스트 색상을 변경
.style.color='색상' [style 속성] 글자 색상 변경
<input type="button" value="night"> night라는 이름을 가지는 버튼 생성
<input type="text"> 텍스트를 입력할 수 있는 창 생성
onclick="속성" 속성의 값으로 자바스크립트가 와야하고, 해당 버튼을 클릭했을 때 JavaScript를 실행시킴
onchange="속성" 해당 type 내의 값이 변화했을 때 속성 JavaScript를 실행시킴
onkeydown="속성" 해당 type 내에서 키보드를 누를 때마다 JavaScript를 실행시킴
<script> 자바스크립트를 넣는 방법으로써, 웹브라우저에게 HTML의 코드로 지금부터 자바스크립트가 시작된다는 것을 알려줌 (웹페이지는 script 태그 안쪽에 있는 내용을 자바스크립트로 해석함)
document.write("문자열" 또는 수식) 웹페이지에 텍스트를 출력하기 위한 스크립트
document.querySelector('태그명') 웹브라우저에게 질의하며, Selector는 태그명의 CSS를 타깃으로 정함
document.querySelector('문자') 해당 태그의 첫 번째 검색 자료만을 추출
document.querySelectorAll('문자') 해당 태그의 모든 사용 형태 추출 (노드 리스트, 배열)
document.querySelector('#아이디').value 아이디 값 받아오기
querySelector('태그명').style.backgroundColor='색상' 태그명의 배경 스타일을 원하는 색상으로 변경
querySelector('태그명').style.color='색상' 태그명의 텍스트 스타일을 원하는 색상으로 변경
alert('문자열') 경고 팝업 이벤트 실행
'문자열'.length 문자열의 길이를 확인할 수 있는 스크립트 (length는 Properties로 표현됨)
'문자열'.toUpperCase() 소문자를 대문자로 변경해주는 스크립트
'문자열'.indexOf('문자' 혹은 '문자열') 문자 또는 문자열이 기존 문자열 몇 번째에서 시작되는지 알려주는 스크립트
'문자열'.trim() 문자열 양 끝에 포함된 공백을 지우는 스킄립트
배열명.length 배열의 개수(인덱스)를 나타냄
배열명.push(데이터) 배열에 데이터 추가
console.log('문자' 혹은 함수) 콘솔 창에 문자 로그 출력
Toggle 두 개의 조건이 있고 하나의 버튼이 있을 때 버튼을 누르는 경우 조건에 따라 환경이 변화함 (조건문을 이용한 토글 버튼 생성 가능)
&lt (less than) ~보다 작다(<) 표현
조건문 if (Boolean 값) {내용} Boolean이 참일 때 내용을 실행
while (Boolean 값) {내용} Boolean이 참일 때까지 내용을 반복 실행
function 함수명(파라미터) {내용} 함수를 표현
키워드 this 자기 자신을 가리키는 코드(하나의 태그 뭉치)를 표현하고자 할 때 사용
배열 (Array) 데이터가 많아짐에 따라 많은 데이터를 그냥 둘 수 없기 때문에 데이터 중에 서로 연관된 데이터를 잘 정리정돈해서 담아두는 일종의 수납상자 (대괄호 ‘[]’ 형태)
반복문 (Loop) 반복적으로 표현해야 할 데이터가 매우 많을 때 모든 데이터를 수정하는 과정에서 일일히 처리해야 하는 어려움을 해소하기 위해 반복적으로 코드를 실행 (무한히 돌아가면 컴퓨터의 자원을 모두 빼앗아 가게 되므로 언제 종료되는지 결정해야 함)
리팩토링 공장으로 다시 보내 개선하는 느낌 / 코딩을 하고나면 코드가 비효율적으로 생기기 마련인데 동작하는 것은 그대로 두고 코드 자체를 효율적으로 만들어 가독성을 높이고 유지보수하기 편하게 만들어야 함 / 중복 코드를 제거하는 방향으로 코드를 개선하는 작업 / 소프트웨어가 커짐에 따라 꾸준히 리팩토링을 해야만 좋은 프로그램을 만들어나갈 수 있음



자바스크립트 특징


  • 사용자와 상호작용 하는데 사용자의 요구에 따라 웹페이지를 변화시키는 언어이다.

  • HTML 위에서 동작하는 언어로, HTML을 제어하며 웹페이지를 동적으로 만들어주는 특성을 부여한다.

  • Console을 통해 자바스크립트를 실행시켜 데이터를 처리할 수 있다.

  • 문자열의 덧셈과 숫자의 덧셈 표현은 다르기 때문에 데이터 타입을 정확하게 표현해야 한다.

  • JavaScript는 컴퓨터 언어이면서 동시에 컴퓨터 프로그래밍 언어이지만, HTML은 컴퓨터 언어이기는 하지만 컴퓨터 프로그래밍 언어라고 하지 않는다.

  • 시간의 순서에 따라 웹브라우저의 여러 기능이 실행되어야 하기 때문에 프로그래밍적 특성을 띤다.



자세히 보기

CSS 기초 용어 정리 by 생활코딩

출처: 생활코딩 (https://opentutorials.org/)



용어 정리


표현 이름 태그 기능
<style> - HTML의 문법이면서 동시에 CSS라는 언어의 문법에 맞게 해석해서 처리해야 한다는 의미
태그명 {내용;} Selector, Declaration 해당 태그명의 모든 스타일을 내용대로 변경
style="속성:속성값" Property, Value 각 태그마다 개별 커스텀 스타일을 가능하게 함 (태그명1, 태그명2(Selector) 방식도 가능)
<div> Division 디자인 목적을 위해 사용하며 특별한 의미가 존재하지 않음
<span> - Inline element (줄 바꿈이 되지 않는 요소)
@media(조건) Media Query 조건에 따라 CSS가 동작하도록 함
<link rel="stylesheet" href="위치 및 파일명"> - 별도의 파일에 저장되어 있는 CSS를 다운받아 HTML 내에 그 코드가 있는 것처럼 동작하라는 의미



속성 정리


태그 표현 속성명 속성 기능
<style> (텍스트) color: 색상 혹은 색상코드 색상 변경
text-decoration: none 해당 태그에 대한 텍스트 장식(밑줄 표현 등)이 사라짐
text-decoration: underline 해당 태그에 대한 텍스트에 밑줄을 표시함
font-size: 숫자 px 텍스트의 크기 변경
text-align: center 해당 텍스트를 화면의 중앙으로 정렬
<style> (테두리) border-width: 숫자 px 테두리 두께 설정
border-color: 색상 혹은 색상코드 테두리 색상 변경
border-style: 테두리의 형태 실선, 단선, 점선 등을 설정
border-bottom 아래 쪽에만 테두리 표시
border: width (숫자 px) (테두리의 형태) (색상) 위와 동일한 의미의 통합 표현
<style> (화면) display: inline element의 크기만큼 화면을 부분적으로 사용
display: block element의 크기를 화면 전체적으로 사용
display: none element가 화면에서 사라짐
display: grid grid-template 등을 이용하기 위해 사용
padding: 숫자 px 박스 모델과 요소 간 숫자 크기만큼 여백을 만듦
margin: 숫자 px 서로 다른 박스 모델 혹은 요소 간 여백을 만듦
width 크기 px 혹은 비율 박스 모델 크기 조절
grid-template-columns: 숫자 px 1fr 하나의 줄에 두 개를 동시에 표시 (1fr: 나머지 공간을 모두 사용)
숫자 fr 화면 차지 비율 표현
<a> class=”saw” 한 번 이상 열어보았던 페이지에 대한 정의 클래스
class=”saw active” 현재 머물고 있는 페이지에 대한 정의 클래스
<style> (특수) .saw{} saw라는 클래스에 대한 CSS 정의 (함수 형식)
#active{} active라는 id 선택자에 대한 CSS 정의



자세히 보기

HTML 기초 용어 정리 by 생활코딩

출처: 생활코딩 (https://opentutorials.org/)



용어 정리


표현 이름 태그 기능
<> - 열리는 표현
</> - 닫히는 표현
<!doctype html> - 웹페이지가 HTML로써 만들어졌다는 것을 표현하기 위해 문서의 시작에 작성하는 표현
<html> - Head와 body 태그를 감싸기로 약속한 하나의 표현
<head> - 문서의 속성을 지정
<title> - 웹 문서의 제목을 설정
<meta charset="utf-8"> - 웹브라우저에게 UTF-8 방식으로 페이지를 열도록 하는 표현 (웹페이지에 저장된 문자 표현 방식과 웹브라우저가 페이지를 해석하는 방식이 다를 때 이상한 문자를 표시하게 되는데, 설정이 없으면 일반적으로 영어가 아닌 문자는 깨져서 나옴)
<body> - 본문 내용 표현
<h1> ~ <h6> Heading 제목 표현 (일반적인 텍스트보다는 글씨가 두껍고 줄바꿈이 됨)
<strong> - 글씨를 진하게 함
<u> Underline 밑줄 표시
<br> - 줄 바꿈 (닫힘 태그 없음)
<p> Paragraph 단락 표현 (하나의 단락을 그룹핑)
<li> List 목차 표현 (ul 태그를 필요로 함)
<ol> Ordered list ul의 정렬된 형태 (자동 넘버링)
<ul> Unordered list li의 부모 태그 (li 태그와 아주 밀접한 관계)
<img src="위치"> - 이미지 표현
<a> Anchor 링크 표현
<iframe src="위치"> - 동영상 표현



속성 정리


  • 속성 (attribute): 태그의 이름만으로는 정보가 부족하여 만들어진 문법



자세히 보기