이번 포스팅에서는 JavaScript에서 사용하는 if문, for문, 함수에 대해 정리해보고자 한다. if문 for문 함수 (function) if문은 조건문이다. 특정 조건을 만족했을 때 if문 안에 들어있는 코드블록이 실행되도록 한다. if문을 작성하는 형식은 아래와 같다. if문 - 조건문 if (boolean) { // 참일 때 실행하는 코드영역 } else { // 거짓일 때 실행하는 코드영역 } if (불리언) { 코드블록 } else { 코드블록 } 비교연산자를 활용해 불리언 값 도출 조건을 만족할 때 if에 해당하는 코드블록이 실행됨. 조건을 만족하지 않을 경우 else에 해당하는 코드블록이 실행됨. +) boolean 값으로는 True와 False가 있다. < ..

브라우저에서 작동하는 자바스크립트의 경우 html을 이용해 작성이 가능하다. html에서 JavaScript를 작성하기 위해서는 부분에서 를 이용해서 JavaScript를 작성한다. 프로그래밍 공부를 하기 위해서는 예약어라는 개념을 알아야 한다. 예약어란 컴퓨터 프로그래밍 언어에서 이미 문법적인 용도로 사용되고 있기 때문에 식별자로 사용할 수 없는 단어들이다. 쉽게 풀어서 얘기하자면 프로그래밍 언어에서는 내 마음대로 작성해도 되는 부분과 정해진 대로 작성해야 되는 부분이 존재한다. 여기서 정해진 대로 써야되는 부분이 바로 예약어이다. 처음으로 알아볼 예약어는 JavaScript에서 변수를 선언할 때 사용하는 예약어로 JavaScript ES6에서 변수를 선언할 때는 let 과 const를 사용한다. le..

이번 포스팅에서는 display:flex;에 대해 알아보도록 하자. 지금까지는 레이아웃을 구성할 때 주로 position과 float을 이용하여 구성하였다. 혹은 부모, 자식 관계에 있는 엘리먼트들의 경우 아래와 같이 부모 엘리먼트에 padding을, 자식 엘리먼트에 margin을 부여해서 컨텐츠들을 정렬하였다. 이번에 알아볼 display:flex;는 이러한 복잡한 방식을 동원하지 않고도 좀 더 편하게 레이아웃을 구성할 수 있게끔 도와주는 속성이다. 한마디로, 레이아웃을 구성할 때 알아두면 무척 편하고 좋은 속성이다. 위의 그림과 같이 레이아웃이 구성되어 있다고 했을 때 display:flex;는 container에 그 속성값을 부여한다. 다시말해, display:flex;는 정렬의 주체가 부모에게 있..

이번 포스팅에서는 html의 엘리먼트를 이용하여 기본적인 게시판 형태를 만들어 보려고 한다. 이전 포스팅에서 엘리먼트에 대해 다뤘었는데 짧게 복습해보자. html 코드에서 테이블을 만들 때는 엘리먼트 안에 엘리먼트와 엘리먼트를 사용한다. 테이블을 구성할 때는 몇개의 줄과 칸으로 구성할 것인지를 먼저 생각해야 한다. 이 때 줄을 생성하는 것이 엘리먼트이고 칸을 생성하는 것이 엘리먼트이다. 다시말하면, 엘리먼트의 개수만큼 row(행)를 생성하고 엘리먼트의 개수만큼 column(열)을 생성한다. 기본적인 게시판 모양의 코드는 아래와 같다. 게시판 로고 번호 제목 작성자 작성일 조회수 1 안녕하세요. web7722 2021-12-29 0 2 안녕하세요2. web7722 2021-12-29 2 글쓰기 엘리먼트 안..

이번 포스팅에서 만들어 볼 것은 바로 layer popup 이다. 아래 그림과 같이 "버튼"을 클릭했을 때 pop up되는 느낌으로 새로운 영역이 등장하는 효과를 layer popup 이라고 한다. 시작하기에 앞서 아래와 같이 css style 기본 세팅을 적용한 후에 시작하도록 하자. /* CSS style sheet */ * { margin:0; padding:0; } ul, li { list-style:none; } a { text-decoration:none; } "버튼"을 클릭하기 전과 후의 화면을 다르게 구성하기 위해서 input:checked { } 속성을 사용해 효과를 적용하려고 한다. 우선, 엘리먼트와 엘리먼트를 사용하여 "버튼"이라는 글자와 함께 체크박스를 생성하고 체크박스에 displ..