html, css-(5)

MinGeo·2022년 7월 1일
0

html,css

목록 보기
5/9

오늘의 주제

오늘은 css에서 위치 조정에 사용하는 position과 form, input에 대해서 알아보도록 하자

좌표속성과 position

css에서 우리는 좌표 속성을 이용해서도 요소를 배치할 수 있다.

.box {
	top: 20px;
    right: -30px;
}

하지만 이 좌표 속성을 이용해서 요소의 위치를 변경하려면, 좌표 속성을 어떤 기준으로 적용할 건지 지정을 해줘야 한다. 우리는 이때 position 속성을 사용한다.

이 position 속성에는 크게 4가지가 있다.

position: static 좌표를 적용할 수 없다.
position: relative 기준을 내 원래 위치로 한다.
position: absolute 기준을 position: relative를 가지고 있는 부모를 기준으로 한다.
position: fixed 기준을 브라우저 창을 기준으로 한다.

form 과 input

우리가 웹사이트를 통해 로그인 창을 만들거나, 회원가입 창을 만들어 유저로부터 입력을 받고, 그 데이터를 서버로 넘기려면 사용해야 한다.

<form>
	<input>
</form>

기본적으로 이러한 형식으로 사용한다. input 태그들을 하나의 form에 넣는 방식으로 작성한다.

input에는 정말 다양한 type이 있는데, 그중에 많이 사용하는 몇개만 소개하도록 하겠다.

<input type="text">
<input type="email">
<input type="password">
<input type="checkbox">
<input type="submit">

이제 각 input에 들어가는 속성에 대해서 간략하게 알아보도록 하겠다.

<input placeholder="example@email.com" value="aaa" name="age">

placeholder는 입력 전에 input에 존재하는 배경 글자를 의미한다.
value는 입력 전 input에 미리 입력되어 있는 값, name은 추후에 우리가 서버를 이용하여 실질적 기능을 구현할 때 이 input의 이름을 설정하는 속성이다.

그리고 form을 다 작성을 하면, submit을 해야 서버로 넘겨서 사용할 수 있게 되는데, submit 하는 방법은 다음과 같다.

<button type="submit">전송<button>
or
<input type="submit">

form 태그 안에 다음과 같은 버튼을 입력한다면 form의 input을 다 작성했다면 각 값이 서버로 넘어가게 될것이다. 하지만 이는 추후 백엔드나 자바스크립트에서 사용하는 부분이니 일단 넘어가도록 하자

마무리

오늘은 position 속성과 form, input에 대해서 알아보았다. 이제 수업에서 개념적 내용보다는 실습이 위주가 도는 것 같다. 곧 html, css강의의 초급 모듈 강의가 끝나는데 속도 내어서 남은 수업도 잘 따라가야 할 것 같다.
개인적으로 오늘은 다소 해이해져 공부를 많이 못했다. 주말 동안 일정이 있는데 잘 보내고 돌아와서는 속도를 좀 높여야 할 것 같다.

0개의 댓글