브라우저에서 작동하는 자바스크립트의 경우 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..

!important class 여러개 주기 input:focus { } 해당 속성에 대해 설명하기 위해 다음과 같은 html 코드가 작성되어 있다고 하자. 간혹 코드를 작성하다 보면 위에 있는 코드처럼 엘리먼트에 두개 이상의 css 속성이 작성되는 경우가 발생할 수 있다. 이때 동일한 속성에 대해 아래에 적혀있는 css가 위에 위치한 css를 덮어버리는 현상이 발생하는데 만약 작성된 css의 개수가 많아지게 되면 해당 부분을 찾아내서 수정하기가 번거로워지는 상황에 처하게 된다. 이러한 이슈를 해결할 때 사용되는 것이 바로 !important 이다. !important는 강제적으로 css를 적용할 때 사용하게 된다. !important가 작성된 코드에 우선순위를 부여해 해당 코드..