웹개발 종합반_개발일지_Day 2

Hyeyeong·2022년 7월 27일
frontend개발일지스파르타코딩클럽웹개발 종합반
0

웹개발 종합반

목록 보기
2/13
post-thumbnail

Ⅰ. 📚 오늘 배운 내용

  1. <head>와 <style>, <body>와 <div> 구분
  2. CSS(Cascading Style Sheet) 기초 코드
    1) 배경 관련
    2) 사이즈 관련
    3) 폰트 관련
    4) 여백 관련
    5) 정렬 관련
  3. 파일 분리
  4. bootstrap 활용하기
  5. [prac] title 이미지 삽입
  6. [prac] 영화 리뷰 페이지 만들기

<head>와 <style>

<head>
  <style>
  ~ </style>
</head>
  • <head> 안에 <style> ~ </style> 영역을 만들어 작성함
  • 꾸며주는 대상 선정 후 코드 작성
    .꾸며주는 대상 {}

<body>와 <div>

<body>
  <div>
  ~ </div>
</body>
  • <body> 안에 <div> ~ </div> 영역을 만들어 작성함

ex) <body> 내 mytitle을 <head>에서 꾸며줄 때

👉 <head>

<head>
	<style>
      .mytitle {
        ~
      }
	</style>
</head>

👉 <body>

<body>
	<div class="mytitle">
  	~
	</div>
</body>

ex) mytitle 내 버튼을 <head>에서 꾸며줄 때

👉 <head>

<head>
	<style>
      .mytitle > button {
        ~
      }
	</style>
</head>

👉 <body>

<body>
	<div class="mytitle">
  	<button>버튼 이름</button>
	</div>
</body>

ex) 버튼이 hover 했을 때, 흰 실선 선 굵기 2px로 설정

👉 <head>

<head>
	<style>
	.mytitle > button:hover {
	boder: 2px solid white;
	}
	</style>
</head>

CSS 기초 코드

<head> 내 <style> ~ </style> 영역에 .꾸며주는 대상 { }을 지정하여 안에 코드 입력

파일분리

  • <style> 코드 분리하기
    1) 새로운 style.css 파일 생성
    2) <style> ~ </style> 안에 있는 코드를 새 style.css 파일에 복붙
    3) 원본 파일에서 <style> ~ </style> 코드 삭제
    4) <head>에 아래 태그 추가
<link rel="stylesheet" type="text/css" href = "css파일이름.css">

bootstrap 활용

bootstrap은 css의 디자인 탬플릿

🔥 [prac] title 이미지 삽입

👉 output

👉 input

  • title 이미지 영역 설정
  • 배경 이미지 넣기
  • 전체 영역 설정 후 정렬
  • 테두리 설정
  • 폰트 스타일 적용
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인 페이지</title>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap" rel="stylesheet">
    <style>
        * {
           font-family: 'Nanum Myeongjo', 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;
        }
        .warp {
            width: 300px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="warp">
        <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>

🔥 [prac] 영화 리뷰 페이지 만들기

👉 output

👉 input

  • title 이미지 설정 (사이즈, 위치, 명도조절, 정렬)
  • 버튼 설정 (사이즈, 컬러, 테두리, hover)
  • 부트스트랩 활용하여 카드 탬플릿 적용
  • 카드 영역 설정 후 여백 설정
  • 코멘트 영역 설정 후 폰트 색상 변경
<!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;
        }
        .A {
            /*background-color: rebeccapurple;*/
            height: 250px;
            width: 100%;

            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-size: cover;
            background-position: center;

            color: white;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .A > button {
            width: 200px;
            height: 50px;

            background-color: transparent;
            color: white;

            border-radius: 50px;
            border: 1px solid white;
        }
        .A > button:hover {
            border: 2px solid white;
        }
        .mycomment {
        color: gray;
        }
        .wrap {
            width: 1500px;
            margin: 20px auto 0px auto;
        }
    </style>
</head>

<body>
    <div class="A">
        <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>

Ⅱ. 📝 회고

전체적으로 강의가 활용도 높은 코드의 예시를 알려주는 형식으로 진행된다. 하나하나씩 이론을 공부하는 것보다 실습하면서 이해하는 방법이 나에게는 더 맞는 수업 방식이긴 하지만, 코드를 해석하는 실력이 없으니 배운 것 외에 코드를 응용하기에는 어려움이 있는 상태이다.

예를 들어 '[prac] 영화 리뷰 페이지 만들기' 실습 때 부트스트랩 연습용 페이지를 새로 만들면서 처음에 제공되는 시작 탬플릿 코드를 넣고 시작하던데 어떤 이유로, 어떤 설정을 하기 위해서 이 코드를 넣어야 하는지 이유가 궁금하다.

다른 부트스트랩을 활용하고 싶을 때도 일괄적으로 넣을 수 있는 코드인지, 아니라면 다른 부트스트랩을 활용하고 싶을 때는 앞에 코드를 어떻게 짜야 하는 지 등 코드를 응용하기 위해서는 관련 내용을 좀 더 찾아봐야겠다.


Ⅲ. ☑️ TO DO

  • 부트스트랩 코드 공부하기

profile
Hyeyeong
코딩입문 코린이
이전 포스트

웹개발 종합반_개발일지_Day 1

다음 포스트

웹개발 종합반_개발일지_Day 3

0개의 댓글