WEB30 [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. 이전 1 2 3 4 5 6 7 8 다음
