글쓰기 습관 만들기

[멋쟁이사자처럼_직장인] Bootstrap 사용 장 단점/ Django, Python 활용한 웹사이트 구축 본문

LEARN

[멋쟁이사자처럼_직장인] Bootstrap 사용 장 단점/ Django, Python 활용한 웹사이트 구축

Wanna_be_polymath 2021. 6. 11. 18:52

멋쟁이 사자처럼 온라인 2기 활동이 이제 거의 끝 무렵으로 다가왔다. 

 

마무리를 해야하는데 여간 어려운게 아니다... 

 

슬랙 채널에 폭풍 질문중 =( 

 

나는 서비스 구현까지는 바라지도 않고,,, 포폴용으로 직접 만든 예쁜 웹사이트 하나 만들고 싶은데... 

 

어렵다... 

 

여튼 어느정도 구성을 완료하고 나서 진짜 어려운건 '예쁘게" 만드는 파트인 것 같다! 

 

멋쟁이사자처럼 수업에서는 css를 직접 작성하지 않고도 기본적인 구성은 예쁘게 다듬어주는 'Boostrap'을 활용하도록 가이드해주시는데, 우선 나는 지금 기본 css 코드와 Boostrap이 얼마나 호환되는지도 잘 모르겠다..^^ 

 

우선 원하는 모양으로 만들기 위해 검색도 해보고 하지만 원하는 모양으로 안바뀌넹... 

 

그냥 오늘 하루 기록해보고 싶어 그적그적 해봤당 ^^ 

 

<내가 원하는 모습> 

<나의 코드 : BASE_DIR >

{%load static%}

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

<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'style.css'%}">
    {% block style %}
    {% endblock %}
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yestagram</title>
</head>

<body>
    <div class="d-flex container pt-3">
        {% if user.is_authenticated %}
        <form method="POST" action="{% url 'accounts:logout' %}">
            {% csrf_token %}

            {{ user.get_username }}님 환영합니다.
            <button type="submit" class="btn btn-primary ms-3">LOGOUT</button>
        </form>
        {% else %}
        <a class="text-decoration-none" href="{% url 'accounts:login' %}">
            <button class="btn btn-primary">LOGIN</button>
        </a>
        <a class="text-decoration-none" href="{% url 'accounts:sign_up' %}">
            <button class="btn btn-primary ms-3">SIGN UP</button>
        </a>
        {% endif %}
        <button id="dark-mode-btn" class="btn btn-dark ms-3">DARK MODE</button>
    </div>
    {% block content %}
    {% endblock %}

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
        crossorigin="anonymous"></script>

</body>

</html>

<부트르트랩 가이드> 

 

 

여튼,, 알 것 같은데 모르겠는게 더 짜증난다 ㅎㅎ

장고 에러나면 걍 흐아아아아아 어케야해!! 하면서 폭풍 검색하는데 

이건 뭐... 모르겠다 그냥 

헤헤 

 

 

언제쯤 머리에 있는게 끄적끄적 쭉쭉 될까 ㅎ0ㅎ 

 

 

'LEARN' 카테고리의 다른 글

[스터디파이 Web3 스터디] 금융서비스 이용이 어려운 사람들을 위한 기술 핀테크(FinTech)와 디파이(DeFi) 번역  (0) 2022.02.20
[자기 계발] 남들 다 잘만쓰는 보고서, 나만 어려운걸까?  (0) 2022.01.26
[자기 계발] 기획은 2형식이다  (0) 2021.06.13
[자기 계발] 어떻게 능력을 보여줄 것인가?  (1) 2021.06.06
[멋쟁이사자처럼_직장인] 나의 첫 웹 페이지 feat. 멋쟁이사자처럼/ HTML, CSS, Python, Django and Bootstrap  (1) 2021.05.24
'LEARN' Related Articles more