Web Programming 썸네일형 리스트형 자바스크립트 조건문 알아보기 1. IF 조건문 IF 조건문은 일반적으로 많이 쓰입니다. 주어진 조건식을 만족할 경우 IF문을 실행하고 그렇지 않을 경우에는 IF문을 실행하지 않고 건너뛰어 프로그램이 진행됩니다. IF 조건문 사용 방법은 다음과 같습니다. IF (조건문) { 실행할 내용 } 주어진 조건문이 참일 경우에만 실행할 내용을 실행하게 되며, 조건문이 거짓일 경우에는 실행할 내용을 실행하지 않고 다음 문장으로 넘어갑니다. 만약 조건문을 만족하지않을때도 실행할 내용을 정의하려고 한다면 else를 IF와 함께 사용합니다. 사용 방법은 다음과 같습니다. IF (조건문) { 실행할 내용 1 } else { 실행할 내용 2 } 조건문이 참일 경우에는 실행할 내용 1 을 실행하고 거짓일 경우에는 실행할 내용 2 를 실행합니다. 이와같은 .. 더보기 자바스크립트 자료형 II 자바스크립트로 코드를 작성하여 실행하는 방법으로 Visual Studio Code를 이용할 수 있지만 파일을 저장하여 저장된 파일을 실행해야만 결과값을 확인할 수 있기 때문에 좀 더 간단한 방법으로 구글 크롬을 이용하면 편리합니다. 구글 크롬을 여시고 주소입력란에 'about:blank'라고 입력하고 엔터를 칩니다. 그럼 아무 내용이 없는 창이 열립니다. 그럼 F12 키를 누르거나 Ctrl + Shift + I 키를 동시에 누릅니다. 그러면 우측에 아래 그림과 같은 창이 뜹니다. 이를 개발자 도구라 부릅니다. 개발자 도구에서 console 탭을 누르고 '>' 옆에 코드를 입력하여 엔터키를 누르면 코드가 바로 실행되어 그 결과를 확인할 수 있습니다. 1. 상수와 변수 상수는 하나의 값을 나타내며 변화가 없.. 더보기 자바스크립트 자료형에 대해 알아봅시다 1. 자바스크립트란? 자바 스크립트 (Javascript)를 위키백과에서 찾아보면 다음과 같이 설명하고 있습니다. 자바스크립트(영어: JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다. 자바스크립트는 본래 넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌던 아이크(Brendan Eich)가 처음에는 모카(Mocha)라는 이름으로, 나중에는 라이브스크립트(LiveScript)라는 이름으로 개발하였으며, 최종적으로 자바스크립트가 되었다. 자바스크립트가 썬 마이크로시스템즈의 자바와 구문이 유사한 점도 있.. 더보기 Visual Studio Code 설치 HTML, CSS, Javascript를 작성할때 사용하는 프로그램중 최근에 가장 많이 사용되고 있는 개발 전용 에디터 프로그램인 비주얼 스튜디오 코드 (Visual Studio Code)에 대해서 알아보겠습니다. Visual Studio Code를 설치하기 위해 https://code.visualstudio.com/ 주소에 접속합니다. [그림1]에서 빨간색 화살표(⇨)로 표시된 'Download for Windows'를 클릭합니다. 사용하시는 OS가 Windows가 아닐경우 오른쪽 '∨'표시를 클릭하면 Mac, Linux에 맞는 파일을 선택하여 다운로드 할 수 있습니다. 다운로드한 파일을 실행하면 [그림2]와 같은 화면이 뜹니다. '동의합니다(A)'를 선택하고 '다음(N)'을 클릭합니다. 그러면 프로그.. 더보기 font - 구글 웹폰트 사이트에 올라온 폰트 사용하는 방법 웹 페이지 글자 모양 설정을 위한 font 웹 페이지에 글자를 기본 폰트로 하기에는 밋밋한 경우 이미지로 만들어서 올릴 수도 있지만 구글 웹폰트 사이트에 올라온 폰트로 꾸밀 수 있습니다. 우선 구글 웹폰트 사이트 https://fonts.google.com/에 접속합니다. 첫 화면에서 좌측 위쪽에 Language라는 버튼이 보입니다. 그것을 클릭하여 아래로 내리면 Korean 항목이 보입니다. Korean을 클릭하면 화면에는 한글 폰트들이 보일 것입니다. 원하는 폰트가 보이시면 클릭을 합니다. 저는 아래쪽 'Do Hyeon'이라는 폰트를 클릭해보겠습니다. [그림 3]에서 빨간색 원으로 표시된 '+ Select this style'을 클릭하면 [그림 4]와 같이 화면 우측에 'Selected family'.. 더보기 mediaquery 반응형 웹 디자인을 위한 mediaquery 인터넷을 사용하거나 모바일을 사용할때 화면의 크기는 사용자마다 제각각 다를 것입니다. 컴퓨터를 사용할때는 해상도나 웹브라우저 크기를 조정하여 사용함에 따라서 달라지고, 모바일의 경우에는 제품마다 그 크기가 달라서 이에 맞춰 웹디자인을 하기는 힘듭니다. 이를 위해 CSS에서 mediaquery를 이용하여 이 문제를 해결할 수 있도록 제공합니다. 사용방법은 다음과 같습니다. @media ( 화면폭 ) { 실행 내용 } 화면폭에는 화면크기의 폭을 설정합니다. 속성은 다음과 같습니다. max-width : 화면 최대 폭 설정 min-width : 화면 최소 폭 설정 @media를 사용할때 모바일 중심으로 디자인할 것인지 아니면 컴퓨터 중심으로 디자인할 것인지를 결정하.. 더보기 animation 간단한 움직임을 만드는 animation animation은 자동으로 요소를 움직이게 하는 속성입니다. animation 속성은 @keyframes 속성과 함께 사용됩니다. @keyframes 속성은 요소 움직임의 처음부터 마지막까지를 정의합니다. 사용방법은 다음과 같습니다. 1. @keyframes 속성 @keyframes ani이름 { 0% {요소의 animation 시작할 때의 설정} : n% {전체 animation 시간중 n% 진행됐을때 실행될 내용 설정} : 100% {요소의 animation 끝날 때의 설정} } 2. animation 속성 animation: ani이름 시간 진행속도 지연시간 반복횟수 방향지정 ㄱ. ani이름 : @keyframes에 정의된 이름을 말합니다. ㄴ. 시간 : .. 더보기 transition 시간을 조절하여 여러가지 움직임 효과를 주는 transition transition은 cubic-bezier() 속성을 사용하여 움직임에 변화를 주어 좀더 다이나믹하게 화면에 움직임을 주고자 할때 사용합니다. 사용방법은 다음과 같습니다. transition : 적용하고자 하는 속성 진행속도 지속시간 지연시간 1. 적용하고자 하는 속성 HTML내에서 transition기능을 적용하고자 하는 속성을 지정합니다. 사용할 수 있는 속성 - none : 모든 속성에 적용하지 않음. - all : 모든 속성에 적용함. - 속성 : 해당 속성에 적용함. 여러가지 속성에 적용하려면 콤마로 구분하여 작성. - initial : 기본값으로 설정함. - inherit : 부모 요소의 속성값을 적용함. 2. 진행속도 움직임의.. 더보기 이전 1 2 3 다음
아무개의 취미생활
