[스파르타코딩클럽] 웹개발 종합반

[스파르타코딩클럽] 웹개발 종합반 - 1주차 (1-6~1-7)

nsean 2023. 12. 18. 01:33

CSS 기초

<div>
    <div>
        <button>나는 버튼1</button>
    </div>
    <div>
        <button>나는 버튼2</button>
    </div>
</div>

여기에서 button과 그를 감싸는 div의 관계를 부모 자식 태그라는 속성을 붙인다.

즉 부모 태그의 속성을 바꾸게 되면, 자식 태그의 속성 역시 바뀌게 된다.(글자 색과 같은)

속성을 바꿔주는 작업을 편리하게 진행하기 위해서는 명칭을 달아주는 작업이 필요하다. 이를 위하여 class를 사용한다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>로그인페이지</title>
    <style>
        .mytitle {
            color: red;
            font-size: 16pt;
        }
    </style>
</head>

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

</html>

다음과 같은 코드를 보면 class에 대한 대략적인 이해를 할 수 있는데, h1 태그에 mytitle이라는 클래스 명을 지정해 주었다.

이후, head 태그 내에 <style></style> 태그를 삽입, 내부에 클래스명을 불러옴으로써 h1의 속성을 설정할 수 있게 되었다.

다음으로는 자주 쓰이는 CSS표현들에 대하여 숙지하고, 이용해 보러 가는 시간이었다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>로그인페이지</title>
    <style>
        .mybody {
            margin: 10px auto;
            width: 300px;
        }

        .mytitle {
            color: white;
            width: 300px;
            height: 200px;
            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position: center;
            background-size: cover;

            border-radius: 10px;
            padding-top: 40px;
            text-align: center;
        }
    </style>
</head>

<body class="mybody">
    <div class="mytitle">
        <h1>로그인 페이지</h1>
        <h2>아이디, 비밀번호를 입력해주세요</h2>
    </div>

    <p>ID: <input type="text" /></p>
    <p>PW: <input type="password" /></p>
    <button>로그인하기</button>
</body>

</html>

복잡해 보이지만, class를 부를 때에는. mytitle {}의 형식이라는 것 정도를 숙지하자

background-image를 깔 때에는 img, position, size를 다 사용해야 한다.

background-img: url("")

background-position:

background-size: 가 묶음으로 사용된다.

border-radius는 모서리가 둥근 정도를 표현하는 CSS

padding: 자신의 안쪽으로 x만큼

margin: 자신의 밖으로 x만큼

html에는 글속성과 박스 속성이 있음. 박스엔 가로세로 속성이 있지만, 글속성은 없기에 강제로 박스 속성으로 변경하여 가로세로 속성을 부여해야 한다. 이를 위하여 display:block을 사용해준다. ==> 숙제때 숙지하고 있어야함

Class에는 중첩이라는 것이 존재하여, 두개를 매길수 있다.

예를 들면

.red-font {
            color: red;
            font-size: 16px;
        }

button class="login_button red-font"

와 같이 class를 한개 더 지정해 줌으로써 새로운 속성을 부여할 수 있다.