2023.03.20

 

1. 로그인 박스 그림자

2. 버튼 테두리 x

3. 로그인 글자 굵게

4. 로그인 버튼 색상 어두운색으로

---

text-align : center; 글자 가운데정렬

 

- vertical-align: 수직방향에서 정렬할 때 주로 사용

  display가 inline이나 inline-block 일때 적용

 

 #id_pass, #login_btn {

            display: inline-block;

            vertical-align: top;

                        

 

<실제 로그인form 처럼 만들어주기>

        실제 로그인기능 구현시 method의 타입은 post로 한다.

 

method가 get방식일때는 파라미터(서버측에 전달하는 데이터)가 주소(url)에 전부 보여지기 때문에

       보안상 사용하지 않는다.

        주로 사용되는 기능 : 단순 페이지 이동 시, 게시글 상세보기 등

       

method가 post방식일때는 파라미터가 주소(url)에 표시되지 않는다. 보안상 유리함

        주로 사용되는 기능 : login, 회원가입 기능 등

---

레이아웃

 

-float 속성 : 요소의 배치위치를 정하는 속성 

 요소를 왼쪽이나 오른쪽에 떠 있게 만듦.

 

사진 배치시 float: left; 적용시 왼쪽부터 사진 정렬

                    float: right; 적용시 오른쪽부터 사진 정렬

 

-float속성을 무효화시키는 속성 : clear속성

clear 속성은 앞서 사용한 float속성을 무효화할때 사용한다.

                left, right, both

                left : float 속성중에 left값만 무효화 해줌

                right : float 속성중에 right값만 무효화 해줌

                both : left, right 둘 다 무효화

웹 문서 안에 요소들을 배치하기 위한 속성: position속성

 

position속성 relative로 지정했을 경우

            현재 위치를 기준으로 박스를 이동(배치) 시킬 수 있다. */

            position: relative;

            /* 방향속성 : 해당 방향으로부터 원하는만큼 요소를 배치시킬때 사용

                상하 중에서 하나만 선택하거나, 좌우 중에서 하나만 선택하여 사용하는 경우가 많다.

                ex) left,top을 같이 설정

                    bottom, right을 같이 설정

                    top 만 설정

                    right 만 설정 */

            top: 30px;

            left: 30px;

            /* bottom: ;

            right: ; */

 #boxC{background-color: rgb(0, 26, 255);

            /* position을 absolute로 설정했을때 박스위치 지정

            부모태그를 기준으로 배치해준다. */

            position: absolute;

            top: 30px;

            right: 50px;}

        #boxD{background-color: rgb(255, 0, 179);

            /* fixed : 보여지는 화면을 기준으로 위치를 고정 */

            position: fixed;

            top: 40px;

            left: 50px;