[프론트엔드 스쿨 6기] 🗓️ 6월 7일

유동균·2023년 6월 6일

TIL 멋쟁이 사자처럼

프론트엔드 스쿨 6기

목록 보기

10/44

📚 공부한 내용

:root, var

:root는 문서 트리의 루트 요소를 선택하고, 전역 CSS 변수 선언에 사용할 수 있다.

CSS에서 변수의 이름을 지정할 때는 변수 앞에 -- 를 붙여주어야 한다.
그리고 변수를 호출해 사용할 때는 var(변수명)를 사용한다.

:root {
  --main-color: red;
}

appearance

운영체제 및 브라우저에 기본적으로 설정되어 있는 테마를 기반으로 요소를 표현한다.
즉, 네이티브로 지원되는 모양들을 해제하거나 추가할때 사용할 수 있다.

...
<form action="/">
  <fieldset>
    <legend>폼 요소</legend>
    <label for="search">검색</label>
    <input type="search" name="search" id="search" />
  </fieldset>
</form>
...

appearance: none; 적용

input {
	appearance: none;
}

appearance MDN

currentColor

현재 글자색 색상값을 사용.
현재 요소에 color 속성값 지정 안 된 경우, 상속받은 color 속성값 사용.

<div style="color: red; border: 1px dashed currentcolor;">
  color 속성의 값이 red일때 border의 currentcolor 값은 red
  <div style="background: currentcolor; height:9px;"></div>
  background 속성의 값은 부모로 부터 상속받은 red
</div>

반응형 이미지

반응형 이미지 MDN

다양한 디바이스와 화면 크기에 대응하고 로딩 속도 최적화하기 위해서 사용된다.

이를 해결하기 위한 방법으로는

<img srcset="이미지_고유_픽셀_너비-320w.jpg 320w,
             이미지_고유_픽셀_너비-480w.jpg 480w,
             이미지_고유_픽셀_너비-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="이미지_고유_픽셀_너비-800w.jpg" alt="이미지">

srcset 은 브라우저에게 제시할 이미지 목록과 그 크기를 정의
sizes 는 미디어 조건문들을 정의

<picture>
  <source srcset="small.jpg" media="(max-width: 600px)">
  <source srcset="medium.jpg" media="(min-width: 601px) and (max-width: 1200px)">
  <source srcset="large.jpg" media="(min-width: 1201px)">
  <img src="fallback.jpg" alt="Responsive Image">
</picture>

picture는 source를 포함하고 있으며, 미디어 쿼리에 따라 다른 이미지 소스를 지정한다.
img는 picture 요소의 자식 요소로 사용되며, source 요소에서 선택된 이미지가 로드되지 않을 경우를 대비한 대체 이미지(fallback) 역할을 한다.

position

position MDN

문서 상에 요소를 배치하는 방법을 지정한다.

static 일반적인 문서 흐름에 따라 배치. default
relative 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 움직인다.
z 축으로 부유하고 z-index를 이용하여 이를 조절할 수 있다.
기본값은 initial이며 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮는다.
absolute 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다.
자신과 가장 가까운 컨테이닝 블록 중 포지션이 static이 아닌것을 기준으로 움직인다.
fixed 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다.
요소의 위치를 화면의 뷰포트에 상대적으로 고정시킨다.
즉, 스크롤되더라도 해당 요소는 항상 동일한 위치에 고정된다.
sticky 요소를 스크롤 영역 내에서 상대적으로 고정시키는 데 사용된다.
position: relative와 position: fixed의 특징을 혼합한 것으로, 스크롤 위치에 따라 요소가 일정 오프셋까지 따라다니다가 특정 지점에 도달하면 고정된다.

table

cellspacing="0"; border-spacing: 0;
cellspacing="0" HTML table 요소에서 테이블 셀 간의 간격을 설정
border-spacing: 0; CSS table 요소에서 테이블 셀 간의 간격을 설정

<table border="1">
  ...
</table>  


<table border="1" cellspacing="0">
  ...
</table>  
<!-- or -->
<table border="1" style="border-spacing: 0;">
  ...
</table>

cellspacing="0" 셀 간 공간이 줄어들지만 각각의 셀 테두리가 겹쳐 두꺼워 보인다.
업로드중..

border-collapse: collapse;
표 테두리(border)가 분리(separated) 또는 상쇄(collapsed)될 지를 결정
기본값은 separated이다.

<head>
  <style>
    table,
    tr,
    th,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th>제목1</th>
      <th>제목2</th>
    </tr>
    <tr>
      <td>내용1</td>
      <td>내용2</td>
    </tr>
    <tr>
      <td>내용3</td>
      <td>내용4</td>
    </tr>
  </table>
</body>

업로드중..

🤔 새롭게 배운 내용

border:0;과 border:none;의 차이

Should I use 'border: none' or 'border: 0'?

모두 CSS에서 요소의 테두리(border)를 제거하는 데 사용되는 속성들이다.

border:0; 테두리를 아예 없애므로 요소의 크기나 배치에는 영향을 주지 않는다.

border:none; 역시 테두리를 없애지만, 다른 속성들과의 상호작용에 따라 요소의 크기나 배치에 영향을 줄 수 있다.

일반적으로는 테두리를 완전히 제거하고자 할 때 border: 0;을 사용하는 것이 권장

border 1px 미만

이듬 브런치

form과 fieldset styling

https://github.com/w3c/csswg-drafts/issues/321

AWD RWD

https://github.com/yamoo9/cj-olive-networks

유동균

이전 포스트

[프론트엔드 스쿨 6기] 🗓️ 6월 5일

다음 포스트

[프론트엔드 스쿨 6기] 🗓️ 6월 7일