after 에서 content '사과락'

같은 한글을 넣었을 때 , 처음에 깨지는 현상이 있다.  해당스크립트를 넣어 고칠 수 있다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

CF)

https://webisfree.com/2017-04-09/html%EC%97%90%EC%84%9C-%ED%95%9C%EA%B8%80-%EA%B9%A8%EC%A7%90-%EB%AC%B8%EC%A0%9C-%EB%98%90%EB%8A%94-%ED%98%84%EC%83%81%EC%9D%84-%ED%95%B4%EA%B2%B0%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EC%9D%80

a링크를 넣을때

안에 내용 만큼만 들어간다.

패딩이 있는 박스 안에 a링크를 넣으면 그 패딩은 제외가 된다.

background-blend-mode: luminosity; 

백그라운드 그림에 블렌딩 함.

main안에 footer 넣었더니 explorer에서 깨진다.

section으로 바꾸니 정상 작동!

http://charlesk.tistory.com/40

• 기본값 : normal
• 상속 : Yes

문법

font-weight: normal | bold | bolder | lighter | number | initial | inherit

• normal : 보통 굵기입니다. 숫자 400과 같습니다.
• bold : 굵은 굵기입니다. 숫자 700과 같습니다.
• bolder : 상속된 값보다 굵은 굵기입니다.
• lighter : 상속된 값보다 얇은 굵기입니다.
• number : 100, 200, 300, 400, 500, 600, 700, 800, 900
• initial : 기본값으로 설정합니다.
• inherit : 부모 요소의 속성값을 상속받습니다.

출처 : https://www.cmsfactory.net/css-reference-font-weight

백그라운드 블렌드 모드로 하기

https://css-tricks.com/basics-css-blend-modes/

margin이 겹칠경우  큰값을 이용하게 된다.

Transform: {translate} {scale} {rotate} {skew}

rotate /scale/ skew 의  transform-origin은 center, center (50%, 50%) 이다 !!

translate 에 하나의 요소만 있으면 x축만을 의미한다.

skew또한,  x축만 을의미한다.   transform:skew(왼쪽으로 기울임+,상-/하+)

rotate는,회전의 각도가 양수이면 시계 방향으로 회전하고 음수이면 시계 반대방향으로 회전한다.

해당축은 고정되어있고, 원하는 각도 만큼 반대 축이 돌아간다고 생각하면 됨.

scale는,  y축 확대를 의미한다.

2차원 변환 함수

3차원 변환 함수

line-height 속성은 글자의 높이를 지정합니다. 현대의 HTML 페이지는 글자의 높이를 지정하는 기능보다 글자를 수직 중앙 정렬할 때 사용합니다.

*css block 형식을 가지는 태글즐 수직 정렬할 수 있는 스타일 속성이 없습니다. 따라서 대체 방안으로 line-height 속성을 사용합니다.

line-height를 글자를 감싸는 박스 높이의 크기와 맞춰주면 글자가 수직정렬 됩니다.

*vertical align은 table에 쓰인다고 보면됨

원래 inline에도 쓰이나 크로스 브라우징이 잘 안되므로 쓰지 않는 게 좋다.

overflow 속성은 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할지 지정하는 속성입니다.

overflow 속성에 사용 가능한 키워드

oveflow 속성에 scroll 키워드를 적용하면 무조건 모든 축에 스크롤이 생성됩니다. 만약 특정한 방향으로만 스크롤을 생성할 때는 overflow-x 속성과 overflow-y 속성을 사용합니다.