게시판
게시판을 만들었다.
게시판을 만들 때는 로고가 필요하다. 글을 쓰고 게시판 로고를 눌러서 메인화면으로 이동하기 위해서다. 각 게시물의 제목에도 링크를 달아서 해당 게시물로 이동할 수 있게 한다. 이런 게시물, 메인화면 등 각각의 게시물(html)을 만들고 a태그로 링크를 걸어 페이지 사이에 원활하게 이동하도록 한다.
게시판 로고와 링크 개념
게시판 로고는 모든 문서에 heading으로 달아준다. 화면의 비슷한 구성같은 이유로 보통 '한 웹페이지에서 부분적인 요소들만 바뀐다'고 생각할 수 있는데 사실 매번 새로운 페이지를 랜더링하는 것이다.
http://127.0.0.1:5500/index.html
127.0.0.1:5500은 VS를 실행하는 디렉토리이다. 그 디렉토리에서 index.html이란 파일을 띄우고 있다는 말이다.
이렇게 항상 로고, 제목, 글쓰기 버튼 등에 링크를 달아줘야 자유롭게 이동할 수 있다.
게시판 글쓰기 화면
게시판 글쓰기 화면은 보통 제목, 이름넣는 곳, 비밀번호, 글 내용, 글쓰기 버튼 등으로 이루어진다. input box를 이용하는 이유는 홈페이지를 이용하는 사람들에게 정보를 입력하는 환경을 만들어주기 위해서다. 그렇게 받은 정보는 어딘가에 저장한다. 저장하기 위해서는 어디론가 보내는 작업이 꼭 필요한데, form 태그로 그 작업을 한다.
URI와 URL
URI는 특정 리소스를 식별하는 통합 자원 식별자(Uniform Resource Identifier)를 의미한다. 웹 기술에서 사용하는 논리적 또는 물리적 리소스를 식별하는 고유한 문자열 시퀀스다.
URL은 흔히 웹 주소라고도 하며, 컴퓨터 네트워크 상에서 리소스가 어디 있는지 알려주기 위한 규약이다. URI의 서브셋이다.
https://velog.io/write?id=7a3fc9cd-1672-4f81-a42c-54931e1eb4a5
이 주소 전체를 URI라고 하고, 물음표를 전으로 URL이라고 한다.
URL이 위치를 지정하면 ?이후로 이어진 일련의 값들, 뒷부분이 queryString으로 식별자를 판단한다.
form 태그
"input에 있는 내용을 어딘가로 보내기 위한 작업."
method 속성
get방식과 post방식이 있다. get방식은 위의 URL 이후 ?부터의 식별자로 폼을 전송하는 방식이다. 즉 입력하는 form 태그로 감싼 입력하는 내용이 "?식별자=내용"의 연속으로 주소창에 노출된다. post방식은 내부적으로 보이지 않게끔 form을 전송한다.
식별자 사이는 &로 잇는다.
브라우저가 화면을 랜더링하는 건 get요청이다. url의 입력도 모두 get요청으로 처리한다. post방식은 화면 랜더링이 아니라 데이터의 전달이 주목적이다. 따라서 화면에서 표시되지 않지만 개발자도구에서 값을 확인할 수는 있다.
GET은 URL로 내용을 전달하고 POST는 보이지 않는 곳에서 내용을 전달한다는 차이가 있다.
GET과POST속성 모두 queryString 데이터 형식을 띠고 있다.
action 속성
action속성에는 사용자가 input에서 입력한 내용을 보낼 페이지 주소를 링크한다. input박스에서 입력한 정보를 get속성이 url을 통해서 전송하는 주소를 action속성에 적으면 된다.
flexbox
flex는 컨테이너에(부모)에 적용하는 것이다. 부모에 적용하면 그 안에 자식들이 움직이게 된다.
뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다.
좌우정렬 / 상하정렬 / 방향변경 / 줄변경 등의 설정을 쉽게 할 수 있다. 지금까지 사용한 margin과 padding을 사용한 레이아웃은 자식요소에 하나하나 값을 지정해줘야했다면, flex를 사용하면 이 자식요소를 담는 container인 부모요소에 flex속성을 설정해줌으로써 쉽게 레이아웃을 완성할 수 있다는 것이 가장 큰 차이이다. 특히 반응형 웹을 만들 때 flex를 사용하면 쉽게 조절이 가능하다.
- justify-content: 지금 현재 축 방향으로 정리해준다.
- left, right, center, space-between; 등이 있다.
- space-around는 양 끝에도 여백이 생긴다.
- align-items: 는(기본값=strech;)
- align-content : 선들간의 간격 조절
- align-self : 지정된 align-items를 무시하고 해당요소만 세로선 상에서 다르게 정렬
- flex-direction : 요소들간의 순서 변경
- flex-wrap : 한 줄 정렬 / container 사이즈에 맞춰 여러 줄 정렬 선택
- order : 해당 요소의 순서를 지정해서 변경 (-1:앞으로, 1:뒤로 ...)
개구리게임을 하면서 flex 연습을 할 수 있다.
회원가입 폼, 게시판 만들기
float이 아닌 flex로 웹페이지 따라 만들기
