HTML, CSS 2021. 12. 29. 15:47

1. form 태그

오늘은 html로 작성한 각각의 페이지들이 어떻게 연결되고 동작하는지를 배웠다.

1-1. 게시판 메인 페이지

먼저 간단한 게시판 형식의 페이지를 만들었다.

일반적으로 게시판을 사용할 때 필요한 동작은 다음과 같다.

1. 로고를 눌러서 메인화면(게시판목록화면)으로 돌아가기

2.각 게시물의 제목을 눌러서 해당 게시물로 들어가기

3. 글쓰기 버튼을 눌러서 작성화면으로 들어가기.

각 페이지에 해당하는 html을 만들고 <a>엘리먼트를 사용하여 링크를 걸어주면 페이지 간의 이동이 가능하다.

첫 시간에 웹브라우저는 크게 주소를 입력하는 영역과 화면을 랜더링해주는 영역으로 나뉜다고 배웠다. 오늘은 지금까지 신경쓰지 않았던 주소를 입력하는 네트워크 영역을 자세히 알아보도록 하겠다.

첫 화면의 주소는 다음과 같다.

http://127.0.0.1:5500/index.html

127.0.0.1:5500은 VS를 실행하는 디렉토리를 가르킨다. 현재 열려있는 폴더가 211229폴더라면 주소는 211229폴더에 있는 index.html파일을 의미한다.

만일 211229폴더 내에 public이라는 폴더를 만들고 게시글을 담아둔 web.html을 저장했다고 한다면 주소는 다음과 같이 뜬다.

http://127.0.0.1:5500/public/web.html

❗️VS에 열려있는 디렉토리가 211229/public 폴더인 경우에는 http://127.0.0.1:5500/web.html로 뜨는데, 이 경우 상위 폴더에 연결된 링크는 동작하지 않는다.

<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>noname</td>
            <td>2021-12-29</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td><a href="./public/web.html">안녕하세요2</a></td>
            <td>noname</td>
            <td>2021-12-29</td>
            <td>0</td>
        </tr>
    </table>
    <a href="./write.html">글쓰기</a>
</body>

게시판 목록 화면의 html. 로고, 글제목, 글쓰기버튼에 <a>엘리먼트로 링크를 걸어주었다.

웹서핑을 할 때 헤더나 사이드메뉴는 바뀌지 않고 그 안의 컨텐츠부만 바뀐 것을 볼 수 있는데 같은 포맷을 가지고 있어서 모를 뿐 실제로는 페이지 전체가 새롭게 랜더링된 것이다.

-리액트를 사용하면 컨텐츠부만 따로 랜더링 하는 형식으로도 사용이 가능하다고 한다. 나중에 배울 예정임.

1-2. 글쓰기 페이지

간단한 글쓰기 페이지이다. html은 다음과 같다.

    <h1>
        <a href="./index.html">게시판로고</a>
    </h1>
    <form method="post" 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" id="" cols="30" rows="10"></textarea></td>
            </tr>
        </table>
        <input type="submit" value="글쓰기">
    </form>

입력란을 <input>엘리먼트로 설정을 해주었고 내용부분은 <textarea>엘리먼트를 사용했다.

여기서 중요한 것은 <form>으로 인풋이 있는 입력란을 전부 감싸주었다는 것이다.

form태그란?

게시글작성, 회원가입 창 등의 같은 웹페이지에서의 입력양식 처리 태그이다.
input에 넣은 텍스트, 체크박스의 값을 서버로 전송하는 역할을 한다.

<form>에는 여러 속성이 있는데 필수적인 것이 위에 쓴 method속성과 action속성이다.

action은 폼 데이터가 전송되는 백엔드 url이다. 백엔드를 배우지 않은 지금은 단순하게 submit 버튼을 눌렀을 때 이동되는 페이지로 생각하면 될 것 같다.
method는 폼의 전송 방식이다. get과 post 두가지가 있다.

get과 post에 대해 조금 더 자세히 알아보려면 우선 url과 uri의 개념을 먼저 정리해야한다.

# URI와 URL

URI는 특정 리소스를 식별하는 통합 자원 식별자(Uniform Resource Identifier)를 의미한다. 웹 기술에서 사용하는 논리적 또는 물리적 리소스를 식별하는 고유한 문자열 시퀀스다.

URL은 흔히 웹 주소라고도 하며 컴퓨터 네트워크 상에서 리소스가 어디 있는지 알려주기 위한 규약이다. URI의 서브셋이다.

https://70707.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F#

현재 글을 쓰고 있는 이 페이지의 주소이다. 이 전체가 URI이라면, 앞의 빨간색 부분이 URL이다.

URL이 위치를 지정하면 뒷부분의 query string 값으로 식별자를 판단한다. (key=value형식)

다시 <form>태그의 method속성에 관해 돌아가보자면,

get 방식은 위에서 설명한 url 뒷부분의 식별자로 폼을 전송하는 방식이다. 즉, 주소창으로 내용이 노출된다.

post 방식은 내부적으로 보이지 않게하여 폼을 전송한다.

GET메소드를 사용해 위와 같이 입력을 하고 글쓰기 버튼 (submit)을 누르면 나타나는 페이지의 주소는 아래와 같다.

http://127.0.0.1:5500/view.html?subject=aa&writer=bb&password=cc&content=dd

입력한 내용이 uri에서 querystring 값으로 노출된다.

POST메소드를 사용해 동일하게 입력하고 제출했을때의 주소는 아래처럼 따로 뒷부분의 식별자가 드러나지 않는다.

http://127.0.0.1:5500/view.html

브라우저가 화면을 랜더링하는 것은 get 요청이다. url의 입력도 모두 get요청으로 처리한다.

post를 사용하는 목적은 화면의 랜더링이 아닌 데이터의 전달이다. 따라서 post로 보낸 요청에는 다음과 같이 에러메세지가 출력되며 화면을 표시하지 않는다. 다만 개발자도구에서 아래와 같이 확인이 가능하다. (네트워크 탭의 payload에서 식별자 값이 나온다.)

데이터의 노출 여부로 두 방식의 보안 중 get이 더 취약하다고 하는 말이 있으나 사실상 보안수준의 큰 차이는 없다고 봐도 무방하다.

자세한 공부는 나중에 백엔드를 공부하면서 더 할 것 같고 오늘은 이 정도로 끝냈다.

2. flexbox

flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다.

좌우정렬 / 상하정렬 / 방향변경 / 줄변경 등의 설정을 쉽게 할 수 있다.

지금까지 사용한 margin과 padding을 사용한 레이아웃은 자식요소에 하나하나 값을 지정해줘야했다면, flex를 사용하면 이 자식요소를 담는 container인 부모요소에 flex속성을 설정해줌으로써 쉽게 레이아웃을 완성할 수 있다는 것이 가장 큰 차이이다.

특히 반응형 웹을 만들 때 flex를 사용하면 쉽게 조절이 가능하다.

justify-content : 요소들을 가로선 상에서 정렬
align-items : 요소들을 세로선 상에서 정렬
align-content : 선들간의 간격 조절
align-self : 지정된 align-items를 무시하고 해당요소만 세로선 상에서 다르게 정렬
flex-direction : 요소들간의 순서 변경
flex-wrap : 한 줄 정렬 / container 사이즈에 맞춰 여러 줄 정렬 선택
order : 해당 요소의 순서를 지정해서 변경 (-1:앞으로, 1:뒤로 ...)

개구리게임으로 쉽게 사용법을 익힐 수 있다. (https://flexboxfroggy.com/#ko)

마지막 문제만 풀이를 적어보자면

해야할 것이

1. wrap으로 다음줄로 정렬되게 하기 ( 끝 줄부터 완성)

2. row배열을 column배열로 바꾸기

3. 개구리 정렬 순서 거꾸로 만들기

4. 줄 간의 간격을 끝과 끝으로 밀기

5. 중앙정렬로 만들기 (flex-direction을 바꿨으므로 justify-content 사용)

코드로 적으면 아래와 같다.

#pond {
	display:flex;
	flex-wrap: wrap-reverse;
	align-content:space-between;
	flex-direction:column-reverse;
	justify-content:center;
}

특히 wrap-reverse와 column-reverse를 사용하는 것이 헷갈렸는데

wrap-reverse : 화면 끝(아랫줄)부터 한 줄 채움 -> 다음 줄은 위로 붙음

column-reverse : 1번 요소가 가장 마지막으로 가는 배치

1번 요소인 빨간개구리가 가장 끝에서 시작 - 꽉 찬 첫 줄이 화면의 오른쪽에 해당 (row-column바꾸기 전이라면 화면의 가장 아랫줄)

이기때문에 둘 다 reverse를 해줘야 맞다.

이 둘만 잘 설정해주면

이렇게 대충 자기 자리를 찾아가기 때문에

여기서 줄 사이의 간격을 설정해주고(align-content:space-between으로 양 끝단으로 줄을 보냄) 가운데정렬을 해주면(justify-content:center)

개구리들이 자기 자리를 잘 찾아간다.

+추가공부)

게시판 만들어보기 (목록화면, 게시글화면)

float으로 만든 웹페이지 flex이용해서 다시 만들어보기.

'HTML, CSS' 카테고리의 다른 글

6. CSS활용 - 팝업창, 회원가입 폼 (1)	2021.12.28
5. CSS로 애니메이션 효과 넣기 (0)	2021.12.27
4. 실습 - 홈페이지 클로닝하기 (2) (0)	2021.12.24
3. 실습 - 홈페이지 클로닝하기 (1) (0)	2021.12.22
2. CSS 기초 (0)	2021.12.21

ABOUT ME

HB HB

1. form 태그

1-1. 게시판 메인 페이지

1-2. 글쓰기 페이지

# URI와 URL

2. flexbox

'HTML, CSS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

1. form 태그

1-1. 게시판 메인 페이지

1-2. 글쓰기 페이지

# URI와 URL

2. flexbox

'HTML, CSS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바