2020-06-17HTML&CSS7 minutes read (About 1120 words) 0 visits

[패스트캠퍼스python] Django 홈페이지 실습: a태그를 버튼처럼 만들기, 수평선만들기, 다양한 form태그 종류와 사용법(HTTP메서드)

파이썬 인강 자기계발 챌린지 24회차 미션

1. a태그 버튼처럼 만들기

a태그를 css를 이용하여 버튼처럼 보이게 만들 수 있다.
또 가상클래스 hover를 이용하여 마우스를 올렸을때 색상변화를 주어 선택된 것처럼 보이게 만들어 더욱 버튼같은 느낌을 연출할수있다.

참고로 cta란 Call To Action의 약자로서 클릭유도라는 의미를 가진다.
hero-section자체가 클릭유도를 하는 곳이기때문에 실무에서도 cta로 사용한다고 한다.

.cta{
    color: white;
    width: 300px;
    font-weight: 400;
    margin: 0 auto 60px;
    display: block;
    padding: 20px 50px;
    border-radius: 8px;
    background: #44b78b;
}

.cta:hover{
    background: #51be95;
}

아래 이미지는 위의 태그를 적용하여 a태그를 버튼처럼 보이게 만든 것이다.

2. 수평선만들기

border를 이용해서 원하는 곳에 수평선이든 수직선이든 다 그릴 수 있다.

.hero-section{
    padding: 50px 0;
    text-align: center;
    border-bottom: 1px solid #000000;
}

아래 이미지는 위의 태그를 적용하여 수평선을 만든 모습이다

3. 메인콘텐츠마크업

Django사이트의 메인콘텐츠를 어떻게 구성되어있는 지 확인하고 큰 스케치를 그려보자.

Stay in loop의 경우 중요한 부분이므로 h2로 작업하고 바로 밑의 설명은 여백이 있는 p태그로 진행하면 된다.

Using Django 와 Contributing to Django는 메일링 서비스이므로 중요한 영역이고 동일하게 float처리를 한 것으로 보인다.
따라서 h3로 작성하고 이름에는 a태그를 주어 관련된 링크로 이동시킬 수 있도록해야한다.

제출하는 곳은 form태그를 사용한다.

form태그 밑에는 설명영역을 한번 더 추가하면 끝! 설명영역은 구분될 수 있도록 여백이 있는 p태그를 이용하면 된다

4. 다양한 form태그 종류와 사용법

form이란 사용자의 서버에 전송하는 방법이다. 보통 어디에 활용할까?

로그인 : 아이디/비밀번호를 입력시
회원가입 : 개인정보를 입력시
블로그나 게시판 : 글작성이나 파일전송시

그렇다면 form태그는 어떻게 생겼을까?

<form action="/url입력" method="post">
	<div>
		<label for="next">텍스트 필드</label>
		<input type="text" id="text"/>
	</div>
	<div>
		<label for="checkbox">체크박스</label>
		<input type="checkbox" id="checkbox"/>
	</div>
	<div>
		<label for="radio">라디오버튼</label>
		<input type="radio" id="radio"/>
	</div>
	<div>
		<label for="search">검색</label>
		<input type="search" id="search"/>
	</div>
	<div>
		<label for="textarea">텍스트 영역</label>
		<input name="textarea" id="textarea"/>
	</div>
	<button>전송버튼</button>
</form>

form의 action속성 : form태그로 입력받은 전체 내용을 어디에 보낼 것인지를 결정한다. 즉, 사용자가 입력한 데이터를 전송할 서버의 URL를 입력하면 된다.
form의 method속성 : form태그로 입력받은 전체 내용을 어떻게 처리한 것인지를 결정한다 즉, 사용자가 입력한 데이터를 전송하는 방법으로 아래와 같은 방식이 있다. method는 기본적으로 get과 post방식을 지원한다.
- get : action에 입력한 URL에 파라미터의 형태로 전송.
- post : header의 body에 포함해서 전송.(보통 새로운 글등록할때 post방식사용)
- delete : 정보를 삭제함.
- put : 정보 전체를 수정 또는 정보 전체를 대체함.
- patch : 정보 일부 부분 수정함.
- 참고링크 : 제로초 HTTP 메서드