코딩배우기/HTML, CSS

6. 디자인 게시판 만들기-EDIT

디자인 게시판 만들기-VIEW의 연속된 부분이다. write에서 글쓰기를 진행 후 수정을 할 필요가 있을때 이전 write.html과 동일 해도 되지만 우리는 연습이 필요하기 때문에 다시 한번 edit.html에 작성을 해보기로 하자. 새로운 edit.html 파일 생성 후 경로 설정 1. HTML // edit.html 게시판 이름 비밀번호 제목 내용 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세 작성 2. CSS // edit.css /* view.html */ .card-view { text-align: center; padding: 30px; } .card-view .title { margin-top: 30px; marg..

5. 디자인 게시판 만들기-VIEW

디자인 게시판 만들기-WRITE의 연속된 부분이다. card-body 안에 있는 content를 확인하는 페이지를 만들어보자. 동일하게 다른 html 파일을 만들어 경로 설정을 해주고, 내용물 확인을 위한 html 작업을 진행하면 된다. 새로운 view.html 파일 생성 후 경로 설정 1. HTML // view.html 게시판 안녕하세요. 이것은 게시판 제목입니다. 작성자 김이름 날짜 22-01-27 조회 14회 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세 수정 dl tag: definition list(정의 목록)의 약자로, 사전처럼 용어를 설명하는 목록을 만든다. dt tag: definition term(정의 용어)의..

4. 디자인 게시판 만들기-WRITE

디자인 게시판 만들기-BOARD의 연속된 부분이다. 페이지에서 다른 페이지 이동을 할 경우 다른 html 파일을 만들어 그 경로로 이동을 시켜주게 된다. 이번 시간에는 글쓰기 버튼 클릭시 페이지 이동을 하는 것을 구현해보자. 새로운 write.html 파일 생성 후 경로 설정 1. HTML // index.html 글쓰기 // write.html 게시판 이름 비밀번호 제목 내용 작성 2. CSS // style.css // 기존 index.html의 연동된 style.css에 이어서 사용 .card-header1 h1 { font-size: 30px; font-weight: 600; } .card-write { padding: 20px; } .card-write input, textarea{ margin..

3. 디자인 게시판 만들기-BOARD

이전 시간에는 기본 게시판을 만들며 HTML과 CSS의 사용법을 익혀보았다. 이번 시간에는 반복 학습으로 게시판에 대한 HTML과 CSS를 다시 한번 만들어보고 조금 더 디테일한 CSS 꾸미기와 버튼 링크를 통한 페이지 이동도 함께 구현해보자. 게시판 HTML, CSS 만들기 1. HTML // index.html 게시판 검색 안녕하세요 이것은 게시판 제목입니다. X 게시판에 제목을 입력합니다. X 이곳에 제목을 입력해주세요. X 오늘의 날씨는 어떤가요. X 글쓰기 2. CSS // style.css * { margin: 0; padding: 0; } li { list-style: non; /* list 생성시 나오는 '-' 마크 제거 */ } a { color: inherit; /..

2. 기본 게시판 만들기

이전에 간단하게 HTML, CSS에 대해 알아보았다. 이번 시간은 직접 HTML과 CSS를 사용하여 기본 게시판을 만들어보자. class="card" > class="card-header card-body btn" 전체 틀을 어떻게 구성할 것인지 기획해야 한다. 1. header // index.html 게시판 // style.css * { margin: 0; padding: 0; } li { list-style: none; } a { color: inherit; text-decoration: none; } .card { margin: 50px; padding: 50px; } .card-header { padding-bottom: 40px; } tag 추가 설명 설명을 할때 쓰인다. 설명을 할때 쓰인다...

1. 오늘부터 코딩 1일

1. HTML, CSS 알아보기 1. 기능 구현을 위해 배워야 할 언어 JavaScript php C++ Java Python 2. HTML(HyperText Markup Language) HTML은 문서의 글자 크기, 색, 모양, 그래픽, 링크 등을 정의하는 명령어로 홈페이지를 작성하는 데 쓰임. 사용하는 명령어로 태그(tag)는 껏쇠괄호 ""를 사용함.

배우는 HTML, CSS, JS

제로베이스에서 무료로 강의하는 것을 따라해보며 HTML, CSS, JS에 대한 공부와 블로그에 간단히 정리를 해보는 시간을 가져보려한다. 목차 1.오늘부터 코딩 1일 2.기본 게시판 만들기 3.디자인 게시판 만들기 4.추가로 더 알아보기 출발🙃🙃