본문 바로가기
DEV/Web 개발

파이썬 웹 프로그래밍 :: HTML, CSS 기본개념

by 올커 2022. 7. 12.

파이썬 웹 프로그래밍 _ HTML, CSS 기본 개념

들어가면서..

 본 포스팅을 통해 HTML과 CSS를 사용하기 위한 기초지식을 정리하고자 합니다.

 

1. HTML은 프레임, CSS은 채색

· HTML은 구역과 텍스트를 나타내는 코드, CSS는 구역을 꾸며주는 것
· HTML 내에서도 style 속성으로 꾸미기가 가능하나, 현재는 이를 한데 모아 볼 수 있는 CSS 파일이 생겨남
· HTML 코드 내에 CSS 파일을 불러와서 적용 (CSS는 대부분 웹디자이너나 퍼블리셔에게 의존)

2. HTML의 구조

· HTML은 크게 head와 body로 구성
  (1) head : 페이지의 속성정보
  (2) body : 페이지의 내용

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> HTML 기초</title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <hr>
    span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

## Tip. Pycharm에서 코드의 정렬은 ctrl + alt + L(Mac은 cmd + alt + L)로 자동정렬

3. CSS

· CSS는 <head> ~ </head> 안에 <style> ~ </style>.로 공간을 만들어 작성
· HTML의 Body내 각 구역을 <div> ~ </div>를 통해 구분하고,
  <div class="classtitle">로 class를 생성한 후
  <style> ~ </style> 내에 .classtitle { .. }의 중괄호 안에 스타일을 추가하여 지정한다.
· 자주 쓰이는 CSS

더보기

배경관련
background-color
background-image
background-size


사이즈
width
height


폰트
font-size
font-weight
font-famliy
color


간격
margin : 바깥 여백
margin: auto;   ->   바깥여백을 자동으로 최대한
                        ->> 그래도 안되면? display: block을 추가!
padding : 안쪽 여백
border-radius

padding : 안쪽 여백
border-radius

4. 폰트

· 구글 웹폰트 : https://fonts.google.com/?subset=korean 

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

 ☞ 마음에 드는 폰트 클릭 후 [+ Select this style]

구글 웹 폰트 접속 화면

☞ Use on the web의 link 중 3번째 link '<link href=... >'를 복사 후 <head> 내 <title> ~ </title> 아래에 붙여넣기 사용
☞ CSS rules to specify families 의 내용을 복사 후 사용

적용 예시

☞ <style> 내 ' * { ... } ' 부분은 전체에 적용한다는 의미

5. 주석 처리

· 주석을 사용하는 용도
  1) 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 할 때 
  2) 코드에 대한 간단한 설명을 붙여두고 싶을 때
· 주석처리 단축키 : ctrl(또는 command) + / (슬래시)

6. CSS 파일 분리

· <style> ~ </style> 부분이 너무 길어지면 가시성이 떨어진다. 이를 보완하기 위해 파일을 분리

더보기

<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

7. Bootstrap

· 부트스트랩은 이미 완성된 예쁜 CSS를 모아두어 쉽게 복사하여 사용할 수 있다.
  ※ 유용한 부트스트랩 참고 사이트
    - getbootstrap : https://getbootstrap.com/
    - startbootstrap : https://startbootstrap.com/

 

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

 

Free Bootstrap Themes, Templates, Snippets, and Guides - Start Bootstrap

Landing Page A clean, functional landing page theme

startbootstrap.com

· 부트스트랩을 사용하기 위해선 홈페이지(*링크)에 접속하여

  Getting started → Download → CDN via jsDelivr을 복사한 후 아래 코드처럼 붙여넣는다.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title> 부트스트랩 연습하기</title>
</head>
<body>
<h1>Let's start!</h1>
</body>
</html>

 

 

8. 이모티콘 모음

· 유용한 이모티콘 사이트 : https://kr.piliapp.com/facebook-symbols/

9. 실습1. 로그인 화면 만들기

· 아래와 같은 로그인 화면을 구성

· Code 예시 ↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인 페이지</title>
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Jua', sans-serif;
        }
        .mytitle {
            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: 40px;
        }
        .wrap{

            width: 300px;
            margin: auto;

        }
    </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>
        <button>로그인하기</button>
    </div>
</body>
</html>

· HTML은 크게 head와 body로 구성
· 변수명 지정

 

10. 실습2. 메인 화면 만들기

· 아래와 같은 메인 화면을 구성

· Code 예시 ↓

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>Bootstrap 연습</title>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .mytitle {
            background-color: green;

            width: 100%;
            height: 250px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .mytitle > button {
            width: 200px;
            height: 50px;

            background-color: transparent;
            color: white;
            border-radius: 50px;

            border: 1px solid white;

            margin-top: 10px;
        }

        .mytitle > button:hover {
            border: 2px solid white;
        }
        .mycomment {
            color: gray;
        }
        .wrap {
            width: 1200px;
            margin: 20px auto 0px auto;
        }
    </style>
</head>

<body>
    <div class="mytitle">
        <h1>내 생에 최고의 영화들</h1>
        <button>영화 기록하기🔥</button>
    </div>
    <div class="wrap">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                         class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">여기에 제목이 들어갑니다.</h5>
                        <p class="card-text">여기에 내용이 들어갑니다.</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                         class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">여기에 제목이 들어갑니다.</h5>
                        <p class="card-text">여기에 내용이 들어갑니다.</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                         class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">여기에 제목이 들어갑니다.</h5>
                        <p class="card-text">여기에 내용이 들어갑니다.</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                         class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">여기에 제목이 들어갑니다.</h5>
                        <p class="card-text">여기에 내용이 들어갑니다.</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

11. 실습3. 포스트 박스 만들기

· 아래와 같은 화면을 구성

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>
    <title>스파르타 피디아</title>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .mytitle {
            width: 100%;
            height: 250px;
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pst');
            background-position: center;
            background-size: cover;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mytitle > button {
            width: 200px;
            height: 50px;
            background-color: transparent;
            color: white;
            border-radius: 50px;
            border: 1px solid white;
            margin-top: 10px;
        }

        .mytitle > button:hover {
            border: 2px solid white;
        }

        .mycomment {
            color: gray;
        }

        .mycards {
            margin: 20px auto 0px auto;
            width: 95%;
            max-width: 1200px;
        }

        .mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 0px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px gray;
        }

        .mybtns {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }

        .mybtns > button {
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div class="mytitle">
    <h1>내 생애 최고의 영화들</h1>
    <button>영화 기록하기</button>
</div>
<div class="mypost">
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <label for="floatingInput">영화URL</label>
    </div>
    <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">별점</label>
        <select class="form-select" id="inputGroupSelect01">
            <option selected>-- 선택하기 --</option>
            <option value="1">⭐</option>
            <option value="2">⭐⭐</option>
            <option value="3">⭐⭐⭐</option>
            <option value="4">⭐⭐⭐⭐</option>
            <option value="5">⭐⭐⭐⭐⭐</option>
        </select>
    </div>
    <div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
          style="height: 100px"></textarea>
        <label for="floatingTextarea2">코멘트</label>
    </div>
    <div class="mybtns">
        <button type="button" class="btn btn-dark">기록하기</button>
        <button type="button" class="btn btn-outline-dark">닫기</button>
    </div>
</div>
<div class="mycards">
    <div class="row row-cols-1 row-cols-md-4 g-4">
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

12. 실습4. 팬명록 만들기

 

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>[실습] 10cm 팬명록 만들기</title>
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Jua', sans-serif;
        }

        .mytitle {

            width: 100%;
            height: 300px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxODA1MDlfMjA2%2FMDAxNTI1ODU2OTA3MjQ3.ZyPyJIYr1365NMiMlfVatwoZeyQdhmxgw6cyg3pnv3Eg.DLJSVEnDm0zYsI-B8TYie0h_IDXhgitNkPwFjkoxRjkg.JPEG.clroral%2FDSC09405.JPG&type=sc960_832");
            background-position: center 30%;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .mypost {
            width: 95%;
            max-width: 550px;
            margin: 20px auto 20px auto;
            padding: 20px;
            box-shadow: 0px 0px 2px 2px gray;
        }
        .mycards {
            width: 95%;
            max-width: 550px;
            margin: 10px auto 0px auto;
        }
        .card {
            margin-top: 10px;
            margin-bottom: 10px;
        }

    </style>
</head>

<body>
    <div class="mytitle">
        <h1>십센치(10cm) 팬명록</h1>
    </div>
    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="text" class="form-control" id="name" placeholder="url">
            <label for="floatingInput">닉네임</label>
        </div>
        <div class="form-floating">
            <textarea class="form-control" placeholder = "Leave a comment here" id="comment"
                      style="height: 100px"></textarea>
            <label for="floatingTextarea2">응원댓글</label>
        </div>
        <div class="mybtns">
            <button onclick="save_comment()" type="button" class="btn btn-dark">응원 남기기</button>
        </div>
    </div>
    <div class="mycards" id="comment-list">
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">호빵맨
                    </footer>
                </blockquote>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">호빵맨
                    </footer>
                </blockquote>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">호빵맨
                    </footer>
                </blockquote>
            </div>
        </div>
    </div>


</body>

</html>

 

13. 그 외 생각

· HTML, CSS를 공부하면서 느낀 점은 기본적으로 알아야 하는 전체 구조, 그리고 code 외에
  상황에 맞는 프레임과 디자인을 할 수 있도록 기획하는 능력이 중요하며,
  필요시에는 구글과 다양한 오픈소스들을 활용할 수 있다는 점이다.
  다른 웹페이지들과 차별을 주기 위해선 서두에 작성한 것과 같이 
  전문가(웹디자이너나 퍼블리셔)의 도움을 받는 것도 효과적인 방법일 듯 하다.

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

'DEV > Web 개발' 카테고리의 다른 글

파이썬 웹 프로그래밍 :: html/CSS 스타일, 소개 페이지 제작_TIL#01  (2) 2022.08.29
파이썬 웹 프로그래밍 :: aws 활용 웹 퍼블리싱  (0) 2022.07.24
파이썬 웹 프로그래밍 :: 파이썬 플라스크(Flask) 서버 제작, API 생성, Client 연결  (0) 2022.07.24
파이썬 웹 프로그래밍 :: 파이썬 웹 크롤링, 몽고디비(MongoDB)  (0) 2022.07.24
파이썬 웹 프로그래밍 :: jQuery, Ajax를 활용한 웹 화면 생성  (0) 2022.07.22

관련글

댓글

티스토리툴바