코딩과 결혼합니다

자주 쓰이는 CSS 연습하기 본문

2세/기타

자주 쓰이는 CSS 연습하기

코딩러버 2023. 5. 5. 16:49
728x90

웹개발 종합반 1주차 - 자주 쓰이는 CSS 연습하기

 

 

 

 

자주 쓰이는 css 태그들이다.

    <style>
        .mytitle {
            background-color: green;

            width: 300px;
            height: 200px;

            border-radius: 10px;
            color: white;

            text-align: center;

            padding-top: 30px;

            background-position: center;
            background-size: cover;
        }
        .wrap{
            width: 300px;
            margin: 20px auto 0px auto;
        }
    </style>

.mytitle 에 background-color를 지정한 이유는 박스가 잘만들어졌는지 확인하려고

 

💕이미지 넣을 때 tip
background-image: url('');
background-position: center;
background-size: cover;

 

    <body>
        <div class="wrap">
            <div class="mytitle">
                <h1>로그인 페이지</h1>
                <h5>아이디, 비밀번호를 입력하세요</h5>
            </div>
            <p>ID : <input type="text" /></p>
            <p>PW : <input type="text" /></p>
            <button>로그인하기</button>
        </div>
    </body>

로그인 페이지를 화면 중앙에 배치하기 위해서 wrap이라는 박스로 감싸준 다음에

박스 너비를 300px로 동일하게 만든 다음에 margin으로 위치를 옮겨 주었다.

멋드러진 스파르타 로그인 페이지 완스엉(▀̿Ĺ̯▀̿ ̿)

'2세 > 기타' 카테고리의 다른 글

부트스트랩 코드 + 웹사이트  (0) 2023.05.06
부트스트랩 + CSS [div 안에 있는 내용을 가운데로 위치 시키기]  (0) 2023.05.06
구글 폰트 사용하기 + 주석달기  (0) 2023.05.05
간단한 로그인 페이지 만들기 + css  (0) 2023.05.05
웹 브라우저 동작 개념  (0) 2023.05.05
'2세/기타' Related Articles more