Javascript 조건문 : 특정 조건 만족시 실행하는 명령의 집합(조건이 참일 때 실행됨). if, switch 1) if문 javascript if문 if (조건1) { // 조건1이 참이라면 실행 } ----- if (조건1) { // 조건1이 참이라면 실행 } else if (조건2) { //조건1이 참이 아니고 조건2가 참이라면 실행 } else { //조건1과 조건2가 모두 참이 아닐 때 실행 } if문 조건 작성 방법 2) switch문 Javascript 반복문 : 똑같은 명령을 일정 횟수만큼 반복해 수행하도록 하는 실행문 for(for~in), while(do~while) 중첩 가능함 1) for문 * Javascript for문 for (초기문;조건문;증감문(추가동작부분)) { //명..

Javascript : 웹페이지에서 복잡한 기능을 구현(동적구현)할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어, // javascript 작성법 # 태그나 태그 안에 모두 사용: 중요도에 따라서 head 혹은 body태그에 적절히 사용 Javascript 출력하기 1) .console.log() : 함수 안에 적은 내용을 브라우저의 개발자 도구 → 콘솔에서 확인 가능 2) .alert() : 브라우저가 열렸을 때, 그 내용을 알림창에 보여줌(창을 띄우는 함수) Javascript 변수 1) 선언: 변수이름 지정 let 변수이름; var 변수이름; 2) 할당: 변수이름과 값 지정 const 변수이름 = 값; let 변수이름 = 값; var 변수이름 =값; 재선언 재할당 var 가능 가능 let 불..

display 속성 inline: 인라인이 아닌 요소에 인라인 속성 부여 inline속성: 본인 크기만큼만 공간 차지 block: 블록이 아닌 요소에 블록 속성 부여 block속성: 크기 부여 가능 inline-block: 인라인 속성이지만 블록 속성처럼 크기 부여 가능 none: 화면에서 요소를 사라지게 함(크기도 차지하지 않음) flex: 자식에게 크기를 부여할 수 있는 인라인 속성 # 쉽게 레이아웃 구조를 잡을 수 있음 # flex container(부모요소) 속성 justify-content: 가로 정렬 space-between: 자식 요소들에게 동일한 크기를 부여하며 자식 요소 배열 space-around: 양 끝에 여백을 주면서 자식 요소 배열 align-items: 세로 정렬 부모요소의 세로..

transform 속성 skew(deg): 기울기 rotate(deg): 회전(시계 방향) rotate x축 회전: x축이 회전 rotate y축 회전: y축이 회전 rotate 회전: 평면 회전 scale: 확대 translate(px): 이동(위에서 아래로) translate z축 이동: 뒤로 이동(요소가 작아지는 것처럼 보임) # tramsform 속성은 inline요소에 적용되지 않음. inline요소에 transform속성을 적요하고 싶다면 inline-block(display속성)요소로 변경하고 사용해야 함. transform-origin 속성 : transform 속성과 함께 사용되는 속성, 회전 중심(원점·기준점)을 지정 # 속성 값은 백분율(%)과 키워드 중 하나로 지정할 수 있음 백분율..

position 속성 : HTML 요소의 위치를 결정 static: 정적 위치 지정 방식(기본값) static 상태에선 요소에 왼쪽, 오른쪽 값을 주어도 위치가 변경되지 않음 relative: 상대 위치 지정 방식 원 위치를 기준으로 상대적으로 요소의 위치가 지정됨 absolute: 절대 위치 지정 방식 relative 속성을 가진 부모태그의 위치를 기준삼아 상대적으로 요소의 위치가 지정됨 부모태그가 없을 땐 body태그를 기준으로 함 fixed: 고정 위치 지정 방식, 고정값 화면을 기준으로 위치가 지정됨 z-index 속성 : 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 정함 ▼ stack이란? 더보기 데이터를 차곡차곡 쌓아 올린 형태의 자료구조, 데이터가 순서대로 쌓이며 가장 마지막에 삽입된..

CSS(Cascading Style Sheet=연속적인 스타일시트) : 웹 페이지를 디자인하기 위해 사용하는 언어 CSS를 사용하는 이유? 시각적 표현을 위해 CSS 참조 방식 1) 외부 스타일 시트(External Style Sheet) : CSS확장자를 가진 스타일시트 파일을 생성, html문서에 연결해 사용 2) 내부 스타일 시트(Internal Style Sheet) : html문서 내에서 태그 내부에 태그를 사용해 CSS를 정의하는 방식 ▼ style태그를 head태그에 저장하는 이유? 더보기 html 문서는 위에서 부터 아래 순서로 읽음 따라서 style 태그를 우선적으로 읽게 하여 속성이 빠르게 적용되도록 하기 위해 head태그에 위치시킴 3) html태그 내의 스타일 지정(Inline St..