45일차 - 폼 CSS (부트스트랩으로)

밀레·2022년 11월 28일

코딩공부

목록 보기

111/135

1. 개인정보정책 란

이렇게 만들어보자

라벨 안에 가상선택자를 활용하여 폼태그 디자인
진짜 체크박스는 .d-none (+자바스크립트로 span li 영역에 value 보낸다?)

1-1. 폼태그 삽입

action
method
name(=sql 필드명) : 사실 백엔드가 작성
id

<div class="container form">
	<form action="서버페이지" method="POST" name="contact" id="contact">

            <input type="submit" value="보내기">           
	</form>
</div>

1-2. 블록요소 p태그 안에 넣기

CSS 편하게 짜려고

<div class="container form">
	<form action="서버페이지" method="POST" name="contact" id="contact">

        <p>
            개인정보정책
        </p>
        <p>
            <input type="submit" value="보내기">
        </p>            
	</form>
</div>

1-3. < input type="checkbox" >

자바스크립트와 연동하기 위해 id="agree" 삽입
(개인정보동의 안했으면 return 시키려고)

<div class="container form">
	<form action="서버페이지" method="POST" name="contact" id="contact">

        <p>
            <input type="checkbox" id="agree">
        </p>
        <p>
            <input type="submit" value="보내기">
        </p>            
	</form>
</div>

1-4. 체크박스 class="d-none" <- 얘를 제어할 label 삽입

진짜 체크박스는 .d-none (+자바스크립트로 span li 영역에 value 보낸다?)

(↑ 부트4.6 복붙함)

<div class="container form">
	<form action="서버페이지" method="POST" name="contact" id="contact">

        <p>
            <input type="checkbox" id="agree" class="d-none">
            <label for="agree">개인정보정책</label>
        </p>
        <p>
            <input type="submit" value="보내기">
        </p>            
	</form>
</div>

1-5. a 태그로 개인정보 약관 뽝 띄운다

약관은 다음 꺼 슬쩍해라~

<div class="container form">
	<form action="서버페이지" method="POST" name="contact" id="contact">

        <p>
            <input type="checkbox" id="agree" class="d-none">
            <label for="agree">개인정보정책<a href="#popagree">약관</a></label>
        </p>
        <p>
            <input type="submit" value="보내기">
        </p>            
	</form>
</div>

<div id="popagree">
	i-frame으로 약관 가져오기
</div>

이쯤에서 부트스트랩 / 제이쿼리v2 cdn 복붙
+) 포스트맨 설치 (POST방식으로 폼태그가 잘 전송됐는지 확인하는 서버용 플랫폼 REST API)
https://incheol-jung.gitbook.io/docs/q-and-a/infra/2018-01-03-how-to-use-postman

1-5-1) d-none

<div id="popagree" class="d-none position-absolute">
	<div class="popcontent">
		i-frame으로 약관 가져오기
	</div>
</div>

1-5-2)

bg-white border p-3 m-auto(가운데 정렬)

zup(z-index) top-0 left-0 right-0 : 내가 만들어서 쓰기

<div id="popagree" class="d-none position-absolute bg-white border p-3 m-auto zup top-0 left-0 right-0">
	<div class="popcontent">
		i-frame으로 약관 가져오기
	</div>
</div>

여기까지 결과물

1-6. 가상선택자

라벨 안에 가상선택자를 활용하여 폼태그 디자인

1-7. 가상선택자 O만 색깔이 바뀌도록 :before

2. 회사명, 담당자명, 연락처 란

2-1. 회사명col - 담당자명col - 연락처col

2-2. 회사명 label & input 삽입

2-3. formIndent : 나만 쓸 공통클래스

2-3. 텍스트 입력란 보더 0

2-4. 선색 (왜 안나와 암튼 선색 바꿈)

2-5. formIndent 패딩값 조절

2-6. outline: none; // 커서 깜빡이는란도 안 보이게

2-7. label과 input을 < p >< /p > 안에 삽입

p를 만져서 label과 input 위치 조절하기 위해

<ul class="row">
	<li class="col-md-10">
		<div class="line border blueLine d-flex flex-column">
        	<!-- p 안에 삽입 -->
			<p class="formIndent">
				<label class="bg-white px-2" for="">회사명</label>
				<input type="text" name="company" placeholder="회사명을 입력해주세요">
			</p>
		</div>
	</li>
</ul>