본문 바로가기

웹개발

(60)
자바스크립트 연산자 Operator 자바스크립트의 ES5기반으로 한 기본 개념들입니다. 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. 연산자 +, -, *, /, % >, >=, "\u0032"); //true console.log("A" > "1"); //true console.log("가" >= "다"); //false console.log("B12" > "B24"); //false , = 연산자 , instanceof 연산자, in 연산자 양쪽이 number 타입일 때 비교 값이 참이면 true, 거짓이면 false를 반환한다. 한쪽이 string 타입이라면 false를 반환하고 양쪽이 모두 string 타입이면 유니코드 사전 순서로 문자 하나씩 비교한다. 동등, 부등, 일치, 불일치 연산자 co..
자바스크립트 문장 Statement 자바스크립트의 ES5기반으로 한 기본 개념들입니다. 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. 문장 Statement 문장의 끝이 ;(세미콜론)인 형태로 세미콜론은 문장을 끝나게 하는 역할을 한다. 또한 세미콜론은 자바스크립트 엔진이 자동으로 삽입해 문장을 끝내기도 한다. 화이트 스페이스 White space 사람 눈에 보이지 않는 문자로 가독성을 위한 공백이다. 문자의 종류마다 모두 고유의 기능과 유니코드를 가진다. 블록 {문장 리스트}의 형태로 여기서 말하는 블록은 ES5의 블록과는 조금 다른 개념일 수 있다. 중괄호 안에 모든 문장이 실행되는 실행그룹이다. 문장 리스트의 작성은 선택이며 아예 없어도 된다. debugger var apple = "fruit" ..
Javascript 자바스크립트 기본 문법들 자바스크립트의 ES5기반으로 한 기본 개념들입니다. 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. 문장 Statement 자바스크립트 코드의 실행 단위로써 세미콜론(;)까지가 하나의 문장이다. 문장 시작은 위치제약이 없고 문장 들여 쓰기는 기본이 2칸, 4칸이다. if (true) { var lemon = "시다"; var count = 2; }; if (true) { var apple = "시고 달다"; }; if { 부터 }; 까지가 한 문장이고 그 안에 var부터 세미콜론까지가 한 문장이다. 문장 안에 문장들을 안고 있는 구조이다. 변수 Variable 값을 저장하는 영역으로 저장된 값을 재사용하기 위해 쓴다. var apple = "사과"; var amount..
[CSS] 반응형 웹페이지 디자인 (Responsive Webpage Design) 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. 반응형 웹 디자인이란 반응형 웹 디자인이란 당신의 웹페이지가 모든 기기에서 보기 좋게 만들어진 디자인이다. 웹페이지는 데스크탑 뿐만아니라 태블릿 pc, 모바일, 노트북 등 여러 다양한 기기에서 보인다. 그래서 기기와는 상관없이 보기 좋게 만들어져야 한다. 반응형 웹 디자인은 프로그램이나 javascript가 아닌 오직 html과 css를 사용해서 리사이즈하거나 숨기거나 키우거나 움직이게 만들어 어느 화면에서도 아름답게 만들어야 한다. 또한 작은 화면에서 정보를 빼는 것이 아닌 어느 기기에서도 맞는 정보를 채택하여 보여주는것이다. Viewport 뷰포트 뷰포트란 사용자 웹페이지의 보여지는 영역을 말한다. 태블릿이나 모바일이..
[CSS] 플렉스박스 Flexbox 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. 플렉스모드를 사용하려면 플렉스 컨테이너부터 정의해야 한다. Flexbox parent element - Container 디스플레이 속성을 플랙스로 지정하면서 컨테이너는 flexible한 부모요소가 된다. .flex-container { display: flex; } flex-direction flex-direction 속성은 flex item들을 정렬하는 방법을 정의한다. .flex-container { display: flex; flex-direction: column; } column : flex item들을 행 기준으로 정렬한다. column-reverse : 행 기준 거꾸로 정렬한다. row : 열 기준으로 정렬..
[CSS] 미디어쿼리 Media Queries 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. css 중 반응형 웹페이지의 핵심이라고 할 수 있는것이 바로 미디어쿼리이다. 미디어 쿼리는 css3 부터 등장한 기술로 어떤 특정 조건이 충족되면 @media 규칙을 css 블록영역에서 적용시킨다. 조건식 @media (조건) { 적용할 css } @media only screen and (max-width: 600px) { body { background-color: lightblue; } } 윈도우 브라우저가 600px 이하일 경우에 배경색이 lightblue 색으로 변한다. 브레이크포인트 (Breakpoint) 우리가 웹페이지를 만들면 화면에 띄워질때 스마트폰이든 태블릿이든 그 화면 크기에 맞게 반응형으로 보여준다...
[CSS] 텍스트 줄바꿈, 말줄임 처리, 글자 자르기 css 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. 웹페이지상에서 텍스트를 삽입할때 짧은 텍스트일경우는 문제가 없지만 block의 크기보다 넘치게 클 경우 넘치는 글을 잘라내거나 줄바꿈을 해야 하는 경우가 있다. 그럴때 유용하게 사용할 수 있는 것이 white-spacing, text-overflow, word-break 이다. white-space 공백 문자를 어떻게 다룰것인가를 지정한다. normal : 정상적으로 출력하도록 지정한다. 연속된 공백 문자나 줄바꿈을 통합한다. pre : 연속된 공백문자나 줄바꿈을 통합하지 않고 원문 그대로 출력한다. nowrap : 연속된 공백문자는 출력하지만 줄바꿈은 통합하지 않는다. 예제) 원문: 안녕하세요 크리벨로퍼의 블로그입니다...
[CSS] 그림자 text-shadow , box-shadow 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. css로 문자나 박스의 그림자를 추가할 수 있다. 그림자를 추가할 때 쓰는 속성은 text-shadow와 box-shadow 두 가지이다. Text shadow text-shadow 속성으로 문자의 그림자를 추가 할 수 있다. 입력값으로는 수평값(px)과 수직 값(px)을 지정해주어야 한다. h1 { text-shadow: 2px 2px; } 또한, 색상도 지정 해 줄 수 있다. h1 { text-shadow: 2px 2px red; } 그림자의 크기와 색상 사이에 블러값도 넣어줄 수 있다. 블러값이 높아질수록 블러의 효과가 더 커진다. h1 { text-shadow: 2px 2px 5px red; } 그림자의 크기값을 ..