오늘의 주제
오늘은 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강의의 초급 모듈 강의가 끝나는데 속도 내어서 남은 수업도 잘 따라가야 할 것 같다.
개인적으로 오늘은 다소 해이해져 공부를 많이 못했다. 주말 동안 일정이 있는데 잘 보내고 돌아와서는 속도를 좀 높여야 할 것 같다.
