15.html 기타

학원/html

15.html 기타

행수쌤 2023. 3. 3. 10:06

728x90

Position

static		relative
absolute	페이지 기준	fixed	브라우저(화면) 기준

css파일 임포트

<link rel="stylesheet" type="text/css" href="test04.css" />

자동완성 제거

<form action="#" method="post" autocomplete="off">

체크박스와 문구 연결

<input type="checkbox" id="agree" />
<label for="agree">동의합니다</label>

말줄임표 3종세트

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

글씨체

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap");
html {
  font-family: "Noto Sans KR", sans-serif;
}

아이콘 크기 변경 및 애니메이션 효과

fontawesome.com

cdnjs.com

<i class="fa-brands fa-youtube fa-2x"></i>    fa-10x (10배)까지 가능
<i class="fa-solid fa-gear fa-5x fa-spin"></i>    회전
<i class="fa-solid fa-heart fa-5x fa-beat"></i>    확대축소
<i class="fa-solid fa-heart fa-5x fa-shake"></i>    흔들기

Float

style="float:left"
style="float:right"

float 배치 clear 3종세트

.float-box::after {
  content: "";         없는 태그에다가 글씨("")를 써서 생기게 해줌
  display: block;      이 줄을 나 혼자 쓰게 함
  clear: both;
}

Flex

style="display:flex"

기준 방향 설정(column/column-reverse/row/row-reverse)

<div class="row" style="display: flex; flex-direction: row-reverse">

줄바꿈 허용(defalut : 차단)

<div class="row" style="display: flex; flex-wrap:wrap">

폭 설정

<div style="flex-grow: 1">1</div>

가로 세로 정렬
- justify-content : 가로 정렬
- align-items : 세로 정렬

<div class="row" style="display: flex; height: 150px; justify-content: center; align-items: center;">

파비콘 설정

728x90