본문 바로가기

Coding127

Javascript - 변수, 비교, 논리연산자 변수 - 변수는 필요한 값을 저장하는 컨테이너 같은 역할 - 쉽게 물을 담다는 생각을 하면 된다. - 그릇에 모양에 따라 물의 모양이 변화듯이 변수 이름을 설정(그릇 모양을 설정)하고 변수에 어떤 값을 넣을지 다양한 형태(물의 모양 변화)로 변수를 저장 할 수 있다.(문자 타입, 숫자 타입, 함수 타입, 객체 타입 등등) - 변수를 만들 때, 우선 선언을 해줘야 한다.(유효범위(scope)를 설명이 필요하기 때문에 우선 var와 let만 사용하기로한다) - 특징 * 변수의 가장 큰 장점은 재사용이 용이하다.(한번 사용 했던 변수는 또 사용이 가능하다) * 보수유지(maintenance)에 용이하다(변수 값만 바꾸면 변수가 사용된 곳은 전부 바뀜) 비교 - 어떤 값과 어떤 값을 비교하여 참 거짓을 판단 예.. 2020. 5. 13.
Javascript - 데이터 타입(기초) ※chrome에서 console을 활용하여 예시를 보여줌 - chrome 에서 오른쪽 마우스를 클릭 후, 검사를 클릭한다. - 메뉴에서 console을 클릭하면 이용할 수 있다. ​ 좌항과 우항 - str = '123'의 의미는 str(좌항)에 '123'(우항) 값을 넣었다는 의미(변수라는 개념인데 다음 글에 설명할 예정). - str을 호출 하면 '123'이 나온다. ​ Javascript의 여러가지 타입 - data type(string(문자), number(숫자), boolean, undefiend) *string는 문자 형태 *string은 ' '과 " " 둘다 사용이 가능 *연산자 +를 사용 했을 때, ""안에 모든 data가 들어오는 것을 확인. ※ typeof라는 data type을 확일 할.. 2020. 5. 13.
CSS - grid Grid - HTML element를 좌표처럼 활용하여 layout 할 수 있다. *display:gird로 grid 방식을 선언 해준다. *gird-template-colums : 100px 100px 100px는 100px 단위로 3개의 열을 만들어 준다.(개수만큼 열 생성) *grid-template-rows : 30px 30px 단위로 2개의 열을 만들어 준다.(개수만큼 행 생성) *border 등의 효과등을 넣어 줄 수 있다. ​ 좌표처럼 활용하여 box size를 이용해서 크기를 조절 - 좌표처럼 활용이 가능 *grid-column-start:1; , grid-column-end:3; 을 간단하게 grid-column:1/3; 표현이 가능하다. *grid는 좌측 상단부터 (1,1)부터 시작이다.. 2020. 5. 7.
CSS - 위치(float, column) 그림과 글자 조화 - 그림과 글자 위치를 조화롭게 배치 할 수 있다. *float:left;는 그림을 왼쪽에 두고, 오른쪽에 배치 *적용할 element 위치를 선정 Holy grail layout - float 기반으로 화면 layout 을 설정 할 수 있으나, 창 크기에 따라 조정이 안된다는 단점이 있다. *하단과 같이 Layout을 할 수 있으나, 단점으로 인해 최근에는 다른 방식을 많이 사용(grid(다음 글 내용에 추가 할 계획)) box-sizing:border-box; - border 효과를 넣었을 때, border의 크기는 컨텐츠의 크기로 설정 된다. - border box 크기를 border의 크기로 설정 할 수 있다. - float으로 layout을 설정 할 때, 유용한 기능. ​ Mu.. 2020. 5. 7.
반응형

티스토리툴바