FCC : Responsive Web Design > (2) Basic CSS

정윤호·2022년 5월 10일
0

FCC_reviw

목록 보기
2/5
<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

  <div class="silver-background">
    <p>Things cats love:</p>
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <p>Top 3 things cats hate:</p>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
  </div>

  <form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, monospace;
  }

  p {
    font-size: 16px;
    font-family: monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }

  .silver-background {
    background-color: silver;
  }
</style>

css 선택자를 이용해, 스타일 바꾸기

html 만으로도 스타일링은 가능합니다.
ex)

<h2 style="color: blue;">CatPhotoApp</h2>

바로 style property를 조작함을 통해 이루어집니다.

다른 방법도 있습니다. 바로 style 블록 안에 선택자를 지정하고, 어떤 스타일링을 하고 싶은지 기입하면 되지요.
ex)

<style>
  h2 {
    color: blue;
  }
</style>
  • 위의 지정자는 html 내 모든 h2 element 를 지정합니다.
  • 우선 지정을 했다면, {} 안에 원하는 css property 에 값을 넣어 스타일링을 합니다.
  • style 블록은 <head></head> 안에 위치시켜줍니다.

html element를 지정자로 삼을 때, 내가 원치 않은 요소들까지 영향을 받을 수 있습니다.
따라서, class 및 id 등을 지정자로 삼아, 내가 스타일링하고 싶은 부분을 명시합니다.
ex)

<h2 class = "blue-text">CatPhotoApp</h2>
<style>
  .blue-text {
    color: blue;
  }
</style>
  • 보이듯이 id 의 경우 #으로 지정하고, class 의 경우 .으로 지정한다.
  • id와 class 외에도 [attr=value] 형태로 특정 attr에서 특정 값을 가진 대상만 지정할 수도 있다.

css property (font-size / font-family / width / border)

  • font-size : 지정된 element 내의 문자 크기를 정합니다.
    ex)
    여기는 25px
    여기는 40px
  • font-family : 지정된 element 내의 문자 폰트를 변경합니다.
    ex)
    여기는 sans-serif
    여기는 monospace

    구글 폰트 가져오기
    html 에 <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> 링크를 첨부하면, css에서 구글에 있는 폰트도 가져다 쓸 수 있어
    ex)

    이거는 Lobster

    걸어둔 링크의 서비스가 더 이상 제공되지 않아 해당 폰트를 사용하지 못할 경우도 있다. 이 경우를 대비하여 font-family 의 값으로 외부 폰트 외에도, 기본 폰트도 제공해야 한다.
    ex)

p {
  font-family: Lobster, sans-serif;
}
  • width : 지정된 element의 너비를 결정
    ex)
    이게 50px
    이게 100px
  • border : 지정된 element의 border를 설정, border의 색상, 두께, 스타일을 포함
    ex)
img {
  border: white 2px solid;
}
  • border-radius : 지정된 element의 border의 둥근 정도. px로 잡으면 모서리가 둥글어지고, %로 잡으면 원이나 타원이 됨
    ex)
img {
  border-radius: 10px // 50%
}
  • background-color : 지정된 element의 배경의 색을 칠함
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box blue-box">padding</h5>
</div>
<style>
  .injected-text {
    margin-bottom: -25px;
    text-align: center;
  }

  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }

  .yellow-box {
    background-color: yellow;
    padding: 20px 40px 20px 40px;
  }

  .red-box {
    background-color: crimson;
    color: #fff;
    margin: 20px 40px 20px 40px;
  }

  .blue-box {
    background-color: blue;
    color: #fff;
    margin: 40px 20px 40px 20px;
  }
</style>

padding 과 margin 설정

  • padding : padding 은 element 의 내용물과 그의 border 사이의 공간의 크기를 결정한다.

    padding 에 값을 줄 때, 단일 값만 주면 패딩(top/right/bottom/left)에 모두 동일하게 들어가지만, 4개의 값을 따로 주면 시계방향 순서대로 들어간다.

  • margin : margin 은 element 의 border와 주변 element 사이의 공간의 크기를 결정한다.

    margin 을 0보다 작게 주면, 감싸고 있는 element 의 바깥으로 벗어난다.

  • css 에서 크기를 조정하는 모든 attr의 값은 절대적인 단위와 상대적인 단위로 나뉜다.

    Absolute units 은 길이의 물리적 단위로부터 온다. px in mm 등이 해당된다.
    이들은 스크린에서 나타날 크기를 대략적으로 계산을 하기에, 스크린의 해상도에 따라 차이가 발생할 수 있다.
    Relative units 은 다른 길이 값에 상대적인 단위로 사용된다. em rem 등이 해당되는데,
    em 의 경우 부모 element 의 크기와 비교한 값으로 1.0em 의 경우 부모와 동일한 값을 가져감을 의미한다.
    rem 의 경우에는 최상단의 html element의 크기와 비교한 값이다.

css의 상속(inheritance)

모든 html에는 body tag 가 있고, body 는 모든 element 의 부모이다.
따라서, 추가적인 스타일링이 없다면, 모든 자식 element 들은 body 의 스타일을 상속받는다.

<style>
  body {
    color: green;
  }
  h1 {
    color: pink;
  }
</style>

위 처럼 element 가 여러개의 스타일을 받는 경우도 있다. 이 때에는 css의 이름처럼 더 높은 데에서(부모), 더 낮은 곳으로 (자식) 순차적으로 스타일링이 적용된다. 따라서, 가장 좁은 범위를 가진 지정자에게 적용한 스타일 값이 최종적으로 결정되는 것이다. 이거를 override 라고 함

  • override 순서 : tag > class > id > Inline Styles (태그의 style attr 로 넣은 값이 가장 아래) > !important (100% 보증, 다른 애들 다 이김)

    class 이름을 여러개 받으려면, class="class1 class2" 의 형식을 따름. 만일, 클래스 끼리 충돌이 일어난다면, 가장 나중에 받은 클래스 명이 override 함.

Hex Code 사용하기

body {
  color: #000000;
}

위 처럼 color 값에 # 와 6자리의 값을 넣는다. 각 자리의 값에는 0~9, A~F 의 값이 들어가는데, 이를 hex code 라고 함. 각 두 자리의 값에는 256 의 경우의 수가 올 수 있고, 이는 rgb 중 하나의 수준을 가리킴.
ex)
Dodger Blue #1E90FF / Green #00FF00 / Orange #FFA500 / Red #FF0000

hex code 를 짧게도 씀. 6자리 대신 3자리의 값을 사용하는 것. 만일 #FF0000 처럼 반복되는 값으로 rgb 가 표현된다면, 이는 #F00 로 단축시킬 수 있다.
ex)
Cyan #0FF / Green #0F0 / Red #F00 / Fuchsia #F0F

RGB 값 사용하기

body {
  color: rgb(0, 0, 0);
}

위 처럼 color 값에 hex code 대신 rgb 값을 바로 적용 가능.
ex)
Blue rgb(0, 0, 255) / Red rgb(255, 0, 0) / Orchid rgb(218, 112, 214) / Sienna rgb(160, 82, 45)

<div class="penguin">
  <div class="penguin-bottom">
    <div class="right-hand"></div>
    <div class="left-hand"></div>
    <div class="right-feet"></div>
    <div class="left-feet"></div>
  </div>
  <div class="penguin-top">
    <div class="right-cheek"></div>
    <div class="left-cheek"></div>
    <div class="belly"></div>
    <div class="right-eye">
      <div class="sparkle"></div>
    </div>
    <div class="left-eye">
      <div class="sparkle"></div>
    </div>
    <div class="blush-right"></div>
    <div class="blush-left"></div>
    <div class="beak-top"></div>
    <div class="beak-bottom"></div>
  </div>
</div>
<style>
  :root {
    --penguin-size: 300px;
    --penguin-skin: gray;
    --penguin-belly: white;
    --penguin-beak: orange;
  }

  @media (max-width: 350px) {
    :root {
      --penguin-size: 200px;
      --penguin-skin: black;
    }
  }

  .penguin {
    position: relative;
    margin: auto;
    display: block;
    margin-top: 5%;
    width: var(--penguin-size, 300px);
    height: var(--penguin-size, 300px);
  }

  .right-cheek {
    top: 15%;
    left: 35%;
    background: var(--penguin-belly, white);
    width: 60%;
    height: 70%;
    border-radius: 70% 70% 60% 60%;
  }

  .left-cheek {
    top: 15%;
    left: 5%;
    background: var(--penguin-belly, white);
    width: 60%;
    height: 70%;
    border-radius: 70% 70% 60% 60%;
  }

  .belly {
    top: 60%;
    left: 2.5%;
    background: var(--penguin-belly, white);
    width: 95%;
    height: 100%;
    border-radius: 120% 120% 100% 100%;
  }

  .penguin-top {
    top: 10%;
    left: 25%;
    background: var(--penguin-skin, gray);
    width: 50%;
    height: 45%;
    border-radius: 70% 70% 60% 60%;
  }

  .penguin-bottom {
    top: 40%;
    left: 23.5%;
    background: var(--penguin-skin, gray);
    width: 53%;
    height: 45%;
    border-radius: 70% 70% 100% 100%;
  }

  .right-hand {
    top: 5%;
    left: 25%;
    background: var(--penguin-skin, black);
    width: 30%;
    height: 60%;
    border-radius: 30% 30% 120% 30%;
    transform: rotate(130deg);
    z-index: -1;
    animation-duration: 3s;
    animation-name: wave;
    animation-iteration-count: infinite;
    transform-origin:0% 0%;
    animation-timing-function: linear;
  }

  @keyframes wave {
      10% {
        transform: rotate(110deg);
      }
      20% {
        transform: rotate(130deg);
      }
      30% {
        transform: rotate(110deg);
      }
      40% {
        transform: rotate(130deg);
      }
    }

  .left-hand {
    top: 0%;
    left: 75%;
    background: var(--penguin-skin, gray);
    width: 30%;
    height: 60%;
    border-radius: 30% 30% 30% 120%;
    transform: rotate(-45deg);
    z-index: -1;
  }

  .right-feet {
    top: 85%;
    left: 60%;
    background: var(--penguin-beak, orange);
    width: 15%;
    height: 30%;
    border-radius: 50% 50% 50% 50%;
    transform: rotate(-80deg);
    z-index: -2222;
  }

  .left-feet {
    top: 85%;
    left: 25%;
    background: var(--penguin-beak, orange);
    width: 15%;
    height: 30%;
    border-radius: 50% 50% 50% 50%;
    transform: rotate(80deg);
    z-index: -2222;
  }

  .right-eye {
    top: 45%;
    left: 60%;
    background: black;
    width: 15%;
    height: 17%;
    border-radius: 50%;
  }

  .left-eye {
    top: 45%;
    left: 25%;
    background: black;
    width: 15%;
    height: 17%;
    border-radius: 50%;
  }

  .sparkle {
    top: 25%;
    left:-23%;
    background: white;
    width: 150%;
    height: 100%;
    border-radius: 50%;
  }

  .blush-right {
    top: 65%;
    left: 15%;
    background: pink;
    width: 15%;
    height: 10%;
    border-radius: 50%;
  }

  .blush-left {
    top: 65%;
    left: 70%;
    background: pink;
    width: 15%;
    height: 10%;
    border-radius: 50%;
  }

  .beak-top {
    top: 60%;
    left: 40%;
    background: var(--penguin-beak, orange);
    width: 20%;
    height: 10%;
    border-radius: 50%;
  }

  .beak-bottom {
    top: 65%;
    left: 42%;
    background: var(--penguin-beak, orange);
    width: 16%;
    height: 10%;
    border-radius: 50%;
  }

  body {
    background:#c6faf1;
  }

  .penguin * {
    position: absolute;
  }
</style>

css 에서 변수 사용하기, 변수의 상속

  :root {
    --penguin-size: 300px;
    --penguin-skin: gray;
    --penguin-belly: white;
    --penguin-beak: orange;
  }

--variable-name: value; 의 형식을 따라, 반복되는 값을 변수로 지정해준다. 이러면 이제, 펭귄의 사지의 색을 일일이 바꾸지 않고, 최상단의 변수 값만 변화를 주면 간단히 바꿀 수 있다.

생성한 변수를 refer 하기 위해서는 var(--variable-name) 의 형태로 불러온다.

background: var(--penguin-skin);

변수를 찾는데 실패하는 상황이 생길 수도 있다. 이러면, 변수가 지정한 값 대신에 default 로 일괄처리 된다. 이 경우에 fallback value 를 설정하면, 펭귄이 대머리가 되는 참사는 회피할 수 있다. 폴백 변수는 다음과 같이 준다.

background: var(--penguin-skin, black);

이 경우 변수 펭귄 껍질을 불러오지 못한 경우에라도, 검정색의 값을 대신 쥐어주기라도 할 수는 있게 된다.

인터넷 익스플로어는 css 변수를 지원하지 않는다.

변수를 지정자 내에 생성하여, 그 지정자와 자식들 안에서 변수의 사용이 가능하다. 변수의 상속이 일어났기 때문이다.
:root 라는 가짜 class 지정자를 이용하면, html에서 변수를 생성한 의미를 가지게 된다. 즉, css 에서 어느 지정자를 사용하든지, 설정한 변수를 불러오는 것이 가능하다.
like 전역변수

but 특정 지정자 안에서 변수의 값을 변경할 수 있다. 이때, 다른 모든 요소에서는 전역 변수에서 지정한 값으로 적용되지만, 해당 지정자에 한해서는 변수가 다른 값으로 기능한다.
ex)

  :root {
    --penguin-skin: gray;
    --penguin-belly: pink;
    --penguin-beak: orange;
  }
  .penguin {
    --penguin-belly: white;
  }

media query 사용해서 변수 바꾸기

  @media (max-width: 350px) {
    :root {
      --penguin-size: 200px;
      --penguin-skin: black;
    }
  }

css 변수를 사용하면, media query 를 간단하게 설정할 수 있다.
스크린 및 창의 크기에 따라 각각의 요소에 변화를 주는게 미디아 쿼리의 역할인데, 변수의 값에만 변화를 주니 코드가 훨씬 단순하고 짧아진다.

profile
정윤호
우리 인생 화이팅~
이전 포스트

FCC : Responsive Web Design > (1) Basic HTML and HTML5

다음 포스트

FCC : Responsive Web Design > (3) Applied Visual Design

0개의 댓글