[css][html] 하이퍼링크 밑줄 없애기 / CSS Animation 구현시 마지막 상태 유지하는 방법 / Font Awesome의 아이콘 색상을 변경, 크기 변경 / overflow / object-fit / nth-child / HTML 주석 처리 / 자바 스크립트 주석..

 

하이퍼링크 밑줄 없애기

.top-bar__tab {
  margin-right: 9px;
  text-decoration: none;
}

 

 CSS Animation 구현시 마지막 상태 유지하는 방법

body {
    opacity: 0;
    animation: fadeIn 1.5s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

 

이미지 삽입 요소

<img class="fit-picture"
     src="/media/cc0-images/grapefruit-slice-332-332.jpg"
     alt="Grapefruit slice atop a pile of other slices">

 

Font Awesome의 아이콘 색상을 변경

HTML :
    <i class="icon-cog blackiconcolor">
CSS :
    .blackiconcolor {color:black;}

fontawesome.com/icons?d=gallery&q=alert

Font Awesome

 

중앙정렬

  margin: 0 auto;

폭의 연산이 불가능하면 가운데 정렬을 할 수 없기 때문에 overflow:hidden 작성

inline 속성의 태그 : display:block

 

HTML 주석 처리 : <!-- Comment -->

자바 스크립트 주석 처리 : // Comment, /* Comment Comment */

CSS 주석 처리 : /* Comment */

 

awesome icon 크기 조절 : fa-nx

<i class="fa fa-camera-retro fa-lg"></i> fa-lg 
<i class="fa fa-camera-retro fa-2x"></i> fa-2x 
<i class="fa fa-camera-retro fa-3x"></i> fa-3x 
<i class="fa fa-camera-retro fa-4x"></i> fa-4x 
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

 

awesome icon 색깔 변경 : 

<span style="color:red"><i class="fa fa-camera-retro"></i></span>

 

관련 참조 사이트 : nuknukhan.tistory.com/38

FastBoot 스킨 그래픽 아이콘 폰트 어썸(Awesome Font) 조절 사용

 

css 글자 굵기 바꾸기 : 

font-weight: normal / bold / bolder / lighter / 300

normal : 보통 굵기입니다. 숫자 400과 같습니다.

bold : 굵은 굵기입니다. 숫자 700과 같습니다.

bolder : 상속된 값보다 굵은 굵기입니다.

lighter : 상속된 값보다 얇은 굵기입니다.

300, 400 : 지정 지정

 

overflow 속성 : 요소의 박스에 내용이 더 길 때 어떻게 보일지 선택하는 속성

overflow : hidden;

visible : 기본값으로 내용이 더 길어도 그대로 보입니다.

hidden : 내용이 넘치면 자릅니다. 자른 부분은 보이지 않음.

scroll : 내용이 넘치지 않아도 항상 스크롤바 존재

auto : 내용이 잘릴 때만 스크롤바가 보임.

 

object-fit 속성 :

지정된 너비와 높이에 맞게 장착되는 방식을 지정 / 이는 프로필 이미지나 고정된 크기의 썸네일을 출력하는 다양한 경우처럼 제각각의 크기를 가진 오브젝트등을 넘겨받아 비율을 유지한 채로 일정한 크기로 재가공하는 경우에 유용

object-fit: cover;

 

fill : 대체되는 요소의 내용이 지정된 너비와 높이에 따라 크기가 확대(scale up) 혹은 축소(down), 늘어나거나(stretch) 움츠러든다(shrunk). 요소를 가득 채울수 있는 크기로 변화되면서 종횡비는 유지되지 않는다. 이것은 일반적으로 이미지에 강제로 너비와 높이를 지정하는 것과 같다.

contain : 내용이 종횡비를 유지하면서 요소에 정의된 너비와 높이안에서 가능한한 많이 확대(scale up)시킨다.

cover : 내용이 종횡비를 유지하면서 정의된 너비와 높이를 가득 채울때까지 확대된다

none : 내용의 크기가 요소의 크기와는 상관없이 기본 알고리즘에 의해 조정된다. 이 알고리즘은 원본의 크기에 가운데 정렬된 형태를 띈다

max-width 속성 : 어떤 요소의 최대 너비 지정 / 지정 넓이 보다 커지는 것을 방지

 

text-shadow 속성 : 글자에 그림자 효과를 주는 속성

text-shadow: offset-x offset-y blur-radius color | none | initial | inherit
text-shadow: 2px 2px 2px gray;

 

offset-x : 그림자의 수평 거리를 정합니다. (필수)

offset-y : 그림자의 수직 거리를 정합니다. (필수)

blur-radius : 흐림 정도를 정합니다. (선택 : 값을 정하지 않으면 0)

color : 색을 정합니다. (선택 : 값을 정하지 않으면 브라우저 기본값)

none : 글림자 효과를 없앱니다.

 

위 관련 블로그 참조 : www.codingfactory.net/10650

CSS / text-shadow / 글자에 그림자 효과를 주는 속성

 

auto 속성 :

기본값, 브라우저가 높이를 계산함. 요소 아무 설정 없으면 auto 적용 - 부모 상속

 

cursor 속성을 이용하면 해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있습니다.

auto: 자동

default: 기본값 (화살표)

pointer: 손가락 모양 (클릭 가능한 버튼)

wait: 로딩

 

nth-child 활용 예시 :

 

(7의배수) 
 .box:nth-child(7n){
	background: red;
 }

22번 부터 이후 
 .box:nth-child(n+22) {
	 color: blue;
}

1번째 부터 4번째까지
 .box:nth-child(-n+5) {
	background: green;
}

16번째 부터 19번째까지 
.box:nth-child(n+16):nth-child(-n+19) {
   background: hotpink;
 }

 마지막에서부터 순서를 계산
 마지막(28)에서 부터 3번째
.box:nth-last-child(3) {
 	background: gold;
}

css 확대, 축소 

 

transform: scale( 2.0 );
transform: scaleX( 2.0 ) scaleY( 1.5 );

 

 

애니메이션 참조 사이트 :

m.blog.naver.com/PostView.nhn?blogId=yangwonder&logNo=220845161012&proxyReferer=https:%2F%2Fwww.google.com%2F

transition 움직임 정리

 

position 속성 정리 참조 사이트:

engkimbs.tistory.com/92

[HTML&CSS] position 속성 정리하기!