목차
-form
-<textarea> (post와 get차이)
-URL과 URI
-display:flex
-padding, margin을 어디에다 주어야 정렬이 될까?
1. <table>로 글 올리는 게시판 만들기.
<body>
<h1>
<a href=".\index.html">게시판 로고</a> /*메인 홈페이지로 바로가는 링크, 여기에선 자기자신에게 이동*/
</h1>
<table border="1"> /*선의 표시를 위해 넣어둠*/
<tr>
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
<tr>
<td>1</td>
<td><a href=".\view.html">ㅎㅇ</a></td> /*제목을 눌렀을 때 그 글로 이동*/
<td>김밥</td>
<td>21-12-29</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td><a href=".\public\web.html">안녕하셈</a></td>
<td>떡볶이</td>
<td>21-12-29</td>
<td>1</td>
</tr>
</table>
<a href="./write.html">글쓰기</a> /*누르면 메인페이지로 주소 이동하는 버튼. 귀찮아서 앵커태그로 함.*/
</body>
출력 결과
2. 제목을 눌렀을 때
view.html라는 아래 코딩한 파일로 이동하게 할것임.
그전에, 링크를 누른다는건 (제목을 누르면) 사이트의 주소가 변한다는 것이다.
즉, html이 변한다. 따라서 주소별로 페이지 코드를 각각 입력해주어야함.
<body>
<h1>
<a href=".\index.html">게시판 로고</a> /*로고를 누를때마다 메인으로 이동*/
</h1>
글 내용입니다.
</body>출력 결과
'ㅎㅇ'를 눌렀을 때 view.html로 이동함을 확인하였다.
이번에는 '안녕하셈'을 눌렀을 때 이동할 페이지를 만들어보겠다.
<body>
<h1>
<a href="..\index.html">게시판 로고</a>
/*public이 현재 디렉토리 밖에 있는 파일이기 때문에 ..\을 사용해서 경로설정을 제대로 해주어야한다.*/
</h1>
hello web!
</body>그냥 간단하게 입력해주었다.
'안녕하셈'을 눌렀을 때 public 안에 있는 web.html 파일로 이동함을 확인하였다.
3. 게시판에 글쓰기.
메인 페이지로 설정한 index.html에서 글쓰기 버튼(앵커태그지만)을 눌러 write.html이라는 사이트로 이동시켜 글을 써보겠다.
그 전에 <form>에 대해서 알아보겠다.
form이란?
form 내부에 있는 내용을 어딘가에 보내기 위한 작업/엘리먼트
form의 속성
method : 폼을 서버에 전송할 http 메소드를 정한다(get, post 두종류)
action : 폼을 전송할 서버쪽 스크립트 파일을 지정
name : 폼을 식별하기 위한 이름 지정
get: url로 내용을 전달한다. queryString
post: 안보이는 곳에서 내용을 전달한다. queryString
모든 브라우저는 기본적으로 get으로 된 요청만 렌더를 한다.
post의 목적은 데이터 전송용이지 화면에 그리기 위함이 아니다.
현재로선 get만 쓸것임
write.html 코드 ↓
<body>
<h1>
<a href=".\index.html">게시판 로고</a>
</h1>
<form method="get" action="./view.html">
<table>
<tr>
<td>제목</td>
<td><input type="text" name="subject"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="writer"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>내용</td>
<td>
<textarea name="content"></textarea>
</td>
</tr>
</table>
<input type="submit" value="글쓰기">
</form>
<a href="view.html">글쓰기</a>
</body>출력 결과
내용을 입력해서 전송을 해보겠다.
글쓰기 버튼 클릭하면?
view.html로 바로 이동함과 동시에, view.html 뒤에 이런게 생기는데,
/index.html( ) 전체 영역을 URL 이라고 하며
( )부분을 URI라고한다. 기본 주소 뒤에 이상한 글자들. 쿼리스트링 형태로 표현됨 key=value값
display:flex;
float:left, right를 사용하지 않고 편리하게 정렬할 수 있는 함수 display:flex
https://studiomeal.com/archives/197 여기 참고
이번에야말로 CSS Flex를 익혀보자
이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누
studiomeal.com
padding, margin 헷갈리는 것 정리
padding은 주체가 대부분 부모.
내용을 넣을수없는 공간이 늘어나는 것.
margin은 자식요소에게 많이 적용
헤더에다가 정렬을 준다(패딩) 그래야 자식 요소들이 정렬됨
'프론트엔드 > html, css' 카테고리의 다른 글
| HTML, CSS 레이어 팝업 만들기. (0) | 2021.12.28 |
|---|---|
| CSS 나머지 기능, 선택자 (0) | 2021.12.27 |
| HTML/CSS 본문(contents)영역 만들기 (0) | 2021.12.23 |
| margin: 0 auto 와 text-align: center의 차이점 (0) | 2021.12.22 |
| HTML/CSS 홈페이지 헤드 만들기 기초 (0) | 2021.12.22 |