HTML은 "누가 누구안에 있느냐" 를 이해하는 것이 중요하다.

만약 아래 같이 빨간색 div 를 가운데로 옮기면 , 그안에 있는 초록/파란색 div 도 모두 함께 이동한다.

 

 

CSS 는 이러한 원리를 이해하여 뼈대를 꾸미는 일을 한다.

 

CSS에 사용되는 기본적인 문법들이다.

 

- 배경관련
background-color :배경색
background-image:배경사진
background-size:배경크기

- 사이즈
width
height

- 폰트
font-size
font-weight
font-family
color

- 간격
margin:바깥쪽 여백
padding :안쪽여백

 

CSS 사용방법을 이해하기 위해 예제로 먼저 살펴 보려고 한다.

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .mytitle {
            color: red;
            font-size: 40px;
        }

        .mybtn {
            font-size: 12px;
            color: white;
            background-color: green;
        }

        .mytxt {
            color: red;
        }
    </style>
</head>

<body>
    <h1 class="mytitle">로그인 페이지</h1>
    <p class="mytxt">ID: <input type="text" /></p>
    <p class="mytxt">PW: <input type="text" /></p>
    <button class="mybtn">로그인하기</button>
</body>

 

<style></style> : <head></head> 안에 들어가는 태그이며 사이에

.class명 { css문법 }

 

이 들어가게 된다.

<class= " 텍스트"> : <body></body> 사이에 들어가고 텍스트 부분에 원하는 명칭을 작성한다.

 

기본 로그인 페이지를 CSS문법들을 활용하여 꾸며보는 연습을 해보았다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인 페이지</title>
    <style>
        .mytitle {
            width:300px;   /* 가로넓이 */
            height:200px;  /* 새로넓이 */
            background-color: green;

            color:white;
            text-align:center;

            padding-top:30px;    /* 위쪽 여백 */
            border-radius:8px;   /* 테두리 둥글기 */

            background-image:url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position:center; 
            background-size:cover;
        }
    </style>
</head>
<body>
    <div class ="mytitle">
        <h1>로그인 페이지</h1>
        <h5>아이디,비밀번호를 입력해주세요</h5>
    </div>
    <p>> ID: <input type ="text"/></p>
    <p > PW: <input type ="text"/></p>
    <p> <button>로그인하기</button></p>

    
</body>
</html>

 

 

 

 

'JavaScript' 카테고리의 다른 글

[JS]부트스트랩 활용하기  (0) 2025.01.24
[JS]HTML 구글 폰트 사용하기  (0) 2025.01.24
[JS]로그인 페이지 만들기  (0) 2025.01.24
[JS]HTML,CSS 의 개요  (0) 2025.01.23
JavaScript 사전캠프 부트캠프 OT (1일차)  (0) 2025.01.13

티스토리툴바