까먹기 위해 기록하는 것이다

1. Variables(변수) 1. JavaScript의 변수 자바스크립트의 변수는 타입이 존재하지 않는다. 기본 자료형인 숫자형, 문자열, 논리형, 배열, 객체, undefined, null 7개의 자료형이 존재하긴 하지만 변수를 선언할 때 자료형을 지정할 수가 없다. 자료형 유추 기능을 통해서 할당되는 변수에 값에 의해 자동적으로 자료형이 정해진다. 자료형을 지정하지 않다보니까 에러잡기가 힘들어져 최근에는 타입스크립트(자바스크립트 + 타입)라는 언어가 유행한다. //ES5 var num = 1; -> 숫자형으로 사용. var numStr = "1"; -> 문자열이나 숫자형으로 사용 var sum1 = num + 2; => 3 var sum2 = numStr + 2; => 3 //ES6 const nu..

1. JavaScript 1. JavaScript란 JavaScript는 1995년에 넷스케이프에서 제작한 인터프리터 언어이다. 인터프리터가 각각의 브라우저에 내장되어 있다. OS에서 동작하는 것이 아닌 브라우저에서 동작한다. HTML이 웹 문서의 구조를 담당하고 CSS가 웹 문서의 디자인을 담당한다면 JavaScript는 웹 문서를 동적으로(다이나믹하게) 구성할 수 있게 해준다. JavaScript의 특징 HTML 웹 문서의 태그들을 제어할 수 있다. 사용자에 의해 이벤트(사용자가 행하는 동작)가 발생했을 때 스타일을 바꾼다던지 애니메이션 효과를 준다던지 등과 같은 태그 제어가 가능하다. 다양한 라이브러리나 API가 존재하여 개발 기간을 단축을 시킬 수 있다. 데이터 시각화, 차트, 그래프, 통계등에 ..

1. 반응형 웹 1. 반응형 웹이란? 요즘은 pc보다 모바일이나 태블릿으로 웹 사이트에 접속하는 경우가 많은데 모바일이나 태블릿에서 PC에서 보던 웹 사이트 화면은 글씨도 너무 작고 레이아웃도 맞지 않아서 보기 불편한 점이 있다. 따라서 모바일이나 태블릿 같은 기기들의 화면에 대응하기 위해 기기의 화면사이즈에 따라 레이아웃을 변경하거나 글자 크기를 키우는 등 기기에 알맞는 형태의 웹 사이트를 표출하는 것을 반응형 웹이라고 한다. 2. 모바일 기기를 위한 뷰포트 반응형 웹 디자인에서 기본적으로 알아야 할 것이 뷰포트다. 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있다. 뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 부분을 말한다. 뷰포트 지정하기 head 태그 사이에 작..

1. CSS와 애니메이션 1. 트랜스폼(변형) 특정 태그의 크기나 위치를 변경하는 것을 트랜스 폼이라고 한다. CSS에서 변형을 적용하기 위해서는 tranform속성을 지정해 줘야한다. transform: 함수(어떤 변형을 진행할 지) 2차원 트랜스폼(변형) 2차원 평면에서 웹 태그들을 변형한다. 2차원 좌표인 x축, y축을 사용하여 가로, 세로 이동을 시키거나 가로, 세로로 축소/확대 시키는 변형을 만들 수 있습니다. 2차원 변형 함수(tranform의 속성값) translate(x, y): 지정한 크기 만큼 x축, y축 이동 translateX(x), translateY(y): 각각 x축, y축 이동 scale(x, y): 지정한 크기만큼 x축, y축으로 축소/확대 scaleX(x), scaleY(y..

1. 다양한 선택자들 1. 속성 선택자 태그에 작성한 속성을 이용해서 태그를 선택할 수 있는 선택자 선택자[속성명]: 해당 속성을 가지고 있는 태그를 선택해서 사용한다. 선택자[속성명=속성값]: 해당 속성을 가지면서 속성값도 동일한 태그만 선택해서 사용한다. 2. 가상클래스 가상클래스는 사용자가 동작에 반응하는 클래스 가상클래스를 이용하면 사용자가 동하는 것에 따라 스타일을 변경할 수 있다. 대표적인 가상클래스의 종류 선택자:link : 사용자가 방문하지 않은 링크에 대한 스타일 적용 선택자:visited : 사용자가 방문한 링크에 대한 스타일 적용 선택자:hover : 사용자가 해당 태그에 마우스 커서를 올렸을 때에 대한 스타일 적용 선택자:active : 사용자가 해당 태그를 활성화 했을 때에 대한 ..

1. 표 관련 스타일 1. 표 제목의 위치를 지정하는 caption-side caption의 위치를 위인지 아래인지 정해줄 때 사용하는 속성 지정가능한 속성 값 top: 표 위에 제목 표시. 기본 값. bottom: 표 아래에 제목 표시. 2. 표 테두리 스타일을 지정하는 border 일반 태그에서 사용하는 border와 동일하게 설정 가능. 표의 바깥과 셀 모두 테두리를 지정해 줘야 된다. 3. 표 테두리를 통합해서 표출하거나 분리해서 표출하는 border-collapse 표의 테두리와 셀의 테두리를 합쳐서 하나의 테두리만 표출할 것인지 아니면 분리해서 모든 테두리를 표출할 것인지 결정해주는 속성 지정가능한 속성 값 collapse: 테두리를 하나로 합쳐서 표출 seperate: 테두리를 분리하여 따로..

1. CSS 포지셔닝 1. CSS 포지셔닝이란 CSS 속성을 이용하여 HTML 웹 문서의 태그들을 적절한 위치에 배치하는 것을 CSS 포지셔닝이라고 한다. float, position, visibility등의 속성들을 이용해서 태그들을 원하는 위치에 배치하여 웹 문서 구조를 잡는 작업 2. CSS 포지셔닝의 다양한 속성들 태그를 왼쪽이나 오른쪽 배치하는 float 속성 태그의 레이어를 바꿔서 붕 떠있게 하는 속성. 붕 떠있는 태그의 위치를 왼쪽 구석이나 오른쪽 구석으로 배치할 수 있다. 지정가능한 속성 값 left: 해당 태그를 웹 문서의 왼쪽에 배치 right: 해당 태그를 웹 문서의 오른쪽에 배치 none: 해당 태그를 좌우 어느 쪽에도 배치하지 않음 태그들의 배치 방법 지정하는 position 웹 ..

1. CSS와 박스모델 1. 블록 레벨 태그와 인라인 레벨 태그 블록 레벨 태그 태그를 추가했을 때 브라우저의 한 줄을 다 차지하는 태그를 블록 레벨 태그라고 한다. 해당 태그는 좌우에 다른 태그를 배치할 수 없다. 블록 레벨 태그는 width, height, margin, padding 등 크기나 위치를 지정할 수 있다. 인라인 레벨 태그 인라인 레벨 태그는 브라우저의 한 줄을 다 차지하지 않는 태그 인라인 레벨 태그 좌우에는 다른 인라인 레벨 태그들을 배치할 수 있다. 인라인 레벨 태그는 컨텐츠(내용)만큼의 공간을 차지하고 나머지 공간에 다른 태그들을 배치할 수 있다. 블록 레벨 태그와 인라인 레벨 태그의 종류 블록 레벨 태그 p, div, h1~h6, ul, ol, blockquote, form, ..

1. 색상과 배경을 위한 스타일 1. 웹에서 색상 표시하기 16진수 표기법 #과 함께 16진수 값으로 6자리를 표기하는 방식 앞 두자리는 빨간색, 가운데 두자리는 초록색, 마지막 두자리는 파란색의 양을 결정 하나도 색상이 섞이지 않은 값은 00, 가득 섞였을 때는 ff 사용가능한 범위의 값: 000000(검은색) ~ ffffff(흰색) 두 자리씩 값이 중복될 때는 세자리로 축약해서 표현가능. 같은 색상의 값이 중복일 때만 가능 ex) #ffff00 -> #ff0, #cccccc -> #ccc, #aaff33 -> #af3 rgb와 rgba 표기법 rgb(빨간색, 초록색, 파란색), rgba(빨간색, 초록색, 파란색, 투명도)로 사용가능 투명도를 제외한 빨간색, 초록색, 파란색의 값은 0 ~ 255까지 사..

1. 목록과 링크 관련 스타일 1. 목록의 불릿과 번호를 지정하는 list-style-type ul일 경우에는 불릿 모양을 변경할 때 ol일 경우에는 번호의 스타일을 지정할 때 사용 ul에서 불릿을 변경할 때 지정가능한 속성 값 disc(●): 꽉 찬 원. 기본값 circle(○): 빈 원. square(■): 꽉 찬 사격형. none: 불릿 없애기 ul은 상단 메뉴 바에서 주로 사용된다. ol에서 번호 스타일 지정할 때 지정가능한 속성 값 decimal: 1로 시작하는 십진수. 기본값. deciaml-leading-zero: 십진수 앞에 0이 붙은 값. lower-roman: 소문자 로마 숫자 upper-roman: 대문자 로마 숫자 lower-alpha | lower-latin: 소문자 알파벳 upp..