TIL #13

박감자·2024년 10월 4일

TIL

목록 보기

13/34

오늘 감상평

우리팀 너무 재밌어요ㅋㅋ

오늘 한 일: CSS 요소 구글링

오늘은 큰 오류 혹은 미친듯이 어려운 부분이 없어서, 그냥 구글링 했던 것들만 정리해보려고 한다.

1. margin value 갯수

margin 그리고 이 형식을 따르는 모든 스타일이 그러하겠지만, 보통 1개에서 4개의 값을 옆에 적어서 조정이 가능하다. 근데 그러면 각 value가 매번 무엇을 나타내는지 까먹어서 여기에 적어보려 한다.

.one_margin {
	/* 모든 방향에 대한 margin 적용 */
	margin: 20px;
}

.two_margin {
	/* margin: 위아래 왼오; */
    margin: 10px 20px;
}

.three_margin {
	/* margin: 위 왼오 아래; */
    margin: 10px 5px 15px;
}

.four_margin {
	/* 위에서부터 시계방향 */
	/* margin: 위 오 아래 왼;*/
    margin: 10px 5px 15px 20px;
}

2. img 뭉개짐 방지

간단하지만 자주 사용할 것 같은 요소로, 어떤 이미지이던 간에 지정한 사이즈에 맞추려고 하면 뭉개지는 경우가 있다. 이때 간단하게 왜곡방지하는 요소는 아래와 같다.

.prevent_distort {
	object-fit: cover;
}

참고: CSS의 object-fit 속성으로 이미지를 왜곡없이 보여주기

3. favicon 설정

favicon이란 웹사이트 탭 이름 옆의 아이콘을 의미한다. 지금 사용하고 있는 velog도 고유 초록 아이콘이 있듯이 대부분의 웹사이트가 이를 가지고 있다.

오늘 팀페이지에서 뭐 더 바꿀 수 있는거 없나 보다가 기본 아이콘인 회색 인터넷 표기가 맘에 들지 않아서, 팀 로고로 바꾸어보았다. 바꾸는 방법은 아래 한 줄의 코드로 만들 수 있다.

<link rel="icon" type="image/png" href="{이미지링크}" sizes="32x32">

이를 <head>부분의 제목 아래에 붙여놓으면 잘 작동한다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title> 우리 팀 소개페이지 </title>
  <link rel="icon" type="image/png" href="{이미지링크}" sizes="32x32">
</head>