WIL 3. 웹개발 종합반 1주차 2회독(7월 2주차)

HangHae99/WIL 2023. 7. 14. 22:08

< WIL이란? >

Weekly I Learend의 약자로, 주간 학습한 내용을 정리 후 공유하기 위해 작성하는 글이다.

아래는 웹 개발 종합반 강의 1주차를 2회독하면서 정리한 내용이다.

사전 스터디 기간의 목표는 웹개발 종합반 강의 전체를 2회독하는 것이다.

드디어 1회독을 마치고 1주차 2회독을 시작했다.

VS 설치 등 초기 세팅이나 아주 기초적인 부분은 정리하지 않았다.

되도록 코드 위주로 정리하고자 하였다.

HTML = 뼈대, CSS = 꾸미기, JS = 움직이기

<HTML>

h1 tag

- 문서의 제목을 나타내는 태그로, 해당 태그를 넣어주어야 구글에서 해당 페이지의 제목을 인식할 수 있다.

태그의 용도와 이름을 일일이 외울 필요는 없다. 필요할 때 복사해와서 쓰기만 하면 된다.

<로그인 하기 페이지의 뼈대>

<body>
    <h1> 로그인 페이지</h1>
    <p>ID : <input type="text" /></p>
    <p>PW : <input type="text" /></p>
    <button> 로그인 하기 </button>
</body>

ID, PW는 텍스트를 입력할 수 있는 인풋 태그를,

로그인 하기는 버튼으로 만들어 준다.

이때, 가로로 출력되는 ID, PW, 버튼을

p 태그로 구역을 나누어 준다.(줄바꿈)

<CSS 1 사용방법>

CSS 태그는 html로 만든 뼈대를 꾸미는 역할을 한다.

html 태그 안에 class 로 명칭을 부여하고,

head 태그 안에 style 태그를 만들어서

명칭을 부여한 태그를 지정하여 꾸밀 수 있다.

html 태그와 마찬가지로 모든 태그를 알 수는 없다.

구글에 검색하면 다 나온다. 답은 구글에 있다.

예) CSS 모서리 둥글게

<자주 쓰는 CSS 1, 구역(상자) 만들기>

        .mytitle{
            background-color: green;
            width: 300px;
            height: 200px;

            border-radius: 10px;
            color: white;

            text-align: center;

            padding: 30px 0px 0px 0px;
            /* padding-top: 30px; 명령어와 결과는 동일하다.*/

            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position: center;
            background-size: cover;
        }

박스 만들기(구역 설정): div

구역을 만들었을 때는 제일 먼저 배경 색깔을 주도록 한다.(그래야 구역이 어디서부터 어디까지인지 알 수 있다.)

양쪽 끝으로 영역이 설정되어 있다. 영역을 width, height 로 조정해준다. (박스 크기 조절)

margin 바깥쪽으로 여백을 주는 태그이다.

(시계방향으로 생각: 상-우-하-좌 순)

padding 안쪽으로 여백을 주는 태그이다.

배경에 이미지를 넣을 때는 3줄을 같이 써준다.(이미지 url, 포지션, 사이즈)

< 자주쓰는 CSS2, 위치 조정>

박스의 외형은 다 만들어주었으니, 위치를 웹페이지 가운데로 오도록 한다.

전체 영역에서 양쪽 여백이 같으면 가운데로 내용물이 온다.

(양쪽 여백 margin이 같으면 센터로 간다.)

이때 몇 px만큼 이동하는 것이 아닌, auto를 넣어주면 해당 방향 끝으로 간다. (즉, auto를 양쪽에서 넣으면 가운데로 정렬)

    <style>
        .mytitle {
            background-color: green;
            width: 300px;
            height: 200px;

            border-radius: 10px;
            color: white;

            text-align: center;

            padding: 30px 0px 0px 0px;
            /* padding-top: 30px; 와 결과는 동일하다.*/

            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position: center;
            background-size: cover;
        }
        .wrap{
            width: 300px;
            margin: 0px auto 0px 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>

<폰트 사용하는 방법>

1. 구글 웹폰트 웹사이트 접속

2. 원하는 폰트 선택

3. Styles에서 원하는 폰트 스타일 선택 (regular 400 등)

4. Use on the website

4-(1). @import

style 태그 안에 있는 코드를 복사

내 html 파일 style 태그 안에 붙여넣기

4-(2). CSS rules to specify families

코드 복사, style 태그 안에 붙여넣기

        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
        * {
            font-family: 'Noto Sans KR', sans-serif;
        }
        // 폰트 적용 범위 {가져온 코드}

font- famliy 는해당 폰트를 적용할 범위를 명시해주는 것으로 보인다.

따라서 * {} 안에 코드를 넣으면 웹 페이지 내 모든 글자에 해당 폰트가 적용이 된다.

<파일 분리>

css 태그가 너무 길어져 html 파일이 복잡해진다면, (남이 만들어 놓은 파일을 가져올 때도 사용)

css 파일을 따로 만들어서 (style.css 등)

html 파일 head 태그 안에서 css를 불러 올 수 있다.

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

<단축키>

sh + alt(option) + F 정렬

ctrl(cmd) + / 주석처리

<스파르타 피디아: HTML, CSS 연습>

영화를 카드에 모아서 볼 수 있는 웹페이지(sparta pedia)의 프론트엔드를 구현한다.

우선, 윗 부분에 해당하는 영역을 구현한다.

<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>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');

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

        .mytitle {
            background-color: green;
            color: white;
            height: 250px;

            display: flex;
            flex-direction: column;
            /* flex-direction: row; 가로로 정렬하고 싶은 경우 */
            align-items: center;
            justify-content: center;
            /* div 안에서 가운데 정렬을 줄 때 이 4줄은 같이 다닌다. */

            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;
        }

        .mytitle>button {
            width: 250px;
            height: 50px;
            color: white;

            background-color: transparent;
            /* 배경화면 색 투명처리 */

            border: 1px solid white;
            /* 테두리: 두께, 실선, 색깔 */
            
            color: white;
            border-radius: 50px;
            margin-top: 20px;

        }

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

<body>
    <div class="mytitle">
        <h1>내 생애 최고의 영화들</h1>
        <button class> 영화 기록하기</button>
    </div>
</body>

상위 태그의 class 가 지정이 되어 있으면

.mytitle> button 과 같은 형식으로 지정해줄 수 있다.

display flex와 배경화면 색 투명처리 등 유용한 기능들이 많다. 주석을 통해 CSS 상세 내용을 정리해두었다.

<부트스트랩>

부트스트랩을 통해 남이 만들어둔 CSS를 가져다 쓸 수 있다.

기존에 있던 cards를 가져와 body - div 태크 안에 넣어주고,

이미지 url, 안에 들어갈 텍스트 등 필요에 맞게 수정한다.

영화 포스터와 제목, 코멘트 등이 들어갈 수 있는 카드를 만든다.

<포스팅 박스>

영화 url 과 코멘트를 입력할 수 있는 포스팅 박스를 만든다.

부트스트랩에서 Forms-Floating labels를 가져온다.

마찬가지로 필요한 부분만 수정해주면 된다.

다만 코드를 올리기에는 상당히 길어서, 코드 리뷰를 할 때는 VS 코드를 보면서 하는게 더 나을 것 같다.

포스팅박스마저 완성되면 구현하고자 한 프론트엔드는 완성된다. (정적 웹페이지)

<배포>

Github 을 통해 코드를 업로드 한다.

이미 예전에 생성해놓은 repository와

배포한 파일이 있었기에 다시 실습하지는 않았다.

(배포된 파일을 수정하기만 실습)

Github에서 배포할 때는 파일을 1개,

그 파일의 이름은 index.html 이어야 한다.

<숙제>

별점 주기 기능을 추가하는 것으로 1주차 강의 마무리…

코멘트와 기록하기 버튼 사이에 만들어주면 된다.

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

- 학습 포인트(보완 사항 도출)

동일한 주차의 강의 내용은 한 번에 몰아서 듣는 것이 이해와 몰입이 더 잘되는 것 같다. 1주차 단위로 강의를 듣거나, 많으면 프로젝트 단위로 강의를 복습해야겠다.
곧 자격증 시험이 있어서 웹개발종합반 강의에 잘 집중하고 있지는 못하다. 더욱 효율적인 시간관리가 필요해보인다.

'HangHae99 > WIL' 카테고리의 다른 글

WIL 4-2. 웹개발 종합반 3주차 2회독(7월 3주차) (0)	2023.07.18
WIL 4. 웹개발 종합반 2주차 2회독(7월 3주차) (1)	2023.07.16
WIL 2-2. 웹개발 종합반 5주차(7월 1주차) (0)	2023.07.09
WIL 2. 웹개발 종합반 5주차(7월 1주차) (0)	2023.07.09
WIL 1-2. 웹개발 종합반 4주차(6월 5주차) (0)	2023.06.30

ABOUT ME

CODE WATER CODE WATER

< WIL이란? >

<HTML>

<로그인 하기 페이지의 뼈대>

<CSS 1 사용방법>

<자주 쓰는 CSS 1, 구역(상자) 만들기>

< 자주쓰는 CSS2, 위치 조정>

<폰트 사용하는 방법>

<파일 분리>

<단축키>

<스파르타 피디아: HTML, CSS 연습>

<부트스트랩>

<포스팅 박스>

<배포>

<숙제>

- 학습 포인트(보완 사항 도출)

'HangHae99 > WIL' 카테고리의 다른 글

티스토리툴바

ABOUT ME

< WIL이란? >

<HTML>

<로그인 하기 페이지의 뼈대>

<CSS 1 사용방법>

<자주 쓰는 CSS 1, 구역(상자) 만들기>

< 자주쓰는 CSS2, 위치 조정>

<폰트 사용하는 방법>

<파일 분리>

<단축키>

<스파르타 피디아: HTML, CSS 연습>

<부트스트랩>

<포스팅 박스>

<배포>

<숙제>

- 학습 포인트(보완 사항 도출)

'HangHae99 > WIL' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바