코딩온 사전 온라인 교육 컨텐츠 정리

HTML

닫는 태그 없이 쓰이는 태그들 | <br>, <img>, <meta>, <link>, <input>, <hr>
2em은 기본크기의 2배라는 뜻

 

멀티미디어와 관련된 태그들

img | 이미지

a | 링크

iframe | 외부 동영상 링크를 가져옴
video | 내 컴퓨터의 동영상을 가져옴
audio | 음성파일. 내 컴퓨터의 음성파일을 가져옴

 

텍스트와 관련된 태그들 (의미x)

div

style

span | 일반적인 텍스트
p | 단락
pre | br태그 없이 텍스트를 그대로 표현하고 싶을 때 (ex. 시)
strong | 중요한 컨텐츠 강조

 

table(표)와 관련된 태그, attribute들

table | 표를 만드는 태그
tr | 가로줄
td | 칸

th | 셀 안의 글자를 굵게. 제목처럼 보이게 한다.
caption | 하나만 가질 수 있음. 표의 제목

thead | table의 header. 제목 행을 하나로 묶기 위해 사용된다.
tbody | table의 내용부분.
tfoot | table의 footer. 마지막 행을 하나로 묶기 위해 사용된다.

 

table의 attribute들
cellspacing | 경계선 사이의 여백
cellpadding | 칸 안의 여백의 크기
colspan | 가로칸 병합
rowspan | 세로칸 병합

 

목록과 관련된 태그들

li

ol | 순서가 있는 리스트. type으로 목차 첫 머리의 스타일을 바꿀 수 있다.

ul | 순서가 없는 리스트

nav | 다른 페이지, 또는 현재 페이지의 다른 부분과 연결되는 navigation 링크들을 하나로 묶을 때 사용. 네이버의 메뉴들이나 카카오톡의 아랫부분(친구, 채팅 등 이동할 수 있는 부분)

 

form(폼)과 관련된 태그들

추가적인 것은 이전에 작성한 https://sogno-study.tistory.com/6 참고

form

input

fieldset | form의 input들을 하나로 묶어준다.
legend | table의 caption과 비슷하다. form의 제목 기능

 

+input
type | input 태그의 종류
value | input 태그의 초기값
name | 제출 시 서버로 전달되는 이름

 

input의 type들
text
range | max : 최댓값, min : 최솟값, step : 숫자들 사이의 간격
datetime-local
checkbox
radio | 여러 선택지 중 하나만. name 속성을 넣으면 그룹으로 묶을 수 있다.
reset | form 태그로 묶어든 모든 요소를 초깃값으로 돌린다.
file | accept 속성으로 허용 가능한 파일 확장자를 지정할 수 있다.
submit | form 태그로 둘러싼 요소들의 입력값을 전송한다.
image | 제출 버튼에 '제출'글자 대신 이미지가 씌어져 있다.

---

JavaScript

jQuery | JavaScript 라이브러리(자주 사용하는 객체, 함수 등의 자원을 모아둔 집합)

$ | jQuery를 의미하고, jQuery에 접근할 수 있게 해주는 식별자
$(선택자).동작함수;

선택자에는 태그명, .class, #id가 들어간다.

# 예제 1
function a(){
 document.getElementById("b").innerHTML("<div>")
}
# jQuery를 사용했을 때	
function a(){
 $("#b").html("<div>");  
}

# 예제 2
document.getElementById( "div1" ).setAttribute( "style", "border:2px solid red;" );
# jQuery를 사용했을 때
# $( "#아이디" ).css( "css이름", "css 값" );
$( "#div1" ).css( "border", "3px dotted blue" );

함수(function) | 메소드, 연산, 오퍼레이션. 하나의 특별한 목적의 작업을 수행하기 위해 독립적으로 설계된 코드의 집합

변수의 타입은 정수, 실수, 문자, 문자열, 참거짓(boolean)이 있다.

 

innerHTML, innerText, textContent의 차이

<div id='my_div'>
  여기는 my_div
  <span style='display:none'>숨겨진 텍스트</span>
</div>

innerHTML | innerHTML은 'Element'의 속성으로, 해당 Element의 HTML, XML을 읽어오거나, 설정할 수 있다.

<div id='my_div'>   여기는 my_div   <span style='display:none'>숨겨진 텍스트</span> </div>

 

innerText | innerText는 'Element'의 속성으로, 해당 Element 내에서 사용자에게 '보여지는' 텍스트 값을 읽어온다.

여기는 my_div

 

textContent | textContent는 'Node'의 속성으로, innetText와는 달리 <script>나 <style> 태그와 상관없이 해당 노드가 가지고 있는 텍스트 값을 그대로 읽는다.

여기는 my_div 숨겨진 텍스트

 

jQuery CDN방법으로 사용하기

CDN | Content Delivery Network. 온라인 상의 대용량 컨텐츠를 빠르고 안정적으로 전송하는 기술
https://code.jquery.com/ 에서 script 주소를 받아온다.

# 해당 스크립트는 head 태그 영역에 위치해야 한다.
<script src="https://code.jquery.com/jquery-3.6.1.js"</script>

 

일반 패키지
uncompressed | 공백, 줄바꿈, 들여쓰기 등이 적용됨
minified | 공백, 줄바꿈, 들여쓰기 등이 적용되지 않으나 용량이 작다는 장점이 있음
slim, slim minified | slim 패키지. 일반 패키지의 몇몇 기능이 제거된 패키지.

 

jQuery 메소드

.remove() | 선택 요소를 지운다
.prepend() | 선택된 요소의 첫번째에 새로운 요소나 컨텐츠 추가. 다만 스타일이 지정되어 있다면 똑같은 스타일로 추가된다. <-> .append()
.before() | .prepend()와 같은 기능을 하나 완전히 새로운 요소를 추가하는 것이기 때문에 스타일이 똑같이 지정되지 않는다. <->.after()
.html() | 해당 요소의 HTML 컨텐츠를 반환하거나 설정
.text() | 선택한 요소의 내용을 단순 text로 변경

 

Class 조작함수 $(선택자).조작함수("클래스명") 클래스명 앞에 .을 쓰지 않는다.
https://api.jquery.com/addClass/

.addClass() | 선택한 문서 객체에 클래스 속성을 추가
.removeClass() | 선택한 태그에서 클래스를 제거

.switchClass("바꿀 클래스명","바뀔 클래스명") | 클래스의 이름을 바꿈. addClass, removeClass와는 다르게 JQuery UI를 다운로드해줘야 한다. https://jqueryui.com/download/

.hasClass() | 어떤 클래스의 존재 여부에 따라 True 또는 False를 반환한다. if문과 자주 쓰임

 

관계 기반 선택자 | 객체를 return하기 때문에 문자열을 가져오려면 후처리가 필요하다(text를 사용하는 등의)
$(선택자1).parent( 선택자2 ); 의 경우 선택자1 요소의 부모가 선택자2 일 때만 return한다. 나머지에도 같은 기능을 함.
.parent() | 선택한 요소의 부모 태그를 return
.parents() | 선택한 요소의 부모를 포함한 선조 태그들을 모두 return
.closest() | 선택한 요소의 선조 태그 중 가장 가까운 하나만 return
.children() | 선택한 요소의 자식 (자손 아님) 태그들을 배열로 return

 

익명 즉시 실행 함수 | 익명 + 즉시실행 기능을 가진 함수. 재사용 할 필요가 없는 함수들을 익명함수로 정의한다. 변수에 넣어서 쓰거나 바로 실행시킴

# 변수 a에 익명함수 넣기
var a = function () {
  alert("야호")
}
# 익명함수 호출하기
a();

(function(){})(); # 함수를 정의하자마자 실행시켜버리는 코드. 순서가 중요한 함수의 경우에 사용한다.
window.onload=function(){}; # html문서의 모든 내용을 읽고, 이미지 소스까지 다운로드가 끝났을 때 실행하라는 뜻이다. 다운로드까지 기다리지만 jQuery로 작성된 함수보다 먼저 호출되는 특징이 있다.
$(document).ready(function(){})); # jQuery로 작성된 익명 즉시 실행 함수. window.onload와 같은 기능을 한다.

 

a 태그에서 href를 없애는 방법
$("a").removeAttr("href")

click 함수
$( 선택자 ).click(하고 싶은 일)

 

프레임워크는 자주 사용되는 로직을 재사용하기 편리하도록 정리한 일련의 코드들의 집합. 특정 프로그램을 개발하기 위한 다양한 요소들, 복잡한 코드와 내용 등을 사용 규칙, 매뉴얼과 함께 제공하는 프로그램이다. 일정한 형태의 틀, 부품을 제공하는 것
Spring, node.js, React 등
JavaScript 언어로는 서버 측에서 데이터 처리와 같은 역할을 수행하지 못하는데, 프레임워크로 이를 해결할 수 있게 되었다.

---