[CSS] CSS 2장. css 값과 단위, overflow, 이미지, 미디어 양식 요소, 표 스타일링,

 

1.CSS 값과 단위 

css 규칙은 선언으로 구성되어 있으며, 속성과 값으로 구분되어 있습니다. 각 속성은 어떤 종류의 값을 가질 수 있는지를 설명하는 값 유형을 가집니다. 다음 예제에 키워드를 사용해 머리글의 색상의 설정하고 rgb() 함수를 사용해 배경색을 넣어 보겠습니다.

h1 {
    color: yellow;
    background-color: rgb(197,93,161);
}

 

 

CSS 값은 허용가능한 하윗값 모음을 정의하는 방법으로 유효한 것으로 표시되면 키워드, 16진수 값 rgb() 함수 등 어떤 색상 값을 사용할 수 있는지 궁금할 필요가 없고, 사용 가능한 color 값은 브라우저에서 지원하고 있습니다.

색상 선택도구

 

W3Schools.com

 

<div class="wrapper">
     <div class="box pink">핑크색 박스</div>
     <div class="box strong">큰 박스</div>
     <div class="box small">작은 박스</div>
</div>

.box {
    border: 10px solid bisque;
    padding :20px;
    margin: 30px auto;
    border: 5px solid darkcyan;
    width: 100%;
}

.wrapper {
    width:100%;
    max-width:1300px;
    margin: auto;
    font-size: 0.85rem;
    text-align: center;
    padding: 10px 0px;
}


.pink {
    width:200px;
    background-color: pink;
}

.strong {
    width: 30vw;
    background-color: aliceblue;
}

.small {
    width: 10em;
    background-color:aqua;
}

 

ems 및 rems

 

em과 rem은 박스에서 텍스트로 크기 조정 시 가장 자주 발생하는 두 개의 상대 길이이며, 텍스트 스타일링 또는 CSS 레이아웃과 같은 보다 복잡한 주제를 시작할 때, 이러한 작동 방식과 차이점을 이해하는 것이 좋습니다.

<ul class="ems">
        <li>첫번째</li>
        <li>두번째</li>
        <li>
            세번째
            <ul>
                <li>세번째 A</li>
                <li>세번째 B
                    <ul>
                        <li>세번째 B 2</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <ul class="rems">
        <li>One</li>
        <li>Two</li>
        <li>
            Three
            <ul>
                <li>Three A</li>
                <li>
                    Three B
                    <ul>
                        <li>Three B 2</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

html {
    font-size:17px;
}

.ems li {
    font-size: 1.3em;
}

.rems li {
    font-size: 1.4rem;
}

 

 

 

백분율 

 

많은 경우 백분율을 길이와 같은 방식으로 처리되며 백분율이 있는 것은 항상 다른 값에 상대적으로 설정된다는 것입니다. 예를 들어 font-size를 백분율로 설정하면 요소 부모의 글꼴 크기에 대한 백분율이 되고, width값에 백분율을 사용하면 부모너비의 백분율이 됩니다.

<div class="box px">200px 박스</div>
<div class="box percent">40% 크기의 박스</div>
<div class="wrapper">
     <div class="box px">200px 박스</div>
     <div class="box percent">40% 크기의 박스</div>
</div>

.box {
    background-color: lightcyan;
    border: 5px solid darkcyan;
    padding: 10px;
    margin: 10em 0;
    width:100%;
}

.wrapper {
    max-width:400px;
    border: 5px solid darkgoldenrod;
    margin: 0.5em auto;
}

.px {
    max-width: 200px;
    margin: 0.9em auto;
}

.percent {
    max-width: 200px;
    margin: auto;
}

숫자

 

일부 값은 단위를 추가하지 않고 숫자를 허용합니다. 단위가 없는 숫자를 허용하는 속성의 예는 요소의 불투명도를 제어하는 opacity 속성으로 0과 1사이의 숫자만 허용합니다.

<div class="wrapper">
     <div class="box">Opacity Test</div>
</div>

.wrapper {
    background-image: url(https://tistory1.daumcdn.net/tistory/4378825/attach/efb2b36311654248981530cc8bbf593a);
    background-repeat: no-repeat;
    background-position: bottom;
    padding: 20px;
    width:100%;
}

.box {
    margin: 20px auto;
    max-width: 150px;
    background-color: aqua;
    border: 5px solid darkblue;
    padding: 10px;
    opacity: 0.6;
}

색상

 

css에서 색상을 지정하는 방법은 여러가지 있습니다. 텍스트 색상, 배경 색상 등을 지정하든 상관 없이 CSS의 모든 위치에서 동일한 색상 값을 사용할 수 있습니다. 최신 컴퓨터에서 사용할 수 있는 표준 색상 시스템은 24bit(24비트)며, 채널 당

 

256개의 서로 다른 값(256 x 256 x 256 = 16,777,216)을 갖는 서로 다른 빨강, 녹색 및 파랑 채널의 조합을 통해 약 1670만 개의 고유한 색상을 표시할 수 있습니다.

 

색상 키워드를 사용한 값

<div class="wrapper"> 
       <div class="box one">antiquewhite</div>
       <div class="box two">blueviolet</div>
       <div class="box three">sandybrown</div>
</div>

.box {
    padding: 10px;
    margin: 0.5em 0;
    border-radius: 0;
}

.one {
    background: antiquewhite;
}

.tow {
    background: blueviolet;
}

.three {
    background: sandybrown;
}

 

 

16진수 RGB 값

 

각 16진수 값은 hash/round 기호 (#)와 6개의 16진수로 구성되며, 각 16진수는 0과 f(15를 나타냄) 사이 16개 값 중 하나를 사용할 수 있으므로 0123456789abcdef 입니다. 각 값 쌍은 채널 중 하나 빨강, 녹색 및 파랑을 나태내며 각각의 대해 256개의 사용 가능한 값(16 x 16 = 256)을 지정할 수 있습니다. 

 <div class="wrapper">
     <div class="box b8">#02798b</div>
     <div class="box a1">#c55da1</div>
     <div class="box d7">#128a7d</div>
</div>

.box {
    padding: 10px;
    margin: 0.5em 0;
    border-radius: 0;
}

.one {
    background: antiquewhite;
}

.tow {
    background: blueviolet;
}

.three {
    background: sandybrown;
}

.b8 {
    background-color: #02798b;
}

.a1 {
    background-color: #c55da1;
}

.d7 {
    background-color: #128a7d;
}

 

RGB 및 RGBA 값

 

RGB 값은 rgb() 함수로 시작하고, 이 값은 16진수 값과 거의 같은 방식으로 세 개의 매개 변수가 제공됩니다. RGB와 차이점은 각 채널이 2개의 16진수가 아닌 0~225사이의 10진수로 표현하여 다소 이해하기 쉽습니다.

 

<div class="wrapper">
      <div class="box r1">rgb(2,121,139)</div>
      <div class="box g1">rgb(197,93,161)</div>
      <div class="box b1">rgb(18 138 125)</div>
</div>

.r1 {
   background-color: rgb(2 121 139);
}

.g1 {
  background-color: rgb(197 93 161);
}
.b1 {
   background-color: rgb(18 138 125);
}

 

RGBA 색상도 사용할 수 있습니다. 색상은 RGB 색상과 정확히 같은 방식으로 작동므로 RGB 값을 사용할 수 있지만, 색상의 알파 채널을 나타내는 네 번째 값이 있어 불투명도 (opacity)를 제어합니다. 이 값을 0으로 설정하면 색상이 완전히 투명해지는 반면, 1이면 완전히 불투명하게 됩니다.

<div class="wrapper">
     <div class="box rg1">rgba(2,121,139)</div>
     <div class="box gg1">rgba(197,93,161)</div>
     <div class="box bg1">rgba(18 138 125)</div>
</div>

.rg1 {
    background-color: rgb(2 121 139 / 0.3);
 }
 
 .gg1 {
   background-color: rgb(197 93 161 / 0.7);
 }
 .bg1 {
    background-color: rgb(18 138 125 / 0.9);
 }

2. 콘텐츠 overflow

 

Overflow는 박스 안에 편안하게 담기에는 너무 많은 내용이 있을때 발생합니다. CSS는 overflow를 관리할 수 있는 다양한 도구를 제공하며, CSS를 작성할때 특히 CSS 레이아웃에 더 깊이 들어가면 overflow 상황이 자주 발생합니다.

 

height 높이를 지정하여 블록 크기가 제한된 박스의 예

 <div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>

 <p>밖에있는 박스</p>

.box {
    border:1px solid #333333;
    width:350px;
    height: 100px;
}

250% 확대시

 

첫 번째는 height 높이를 지정하여 블록 크기가 제한된 박스에 필요한 공간보다 많은 콘텐츠를 추가했습니다. 내용물이 박스에 넘쳐 박스 아래의 단락 위에 다소 혼란스럽게 놓여있습니다. 

<div class="word">Overflow</div>

.word {
    border: 1px solid #333333;
    width: 100px;
    font-size: 250%;
}

 

두 번째는 인라인 크기로 제한된 박스로 박스가 해당 단에에 맞지 않도록 너무 작게 만들어져 박스 밖으로 튀어나옵니다. CSS가 기본적으로 내용이 혼란스러워지는 어수선한 접근 방식을 취했는지 궁금할 것입니다. 가능하면 CSS는 내용을 숨기지 않습니다. 그렇게 하면 데이터 손실이 될 수 있고, 일반적으로 문제가 발생합니다.

 

overflow 속성

 

overflow 속성은 요소의 overflow를 제어하고 브라우저가 원하는 방식으로 동작하도록 하는 방법이며, overflow 기본값은 visible이므로, overflows 가 발생하면 기본적으로 콘텐츠를 보여줍니다. 콘텐츠가 넘칠 때 내용을 자르기 위해서overflow:hidden을 설정해야 합니다.  

.box {
    border:1px solid #333333;
    width:350px;
    height: 100px;
    overflow: hidden;
}

    <div class="box">
        헤로쿠 주식회사(Heroku, Inc)는 웹 애플리케이션 배치 모델로 사용되는 여러 프로그래밍
        언어를 지원하는 클라우드 PaaS이다. 최초의 클라우드 플랫폼들 가운데 하나인 헤로쿠는
        2007년 6월 개발이 시작되었고 당시에는 루비 프로그래밍 언어만 지원하였으나 지금은 자바,
        Node.js, 스칼라, 클로저, 파이썬, PHP, 고를 지원한다.[1][2] 이러한 이유로, 헤로
    </div>

내용이 넘칠 때 스크롤을 추가하고 싶다면 overflow:scroll을 추가하면 됩니다. 브라우저에 항상 스크롤 막대가 표시됩니다. 콘텐츠가 부족해 overflow 할 수 없을 경우도 마찬가지로 작동하며, 내용에 따라 스크롤 막대가 나타나거나 사라지는 것을 방지할 수 있습니다.

    <div class="box">
        헤로쿠 주식회사(Heroku, Inc)는 웹 애플리케이션 배치 모델로 사용되는 여러 프로그래밍
        언어를 지원하는 클라우드 PaaS이다. 최초의 클라우드 플랫폼들 가운데 하나인 헤로쿠는
        2007년 6월 개발이 시작되었고 당시에는 루비 프로그래밍 언어만 지원하였으나 지금은 자바,
        Node.js, 스칼라, 클로저, 파이썬, PHP, 고를 지원한다.[1][2] 이러한 이유로, 헤로
    </div>

.scroll {
    overflow:scroll;
}

 

위 예제에서는 y축만 스크롤 하면 되지만, 두 축에는 스크롤바가 나타납니다. 대신 overflow-y를 사용하면 y축에서만 스크롤 할 수 있습니다.

 

.scroll {
    overflow-y:scroll;
}

 

3. 표스타일링

HTML 표를 살펴봅시다, 일반적 표의 예들은 -- 신발, 날씨 또는 직원들에 관한 것이고, 영국의 유명한 밴드를 예로들어 표를 만들어 볼 수 있습니다.

<table>
  <caption>
    A summary of the UK's most famous punk bands
  </caption>
  <thead>
    <tr>
      <th scope="col">Band</th>
      <th scope="col">Year formed</th>
      <th scope="col">No. of Albums</th>
      <th scope="col">Most famous song</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Buzzcocks</th>
      <td>1976</td>
      <td>9</td>
      <td>Ever fallen in love (with someone you shouldn't've)</td>
    </tr>
    <tr>
      <th scope="row">The Clash</th>
      <td>1976</td>
      <td>6</td>
      <td>London Calling</td>
    </tr>

    ... some rows removed for brevity

    <tr>
      <th scope="row">The Stranglers</th>
      <td>1974</td>
      <td>17</td>
      <td>No More Heroes</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Total albums</th>
      <td colspan="2">77</td>
    </tr>
  </tfoot>
</table>

 

 

표 스타일링 하기

 

html 폴더 안에 css폴더를 생성후 index.css 파일을 만들어줍니다. head 태그안에 link 태그를 사용해 CSS와 HTML을 연결 시켜줍니다. 이제 css 파일에서 css를 설정할 수 있습니다.

 <link rel="stylesheet" href="css/1-3-8.css-html-form.css">

 

가장 먼저 해줄 것은 간격/레이아웃 설정으로 기본 표 스타일의 비좁은 스타일을 꾸며줄 것 입니다.

table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border: 3px solid purple;
}

thead th:nth-child(1) {
    width: 30%;
}

thead th:nth-child(2) {
    width: 20%;
}

thead th:nth-child(3) {
   width:15%;
}

thead th:nth-child(4) {
     width:35%;
}

th, td {
    padding:20px;
}

tr {
    text-align: center;
}

 

 

 

간단한 typography

 

Browse Fonts - Google Fonts

 

구글 폰트를 사용해 좀더 깔끔한 폰트를 사용해볼까 합니다.

 

구글 폰트에서 마음에드는 폰트를 정하고 Get Font를 클릭해 코드를 받아줍니다.

<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">

 

html 파일에 <head> 태그안에 링크를 넣어줍니다. 그후 css를 사용해 폰트를 추가해줍니다.

html {
    font-family: "Josefin Sans", arial, helvetica, serif;
}

 

4. 이미지, 미디어 및 양식 요소

 

이미지, 기타 미디어 및 양식 요소는 일반 박스와 다르게 CSS를 사용해 스타일을 지정할 수 있다는 특징 덕분에 약간 다르게 작동되며. 무엇이 가능하고 불가능한지는 이해하기 쉽게 도와줍니다.

 

대체(Replaced) 요소

 

이미지와 비디오는 대체 요소로 설명됩니다. 즉, CSS는 이러한 요소의 내부 레이아웃에 영향을 줄 수 없으며 다른 요소중에서 페이지 위치에만 영향을 줍니다. 그러나 CSS는 이미지로 할 수 있는 다양한 작업이 가능합니다. 이미지 및 비디오와 같은 특정 대체 요소도 종횡비(aspect ratio)를 갖는 것으로 설명됩니다. 이는 가로 (x) 및 세로 (y) 크기를 가지며, 기본적으로 파일의 고유 크기를 사용해 표시됨을 의미합니다.

 

이미지 크기 조정

 

CSS의 모든 것은 박스를 생성합니다. 이미지 파일을 고유 크기보다 작거나 큰 박스 안에 이미지를 배치하면, 박스보다 작게 나타나거나 박스가 overflow 됩니다. 

 

• 하나의 200px 보다 작은 이미지를 포함 - 이미지는 박스보다 작고 이미지를 채우기 위해 늘어나지 않음
• 다른 하나는 200px 보다 커서 박스가 넘침

<div class="wrapper">
     <div class="box">
     <img src="img/star.png" alt="star">
     </div>
      <div class="box">
     <img src="img/balloons.jpg" alt="ballons">
     </div>
 </div>

.box {
    width: 150px;
    border:5px solid red;
    margin: 20px;
}

.wrapper {
    width:100%;
    display:flex;
}

img {
  display: flex;
  margin: 0px;
}

 

 

overflow 문제를 해결하기 위해서는 <img> 태그에 max-width: 100%; 값을 주면 됩니다. 작은 이미지는 변경되지 않지만, 큰 이미지는 박스에 맞게 작아집니다. object-fit 속성이 도움이 될 수 있습니다 대체 요소의 크기를 다양한 방식으로 박스에

 

맞게 조정할 수 있습니다. 아래에서는 값 cover를 사용해 이미지 크기를 줄여, 화면 비율을 유지하고 박스를 깔끔하게 채우는 코드 입니다. 종횡비가 유지되면 이미지의 일부가 박스에 의해 잘립니다.

.box {
    width: 200px;
    border:5px solid red;
    margin: 20px;
    height: 200px;
}

.wrapper {
    width:100%;
    display:flex;
    height:100%;
}

img {
  display: flex;
  margin: 0px;
  height: 100%;
  width: 100%;
}

.cover {
   object-fit: cover;
}

.contain {
   object-fit: contain;
}

<div class="wrapper">
    <div class="box">
       <img src="img/star.png" alt="star" class="cover">
    </div>
    <div class="box">
       <img src="img/balloons.jpg" alt="ballons" class="contain">
    </div>
</div>

 

 

contain을 값으로 사용하면 이미지가 박스 안에 들어갈만큼 작아질 때까지 이미지가 축소됩니다. 박스와 종횡비가 다르면 "letterbox"가 되고 박스를 채우지만 종횡비는 유지하지 않는 fill 값을 사용할 수 있습니다.

 

대체 요소 레이아웃

 

대체 요소에 다양한 CSS 레이아웃 기술을 사용하면, 다른 요소와 약간 다르게 동작할 수 있습니다. 예를 들어 flex 나 grid 레이아웃에 요소는 기본적으로 전체 영역을 채우기 위해 확장됩니다. 이미지가 늘어나지 않고 grid 영역 또는 flex container 의 시작 부분에 맞춰 정렬됩니다.

 <div class="wrapper">
      <img src="img/star.png" alt="star">
      <div></div>
      <div></div>
      <div></div>
 </div>

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 200px;
    gap: 20px;
}

.wrapper > div {
    background-color: rebeccapurple;
    border-radius: .5em;
}

 

양식 (Form) 요소

 

CSS로 스타일링 할 때, 양식 요소는 까다로운 문제가 될 수 있고, input 요소를 통해 양식 컨트롤이 페이지에 추가됩니다. 텍스트 입력은 간단한 양식 필드를 정의하고 색상 및 날짜 선택자와 같은 HTML5 에 추가된 보다 복잡한 필드를 통해 정의합니다.

 

텍스트 입력 요소 스타일링

 

<input type="text"> 와 같은 텍스트 입력을 허용하는 요소인 <input type="email">과 같은 특정 유형 및 <textarea> 요소는 스타일이 매우 쉽고 다른 박스처럼 동작하는 경향이 있습니다. 페이지에 이러한 요소의 기본 스타일은 사용자가 사이트를 방문하는 운영체제 및 브라우저에 따라 다릅니다.

 

 <form> 
     <div><label for="name">이름</label>
     <input type="text" id="name"></div>
     <div><label for="email">이메일</label>
     <input type="email" id="email"></div>

     <div class="buttons"><input type="submit" value="Submit"></div>
</form>

 

 

상속과 양식요소

 

일부 브라우저에서 양식 요소는 기본적으로 글꼴 스타일을 상속하지 않고, 양식 필드가 본문 또는 상위 요소에 정의된 글꼴을 사용하도록 하려면, CSS에 규칙을 추가해야 합니다.

button,input, select,textarea {
    font-family: inherit;
    font-size:100%;
}

 

양식 요소 및 박스 크기 조정

 

여러 브라우저 양식 요소는 서로 다른 위젯에 다른 박스 크기 조정 규칙을 사용합니다. 일관성 유지를 위해선 모든 요소에 margin과 padding을 0으로 유지하고 특정 컨드롤을 스타일링 할때 다시 마진을 추가하는 것이 좋습니다.

button,input, select,textarea {
    font-family: inherit;
    font-size:100%;

    box-sizing: border-box;
    padding:0;
    margin:0;
}

 

다른 유용한 설정

 

<textarea> 태그에서 overflow:auto를 설정해 스크롤 막대가 필요하지 않을 경우 스크롤 막대가 표시되지 않도록 설정해야 합니다.

textarea {
    overflow: auto;
}

 

 

모든 것을 "재설정"으로 통합"

 

위에서 설명한 다양한 속성을 "양식 재설정"을 통해 마무리해 일관 작업을 제공할 수 있습니다.

button,input, select,textarea {
    font-family: inherit;
    font-size:100%;
    box-sizing: border-box;
    padding:0;
    margin:0;
}

textarea {
    overflow: auto;
}

 

 

참고 자료

CSS 구성 블록 - Web 개발 학습하기 | MDN

 

GitHub - CSS-STR/css-bloging