🥳웹개발) 단일 상품판매페이지(?) 만들기(프런트 문외자)

hiereit·2021년 9월 13일

CSS TIL bootstrap frontend html 기초 웹개발시리즈

웹개발

목록 보기

1/2

백엔드만 배워서 프론트엔드는 문외하여 이번에 기초를 다져보자 하고 여러가지를 만들기로 해보았다.

HTML / CSS / JS 기초다지기 (놓쳤던 것, 몰랐던거 보충)

결과물 : 배운것들 짬뽕해서 허접한 쇼핑판매 페이지 한쪽을 만들어봤다.

1. HTML

html은 PASS~!
나중에 새로 알게된 부분이 있으면 추가하겠다...

2. CSS

(1) block요소 (?) , 텍스트 요소 (?)

block요소 vs inline요소 - 참조링크

block요소
줄바꿈이 일어나는 태그. width, height, margin, padding 등을 사용하여 형태 변형이 가능한 요소.
대표적으로 h1, h2, h3, h4, h5, h6, hr, table, p, ul, ol등 이 있다.
inline요소
인라인 요소 다음에는 줄바꿈이 없고, 우측으로 바로 이어서 표시가 됨. 임의로 width, height로 변형 불가능. line-height로 줄의 높낮이를 조절하고, text-align으로 텍스트의 중앙, 좌,우측 정렬 가능
대표적으로 a, b, br, button, img, input, label,small,select, span, strong, textarea등이 있다.

block요소 다음에 이어서 하고 싶을 때

//ex) <h2>안녕하세요</h2> 옆에 바로 '안녕'이라는 텍스트를 붙이고 싶다.
<style>
	h2 {
    	display:inline;
    }
</style>

inline요소 다음에 줄바꿈하고 싶거나 중간정렬이 안될 때!

sol1) <br>태그가 와따임...
sol2) 
<style>
.newImg {
   	display:block;
	margin:auto;
}
</style>

(2) 웹폰트 적용법 두가지

- @import style태그 안에 적기
눈누에 들어가서 원하는 폰트 선택 후, 체크된 곳을 눌러서 복사한다.
복사한 내용을 style태그 안에 적고, 전체 스타일 적용하면 끝!

<style>
@font-face { /*style태그 안에 적고*/
    font-family: 'SBAggroB';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
* { /*전체 스타일 적용하면 끝!*/
	font-family: 'SBAggroB';
}
</style>

link태그 사용하기
구글웹폰트는 위 import 링크도 제공한다.

빨간줄 친곳을 눌러서 클릭.

1번화살표 선택하면, 위 @import방법으로 사용가능하고,
2번화살표 link태그를 통한 폰트 적용이 가능 (아래코드는 link태그를 이용한 방법)
head안에 복붙해서 넣고(style태그에 넣는 거 아님!), style태그안에 빨간네모내용 전체 스타일 적용하면 끝!

<head> <!--head--> 안에 작성하고
    <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=Noto+Sans+KR:wght@100&display=swap" rel="stylesheet">
    <style>
      * { /*전체 스타일 적용하면 끝!*/
          font-family: 'Noto Sans KR', sans-serif;
      }
    </style>
</head>

이후에 더 추가해야지...

3. JavaScript

Pass~! python이랑 너무 비슷함...

4. 결과물

처음 (HTML만 작성)

처음은,, 앨범 판매ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
중간과정 - CSS추가 및 폰트 적용, 사이즈 조절, bootstrap에서 더 나은 요소로 바꿔치기
최종결과물(?) - 갑자기 콘서트 티켓판매로 노선 변경
결론 : 시간 제일 잡아먹는 거는 색깔이랑 웹폰트 정하는 거 ^^ 너무 프론트 등지고 살았음을 느낌.... 쥐어짜낸게 이정도다... 개구리🐸 걸걸^^

코드

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

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>SNSD_Concert</title>

    <style>
        @font-face {
            font-family: 'EliceDigitalBaeum_Bold';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/EliceDigitalBaeum_Bold.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }
        * {
            font-family: 'EliceDigitalBaeum_Bold';
        }
        .wrap {
            width:450px;
            margin:20px auto 20px auto;
            padding: 5px;

            border: 2px double darkgrey;
            border-radius: 3px;
        }
        .albumImg{
            width:100%;
            margin:auto;
            display:block;
        }
        a:hover{
            color:#c60063;
        }
        .itemTitle{
            color:#FF69B4;
        }
        h4{
            display: inline;
        }
        .orderBtn{
            margin:auto;
            display: block;
        }
        .priceSpan{
            font-size: 14px;
        }
    </style>
    <script>
        function clickOrder(){
            alert('주문 완료!')
        }

    </script>
</head>

<body>
    <div class="wrap">
        <img class="albumImg"
             src="https://pds.joongang.co.kr//news/component/htmlphoto_mmdata/201710/11/f5c58ddf-b617-44c0-aa23-e70da084bbcf.jpg"><br>
        <h4>[공연] <a class="itemTitle" href="https://www.smentertainment.com/Entertainment/ArtistProfile/305?Code=&Page=">소녀시대 ‘Holiday Night’</a></h4>
         &nbsp <span class="priceSpan">가격:90,000</span>
        <p><br>
            K-Pop 여왕의 귀환!<br>
            15주년 기념 다채로운 무대, 즐겨보세요!<br>
            소녀시대, 코로나 이후 첫 콘서트 ‘Holiday Night’!<br>
        </p>

        <!--폼폼-->
        <div>
            <!--주문자이름입력-->
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">이름</span>
                </div>
                <input type="text" class="form-control" placeholder="주문자 이름을 입력하세요" aria-label="Username"
                       aria-describedby="basic-addon1">
            </div>
            <!--좌석 dropdown-->
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <label class="input-group-text" for="inputGroupSelect01">좌석</label>
                </div>
                <select class="custom-select" id="inputGroupSelect01">
                    <option selected>-- 좌석을 선택하세요 --</option>
                    <option value="1">스탠딩석 (+60,000)</option>
                    <option value="2">2층 (+30,000)</option>
                    <option value="3">3층 (+0)</option>
                </select>
            </div>
            <!--주소 입력-->
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon2">주소</span>
                </div>
                <input type="text" class="form-control" placeholder="티켓을 수령할 주소를 입력하세요" aria-label="Username"
                       aria-describedby="basic-addon2">
            </div>
            <!--버튼-->
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon3">전화번호</span>
                </div>
                <input type="text" class="form-control" placeholder="전화번호를 입력하세요" aria-label="Username"
                       aria-describedby="basic-addon3">
            </div>
            <button type="submit" onclick="clickOrder()" class="orderBtn btn btn-outline-danger">주문하기</button>
        </div>
    </div>
</body>
</html>

hiereit

Just Do It

다음 포스트

🥳웹개발) 단일 상품판매페이지(?) 만들기(프런트 문외자)

웹개발

1. HTML

2. CSS

(1) block요소 (?) , 텍스트 요소 (?)

block요소 vs inline요소 - 참조링크

block요소 다음에 이어서 하고 싶을 때

inline요소 다음에 줄바꿈하고 싶거나 중간정렬이 안될 때!

(2) 웹폰트 적용법 두가지

3. JavaScript

4. 결과물

코드

😺웹개발) 카카오지도api를 사용해 추억공유 페이지 만들기(feat.스파르타코딩)

0개의 댓글