Written by Largo Kentauri on December 13, 2016 in 아이폰, 전자생활 with No comments 구글 웹폰트를 웹페이지에서 구현하기 위해 CSS부분에다가 @import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css); 요런식으로 하면 구글 크롬에서는 보이지만 아이폰 사파리에서는 보이지 않는다. (현재 IOS 10.2) 저 부분을 없애버리고 대신 html 부분에다가 요렇게 잡아주어야 아이폰 사파리에서도 잘 적용된다. 나머지 CSS에서 쓰는 것은 일반적인 방법과 동일하다. ※ 아, 물론 구글 블로거에서만 테스트 해 본 것임.
CSS
웹 폰트(Web Font) 사용하기 Web Font? 웹 폰트(Web Font)는 사용자가 가지고 있지 않은 폰트를 웹에서 사용할 수 있게 만듭니다. 사용자의 로컬 컴퓨터의 폰트 설치 여부와 상관없이 원하는 타이포그래피를 보여줄 수 있는 기술입니다. Use: 웹 폰트(Web Font)는 아래와 같이 CSS의 @font-face 규칙을 적용해 사용할 수 있습니다. @font-face { font-family: 'NanumGothic; src: local('NanumGothic'), url('NanumGothic.woff2'); font-style: normal; font-weight: 100; } font-family: 폰트의 이름을 설정합니다. 이름은 원하는 대로 작성이 가능합니다. src: 폰트의 경로..
html scss .input-test { margin-top: 20px; border: 1px solid red; .check input { display: none; &:checked ~ .icon { border-color: #ff1100; } &:checked ~ .icon::before { height: 50px; transition: all 0.35s ease; } &:checked ~ .icon::after { height: 100px; transition: all 0.35s ease 0.35s; } } .icon { display: inline-block; border: 10px solid #000; background-color: transparent; width: 100px; heigh..
https://www.youtube.com/watch?v=3_GmU2Rc6kw 1:29:40
인라인 요소 img태그를 수직정렬하면 하단에 공백이 생긴다. 이를 없애주기 위해선 기본스타일 시트에 아래 CSS를 추가하면 된다. 1. 이미지태그를 블럭속성으로 만들면 공백이 없어진다. img { display: block; } 2. 이미지 정렬 img { vertical-align:bottom}
class 이름이 여러 개일 때, 병렬 관계를 표현하는 방법 Real Life in a Virtual World When one thinks of the metaverse, the concept of a virtual world may be the first thing that comes to mind. But what is a virtual world? What investment opportunities may be afforded by virtual worlds? What Is a Virtual World?A virtual wo... .blog__content { @include bg-img(cover); @include dsp-flex(row, center, center); width: 100%;..
position 종류 absolute : 문서 기준 fixed : 화면 기준 relative : (상대적 위치)원래 본인이 있던 위치에 + 문서 기준으로 이동 relatice(부모) + absolute(자식) : (상대적 위치) 부모 위치에 + 문서 기준으로 이동 sticky :
https://blogpack.tistory.com/853 CSS로 이미지를 영역 안에 배치하기 - object-fit / object-position 인터넷 익스플로러 호환성 이슈로 사용빈도가 낮은 속성 중에는 이미지나 요소를 정렬하고 배치하는 과정을 극단적으로 쉽게 해주는 속성들이 여러 개 있습니다. 그중 이미지나 비디오를 영역 blogpack.tistory.com
박스의 크기를 width와 height를 이용해서 고정시키면, 안의 텍스트의 길이가 변동되어서 자동으로 박스의 길이가 넓어지지 않고 고정되어 오른쪽과 같이 텍스트 길이가 삐져나오게 된다. 때문에 여백을 유지하는 방식으로 박스의 크기를 정하면 해결된다. padding값으로 박스의 크기를 지정하면, 안의 텍스트 길이에 따라 여백을 유지해야 하므로 박스의 크기도 자동으로 조절된다. 즉, width나 height같은 고정 값이 아닌 컨텐츠의 padding값으로 박스크기를 정하면 텍스트의 길이에 따라 박스 크기가 조절된다.
1) CSS에서 사용할 수 있게 인코딩 변환해야 함. -> 변환사이트 : https://yoksel.github.io/url-encoder/ URL-encoder for SVG yoksel.github.io 2) 변환 사이트에서 Insert SVG에 변환하고자 하는 SVG코드를 넣는다. 3) Redy fo CSS에 변환된 코드를 복사해서 CSS에서 사용한다.
