본문 바로가기

전체 글227

[HTML/CSS] 그리드를 이용하여 웹 페이지 틀 짜보기 그리드를 사용하면 웹페이지의 레이아웃을 간편하게 지정할 수 있다. 아래의 사진은 레이아웃이 7개로 구성되어 있다. 우선 저 7개의 레이아웃을 만들기 위해서는 HTML에서 틀을 짜야한다. [HTML] header menu main top menu2 bottom footer body 태그 안에서 .container로 묶인 7개의 div 태그를 만들어 준다. CSS를 적용하지 않고 HTML 코드만 작성하고 실행을 시키면 아무것도 전혀 적용이 안된 것을 알 수 있다. [CSS] *{ margin: 0; } .container{ display: grid; grid-gap: 10px; height: 100vh; grid-template-columns: 300px 1fr 300px; grid-template-rows.. 2022. 7. 21.
[HTML/CSS] id와 class의 차이점 HTML에서 특정 태그에만 특정 기능을 주고 싶을 때 id 값이나 class명을 통해 특정 기능을 부여할 수 있다. id나 class를 사용하는 방법은 다음과 같다. 철수 사용하고 싶은 태그 안에 class = "클래스 명" id = "아이디 값"을 주는 것이다. id나 class로 할 수 있는 것은 특정 기능을 부여할 수 있다고 위에서 하였다. 그러면 어떻게 하는가? id, class 불러오는 방식 id나 class는 css를 통해 처리를 해야한다. 철수 영희 id나 class를 style 태그로 불러올 때는 규칙이 있다. id를 불러오고 싶다면 id값 앞에 (#)을 붙이고 class를 불러오고 싶다면 class 명 앞에 (.)을 붙여야 한다. style 태그안에 있는 내용을 해석해보자면클래스 명이 '.. 2022. 7. 19.
[HTML/CSS] HTML과 CSS로 네이버 로그인 화면 만들어 보기(JS x) 한 2~3주 동안 배운 내용을 토대로 네이버 로그인 화면을 만들어 보았다. HTML이랑 CSS로만 만들어서 디자인에 중심을 두었다. 원래 만드려고 했던 로그인 화면은 아래와 같았는데 아직 기초단계이다 보니 조금 힘들 것 같아 상대적으로 쉬운 아래 사진과 위의 사진의 특징을 몇개씩 골라 만들어 보았다. [HTML 코드] 한국어 English 로그인 로그인 상태 유지 더욱 간편한 로그인 비밀번호 찾기 | 아이디 찾기 | 회원가입 이용약관 | 개인정보처리방침 | 책임의 한계와 법적고지 | 회원정보 고객센터 Copyright © NAVER Corp. All Rights Reserved. 아이디 입력 창 위의 NAVER 로고를 눌렀을 때 메인 페이지로 이동하기 위해 링크를 첨부했다. 아이디/비밀번호/회원가입/fo.. 2022. 7. 18.
[WEB/JS] 자바스크립트 객체 이해하기(선언, 반복문) [객체 생성하기] 배열은 정보가 0번째부터 n번째까지 순서대로 저장된다는 특징이 있다. 하지만 객체는 순서에 상관없이 저장되는 특징을 가지고 있다. 객체를 생성하는 법은 스크립트 태그 안에서 var 변수명 = { 저장하고 싶은 데이터 }; 를 작성해주면 된다. 조금 더 자세하게 보자면 아래와 같다. banana라는 정보를 넣는다면 그냥 넣지 말고 yellow라는 이름을 가진 수납상자(?)에 넣는다고 생각하면 편하다. apple도 마찬가지로 red라는 수납상자에 넣는다고 생각하면 편하다. [꺼내는 법] 저장한 정보를 꺼내는 법은 역시 document.write(); 를 사용한다. fruit.yellow의 의미는 'fruit 중에서 yellow라는 수납상자에 있는 정보를 꺼내라'라는 의미이다. fruit.r.. 2022. 7. 13.
[WEB/JS] 함수(function) 이해하기 [ 함수의 기본 ] 자바스크립트에서 함수는 중복되는 코드가 여러 곳에서 나올 때 중복되는 코드를 하나의 함수로 묶어 그 함수만 실행하면 원하는 값을 가져올 수 있는 기능이다. 유지보수하기 좋기때문에 다른 언어에서도 많이 사용한다. Function Basic 예를 들어 위와 같은 코드가 있고 2-1, 2-2를 반복해서 출력하고 싶다면 반복문을 사용하면 될 것이다. 하지만 아래와 같은 코드는 중간에 3이 껴있기 떄문에 반복문을 사용할 수 없을 것이다. Basic 물론 하나하나씩 코딩을 해서 바꿀 수는 있지만 1억개를 바꿔야 한다면 굉장히 많은 시간과 노동이 필요할 것이다. 이때 사용하는 것이 함수이다. 함수를 사용하기 위해서는 script태그 안에서 function 함수명() { 중복되는 내용 } 를 사용해.. 2022. 7. 12.
[WEB/JS] 배열/반복문(for문, while문) 배열 [배열 선언하는 법] 스크립트 태그 안에 변수를 하나 정해서 배열을 선언 해준다. 배열을 선언할때는 [ ] 안에 선언 해준다. [배열의 인덱스를 확인하는 법] document.write(변수명 [ 인덱스 번호 ]) 로 확인이 가능하다. 배열은 첫번째부터 시작하는 것이 아니라 0번째 부터 시작하는 것을 유의해야 한다. 그렇기 때문에 0번째 인덱스에는 apple 1번째 인덱스에는 orange 2번째 인덱스에는 banana가 오게 된다. [배열을 중간에 추가하고 싶을 때는?] 배열을 중간에 추가하고 싶을 때도 있을 것이다. 배열을 추가는 변수명.push("추가할 배열"); 로 가능하다. 배열을 추가하게 되면 2번째 인덱스까지 차있는 상태기이 떄문에 인덱스는 3번이 된다. [배열의 크기를 알고 싶을 때] .. 2022. 7. 11.
[WEB/JS] 조건문 & 웹페이지 주/야간 모드 설정2 자바스크립트의 조건문은 if-else를 통해 자신이 원하는 값을 선택해서 출력할 수 있다. 아래와 같은 코드가 있다고 가정하자. 조건문 코드에 입력한 순서인 1 2 3 4가 줄바꿈을 해서 출력이 될 것이다. 만약, 위처럼 모든 숫자가 출력되는 것이 아니라 숫자들이 선택적으로 출력이 되게 하고 싶다면 조건문을 사용하면 된다. If-else문 앞에 보여준 코드와 큰 차이는 없지만 if문과 else문이 들어간 것을 볼 수 있다. if옆의 괄호안에 값이 참이면 if문으로 감싼 코드가 출력이 되고 if옆의 괄호안에 값이 거짓이면 if문을 건너뛰고 else문을 출력하게 된다. 앞에서 배운 조건문을 통해 이전에 만든 주/야간 모드 설정을 조금 더 단순하게 만들 수 있다. 조건문을 통해 주간/야간 버튼을 아래처럼 따로.. 2022. 7. 8.
[WEB/JS] 웹페이지 주/야간 모드 설정1 지금까지 만든 웹페이지는 주간모드 야간모드가 설정이 되어있지 않아 어두운 곳에서 볼 때 눈이 아플 수 있다. 자바스크립트로 주/야간 모드 변경하기 위해 일단 버튼을 만들자 WEB이라는 제목 옆에 주간, 야간으로 버튼이 생긴 것을 볼 수 있다. 이제 버튼을 클릭했을 때 화면이 변경되도록 onclick=" "이벤트를 처리해줘야 한다. onclick이벤트 안에 아래와 같은 코드가 들어가는데 document.querySelector('body').style.backgroundColor='white'; document.querySelector('body').style.backgroundColor='black'; 의미를 간단하게 설명하자면 body 태그 영역 안에 있는 백그라운드 화면을 CSS의 style을 이용해.. 2022. 7. 7.
[WEB/JS] 출력/이벤트 처리 자바스크립트는 HTML 위에서 동작하기때문에 HTML 코드 중간에 코드를 작성해주면 된다. 아래처럼 HTML 코드가 있을 때 자바스크립트를 중간에 삽입하고 싶으면 body태그 안에 script태그가 위치해 있는 것을 볼 수 있다. script 태그 안에는 document.write()라는 문법이 나와 있는데 이것은 출력을 의미한다. 자바로 치면 System.out.print() 느낌(?) 웹페이지에서도 출력된 것을 확인할 수 있다. *자바스크립트는 HTML과 달리 계산도 출력해준다. JavaScript HTML 1+1 자바스크립트와 HTML 모두에게 1+1이라는 코드를 입력했을때 HTML은 1+1을 그대로 출력하지만 자바스크립트 같은 경우는 1과 1을 더한 2가 출력이 된다. 자바스크립트는 이벤트도 처리.. 2022. 7. 6.

티스토리툴바