inflearn logo
강의

Course

Instructor

[Code Camp] Highly concentrated backend course created at boot camp

▶ CSS Alignment

회원가입 과제 정답지를 알고싶어여

Resolved

482

minsa053755

6 asked

0

 파이널 과제말고 수업도중에 회원가입 과제가있는데 그거 정답지를 좀 알고싶어요

javascript node.js express docker tdd rest-api nestjs

Answer 2

0

codecamp

김민준님,

안녕하세요!

회원가입에 대한 레퍼런스 코드는 '수업 노션 자료' 에 있습니다.

해당 캡쳐 부분 참고해주세요!

image

0

minsa053755

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>회원가입</title>
    <style>

        * {
            box-sizing: border-box;
        }

         div {
            width: 150px;
            height: 80px;
            border: 1px
            
        } 
        .pb {
            width: 470px;
            height: 818px;
        }
        .pb2 {
            width: 670px;
            height: 960px;
            background-color: #ffffff;
            border: 1px solid #aacdff;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div class="pb2">
        <div class="pb">
        <h2 style="color: #0068ff;">회원 가입을 위해<br>정보를 입력해주세요</h2><br><br>
        <div style="color: #797979;">* 이메일</div>
        <hr style="border: 1px #0068ff solid;"></hr>
        <div style="color: #797979;">* 이름</div>
        <hr style="border: 1px #cfcfcf solid;"></hr>
        <div style="color: #797979;">* 비밀번호</div>
        <hr style="border: 1px #cfcfcf solid;"></hr>
        <div style="color: #797979;">* 비밀번호 확인</div>
        <hr style="border: 1px #cfcfcf solid;"></hr><br>
        <input type="radio" name="gender">여성
        <input type="radio" name="gender">남성<br><br><br> 
        <input type="checkbox"> 이용약관 개인정보 수집 및 이용 마케팅 활용 선택에 모두 동의합니다<br><br>
        <hr style="border: 1px #cfcfcf solid;"></hr><br><br>
        <button style="width: 470px; height: 75px; border-radius: 10px; border-color: #0068ff; background-color: fffff; color: #0068ff;">가입하기</button>
    </div>
</div>
</body>
</html>

스크린샷 2023-10-13 03-06-52.png회원가입 과제를 이렇게 작성했는데 여성남성부분하고 이용약관 체크박스만 중앙으로 옮기고싶은데 어떻게 해야할지 모르겠어요

text-align을 써야하는거같긴한데 어떻게 써야할지 모르겠습니다

0

nwd09074926

안녕하세요! 민준님!

  1. 가운데정렬을 하고싶은 녀석들을 네모박스에 담아주시고, 해당 네모박스에서 text-align: center로 주시게 되면, 네모박스의 자식들이 가운데정렬이 됩니다!^^

     

     

    image


  2. 이용약관 체크박스를 가운데로 옮기는 것은 이미 사실상 해당 체크박스와 내용이 1줄을 넘어가고 있으므로 가운데로 옮길 수 없어요! 다만, 해당 글을 크기가 정해진 네모난 박스에 넣어놓고, 해당 박스를 가운데로 옮기는 방법은 있겠죠?!

    image박스 안에 있는 녀석들을 가운데로 옮기기 위해서 위 1번에서 text-align: center를 사용했어요!
    반면, 지금 2번처럼 박스 자체를 가운데로 옮길려면, 박스의 바깥쪽 margin을 자동으로 설정해주셔야해요! margin: auto;



    ==============================================

    가운데정렬은 쉬운 녀석이 아니기 때문에, 다른 것들보다 깊이있는 이해가 필요하므로 더 많은 시간을 들여서 공부해 주세요!
    위 2가지 방법 이외에도 flex를 부모박스에 주어서 정렬하는 방법도 배웠죠?! 위 2가지 방법과의 차이를 간단히 설명드리면, 부모박스 안에 있는 녀석들을 가운데로 옮기기 위해서는 flex를 사용한답니다!


    ...?
    분명히 똑같은 정렬을 text-align: center로 한다고 했던 것 같은데요?!
    네! 조금 더 상세히 말씀드리면, 부모박스 안에 있는 녀석이 인라인 요소가 아닌 블록 요소. 다시말해 div 박스 등일때는 text-align: center가 안되므로, flex를 사용해 주셔야 한답니다!^^

그래프 ql 문서 사용할때 느낌표 남는거 어떻게 없애나요?

0

83

2

강의 전체 소스 코드를 받고싶습니다.

0

76

2

fontawesome 사용 문의

0

77

2

소스 코드 부탁드립니다~

0

85

2

깃 레포지터리 소스

0

82

2

커리큘럼12.css 정렬 에 나오는 과제 정답알고싶어요

0

73

2

10-01 Entity TypeOrmModule.forRoot 에 entities

0

85

3

강의 버전관련 문의입니다

0

102

2

Ubuntu 설치 관련

0

61

1

schema.gql 질문 드립니다.

0

51

1

서버 재실행시 Many to Many

0

101

3

input 관련 문의

0

90

2

Rest API 보다는 graphql이 주된 내용인데

0

130

2

강의 전체 소스코드 받을수있을까요?

0

155

1

도커볼륨 마운트 관련

0

127

2

findOne 타입스크립트오류

0

109

1

http => htrtps 호출 인증서 신뢰 오류

0

350

1

self-signed certificate in certificate chain 에러 발생

0

413

1

mongoose 설치 오류

0

142

1

특정 API, 특정 IP 허용 (단일경로에 CORS 활성화)

0

281

2

08-06

0

178

3

구조랑 패턴 관련해서 질문

0

125

2

mydocker

0

128

2

coolsms statuscode 2000 인데 전송안돼는 경우 확인.

0

156

1