[Javascript] 3강 제어문

[Javascript] 3강 제어문

JS는 논리 구조를 갖고 있고, 그를 통해 프로그램의 여러 기능들을 제공합니다. 이번 시간에는 자바스크립트의 제어문에 대해 살펴보겠습니다. 제어문은 주어진 조건에 따라서 코드 블록을 실행(조건문)하거나 반복 실행(반복문)합니다. 1.조건문  조건문(conditional statement)은 주어진 조건식(conditional expression)의 평가 결과에 따라 코드 블럭(블록문)의 실행을 결정합니다. 조건문은 불리언 값으로 평가될 수 없는 표현 식입니다. 자바스크립트에서 조건문은 if...else 문과 switch문을 제공합니다. 1-1.if...else 문 if..else 문을 사용하면 주어진 조건식(불리언 값으로 평가될 수 있는 표현식)의 평가 결과, 참&거짓에 따라 실행할 코드 블록을 결정합니..

  • format_list_bulleted Front-End/JavaScript
  • · 2025. 2. 5.
  • textsms
[Javascript] 2강 자바스크립트 문법과 자료형

[Javascript] 2강 자바스크립트 문법과 자료형

이번 시간에는 Javascript의 기초부분들을 배워보겠습니다. 먼저 자바스크립트를 실행할 Vs Code에 JS를 테스트할 프로그램을 설치해볼까 합니다. 자바스크립트를 실행할 Code Rounner를 다운받아 줍니다.console.log("javascript")const able = "Hello"console.log(able + "Hello"); 코드를 입력하고 오른쪽 재생버튼을 클릭하면 아래 결과값이 제대로 출력되는 것이 보입니다. Javascript는 Node.js 같이 웹 페이지를 실행할 수 없으므로 이렇게 Code Runner를 사용해서 테스트 해볼 수 있습니다. 1. 문법과 자료형 JavScript는 문법의 대부분을 Java와 C, C++을 기발으로 하고 있습니다 대소문자를 구별하며 유니코드 문..

  • format_list_bulleted Front-End/JavaScript
  • · 2025. 2. 5.
  • textsms
[Javascript] 1강 자바스크립트란 무엇인가?

[Javascript] 1강 자바스크립트란 무엇인가?

객체기반의 스크립트 프로그래밍 언어인 Javascript(자바스크립트)는 1995년 12월 4일 브렌던 아이크라는 개발자가 개발한 언어로 처음에는 모카(Mocha)라는 이름으로, 나중에는 라이브 스크립트(Live Script)라는 이름으로 개발하였고, 최종적으로 자바스크립트라는 이름으로 채택된 언어입니다. 자바스크립트는 현재 수많은 개발언어들의 기초가 된 언어라고 할 수 있습니다. 웹사이트를 만드는 HTML과 스타일을 꾸며주는 CSS를 넘어 동작까지 구현해주는 자바스크립트언어는 ECMA스크립트(ECMAScript)의 표준 사양을 가장 잘 구현한 언어로 인정받고 있습니다.  자바스크립트는 브라우저뿐만 아닌 서버에서도 실행할 수 있는 언어입니다. 그 외에 자바스크립트 엔진(Javascript engine)이..

  • format_list_bulleted Front-End/JavaScript
  • · 2025. 2. 5.
  • textsms
[CSS] CSS 4장. css 레이아웃 위치잡기, Floats, flexbox ,grid, 반응형 디자인, 미디어 쿼리

[CSS] CSS 4장. css 레이아웃 위치잡기, Floats, flexbox ,grid, 반응형 디자인, 미디어 쿼리

1. CSS 레이아웃 뷰포트와 관련하여 박스를 올바른 장소에 배치하는 방법을 살펴보겠습니다. CSS 페이지 레이아웃 기술은 웹페이지에 포함될 요소들을 가져와 일반적인 레이아웃 흐름에서의 기본 위치, 주변의 다른 요소, 부모 컨테이너, 기본 뷰포트 및 윈동우의 요소와 관련하여 해당 요소가 어디에 위치할지 제어할 수 있습니다. 일반 흐름(normal flow)display 속성플렉스박스(Flexbox)그리드(Grid)플로트(Floats)포지셔닝테이블 레이아웃다단 레이아웃각각의 기술은 저마다 용도와 장단점이 있고, 어떤 기술도 단독으로 사용하도록 설계되지 않았습니다. 각 레이아웃 기술이 어떤 용도로 설계된 것인지 이해하게 되면 해당 작업에 가장 적합한 도구가 어떤 것인지 파악할 수 있습니다. 일반 흐름(nor..

  • format_list_bulleted Front-End/CSS
  • · 2025. 2. 5.
  • textsms
[CSS] CSS 3장. css 텍스트 스타일링, 목록 스타일링, 스타일링 링크, 폰트

[CSS] CSS 3장. css 텍스트 스타일링, 목록 스타일링, 스타일링 링크, 폰트

1. 기본적인 텍스트 및 글꼴 스타일링 CSS에서 글꼴 굵기, 종류 및 스타일, 글꼴 양식(shorthand), 텍스트 정렬 및 기타 효과, 줄 및 문자 간격 설정을 포함하여,텍스트/글꼴 스타일링의 모든 기본사항을 알아보겠습니다. HTML 및 CSS를 사용한 작업에서 이미 경험한 것처럼 요소 내부의 텍스트는 요소의 내용 박스안에 배치됩니다. 콘텐츠 영역 왼쪽 상단(또는 RTL 언어 콘텐츠의 경우, 오른쪽 상단)에서 시작해 행의 끝으로 흐릅니다. 끝까지 도달하면 다음 줄로 내려가 모든 내용이 박스에 들어갈 때까지 다음 줄로 계속 진행합니다. 텍스트 내용은 일련의 인라인 요소처럼 효과적으로 작동해, 서로 인접한 줄로 배치되면 줄 끝에 도달할 때까지 줄 바꿈을 만들지 않거나, 요소를 사용해 수동으로 줄바꿈을..

  • format_list_bulleted Front-End/CSS
  • · 2025. 2. 4.
  • textsms
[CSS] CSS 2장. css 값과 단위, overflow, 이미지, 미디어 양식 요소, 표 스타일링,

[CSS] CSS 2장. css 값과 단위, overflow, 이미지, 미디어 양식 요소, 표 스타일링,

1.CSS 값과 단위 css 규칙은 선언으로 구성되어 있으며, 속성과 값으로 구분되어 있습니다. 각 속성은 어떤 종류의 값을 가질 수 있는지를 설명하는 값 유형을 가집니다. 다음 예제에 키워드를 사용해 머리글의 색상의 설정하고 rgb() 함수를 사용해 배경색을 넣어 보겠습니다.h1 { color: yellow; background-color: rgb(197,93,161);}  CSS 값은 허용가능한 하윗값 모음을 정의하는 방법으로 유효한 것으로 표시되면 키워드, 16진수 값 rgb() 함수 등 어떤 색상 값을 사용할 수 있는지 궁금할 필요가 없고, 사용 가능한 color 값은 브라우저에서 지원하고 있습니다. 색상 선택도구Google에 있음www.google.com  W3Schools.comW3..

  • format_list_bulleted Front-End/CSS
  • · 2025. 2. 2.
  • textsms
반응형