폰트, 주석, 파일분리

CSS

폰트, 주석, 파일분리

Spell 2022. 5. 6. 03:50

폰트 활용

실습용으로 폰트 주소가 필요하다.

해당 사이트에서 원하는 폰트를 정한 뒤, 클릭하면 [Select this style+]라는 버튼을 클릭해서 링크를 얻어두자.

https://fonts.google.com/?subset=korean

그럼 이런 창이 뜨는데, 위의 링크란을 복사 하자. 이후 밑에 CSS rules to specify families란도 복사해두자.

사용 할 내용은 다음과 같다.

<link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap" rel="stylesheet">

font-family: 'East Sea Dokdo', cursive;

첫번짼 <head></head>안에 넣어 줄 것이고, 두번짼 CSS rule이기 때문에 style 안에 사용할 것이다.

첫번째 내용을 타이틀 아래에 추가해 줄 것이다. 추가로 아래에는 스타일을 하나 만들어주어 다음과 같이 입력하자.

<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
    <link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'East Sea Dokdo', cursive;
        }

이런식이다. 물론 더 밑에는 전에 작업한 내용이 추가로 있지만, 너무 길어지니 추가한 예시만 가져왔다.

스타일에 사용된 * {...}은 무엇이냐? "모든 태그에 다 적용스킨다."라는 뜻이다.

글씨크기가 저래서 가독성은 좀 떨어지지만 제대로 적용되었다.

주석처리

주석은 컴퓨터가 아닌 코드를 보는 사람들 간에 소통을 하려고 달아 둔다. 추가로 '컴퓨터야 너는 이거 읽지마!' 라는 의미이기도 하다. 즉, 써 놓고 싶은 메모다. 다음에 작업할 코드를 미리 메모화 한다던지, 새로운 코드로 교체했지만 혹시 모르는 상황을 대비하여 과거의 코드들을 지우지 않고 남겨놓지만 숨겨놓고 싶을 때 쓰기도 한다.

현재 PyCharm이라는 툴을 사용하고 있는데, 여기서 단축키는 ctrl+/ 이다.

(거의 모든 개발환경에서 동일한 단축키를 사용한다.)

그러면 다음과 같이 나타난다.

<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
    <link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap" rel="stylesheet">
    <style>
        * {
            /*font-family: 'East Sea Dokdo', cursive;*/
        }

이후 적용을 해보면 다음의 화면이다.

추가로 해당 화면에서 "아이디, 패스워드를 입력해주세요"를 없애고 싶다면. 해당 라인에 가서 단축키를 사용해보자.

<body>
    <div class="wrap">
        <div class="mytitle">
            <h1>로그인 페이지</h1>
<!--            <h5>아이디, 패스워드를 입력해주세요</h5>-->
        </div>
        <p>ID: <input type="text"/></p>
        <p>PW: <input type="text"/></p>
        <p>
            <button class="mybtn red-font">로그인하기</button>
        </p>
    </div>
</body>

해당 라인을 주석처리 됨으로써 화면상에 사라졌다.

두개를 잘 비교해보면 주석을 처리하는 서로의 모양이 다름을 알 수 있다.

/*font-family: 'East Sea Dokdo', cursive;*/

<!--            <h5>아이디, 패스워드를 입력해주세요</h5>-->

CSS에서는 /*...*/ 라는 모양으로, Html에서는  라는 모양으로 사용되었다.

이거를 외운다? 그럴 수 있겠지만 단축키를 활용하는 것도 실력이다. 정신건강에도 좋다.

파일 분리

지금까지 사용했던 코드의 전체를 한번 살펴볼까? (물론 주석처리 된 부분은 단축키를 한번 더 사용해 다시 되살렸다.)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
    <link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'East Sea Dokdo', cursive;
        }
        .mytitle {
            background-color: green;

            width: 300px;
            height: 200px;

            color: white;
            text-align: center;

            background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
            background-size: cover;
            background-position: center;

            border-radius: 10px;

            padding-top: 20px;
        }
    </style>
    <style>
        .wrap {
            width: 300px;
            margin: auto;
        }
    </style>
    <style>
        .mybtn {
            width: 100px;
            margin: auto;
            display: block;
        }
    </style>
    <style>
        .red-font {
            color: red;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="mytitle">
            <h1>로그인 페이지</h1>
            <h5>아이디, 패스워드를 입력해주세요</h5>
        </div>
        <p>ID: <input type="text"/></p>
        <p>PW: <input type="text"/></p>
        <p>
            <button class="mybtn red-font">로그인하기</button>
        </p>
    </div>
</body>
</html>

와우, 얼마 안되는거 같은데 은근 길다.

더 꾸미고, 페이지가 복잡 해진다면 훨씬 길어지겠지? <style></style>부분을 잘라서 따로 보관할 수 없을까?

정답은 언제나 있다. 파일 분리를 시키면 된다.

일단... 저번에 학습한 <style></style>을 여러 개 두지 말고 일단 하나로 합친 뒤

<style>
    * {
        font-family: 'East Sea Dokdo', cursive;
    }
    .mytitle {
        background-color: green;

        width: 300px;
        height: 200px;

        color: white;
        text-align: center;

        background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
        background-size: cover;
        background-position: center;

        border-radius: 10px;

        padding-top: 20px;
    }

    .wrap {
        width: 300px;
        margin: auto;
    }

    .mybtn {
        width: 100px;
        margin: auto;
        display: block;
    }

    .red-font {
        color: red;
        font-size: 15px;
    }
</style>

툴에서 작성중인 문서를 오른쪽 클릭하여 New > stylesheet를 눌러보자

CSS file을 선택하고 제목을 달아주자. 음.. 제목은 편하게 mystyle로 하자.

그리고 기존 html파일에 있던 style란을 옮겨주자.

그러면..

그림과 같은 상태가 된다. 해당 그림처럼 옮겨주고 불필요한 것들을 지워주었다. 기존 html안에 있던 <style></style>안의 내용을 옮겼고, 그 안에는 아무것도 없기에 태그를 지워주었다.

그리고 우리가 알아야 할 코드가 하나 더 있다.

<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

이 코드를 <head></head>안에 넣어 줄거다. 내가 만든 CSS파일의 이름은 mystyle이기에 다음과 같이 수정도 했다.

<link rel="stylesheet" type="text/css" href = "mystyle.css">

해당 코드를 작성하지 않았을 땐 당연히 기존 스타일 코드들을 다른 파일로 분리해 두었기에 읽지 못한다.

하지만 link로 추가해주면 파일이 분리되어 있어도 제대로 적용된 모습이다.

저작자표시 비영리 변경금지

'CSS' 카테고리의 다른 글

Bootstrap 이용하여 페이지 꾸미기2 (feat. 추가작업) (0)	2022.05.07
Bootstrap 이용하여 페이지 꾸미기 (0)	2022.05.07
Bootstrap? 예쁜 CSS 모음집 (0)	2022.05.06
CSS 연습하기 (feat. 로그인 페이지) (0)	2022.05.05
CSS 기초 (0)	2022.05.04

현재글폰트, 주석, 파일분리

Spell