본문 바로가기

전체 게시글376

[Javascript] 간단하게 구현한 라이트 모드(light)와 다크(dark) 모드 초기 화면 모드 변환(day.night) button 클릭 시 모드 변환(day.night) button 클릭 시 전체 소스 코드 2022. 9. 23.
[CSS] display: gird 를 이용한 계산기 디자인 CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다. Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아웃을 위해 우리는 CSS Grid를 사용할 수 있습니다. 아래와 같은 계산기를 CSS Grid를 활용해서 디자인을 해보겠습니다. html 소스코드는 아래와 같습니다. 아래와 같이 출력됩니다. display: grid를 선언해보겠습니다. body form { display: grid; } 컨테이너 요소( )를 지정해서 grid를 선언한다면 자식 요소들은 아이템(item)이 됩니다. grid를 통해 아이템들은 block이 되면서 위와 같이 출력됩니다. 이제 gird-template를 통해 row(가로)와 column(세로)를 정해보겠습니.. 2022. 9. 22.
[Javascript] input 태그 / onclick / parseInt / 계산기 기초 / 두 수의 합 구하기 로그인을 위해서 아이디/비밀번호를 입력할 때나 회원가입을 하기 위해서 개인정보를 입력할 때 블로그나 게시판에 글을 작성하거나, 파일을 전송할 때 사용하는 form 태그에 대해서 알아보았습니다. [HTML] form / 서버 / 클라이언트 / GET과 POST의 차이에 대해서 / method: get / method: post 폼 (form) 로그인을 위해서 아이디/비밀번호를 입력할 때나 회원가입을 하기 위해서 개인정보를 입력할 때 블로그나 게시판에 글을 작성하거나, 파일을 전송할 때 폼을 이용해서 서버에 전송합니 starting-coding.tistory.com 두 수를 입력받아 더하기를 해주는 화면을 구현했다고 가정해봅시다. 핵심 소스 코드는 다음과 같습니다. + = 소스 코드 중 onclick = ".. 2022. 9. 22.
[HTML] form / 서버 / 클라이언트 / GET과 POST의 차이에 대해서 / method: get / method: post 폼 (form) 로그인을 위해서 아이디/비밀번호를 입력할 때나 회원가입을 하기 위해서 개인정보를 입력할 때 블로그나 게시판에 글을 작성하거나, 파일을 전송할 때 폼을 이용해서 서버에 전송합니다. 먼저, 폼을 이해하기 위해서는 우선 서버와 클라이언트 개념을 이해해야합니다. 서버: 정보를 제공하는 쪽 클라이언트: 정보를 제공 받는 쪽 예를 들어, 웹브라우저의 주소창에 티스토리 주소인 https://www.tistory.com/을 입력하면 웹 브라우저는 tistory.com 에 해당하는 컴퓨터에게 컨텐츠를 요청한다. 이 맥락에서 웹브라우저는 정보를 요청하는 쪽, 제공받는 쪽이므로 클라이언트가 되며, tistory.com의 컨텐츠를 제공하는 컴퓨터는 정보를 제공하기떄문에 서버가 된다. 사용하는 예를 들자면, 태.. 2022. 9. 22.
[Javascript] set() 메서드 / 임의 숫자 출력 / Math.radom() 메서드 / break / 로또번호 만들기 지금까지 공부했던 내용을 기반으로 로또 번호를 console에 출력하는 프로그램을 만들어보겠습니다. [Javascript] set() 메서드 / add() / size / for of / for Each set은 중복을 허락하지 않고, 교, 합, 차집합이 가능함에 따라서 중복을 제거하는 용도로 사용 데이터를 삽입한 순서대로 요소를 순회 // 대문자 주의 // "iterable" => 반복 가능한 객체 new Set([iterable] starting-coding.tistory.com [Javascript] 수학 객체 / Math.abs() / Math.max() / Math.min() / Math.pow() / Math.random() / Math.round() / Math.ceil() / M 자바스크립.. 2022. 9. 21.
[CSS] Flexbox / container / item / vh / % / display / flex-direction / flex-wrap / justify-content / align-items / Flexbox의 구조는 외곽의 큰 box를 "container"라고 하고, 내측의 박스들을 각각 "item"이라고 하자. container에 적용할 수 있는 속성 display flex-direction flex-wrap flex-flow justify-content aligj-items align-content item에 적용할 수 있는 속성 order flex-grow flex-shrink flex align-self 최상위 div class "container"를 만들었고, 하위에는 1 ~13 까지의 div class "item" 만들었다. //CSS .container { background-color: beige; height: 100%; } .item { width: 50px; height: .. 2022. 9. 20.

티스토리툴바