분류 전체보기227 [HTML/CSS] HTML과 CSS로 tap 메뉴 만들어 보기(JS x) 탭 메뉴는 많은 곳에서 사용하고 있다. 예로는 아래와 같은 네이버 로그인 창이 있다. 위 같은 다양한 탭 메뉴를 만들기 위해서는 자바스크립트도 필요하긴 하겠지만 간단한 탭 정도는 CSS로도 만들수 있다. 일단 HTML로 간단한 뼈대를 만들어준다. 라디오 버튼을 사용하여 요런 탭 메뉴를 만들 것이다. 색상이나 디자인은 일단 대충대충~ [HTML로 뼈대 잡아주기] 첫번째 두번째 세번째 첫번째 첫번째 탭 입니다. 두번째 두번째 탭 입니다. 세번째 세번째 탭 입니다. 1. wrapper라는 클래스명을 가진 div 태그로 전체를 묶어주고, 2. 라디오 버튼 3개를 만들어 준 후 각각 라벨을 지정해 준다. *(나중에 라벨을 눌러도 라디오 버튼이 바뀌게 하기 위해서 라디오 버튼의 첫번째는 checked를 설정해서 미.. 2022. 7. 22. [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. 이전 1 ··· 27 28 29 30 31 32 33 ··· 57 다음
