15일차(2022.01.12 5시간 11분)

roadzmoon76·2022년 1월 12일
0

매일 공부

목록 보기
16/217

코딩알려주는누나 html/css Chapter6 - Spotify 웹사이트 만들기

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
  </head>
  <body>
    <nav>
      <img src="https://import.cdn.thinkific.com/523761/courses/1473531/logo-210901-223656.png" width=132 height=44.98>
      <div>
        <a href="#" class="nav-item">Premium</a>
        <a href="#" class="nav-item">Support</a>
        <a href="#" class="nav-item">Download</a>
        <span>ㅣ</span>
        <a href="#" class="nav-item">Sign up</a>
        <a href="#" class="nav-item">Log in</a>
      </div>
    </nav>

    <main>
      <div>
        <div class="headline">
          <div class="headline-first">
            Listening is
          </div>
          <div>
            everything
          </div>
        </div>
        <div class="sub-headline">
          Millions of songs and podcasts. No credit card needed.
        </div>
        <div class="button-area">
          <button class="button-style">Get Spotify free</button>
        </div>
      </div>
    </main>

    <footer>
      <div class="container">
        <div class="footer-menu">
          <div class="first-box">
            <div>
              <img src="https://import.cdn.thinkific.com/523761/courses/1473531/logo-210901-223656.png" width=132 height=44.98>
            </div>
            <div class="column">
              <div class="sub-title">COMPANY</div>
              <a href="#" class="footer-menu-item">About</a>
              <a href="#" class="footer-menu-item">Jobs</a>
              <a href="#" class="footer-menu-item">For the Record</a>
            </div>
            <div class="column">
              <div class="sub-title">COMMUNITIES</div>
              <a href="#" class="footer-menu-item">For Artists</a>
              <a href="#" class="footer-menu-item">Developers</a>
              <a href="#" class="footer-menu-item">Advertising</a>
              <a href="#" class="footer-menu-item">Investors</a>
              <a href="#" class="footer-menu-item">Vendors</a>
            </div>
            <div class="column">
             <div class="sub-title">USEFUL LINKS</div>
             <a href="#" class="footer-menu-item">SUpport</a>
             <a href="#" class="footer-menu-item">Web Player</a>
             <a href="#" class="footer-menu-item">Free Mobile App</a>
            </div> 
          </div>
          <div class="second-box">
            <div class="icon-box">
              <i class="fab fa-instagram icon"></i>
            </div>
            <div class="icon-box">
              <i class="fab fa-twitter icon"></i>
            </div>
            <div class="icon-box">
              <i class="fab fa-facebook-f icon"></i>
            </div>
          </div>
        </div>
        <div class="first-line">
          <i class="fas fa-globe-africa"></i>USA
        </div>
        <div class="second-line">
          <div>
            <a href="#" class="second-line-item">Legal</a>
            <a href="#" class="second-line-item">Privacy Center</a>
            <a href="#" class="second-line-item">Privacy Policy</a>
            <a href="#" class="second-line-item">Cookies</a>
            <a href="#" class="second-line-item">About Ads</a>
            <a href="#" class="second-line-item">Additional CA Privacy Disclosures</a>
          </div>
          <div>
           © 2021 Spotify AB  
          </div>
        </div>
      </div>
    </footer>
  </body>
</html>

css

body{
  margin: 0px;
  font-family: spotify-circular, Helvetica, Arial, sans-serif;
  color: white;
}

nav{
  height: 80px;
  background-color: black;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

main{
  height: 968px;
  background-color: #2941AB;
  background-image: url(https://www-growth.scdn.co/static/home/bursts.svg);
  background-size: 175%;
  background-position: 46% 4%;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer-main{
  height: 530px;
  background-color: black;
}

a{
  color: white;
  text-decoration: none;
}

a:hover{
  color: #1ed760;
}

.nav-item{
  padding: 28px 17px;
  font-weight: 700;
}

.headline{
  font-size: 156px;
  font-weight: 900;
  color: #1ed760;
  position: relative;
  left: 225px;
  padding-bottom: 40px;
}

.headline-first{
  position: relative;
  left: -2.5em;
}

.sub-headline{
  color: #1ed760;
  text-align: center;
  font-size: 18px;
  line-height: 24px;
  padding-bottom: 40px;
}

.button-area{
  text-align: center;
}

.button-style{
    padding: 14px 32px;
    background-color: #1ed760;
    border-radius: 500px;
    font-size: inherit;
    color: #2941ab;
    font-weight: 700;
    border: none;
}

.button-style:hover{
  transform: scale(1.07);
  background-color: #2de26d;
}

footer{
  height: 530px;
  background-color: black;
  display: flex;
  justify-content: center;
}

.container{
  max-width: 1170px;
  width: 100%;
  padding-top: 80px;
  padding-bottom: 50px;
}

.footer-menu{
    display: flex;
    justify-content: space-between;
    height: 346px;
}

.first-box{
  width: 60%;
  display: flex;
  justify-content: space-between;
}

.second-box{
  width: 40%;
  display: flex;
  justify-content: flex-end;
}

.column{
  display: flex;
  flex-direction: column;
  padding: 0 15px;
}

.sub-title{
  color: #919496;
  font-weight: 900;
  margin: 20px 0px;
}

.footer-menu-item{
  padding-bottom: 15px;
  padding-top: 3px;
  font-size: 16px;
}

.icon-box{
  width: 54px;
  height: 54px;
  background-color: #222322;
  border-radius: 50%;
  margin-right: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon{
  font-size: 24px;
}

.icon:hover{
  color: #2de26d;
}

.first-line{
    color: #919496;
    display: flex;
    justify-content: flex-end;
    font-size: 12px;
}

.second-line{
  color: #919496;
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.second-line-item{
  margin-right: 24px;
  color: #919496;
}

Spotify 사이트 완성링크

Chapter7. 부트스트랩 기본

부트스트랩 Grid와 Container에 대해 배움

부트스트랩 Grid

웹사이트를 격자무늬로 나누어 보고 요소를 배치하는 기술

화면사이즈에 따라 격자구조를 바꿀수있음

한줄은 12개의 컬럼

줄을 나타내는 스타일은 row, 컬럼을 나타내는 스타일은 col

따라서 항상 row 안에 col이 있음

<div class="row">
 <div class="col">
 </div>
</div>

col-3, col-6, col-12 와 같이 col 뒤에 숫자를 둬서 해당 컬럼의 사이즈 조절 가능(한 row에 있는 모든 col의 합이 12를 넘으면 다음줄로 넘어감)

col-sm-12 / col-md-6 / col-lg-3 과 같이 화면사이즈마다 다른 사이즈를 컬럼에 줄 수 있음(모바일로 볼때 특히 유용)

부트스트랩 container

애플 홈페이지를 보면 좌우여백이 있고 가운데에 주로 내용이 있음

이런식으로 보기좋게 화면의 요소를 가운데로 모아주고 싶을 떄 씀

사용법은 row를 container로 감싸주면 됨

<div class="container">
 <div class="row">
  <div class="col">
  </div>
 </div>
</div>

주의!!!!
내가 만든 css가 부트스트랩이 만든 css 보다 밑에 가있어야 함!!!
(나중에 온 css이 그전껄 오버라이트함!!!)

들여쓰기는 탭과 쉬프트탭으로 조정!!

코딩하면서 비슷한 구조부분들 동시에 누르는법 : 블락처리(드래그)후 ctrl(cmd) + d 누르면 됨

Chapter8-2 부트스트랩을 이용한 쇼핑몰 웹사이트 만들기 까지 공부함

JAVASCRIPT

let color = "black"
color = "black"
const color = "black"

let : 변수를 선언하는 것(let을 안쓰면 기존에 있는걸 가져다 써서 바꿈)

var : 변수를 선언하는것(자바 첨 나왔을때부터 있었는데 호이스팅과 같은 문제가 있어서 이젠 안씀)

const : 변수를 선언하는 것(변수에 있는 값을 바꾸는게 불가 비밀번호등에 사용)

color : 변수 이름(변수의 id) 겹치면 안됨!! 하나만 있어야함!!

= : 같다라는 의미가 아니라, 프로그래밍에선 오른쪽에 있는 값을 왼쪽에 집어넣는다(color라는 박스안에 black을 담는다)

console.log(color)

콘솔에다 로그를 찍겠다는 컴퓨터 언어

변수이름을 잘못쓰게되면 에러가 날수 있으니 복붙 습관을 기르자!!

profile
roadzmoon76
크론병걸린 자퇴생, 개발자되기
이전 포스트

14일차(2022.01.11 4시간) 바닐라코딩 사전 학습 가이드 STEP 1 Google Clone 완성

다음 포스트

16일차(2022.01.13 2시간 51분)

0개의 댓글