변수와 상수는 어떻게 사용할까? 변수 --예전에는 "var" 키워드를 사용하여 변수를 사용했지만이제는 "let"과 "const" 키워드를 통해 변수를 사용한다. (ES6에 새로 추가됨) let : 변경이 가능한 변수const : 변경이 불가능한 변수 변수는 초기에 값을 정의하지 않고 선언만 할 수도 있다. let 키워드 (변수) 기본 형식let 변수명 = 값;let 변수명;변수명 = 값; 특징 (var 변수와 차이)변수명 중복 사용 불가능 (var 변수는 덮어씌우는 방식으로 가능했다.)호이스팅 불가능스코프 범위가 다름호이스팅(Hoisting)은자바스크립트에서 변수와 함수 선언이 코드 실행 전에 메모리에 미리 할당되는 동작을 의미한다.즉, var 키워드로 변수를 선언하고 할당할..
자바스크립트는 어떻게 사용할까? HTML 파일과 자바스크립트 연결 방법 --웹 브라우저에 표시할 HTML 문서에 자바스크립트를 적용하기 위해서는HTML 문서와 자바스크립트 코드를 연결해야 한다.단순 자바스크립트 코드 실행이 목적이라면 에디터에서 .js파일에 코드를 작성하거나 콘솔차에 작성 내부 스크립트를 통해 연결HTML 파일에서 바로 "script 태그"를 통해 콘텐츠 영역에 자바스크립트 코드를 작성한다. 예시 코드 script 태그는 head태그나 body태그 어디에든 작성해도 상관없지만일반적으로 body태그에서 가장 마지막에 작성하는 것을 권장한다.웹 브라우저는 HTML 문서의 첫 줄부터 순차적으로 읽어오기 때문에당장 보여줘야 하는 HTML과 CSS를 먼저 구성한 뒤에 마지막..
환경에 따른 반응형 웹 페이지는 어떻게 할까? 미디어 쿼리 (Media Query) --미디어 쿼리는 반응형 웹 페이지를 만드는 주요 기술 중 하나로화면 크기, 해상도, 디바이스 특성에 따라 스타일을 변경하는 기능이다. 기본 형식@media (조건) { /* 조건이 충족될 때 적용할 스타일 */}@media and () () { /* 조건이 충족될 때 적용할 스타일 */} only는 대부분의 최신 브라우저에서 의미가 없으므로 잘 사용되지 않는다.미디어 쿼리가 적용될 미디어 타입을 명시하는 것으로생략하지 않으면 반드시 다음에 and 연산자가 와야 한다.미디어 쿼리가 적용될 미디어 조건을 정의하는 것으로반드시 괄호() 안에 작성되어야 한다. 예시 코드@media not screen..
2차원 레이아웃은 어떻게 설계할까? 그리드 레이아웃 속성 --그리드 레이아웃 속성은웹 페이지에서 2차원 방식으로 레이아웃을 설계할 수 있도록 고안된 속성으로가로(row)와 세로(column)를 같이 사용해서 레이아웃을 설계한다.그리드를 사용하면 플렉스 박스보다 더욱 폭넓게 설계가 가능하다. 구성 요소 그리드 레이아웃을 확인하는 방법은시각적으로 확인하기 위해서는 크롬 브라우저의 개발자 도구의 Elements 탭에서그리드 컨테이너로 지정된 태그에 있는 그리드 아이콘을 누른다.-- 기본 속성 --display 속성그리드 레이아웃을 지정하는 속성으로그리드 컨테이너를 정의할 때 사용한다. 기본 형식display: flex;/* 또는 */display: inline-flex;flex : 적용된 요..
1차원 레이아웃은 어떻게 설계할까? 플렉스 박스(Flex box) 레이아웃 --플렉스 박스 레이아웃은1차원(단일 방향) 방식으로 레이아웃을 구성할 때 유리한 방식으로주로 가로(row) 또는 세로(column) 방향으로 배치하여 레이아웃을 설계하는 데 사용된다. 레이아웃 확인 방법은일반적으로 웹 브라우저에서 지원하는 방법을 통해 플렉스 레이아웃을 확인할 수 있다.ex. 크롬에서는 개발자 도구를 통해 "Elements"탭에 작성된 코드르 보면플렉스 박스 레이아웃이 적용된 HTML 요소 옆에 "flex 아이콘"이 존재한다.-- 기본 구성 --핵심 속성 display 속성모든 플렉스 박스 레이아웃은display 속성값을 "flex"나 "inline-flex"로 지정하는 것으로 시작된다. 기본 형..
폰트는 어떻게 사용할까? 웹 폰트 --웹 폰트는인증된 기관 또는 회사에서 웹 서버에 공유해 놓은 폰트를 의미하고웹 폰트를 사용하여 시스템에 없는 글꼴들을 추가해서 사용할 수 있다. 구글 폰트 예시Lorem ipsum dolor, sit amet consectetur adipisicing elit.Lorem ipsum dolor, sit amet consectetur adipisicing elit.-- 아이콘 폰트 --아이콘 폰트는다양한 아이콘을 웹 폰트를 사용하는 것처럼 간단하고 쉽게 사용하는 것을 말한다. 아이콘 폰트 예시 사용 (feat. Font Awesome) Font Awesome를 사용하는 방법은 2가지 존재한다.1. 해당 사이트에서 아이콘 폰트 라이브러리를 다운로드하여..
요소 자체를 컨트롤하는 속성은 무엇일까? transform 속성 --요소의 특정 변형 효과를 지정하는 속성이다. 기본 형식transform: 함수; 예시 코드 확대 or 축소기울기회전 -- transform-origin 속성 --변형의 기준점을 변경하는 속성이다. 요소가 변형될 때 각 변형을 시작하는 기준점이 존재한다.(ex. 요소가 회전할 때는 요소의 중심을 기준으로 회전) 기본 형식transform-origin: x축 위치 y축 위치;위치는 %단위 또는 키워드를 사용한다. --
속성 값을 애니메이션처럼 자연스럽게 전환하려면 어떻게 할까? 애니메이션 속성 --기존 전환 효과 속성보다 더 정확하고 부드럽게 전환 효과를 제어하는 속성이다. 주요 문법 구성으로애니메이션을 적용할 "스타일 속성"과 "키 프레임(@keygrames)"이다. 키 프레임애니메이션은 정지된 이미지를 연속적으로 보여줘서 움직이는 것처럼 보이게 한다. 즉, 키 프레임 애니메이션이 진행되는 과정에서특정 시점에 발생해야 하는 여러 작업을 정의하는 문법이다.(시작과 종료에 해당하는 최소 2개 시점에 대한 스타일로 정의) 기본 형식@keyframes 키 프레임명 { 0%{/* CSS 코드 */} n%{/* CSS 코드 */} 100%{/* CSS 코드 */}}특정 시점은 %로 지정한다.- 애니메..
