프로젝트 실습/[Project] HTML

수업 시간에 간단한 과제로 제출했던 메인 페이지 만들기! CSS 파일과 HTML 파일을 따로 만들었다. 회사소개 -> CEO 인사말 누르면 페이지도 바뀜! (코드는 여기에 안올렸지만) [가장 어려웠던 부분] 메뉴 태그를 정렬하는게 가장 어려웠다. 직접 코드를 하나하나 분석할 시간도 없이 받은 과제라서 이해하면서 만드느라 시간이 너무 오래걸림. 거의 4시간 넘게 걸렸던 것 같다. [배운 부분] 메뉴 펼치기 ! table 태그로 메뉴 만드는 방법을 복습할 수 있었다. ✨ 결과물 👩‍💻 CSS 코드 @charset "UTF-8"; @import url(https://fonts.googleapis.com/earlyaccess/hanna.css); @import url('https://fonts.googleapi..

[CSS] display: flex 으로 메뉴 만들기 (1/2/3) ✔️ 메뉴 만들기 (1) - 메뉴가 고정되지 않음 홈 Menu 1 Menu 2 메뉴바를 화면 상단에 고정 - display: flex main 영역 main 영역 main 영역 main 영역 main 영역 main 영역 main 영역 footer 영역 💡 헤더 부분에 포지션 fixed 를 줬다. position: fixed; top: 0; left: 0; right: 0; 태그에는 display: flex; align-items: center; /* justify-content: center; */ flex 를 주니까 메뉴들이 옆으로 붙어서 출력되었다. 💡 태그에 display: block; 준 이유 : 그래야 패딩 값이 먹히기 때문이다..

[HTML] 태그로 게시판 만들기 - 연습 ✔️ ul 태그로 게시판 만들기 1. 게시판 내용으로 들어갈 부분 , 태그로 작성하기 게시판 번호 제목 작성자 작성일 조회수 3 HTML 강좌입니다. 프론트 2022-09-12 33 2 CSS 강좌입니다. 이자바 2022-04-05 3 1 자바스크립트 강좌입니다. 오자바 2022-02-03 30 2. CSS 코드 짜기 - 기본 - 기본적으로 패딩이랑 마진 값 0으로 바꾸기 - body 부분 기본값 설정하기 - title 값 설정하기 * { padding: 0; margin: 0; } *, ::after, ::before { box-sizing: border-box; } body { font-family:"Malgun Gothic", "맑은 고딕", NanumGo..

✔️ 게시글 작성 article 테이블 토대부터 만들기 | 게시판 제목입니다. 이름 : 김자바 글 내용 입니다. 이전글 : 다음글 : 127.0.0.1 수정 삭제 리스트 1. board (전체 보드값) , table, title 값을 설정한다. .table {width: 100%; border-spacing: 0; border-collapse: collapse;} .board {width: 700px; margin: 30px auto;} .title {width: 100%; font-size: 15px; font-weight: 600; padding: 13px 0;} .table td {padding-top: 10px; padding-bottom: 10px;} 2. table-border 값을 설정해서 ..

[HTML] 글쓰기 게시판 - 연습 ✔️ 글쓰기 게시판 만들기 틀만 만들면 아래와 같이 생성된다. | 게시판 제 목 이 름 내 용 패스워드 1. 기본 board / table / title 설정 | 게시판 제 목 이 름 내 용 패스워드 2. 테이블 패딩값 .table th, .table td { padding-top: 10px; padding-bottom: 10px; } 3. table-border 값 주기 .table-border thead > tr {border-top: 2px solid #212529; border-bottom: 1px solid #ced4da;} .table-border tbody > tr { border-bottom: 1px solid #ced4da;} 4. table-form ..

[HTML] 게시판 버튼 만들기 (button 태그) - 연습 ✔️ 게시판 버튼 새로고침 검색 글올리기 💡 select - option : 옵션을 넣으면 선택할 수 있다. 💡 input : 입력창 💡 button 은 버튼을 만드는 태그! 1. button 의 클래스 설정하기 새로고침 검색 글올리기 .btn { color: #333; border: 1px solid #999; background-color: #fff; padding: 5px 10px; border-radius: 5px; font-weight: 500; cursor: pointer; font-size: 14px; font-family: 맑은 고딕, 나눔고딕, 돋움, sans-serif; vertical-align: baseline; } .b..

[HTML] 게시판 페이지 버튼(page-box) 만들기 - 연습 ✔️ 게시판 버튼 1 2 2 ✨ 필요한 것 - 페이지 박스 class - paginate - a 태그 1. 페이지 박스 클래스 위아래 패딩 값 20px씩 주고, 전체 text 는 중간에 배치한다. .page-box { clear: both; padding: 20px 0; text-align: center;} 2. paginate (페이지 박스 디자인) .paginate { text-align: center; white-space: nowrap; font-size: 14px;} .paginate a { border: 1px solid #ccc; color: #000; font-weight: 600; text-decoration: none; ..

1. 게시판 틀 내용 먼저 만들기 | 게시판 25개(1/2페이지) 번호 제목 이름 작성일 조회수 3 안녕하세요! 이자바 2022-09-12 2 2 오늘도 행복한 하루! 김자바 2022-08-28 55 1 자바가 기억에 없어요 다자바 2022-07-11 32 2. 기본 설정 /*width 안에 패딩이랑 선이 포함되게 계산하라는 말*/ 계산하기 쉬워진다. * {padding: 0; margin: 0;} /*width 안에 패딩이랑 선이 포함되게 계산하라는 말*/ *, ::after, ::before { box-sizing: border-box;} 3. board = 테이블 표의 기준이 될 대지의 크기 table = 게시판 테이블 그 자체 .board {width: 700px; margin: 30px auto..

[HTML] 성적처리 게시판 공부 ✔️ 성적처리 성적처리 학번 이름 생년월일 국어 영어 수학 총점 평균 변경 1001 홍길동 2000-10-10 90 90 90 270 90 수정 | 삭제 1002 이자바 2000-10-10 90 90 90 270 90 수정 | 삭제

HTML 로 이력서 만들기 (table / float 이용) ✨ HTML 을 배운지 이제 2일차 생각했던 것만큼은 만들지 못했고 CSS 가 익숙하지 않아서 좀 지저분하게 코드가 들어간 것 같다.😢 - 미리캔버스에 있는 무료 이력서 양식 내용 참고하여 작성 - table 을 모두 따로 작성해 float 으로 어찌어찌 맞춤 - 폰트 : MICE폰트 (무료폰트) - 코드에서 태그는 사진 주소로 들어가서 빼고 올린다. ✨ 소문난 성실 만렙 나성실 입니다. 개인 정보 ——————————— 이름 : 나성실 생년월일 : 1992년 05월 06일 이메일 : miridl@gmail.com 주소 : 서울 미리동 미리로 184-3 미리아파트 201동 학력사항 ————————————————— 2008-2011 미리디자인고등학..