4. CSS 개념 및 설정

250x250

Notice

Recent Comments

Link

github

Tags more

Archives

Today

Total

관리 메뉴

주뇽's 저장소

4. CSS 개념 및 설정 본문

웹개발/Django

4. CSS 개념 및 설정

뎁쭌 2023. 8. 19. 00:17

728x90

static과 CSS는 웹 개발에서 중요한 개념으로, 웹 페이지의 디자인과 스타일을 관리하는 데 사용된다.

1. Static 파일

웹 애플리케이션은 주로 HTML, CSS, JavaScript 등의 파일로 구성된다. 이 중에서 static 파일은 웹 페이지의 정적인 자원들을 저장하는 위치를 나타내는 개념이다. 정적인 자원은 서버에서 변하지 않는 파일로, 예를 들어 이미지, 스타일시트(CSS), 자바스크립트 파일 등이 있다.

장고에서 static 파일은 애플리케이션의 정적인 자원을 관리하기 위한 디렉토리이다. 일반적으로 애플리케이션 디렉토리 내에 static 디렉토리를 만들어 관련 자원을 저장한다. 이렇게 하면 개발자가 웹 페이지의 스타일, 이미지 및 스크립트와 같은 자원을 쉽게 참조하고 관리할 수 있다.

예를 들어, 애플리케이션 이름이 myapp이고 이미지 파일을 image.jpg라고 가정하면, 이미지 파일은 다음과 같이 저장될 수 있다:

myapp/
├── static/
│   └── myapp/
│       └── image.jpg

2. CSS (Cascading Style Sheets)

CSS는 "Cascading Style Sheets"의 약어로, 웹 페이지의 디자인과 스타일을 정의하는 스타일 시트 언어이다. CSS를 사용하여 웹 페이지의 레이아웃, 색상, 글꼴, 간격 등을 지정할 수 있다. 스타일을 한 번 정의하면 해당 스타일을 여러 웹 페이지에서 재사용할 수 있으며, 유지보수와 일관성을 향상시키는 데 도움이 된다.

CSS는 HTML 요소에 스타일을 적용하는 규칙들의 집합으로 구성된다. 예를 들어, 다음은 HTML 요소에 글꼴 크기와 색상을 지정하는 CSS 규칙의 예제입니다:

/* 스타일 시트 예제 */
h1 {
    font-size: 24px;
    color: blue;
}

이 CSS 규칙은 <h1> 태그에 적용되며, 글꼴 크기를 24픽셀로, 글자 색상을 파란색으로 지정한다. 이렇게 CSS를 사용하여 모든 웹 페이지의 스타일을 일관되게 변경하거나 정의할 수 있다.

정리하면, static은 웹 애플리케이션의 정적인 자원을 저장하는 위치이고, CSS는 웹 페이지의 디자인과 스타일을 관리하는 스타일 시트 언어이다. 이 두 가지 개념을 적절히 활용하면 웹 페이지의 디자인과 스타일을 효과적으로 다룰 수 있다.

3. Display

CSS의 display 속성은 HTML 요소의 레이아웃 특성을 지정하는 데 사용되는 속성이다. 이 속성을 사용하여 요소가 화면에서 어떻게 보이고 동작하는지를 제어할 수 있다. display 속성은 다양한 값을 가지며, 각 값은 요소의 보임 여부와 배치 방식을 결정한다.

주요한 display 속성 값들은 다음과 같다:

block: 요소를 블록 레벨 박스로 설정한다. 기본적으로 요소는 한 줄을 차지하며, 부모 요소의 가로 폭 전체를 차지하도록 확장된다. 여러 줄에 걸쳐 표시된다.
inline: 요소를 인라인 레벨 박스로 설정다. 요소의 내용만큼만 가로 폭을 차지하며, 다른 인라인 요소와 나란히 표시된다.
inline-block: 요소를 인라인 레벨 박스처럼 나란히 배치하되, 블록 레벨 요소처럼 크기 및 패딩, 마진 등을 지정할 수 있다.
none: 요소를 화면에서 보이지 않게 숨긴다. 해당 요소가 화면에 공간을 차지하지 않는다.
flex: 요소를 플렉스 컨테이너로 설정하며, 내부 아이템을 유연하게 배치하는 레이아웃 모델을 제공한다.
grid: 요소를 그리드 컨테이너로 설정하며, 그리드 레이아웃을 사용하여 내부 아이템을 배치할 수 있다.
table, table-cell, table-row: 요소를 테이블 레이아웃 모델로 설정한다. 이는 HTML 테이블이 아닌 CSS를 통한 테이블 레이아웃을 구현할 때 사용된다.

이 외에도 다양한 display 속성 값이 있으며, 이를 사용하여 요소의 레이아웃을 자유롭게 제어할 수 있다. display 속성은 웹 페이지의 레이아웃을 디자인하고 구성하는 데 중요한 역할을 하며, 다른 CSS 속성들과 함께 사용하여 웹 페이지의 디자인을 완성한다.

https://www.google.com/search?client=safari&sca_esv=557804163&rls=en&sxsrf=AB5stBi7iJSLMN5BgW_r6jSCV0MuYWOFZQ:1692283430023&q=css+display&tbm=isch&source=lnms&sa=X&ved=2ahUKEwjXn9KF9-OAAxVdilYBHU4oD70Q0pQJegQIDBAB&biw=1344&bih=737&dpr=2#imgrc=j3C9aNjSlll9kM

4. FontSize

CSS의 font-size 속성은 텍스트의 글꼴 크기를 지정하는 데 사용되는 속성이다. 이를 통해 웹 페이지에서 텍스트의 크기를 조절하여 가독성을 개선하거나 디자인 요소로 활용할 수 있다.

font-size 속성은 다양한 단위를 사용하여 값을 지정할 수 있다. 주로 사용되는 단위에는 다음과 같은 것들이 있다:

픽셀 (px): 고정 크기 단위로, 텍스트의 크기를 픽셀 단위로 지정
백분율 (%): 부모 요소의 크기에 대한 비율로 텍스트 크기를 지정
상대 크기 단위 (em, rem): 상대적인 크기 단위로, 기본 글꼴 크기에 대한 배수로 텍스트 크기를 조절
상대 크기 (small, medium, large, x-large 등): 브라우저의 기본 글꼴 크기에 대한 상대적인 크기를 지정

예시로 font-size 속성을 사용하여 텍스트의 글꼴 크기를 조절하는 방법

/* 스타일 시트 예제 */
p {
    font-size: 16px;   /* 픽셀 단위로 크기 지정 */
}

h1 {
    font-size: 2em;    /* 상대 크기 단위 (기본 글꼴 크기의 2배) */
}

span {
    font-size: 120%;   /* 백분율로 크기 지정 (부모 요소의 120%) */
}

텍스트의 글꼴 크기를 조절함으로써 웹 페이지의 가독성과 디자인을 조정할 수 있다. 하지만 크기가 너무 작거나 크게 설정될 경우, 사용자 경험이나 가독성에 부정적인 영향을 미칠 수 있으므로 신중하게 조절하는 것이 중요하다. 해당 강의에서는 rem을 주로 사용 1rem = 16px

Static 및 CSS 설정

settings.py STATIC_ROOT 추가
앱에 종속되지 않는 프로젝트 전체에 적용하기 위한 경로 추가

STATIC_ROOT = os.path.join(BASE_DIR,'staticfiles')
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

루트에서 static/base.css 파일 생성 후 기존에 header 와 footer에서 작성했던 중복 스타일 옮기기

.full_stack_project_logo{
    font-family: 'Indie Flower', cursive; 
}

.full_stack_project_footer_button{
    text-align: center; 
    margin-bottom:2rem;
    font-size: .6rem;
}

.full_stack_project_footer{
    text-align: center; 
    margin-top:2rem;
}
.full_stack_project_header_navn{
    text-align: center; 
    margin :2rem 0;
}

head.html 에서 css 파일 로드하기

{% load static %}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Full Stack Project With Django</title>

    <!-- 부트스트랩  -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
    crossorigin="anonymous">

    <!-- 구글 폰트  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Batang&family=Indie+Flower&family=Maven+Pro&family=Nanum+Pen+Script&family=Noto+Sans+KR:wght@300;700&family=Unna&display=swap" rel="stylesheet">

    <!--  CSS Link  -->
    <link rel = "stylesheet" type = "text/css" href="{% static 'base.css' %}">
</head>

Header

<div class="full_stack_project_header_navn">
    <div>
        <h1 class="full_stack_project_logo">Full Stack Project</h1>
    </div>
    <div>
        <span> nav1 </span>
        <span> nav2 </span>
        <span> nav3 </span>
    </div>
</div>

Footer

<div class="full_stack_project_footer">
    <div class="full_stack_project_footer_button">
        <span>공지사항</span> |
        <span>서비스소개</span> |
        <span>제휴문의</span>

    </div>
    <div style="margin-top :1rem">
        <h6 class="full_stack_project_logo">Full Stack Project</h6>
    </div>
</div>

저작자표시

'웹개발 > Django' 카테고리의 다른 글

5. DB 연동 (0)	2023.08.25
3. Style, 구글 폰트를 통해 Header, Footer 꾸미기 (0)	2023.08.19
2. Include, Extends, Block (0)	2023.08.19

'웹개발/Django' Related Articles

주뇽's 저장소

4. CSS 개념 및 설정 본문

4. CSS 개념 및 설정

1. Static 파일

2. CSS (Cascading Style Sheets)

3. Display

4. FontSize

Static 및 CSS 설정

Header

Footer

'웹개발 > Django' 카테고리의 다른 글

티스토리툴바