핵심 키워드
-
HTML
-
부모요소, 자식요소
HTML 요소는 어떤 요소 안에 어떤 요소가 있는가를 파악하는 것이 중요하다. 이런 구조를 부모-자식 구조 또는 트리구조라고 한다. 상위에 하위요소를 감싸고 있는 요소를 부모, 하위에 있는 요소를 자식 이라고 한다. 한 요소를 감싸고 있는 태그가 바뀌면, 그 안에 있는 내용물도 모두 영향을 받는다.
-
빈태그
닫는태그가 없는 태그를 말한다. 빈태그는 공백 태그 또는 empty tad라고도 부른다.
대표적인 예로는
,
등이 있따.
-
Doctype
DOCTYPE선언은 HTML문서에서 html태그를 정의하기 전에 가장 먼저 선언되어야만 합니다. 이러한 DOCTYPE선언은 HTML태그는 아니지만, 선언된 페이지의 HTML버전이 무엇인지를 웹 브라우저에 알려주는 역할을 하는 선언문으로, 대소문자를 구분하지 않는다.
-
Body 태그
해당 HTML문서의 텍스트,하이퍼링크,이미지,리스트 등과 같은 모든 콘텐츠를 포함하는 영역을 정의할 때 사용한다.[ 수업 이외 심화 개념 ]
-
블록(Block), 인라인(inline)
display속성값이 블록인 요소는 언제나 새로운 라인에서 시작하며, 해당라인의 모든 너비를 차지한다. 대표적으로
,
,,- 등이 있다.
-
주요범위 & 메타데이터 (HTML, HEAD, BODY, TITLE, LINK, STYLE)
<!DOCTYPE html> <html lang="ko"> <head> - HTML 문서의 제목 - 기타 정보 - 스타일 직접 입력 - 스타일 외부에서 가져와서 연결 </head> <body> 문서의 구조 </body> </html> -
Body 내의 구조(HEADER, FOOTER, H1 ~ H6, MAIN, SECTION, DIV, P..)
#HEADER
제목, 부제목, 로고 같은 정보를 제공하는데 사용된다.
#FOOTER
저자정보,저작권정보, 연락처, 사이트맵 정보등을 포함한다.
-
멀티미디어(IMG, VIDEO)
#파일형식
JPG : 1600만 가지의 색상을 표시할 수 있고 해상도 사진 이미지에 적합하고 품질과 압축률이 높다.
GIF : 256가지의 색을 최대로 사용, 표현한다. 고해상도 사진에는 미적합이지만 움직이는 애니메이션 이미지를 구현할 수 있는 것이 특징이다.
PNG : GIF투명 배경 기능과 JPG의 고화질 압축률을 지원한다는 장점을 가지고 있지만, 웹 브라우저의 종류와 버전에 따라 이미지가 다르게 표시되는 단점이 있다.
-
표 콘텐츠 및 양식(TABLE, TH, TD,INPUT,LABEL, BUTTON, TEXTAREA..)
#TABLE
데이터 표를 작성하기 위해 사용되는 태그이며 가장 표의 큰 뼈대이다.
#TH
table head의 약자로, 표의 제목을 작성하는데 사용한다.
#TD
table data의 약자로, 일반 칸을 만든다.
#INPUT
사용자에게 입력받을 데이터 양식(텍스트,버튼,패스워드,이메일)을 지정할 수 있다.
#LABEL
요소(labelable)의 제목이다.
라벨요소 : button, input, progress, select, textarea
-
전역속성 - class / id
모든 html의 공통속성이다.
#class
엘리먼트를 분류할 때 쓰인다.
보통 class를 사용하여 css로 스타일을 정의하거나 JavaScript에서 class명으로 요소를 선택하거나 접근할 수 있다.
#id
엘리먼트의 유일한 식별자를 부여하기 위해 쓴다.
lass를 사용하여 css로 스타일을 적용하거나 JavaScript에서 엘리먼트를 선택하기 위해 사용한다.
-
CSS
- 선택자의 역할 스타일을 적용하고자 하는 HTML요소를 특정하는 역할을 한다.
-
태그선택자 / 클래스 선택자 / id선택자
#태그 선택자
태그를 사용하여 해당되는 태그 전부에 스타일을 적용한다.
#클래스 선택자
요소의 class 특성에 기반해 요소를 선택한다.
#id선택자
ID선택자는 요소의 id특성 값을 비교하여, 완전히 동일한 id를 가진 요소를 선택한다.
-
[ 수업 이외 심화개념 ]
- 선택자 상속개념 선택자란 특정 요소들을 선택하여 스타일을 적용할 수 있게 하는것을 말한다.
- 박스 모델(width, height, margin, padding, border, display) 모든 HTML요소는 박스 모양으로 구성되며, 이것을 박스모델 이라고 부른다. 박스모델은 HTML요소를 패딩, 테두리,마진,내용으로 구분한다.
- 위치 및 배경(top, bottom, left, right, relative, absolute, fixed, background, background-color) #top : 위쪽 #bottom : 아래쪽 #left : 왼쪽 #right : 오른쪽 #relative : 각각의 방향을 기준으로 태그 안쪽방향으로 이동 #absolute : position : static 속성을 가지고 있지 않은 조상을 기준으로 움직임 #fixed : 포지션 고정 #background : 태그의 배경을 지정하는 속성 #background-color : 배경의 색을 지정
- [ 심화 ] FLEX / GRID (선택)
- JavaScript 문법
- 변수 및 상수 #var var은 function 단위의 scope를 가진다. 여러번 선언 가능하다. #let 블록 단위의 scope를 가진다. #const 상수는 한번 선언하면 바꿀 수 없다.
- 조건문 #if else문
▶ 1. 문법
if (조건식) { // statement1} else if(조건식) { // statement2} else { // statement3}-
if 안에 있는 조건식이 참인 경우 해당하는 if문, else if문을 실행 한다. - 조건문(if, else if)에 모두 해당하지 않으면 else에 있는 statement3 이 실행된다. - else if에는 갯수 제한이 따로 없다.
출처:
https://goddaehee.tistory.com/225
[갓대희의 작은공간]
#switch문
witch ( 변수 ){
case A: // 값 A
// 변수 값이 A 일때 실행할 명령문
break;
case B:
// 변수 값이 B 일때 실행할 명령문
break;
case C:
// 변수 값이 C 일때 실행할 명령문
break;
default:
// 모든 CASE에 부합하지 않을때 실행할 명령문
break;
}
- case 뒤에는 해당하는 조건이 오며, 그 아래에 실행할 명령문을 적는다.
- default는 if...else 조건문에서의 else와 같이 모든 조건에 해당 안 될 때 실행된다.
출처:
https://goddaehee.tistory.com/225
[갓대희의 작은공간]
-
- 반복문(while / for) #for문
For
뭔가 복잡해 보이네요. for문은for (var i = 0; i < 10; i++) { alert(i); }for (시작; 조건; 끝) { 내용 }이렇게 구성 되어 있습니다. 위의 예시를 분석해보면 시작은var i = 0;으로 하고, 조건은i < 10이고, 끝은i++입니다. 즉, for문을 돌기 전에var i = 0;으로 시작합니다. i라는 변수를 만들고 0 값을 넣어 초기화했죠? 그러고나서 조건을 비교합니다. i가 0이니까 10보다 작죠? 그러면 내용을 실행합니다.alert(i);를 해서 0 메시지가 출력되었습니다. 그 후 끝인i++를 실행합니다. 그래서 i가 1이 됩니다. 이제부터 반복입니다. 조건을 비교하고, 조건과 맞으면 내용을 실행한 후 **i++를 합니다. i가 10이 될 때까지 반복됩니다. 결과적으로는 0부터 9까지 메시지가 10번 출력되겠죠? #while문While
while도 비슷합니다. 위의 for문을 while로 만들어 보겠습니다.
while문은 **var i = 0; while (i < 10) { alert(i); i++; }while (조건) { 내용 }이렇게 구성됩니다. 위의 for문과는 같은 결과를 내지만, 시작부분은 while 전에 써주고, 끝 부분은 while 내용 안에 직접 써주어야 합니다.
- 함수 함수는 JavaScript에서 기본적인 구성 블록 중의 하나입니다. 함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다. 함수를 사용하려면 함수를 호출하고자 하는 범위 내에서 함수를 정의해야만 합니다. ex)
function square(number) { return number * number; }
- 변수 및 상수 #var var은 function 단위의 scope를 가진다. 여러번 선언 가능하다. #let 블록 단위의 scope를 가진다. #const 상수는 한번 선언하면 바꿀 수 없다.
- HTML / CSS / JavaScript의 관계
HTML과 CSS 그리고 JS에 관계
우선 HTML은 웹브라우저를 통해서 사용자에게 보이는 웹 문서를 작성하는 언어로 웹 문서의 내용 작성에 집중을 합니다. 즉 웹 문서의 뼈대를 구축하는 개념입니다. CSS는 기존 HTML파일에 다양한 모양을 추가,변경하여웹사이트에 통일감을 부여하고, 글자의 모양,크기,간격 등을 자유롭게 제어하는 언어로, 웹 문서의 디자인 표현에 집중하는 언어입니다.즉 HTML은 뼈대, CSS는 디자인을 입히는 개념입니다. 마지막으로 Java Script는 웹 문서를 HTML을 이용해서, 정보를 보거나 웹 문서끼리 연결하는 것 외에 팝업창을 열거나 전화번호 또는 이메일 주소 체크 등 기능적요소나 동적 요소 제어를 위해 사용되는 언어로 웹문서에 제공하는 동적제어에 집중을 하는 언어입니다.즉, java Script는 HTML로 뼈대를 만들고 CSS로 디자인을 입힌 웹 문서에 움직임을 넣는 개념의 언어입니다.
-
