본문 바로가기
(혼) (공) (web)

CSS 복습(3일)

by 만석이 2024. 2. 15.

 

<!-- <h1>색상표기법</h1>

<style>    
  /* 1 색상의 이름 */
  .name {
    color: red;
  }

  /* 
    2 rgb(r g b)
    각 색상값은 0에서 255사이의 값을 갖는다
  */
  .rgb {
    color: rgb(255 0 0);
  }

  /* 
    3 rgba(r g b / 불투명도)
    불투명도는 0과 1 사이의 값을 갖는다
    0은 완전 투명, 1은 완전 불투명
  */
  .rgba {
    color: rgb(255 0 0 / 0.5);
  }

  /* 
    4 hex 표기법
    16진수(0 ~ f)를 사용하여 색상을 표현한다
    #rrggbb
  */
  .hex {
    color: #ff0000;
  }

  /* 
    5 hex 3 표기법
    hex표기법에서 각 색상 값이 같을 경우
    줄여 쓸 수 있다
  */
  .hex-3 {
    color: #f00;
  }
</style>

<ul>
  <li class="name">list item</li>
  <li class="rgb">list item</li>
  <li class="rgba">list item</li>
  <li class="hex">list item</li>
  <li class="hex-3">list item</li>
</ul> -->		 name 클래스는 엘리먼트의 색상을 지정해주었다.

rgb 는 rgba클래스의 함수이다. 
rgb 함수는 빨강과 초록과 파랑 의 색을 조합하여 여러색을 만들수있다.(rgb가 아니라 abc라도 상관없다. 함수명상관X)

color: rgb(255 0 0 / 0.5);

255 0 0 을 해주었다. 앞에서부터 빨강 초록 파랑 순서이며
이 순서는 함수명과는 관련없다.

그래서 0~255까지 설정할수있으며 숫자가 작을수록 색이 
옅어진다. 

여기서는 255를 해주었으니 가장 진한 빨강색이 나온다.

그리고 여러가지 색을 조합해서 다양한 색을 만들수있다.

예를 들어서 
150 94 224 이런식으로 쓰게되면 3가지의 설정값이 더해져서 
하나의 색이나오게 된다. 

그리고 마지막으로 /0.5는 투명도를 나탄내는것으로 

0이 완전투명
1이 완전불투명이다.

hex표기법은 16진수를 이용해서 색을 설정하는것이다.
<!-- <h1>font size</h1>
<p>글자 크기</p>

<style>
  .text-xs {
    font-size: 0.75rem;
  }

  .text-base {
    font-size: 1rem;
  }

  .text-2xl {
    font-size: 1.5rem;
  }
</style>

<h3>font size: 0.75rem</h3>
<p class="text-xs">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>

<h3>font size: 1rem</h3>
<p class="text-base">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>

<h3>font size: 1.5rem</h3>
<p class="text-2xl">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> -->		 글자의 크기를 설정하는 방법은 다양하다.

rem
root요소 의 글꼴 크기를 기준으로 삼는다.
기본값은 16이다.(브라우저의 기본값)

px
고정된 크기를 가지며 독립적이다.
화면의 크기가 달라져도 동일한 크기를 유지한다.

%
부모의 요소에 대한 상대적인 크기를 나타낸다.
부모 요소의 크기에 따라 상대적으로 조절된다.

EMS(em)
부모 요소의 글꼴 크기에 대한 상대적인 크기를 나타낸다.
부모 요소의 글꼴크기에 따라 상대적으로 조절된다.

포인트(pt)
출력 장치에서의 크기를 나타낸다.

Vieport 단위(vw,vh,vmin,vmax)
뷰포트는 브라우저 화면의 보이는 영역을 의미하며,
브라우저의 크기에 따라서 크기가 조절된다.
<!-- <h1>font style</h1>

<style>
  .not-italic {
    font-style: normal;
  }
  
  .italic {
    /* 기울임체 */
    font-style: italic
  }
</style>


<h3>font style: normal</h3>
<p class="not-italic">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>

<h3>font style: italic</h3>
<p class="italic">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p> -->		 클래스 두개를 만들어주었다.

not-italic 은 font-style을 노말로 줌으로써 보통글꼴 스타일을

italic은 font-style을 italic을 줌으로써 기울임꼴을 주었다.
<!-- <h1>font weight</h1>
<p>글자의 두께. 100에서 900사이의 값을 갖는다</p>

<style>
  .font-thin {
    font-weight: 100;
  }

  .font-normal {
    font-weight: 400;
  }
  
  .font-bold {
    font-weight: 700;
  }
</style>

<h3>font weight: 100</h3>
<p class="font-thin">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>

<h3>font weight: 400</h3>
<p class="font-normal">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>

<h3>font weight: 700</h3>
<p class="font-bold">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p> -->		 font-weight는 글자의 두께를 지정하는것으로 글자가 두꺼워
질수록 글자의 두께도 두꺼워진다.
<!-- <h1>text align</h1>
<p>정렬</p>

<style>
  .text-left {
    text-align: left;
  }

  .text-center {
    text-align: center;
  }
  
  .text-right {
    text-align: right;
  }
</style>

<h3>text align: left</h3>
<p class="text-left">
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>

<h3>text align: center</h3>
<p class="text-center">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. 
</p>

<h3>text align: right</h3>
<p class="text-right">
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p> -->		 text-align은 글자를 정렬하는것으로 왼쪽, 오른쪽, 가운데
3가지로 정렬할수있다.

text-align:left하면 글자가 왼쪽정렬이 되는것이다.

이런식으로 글자의 위치를 정렬할수있다.
<!-- <h1>letter spacing</h1>
<p>글자 간격</p>

<style>
  /* 
    letter spacing에서 em단위를 사용하는 경우
    해당 엘리먼트의 폰트사이즈에 상대적이다
  */
  .tracking-tightest {
    letter-spacing: -0.05em;
  }

  .tracking-normal {
    letter-spacing: 0em;
  }

  .tracking-widest {
    letter-spacing: 0.1em;
  }
</style>

<h3>letter spacing: -0.05em</h3>
<p class="tracking-tightest">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
</p>

<h3>letter spacing: 0em</h3>
<p class="tracking-normal">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
</p>

<h3>letter spacing: 0.1em</h3>
<p class="tracking-widest">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
</p> -->		 .

letter-spacing 은 글자의 간격을 설정할때 사용하는것이다.

뒤에 붙은 글자가 클수록 간격이 길어지는것이다.
<!-- <h1>line height</h1>
<p>줄 높이, 줄 간격</p>

<style>
  /* 
    line height에서 em 단위를 사용하는 경우
    해당 엘리먼트의 폰트사이즈에 상대적이다
  */
  .leading-tight {
    line-height: 1.25em;
  }

  .leading-normal {
    line-height: 1.5em
  }
  
  .leading-relaxed {
    line-height: 1.625em;
  }
</style>

<h3>line height: 1.25em</h3>
<p class="leading-tight">
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Autem hic odio, dolore unde expedita ad voluptatibus nostrum
  perspiciatis architecto reiciendis quia, 
  voluptate ipsum tempore tenetur? Voluptatem est non omnis illum. 
</p>

<h3>line height: 1.5em</h3>
<p class="leading-normal">
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Autem hic odio, dolore unde expedita ad voluptatibus nostrum
  perspiciatis architecto reiciendis quia, 
  voluptate ipsum tempore tenetur? Voluptatem est non omnis illum. 
</p>

<h3>line height: 1.625em</h3>
<p class="leading-relaxed">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. 
  Autem hic odio, dolore unde expedita ad voluptatibus nostrum
  perspiciatis architecto reiciendis quia, 
  voluptate ipsum tempore tenetur? Voluptatem est non omnis illum. 
</p> -->		 letter-spacing 은 글자의 좌우 간격을 넓여주었다.


line-height 은 글자의 상하의 간격을 넓여준다.

이것도 마찬가지로 숫자가 커질수록 간격은 넓어진다.

쉽게 설명하자면 문장의 1줄 2줄 3줄 이있는데 
이 줄마다의 간격이 넓어진다고 보면된다.
<!-- <h1>Q. Typography</h1>

<style>
  .text-center {
    text-align: center;
  }

  .tracking-widest {
    letter-spacing: 0.1em;
  }

  .italic {
    font-style: italic;
  }

  .leading-relaxed {
    line-height: 1.625em;
  }
</style>

<h3 class="text-center tracking-widest">Macintosh introduced</h3>

<p class="text-center leading-relaxed">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
  Ex, itaque voluptas beatae ducimus,
  harum, dicta hic veniam architecto qui debitis id perspiciatis
  temporibus iure expedita. Velit libero sit nobis unde.
</p>

<p class="text-center italic">
  January 24, 1984 by Apple computer Inc.
</p> -->		 이 코드를 앞서 배웠던것들을 종합사용해서 짠것이다.

text-center 클래스는 글자들을 가운데로 정렬을해주었다.

tracking-spacing 클래스는 글자의 좌우 간격을 설정해주었다.

italic 클래스는 글꼴을 기울임으로 적용해주었다.

leading-relaxed 클래스는 글자들의 상하간격을 설정해주었다.


<h3> 태그는 text-center 클래스와 leading-reaxed 클래스를 
적용시켜주었다. 

그래서 글자들이 가운데로 정렬되며 글자들의 좌우간격이
넓어졌다.

다음으로 <p> 태그는 text-center 클래스와 leading-relaxed
클래스를 사용해서 글자들의 가운데로 정렬시켜주며 
좌우 간격을 조금 넓여주었다

다음<p> 태그는 text-center 클래스와 italic 클래스를 사용해서
글자들을 가운데 정렬해주고 기울임꼴을 적용해주었다.
<!-- <h1>color, background-color</h1>

<style>
  ul {
    /* 배경색 */
    background-color: #000;
  }

  li {
    /* 글자색 */
    color: #fff;
  }
</style>

<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul> -->		 background-color을 사용해서 배경색을 설정해줄수있다.
<!-- <h1>display</h1>
<p>엘리먼트의 배열 방법</p>

<style>
  .item {
    background-color: #ddd;
  }

  /* 
    1 block
    부모 엘리먼트의 넓이를 모두 차지한다
    div, main, nav, p 등 대부분 엘리먼트의 기본값
  */
  .block {
    display: block;
  }

  /* 
    2 inline block
    컨텐츠에 필요한 만큼만 넓이를 가진다
    button, input, img 등의 기본값

    컨텐츠 - 텍스트, 자식 엘리먼트 등
  */
  .inline-block {
    display: inline-block;
  }

  /* 
    3 inline
    컨텐츠에 필요한 만큼만 넓이를 가진다
    span, a, label 등의 기본값
    width, height, y축 padding/margin이 적용되지 
    않기 때문에 레이아웃용으로 적합하지 않다
  */
  .inline {
    display: inline;
  }

  /* 
    4 none
    엘리먼트가 화면에 나타나지 않는다
  */
  .hidden {
    display: none;
  }
</style>

<h3>display: block</h3>
<div class="item block">item</div>
<div class="item block">item</div>

<h3>display: inline-block</h3>
<div class="item inline-block">item</div>
<div class="item inline-block">item</div>

<h3>display: inline</h3>
<div class="item inline">item</div>
<div class="item inline">item</div>

<h3>display: none</h3>
<div class="item hidden">item</div> -->
item클래스는 배경색을 지정해주었다.

block클래스에 적용되는 엘리먼트는 블록요소로 표시되며 
전체가로폭을 차지한다. 

inline bock클래스에 적용되는 엘리먼트들은 간격을 가진채로 같은줄에 나란히 출력된다.(독립적인 크기는 갖지못함)

inline 클래스 와 inline bock 클래스 이둘의 차이점은 

inline bock 클래스는 여러요소가 한줄에 나한히 표시되며 
각각이 독립된 크기를 가지지만 

inline 클래스의 경우에는 여러요소들이 베이스라인 기준으로정렬이 되긴하지만 베이스 라인으로 정렬이 되기때문에 
각각의 요소들은 독립적인 크기를 가지기 어렵다.

hidden 클래스는 display:none을 적용해서 엘리먼트가 화면에
출력되지않도록 만들었다.

 

<style>
  .inline-block {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: #3498db;
    color: #fff;
  }
</style>

<div class="inline-block">Box 1</div>
<div class="inline-block">Box 2</div>
<div class="inline-block">Box 3</div>		 이해하기 쉽게하기위해 조금더 설명해보겠다.

display:inline-block에 적용되는 엘리먼트들은 각각의 크기를 독립적으로 갖는다고 했었다.
<style>
  .inline {
    display: inline;
    width: 100px; /* 이 속성은 효과가 없습니다. */
    height: 50px; /* 이 속성은 효과가 없습니다. */
    background-color: #2ecc71;
    color: #fff;
  }
</style>

<span class="inline">Text 1</span>
<span class="inline">Text 2</span>
<span class="inline">Text 3</span> 		하지만 display:inline에 적용 되는 엘리먼트들은 옆에 코드처럼
높이와 넓이 길이를 지정해주어도 적용이 되지않는다.

그 이유는 인라인 요소들은 텍스트의 베이스라인에 맞춰서 
배치되고, 높이와 너비 속성은 무시된다.
<!-- <h1>border</h1>
<p>경계선</p>

<style>
  .item {
    display: inline-block;
  }

  .border {
    /* 선의 두께 */
    border-width: 1px;
    border-style: solid;
    border-color: #000
  }

  .border-t {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #000
  }
  
  .border-b {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000
  }
  
  .border-l {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #000
  }
  
  .border-r {
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #000
  }
</style>

<h3>전체</h3>
<div class="item border">item</div>

<h3>top</h3>
<div class="item border-t">item</div>

<h3>bottom</h3>
<div class="item border-b">item</div>

<h3>left</h3>
<div class="item border-l">item</div>

<h3>right</h3>
<div class="item border-r">item</div>

<h3>x축</h3>
<div class="item border-l border-r">item</div>

<h3>y축</h3>
<div class="item border-t border-b">item</div>

<h3>top 제외</h3>
<div class="item border-l border-r border-b">item</div> -->		 item클래스는 display:inline-block을 설정해주었다.

item클래스는 혼자쓰이면 아무 차이도 없지만 

예를들어 border과 함께 사용되면 쓰고 안쓰고의 차이가 드러난다.

 display:inline-block 를 사용하지않으면 border로 인해서 
테두리가 만들어지는데 테두리의 크기는 가로최대폭을 갖게된다. 왜냐하면 블록요소가 기본적으로 가로로 전체 너비를 차지
하고있기 때문이다.

하지만  display:inline-block  사용시 엘리먼트의 크기에 맞게 테두리가 생성된다.


border을 통해서 테두리를 만들려고 할때 원하는 위치에만
선을 생성할수있다.


top, bottom, left, right 를 사용해서 위치를 조정할수있다.

 

 

<h1>outline</h1>
<p>border밖의 선</p>

<style>
  .item {
    display: inline-block;
  }

  .border {
    border-width: 1px;
    border-style: solid;
    border-color: #000
  }

  .outline {
    outline-width: 4px;
    outline-style: solid;
    outline-color: #f00;
  }
</style>

<div class="item border outline">item</div>		 border 클래스를 사용해서 테투리를 만들어주었다.

그리고 outline을 사용해서 border을 통해서 만든 테두리 위에 
테두리를 만들려고한다.

너비는 4px 색은 빨강색으로 선을 만들어주었다. 

즉 outline 을 사용하면 선밖에 또 하나의 선을 적용시킬수있다.

이것은 보통강조할때 많이 사용되며 

로그인창에서 사용된다고한다.

'(혼) (공) (web)' 카테고리의 다른 글

CSS 복습(6일차)  (0) 2024.02.19
CSS 복습(5일차)  (1) 2024.02.16
CSS 복습(4일차)  (2) 2024.02.15
HTML 복습(2일)  (0) 2024.02.14
HTML 복습(1일차)  (1) 2024.02.12

관련글

티스토리툴바