Django CSS

CSS (Cascading Style Sheet)

HTML 요소의 스타일을 별도의 문서로 분리할 수 있도록 설계됨.

모든 요소에는 style 속성이 존재하는데 이것이 style이 global 속성이라고 불리우는 이유임.

<p style = "color : green">Text</p>

위의 방식은 페이지의 모든 단락 요소에 대해 이 작업을 수행해야 하므로 비효율적임.

스타일 속성 할당을 다른 CSS 파일로 분리한 다음, selector 를 사용하여 다수의 요소에 스타일을 지정할 수 있게 그 CSS 파일을 HTML로 끼워넣을 수 있다면 훨씬 더 효율적임.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<head> part : 실제로 미디어 정보를 추가할 수 있는 곳이며, HTML 문서에 연결하기 위해 HTML 외부 파일을 연결할 수 있는 곳.
<body> part : web-page 에 나타날 코드나 요소를 입력하는 곳

Tag 요소에 직접 CSS style을 넣는것은 File의 덩치가 커지면 커질수록 만드는게 힘들어진다.

색상을 정의하는 방법에는 여러 가지 옵션이 존재하므로 사용자의 선택이다.

head 안에 link tag를 통해 CSS와 같은 컴퓨터의 다른 파일에 Stylesheet (rel) 로 HTML에 Link 한다.

href 는 연결할 파일을 넣어주는데, 전체 파일 경로를 사용할 수 있지만 일반적으로 동일한 위치에 두는 것이 더 좋음.

여러 프로퍼티를 편집하려면 세미콜론을 넣은 다음 다른 프로퍼티를 선택하면 된다.

background-color : 요소의 배경색을 설정할 수 있음.

CSS 에서 편집할 수 있는 수많은 Property 가 존재하지만, 하나하나 외울 수 없기 때문에 필요할 때마다 Google 검색을 사용하여 전체적인 기본 참조를 얻을 수 있음. (w3school)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="">
    <title>Document</title>
</head>
<body>
    <h1>Heading Here</h1>
    <h2>Heading Two</h2>
</body>
</html>

h1 {
    color : #ff0000
}

h2 {
    color : blue;
    background-color : chartreuse;
}

Specificity (특정성) : 기본적으로 어떤 태그가 다른 태그보다 우선하는 특정 계층이 있다.

즉, 특정승은 무엇을 덮어쓸 수 있는지에 대한 계층 구조,,

이것은 Google 에서 CSS Specificity 를 검색하면 알 수 있음.

border 가 작동되기 위해서는 border-color, border-width, border-style 들이 필요함.

이것은 테두리가 있는 테이블에 유용함.

동일한 타입의 요소를 처리하는데, 이를 다른 컨테이너로 분리하려는 경우에 대비하여 <div> 와 <span>이 존재한다.

<div>가 좀 더 큰 컨테이너이고 <span>이 더 작은 컨테이너이다.

일반적으로 요소를 구체화하면 할 수록 덜 구체적인 것을 덮어쓰게 되므로, body가 제일 덜 구체적인 것이라고 할 수 있음.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="master.css">
    <title>Document</title>
</head>
<body>
    <p>Outside a div</p>
    <div>
        <p>Inside the div</p>
        <p>Inside the div and this is a <span>SPAN</span></p>
    </div>
</body>
</html>

body {
    background-color : cornflowerblue;
}

div {
    background-color: chartreuse;
    border-color : orange;
    border-width : 10px;
    border-style : dashed;
}

span {
    background-color :red;
}

CSS selector

CSS에서 특정 이름을 가진 class 속성에 요소를 할당할 수 있음.

class : div 컨테이너 내부의 모든 스타일을 그룹화하기 위해 div 내에서 사용됨. 여러 타입의 요소에 대해 두 번 이상 사용 가능.

id : 완전히 고유해야 하며, web-page의 단일 요소로써만 사용해야 한다.

class selector는 .을 사용하여 HTML 요소를 선택한다.

id selector는 해시태그 (#) 를 사용하여 HTML 요소를 선택한다.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="master.css">
    <title>Document</title>
</head>
<body>
    <p id = "one">Above the div</p>
    <div class = "myclass">
        <p>Inside the div</p>
        <p>also inside div</p>
    </div>
    <p id = "two">Below the div</p>

    <div class = "myclass">
        <p>Second div</p>
        <p>also in second div</p>
    </div>
</body>
</html>

.myclass {
    color : red;
}

#one {
    color : blue;
}

#two { 
    color : green;
}

Font

font-size

절대 유닛 : px, inch, ems
상대 유닛 :

특징

기본적으로 브라우저가 결정하는 기본 텍스트 크기가 존재 (16px = 1em : 현재 폰트 크기)
'%' 기호를 사용하여 default browser Text size를 기반으로 설정이 가능함

Internet에서 font를 download 하거나, link 하는 방법

=> 가장 쉬운 것은 Google font와 그 API를 이용하는 것.

Option

1. Google font 이용

-> 단점 : API를 load 하고, 연결해야 해서 web-site load 시간이 약간 길어지지만, 사용자에게는 거의 체감이 안됨.

2. font-family를 이용하여 file을 직접 download

주의!

font-family를 참고하고자 access 할 때는 +를 사용하지 않는다.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Moo+Lah+Lah">
    <link rel="stylesheet" href="master.css">
    <title>Document</title>
</head> 
<body>
    
    <div class = "stuff">

        <p>Text</p>
        <p>More Text</p>
    </div>
</body>
</html>

body {
    font-family : "Moo Lah Lah";
    font-size: 90%;
}

p {
    font-size : 3em;
}

Box

<그림>

모든 방향에서 동일한 거리로 성장할 필요는 없음
Padding을 편집해서 Content와 Border 사이 간격을 둘 수 있음,,

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="master.css">
    <title>Document</title>
</head> 
<body>
    <h1 id = "up">UP</h1>    
    <h1 id = "down">DOWN</h1>
</body>
</html>

#up {
    text-align:center;
    border: 10px solid blue;
    margin-bottom: 100px;
    margin: 20px 20px 100px 10px;
}

#down {
    text-align: center;
    border: 10px solid red;
    padding-top: 20px;
}

'Back-end > Django' 카테고리의 다른 글

Django 기본 요소 (URL과 View, Model) (1)	2024.12.29
Django 개발 준비 (1)	2024.12.26
Django HTML (3)	2024.10.09
Django (Web Programming) (3)	2024.09.04