[포스코x코딩온] 웹개발자 풀스택 부트캠프8기

[포스코x코딩온] CSS의 속성

항상 발전하는 개발자 2023. 7. 6. 19:49
728x90

CSS의 속성

  • font-weight: 글자의 두께, 기본(normal, 400), 두껍게(bold, 700), 100단위로 9개 있음.
  • font-size: 글자의 크기, 기본(16px), 단위(px, em, rem 등)
  • line-height: 한 줄의 높이, 행간과 유사(숫자: 요소 글꼴 크기의 배수로 지정, px,em,rem등)
  • 글꼴: 구글 폰트(폰트 선택 후 ->remove Regular 400 클릭 -> <link> 복사 후 head파일 안에 링크 넣기 -> CSS rules to specify families 복사 후 스타일 태그 안에 넣기) 
<link rel="preconnect" href="https://fonts.googleapis.com" />

.google {
        font-family: "Fasthand", cursive;
        color: #1818dd;
      }

  • 글꼴:눈누 폰트(웹폰트로 사용 복사 -> 스타일태그 안에 붙여넣기 -> 클래스 스타일에 font-family복붙하기)
@font-face {
        font-family: "TTWanjudaedunsancheB";
        src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/TTWanjudaedunsancheB.woff2")
          format("woff2");
        font-weight: 700;
        font-style: normal;
      }
      
.noon {
        font-family: "TTWanjudaedunsancheB";
      }

  • color: 글자의 색상
  • text-align: 정렬 방식
  • text-decoration: 문자 장식선(none:장식 없음/underline:밑줄/overline:윗줄/line-through:중앙선)
  • Inline 요소: 요소가 수평으로 쌓임, 크기가 콘텐츠 크기로 고정됨(대표: span)
  • Block 요소: 요소가 수직으로 쌓임, 크기를 지정할 수 있음(대표: div)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span {
        background-color: orange;
      }
      div {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <span style="width: 100px">Hello</span>
    <span style="height: 200px">world</span>
    <br />
    <br />
    <div style="width: 100px">Hello</div>
    <div style="height: 200px">world</div>
  </body>
</html>

이처럼 lnline요소는 크기를 지정해도 콘텐츠의 크기만큼 표시되고 Block요소는 크기를 지정해 줄 수 있다.

  • Inline-block요소: inline요소와 block요소의 특징을 합친 것
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: auto;
        height: 200px;
        background-color: orange;
      }
      span.HTML {
        display: inline-block;
        background-color: rgb(0, 234, 255);
        width: 200px;
        height: 100px;
      }
      span.CSS {
        display: inline-block;
        background-color: green;
        width: 200px;
        height: 100px;
        margin-left: 30px;
      }
      span.Javascript {
        display: inline-block;
        background-color: red;
        width: 200px;
        height: 100px;
        margin-left: 30px;
      }
    </style>
  </head>
  <body>
    <div>
      <span class="HTML">HTML</span>
      <span class="CSS">CSS</span>
      <span class="Javascript">Javascript</span>
    </div>
  </body>
</html>

옆으로 나열하기 위해 inline요소가 필요하고 크기를 지정하기 위해 block요소가 필요함으로 display:inline-block을 사용함.

margin & padding

  • margin: 다른 요소와의 거리, 바깥쪽 여백

숫자의 갯수에 따라서 의미가 다르다. 개별속성으로 margin-top, margin-bottom, margin-left, margin-right 사용가능

  • padding: border와 content 간의 안쪽 여백

margin과 사용방법은 같다.

span {
        background-color: orange;
        margin: 50px 20px 30px 50px;
        padding: 10px 20px 30px 50px;
      }

margin을 사용하여 요소간의 간격을 띄운것을 확인할 수 있고, padding을 사용하여 콘텐츠와 boad사이의 간격을 줄 수 있다.

 

이 그림이 한눈에 이해하기 편하다.

  • width, height: 요소의 가로, 세로 너비(max- / min-을 통해 최대 최소로 지정가능)
  • Calc(): 사용자가 원하는 크기 값을 계산하여 실시간으로 적용한다.(사칙연산 앞 뒤로 띄어쓰기 필수)
  • line-height: 영역 요소 내부 컨텐츠 글자의 줄 높이 / Box model의 크기 단위 적용이 가능
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: bisque;
      }
    </style>
  </head>
  <body>
    <div style="height: 100vh">
      <div
        style="
          background-color: blue;
          width: 10vh;
          height: 10vh;
          margin: auto;
          margin-top: calc(50vh - 5vh);
          text-align: center;
          line-height: 10vh;
        "
      >
        KDT
      </div>
    </div>
  </body>
</html>

vh는 세로 / vm은 가로를 의미한다.

Border (작성법 -> border:두께 종류 색상)

  • border-width: 선의 두께(medium, thin, thick)
  • border-style: 선의 종류(none:선 없음 / solid:실선 / dotted:점선 / dashed:파선 / double:두줄선 / groove:홈이 파져있는 모양 / ridge:솟은 모양 / inset:요소 전체가 들어간 모양 / outset:요소 전체가 나온 모양)
  • border-color: 색상 지정(transparent: 투명)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div
      style="
        border-width: 5px 20px 35px 50px;
        border-style: dotted dashed solid double;
        border-color: red blue green yellow;
        width: 50vh;
        height: 50vh;
      "
    >
      만들어보자!
    </div>
  </body>
</html>

숫자 개수에 따른 선택되는 위치는 margin과 padding이랑 같다.

  • border-radius: 모서리 둥글게
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div
      style="
        border-width: 5px 20px 35px 50px;
        border-style: dotted dashed solid double;
        border-color: red blue green yellow;
        width: 50vh;
        height: 50vh;
        border-radius: 0px 50px 150px 300px;
      "
    >
      만들어보자!
    </div>
  </body>
</html>

border-radius 사용

Box-sizing(요소의 크기 계산 기준)

  • content-box: 요소의 내용(content)으로 크기 계산
  • border-box: 요소의 내용 + padding + border로 크기 계산
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- box-sizing의 두개의 차이(border-box는 ) -->
    <div
      style="
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 15px solid red;
        background-color: orange;
        box-sizing: border-box;
      "
    ></div>
    <div
      style="
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 15px solid red;
        background-color: orange;
        box-sizing: content-box;
      "
    ></div>
  </body>
</html>

border-box의 경우 : 총 width가  content+padding(20X2)+border(15X2) = 100이고

content-box의 경우 : 총 width가 content(100)+padding(20X2)+border(15X2) = 170이다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

요소를 숨기는 3가지

  • opacity: 모습만 숨기는 방법 / 속성 남음 / 자리 차지 / 0~1 사이의 소수점 숫자
  • visibility:hidden : 모습과 속성을 숨기는 방법 / 자리 차지
  • display:none : 그냥 없애 버리는 방법 / 자리도 사라짐
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .square {
        background-color: blue;
      }
      .d-none {
        display: none;
        background-color: blue;
      }
      .invisible {
        visibility: hidden;
        background-color: blue;
      }
      .opacity-0 {
        opacity: 0.5;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="square">original</div>
    <div class="square d-none">d-none</div>
    <div class="square invisible">invisible</div>
    <div class="square opacity-0">opacity-0</div>
    <div class="square">original</div>
  </body>
</html>

display:

display:none으로 모습, 속성 그리고 자리가 사라짐

visibility:hidden으로 모습과 속성만 사라짐

opacity: 0.5으로 투명해짐

 

 

 

  • overflow: 요소의 크기 이상으로 내용이 넘칠 때, 보여짐을 제어함(visible: 넘친 내용을 그대로 보여줌 / hidden: 넘친 내용을 잘라냄 / scroll: 넘친 내용을 잘라냄, 스크롤바 생성 / auto: 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성 / x, y로 개별 제어도 가능)

설문조사 폼 꾸미기(CSS기본 + 속성)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      textarea {
        border: 5px solid;
        border-radius: 0 0 50% 50%;
      }
      textarea:focus {
        background-color: gray;
      }
      body {
        background-color: aqua;
      }
      .submit {
        background-color: black;
        color: aliceblue;
      }
      input.submit:hover {
        background-color: red;
        color: black;
      }
      .age {
        margin-left: 210px;
        font-size: larger;
        font-weight: bold;
      }
      p {
        margin-left: 100px;
        font-size: larger;
        font-weight: bold;
      }
      .ages {
        margin-left: 10px;
      }
      .class {
        margin-left: 70px;
      }
      input:focus {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <span style="text-align: center">
      <h1>설문조사</h1>
    </span>
    <br />
    이름<input type="text" /> 이메일<input
      class="email"
      type="text"
      value="love@example.com"
    />
    <p class="age">나이</p>
    <input type="radio" name="ages" value="10" class="ages" />10대
    <input type="radio" name="ages" value="20" class="ages" checked />20대
    <input type="radio" name="ages" value="30" class="ages" />30대
    <input type="radio" name="ages" value="40" class="ages" />40대
    <input type="radio" name="ages" value="50" class="ages" />50대
    <input type="radio" name="ages" value="60" class="ages" />60대 이상
    <br />
    <p>원하는 강의(복수응답가능합니다.)</p>
    <input type="checkbox" name="class" value="html" class="class" />html
    <input
      type="checkbox"
      name="class"
      value="javascript"
      class="class"
    />javascript
    <input type="checkbox" name="class" value="css" class="class" />css
    <br />
    <textarea
      cols="60"
      rows="10"
      placeholder="하고 싶은 말을 써주세요!"
    ></textarea>
    <input class="submit" type="button" value="제출" />
  </body>
</html>

 

아직까지 배웠던 CSS를 사용하기 위하여 자료들을 다시 찾아서 사용하지만 어떠한 기능들이 CSS에 있다는 것을 인지하게 되었고 내가 원하는 방향의 디자인(한 75% 정도...)을 할 수 있게 되었다. 

Github코드(230706폴더):  https://github.com/DongHo-Kang/KDT-8-web.git

 

GitHub - DongHo-Kang/KDT-8-web

Contribute to DongHo-Kang/KDT-8-web development by creating an account on GitHub.

github.com

 

728x90