헷갈리는 CSS/HTML 정리

개인기록용

 

미디어쿼리

@media(max-width:768px){
	/* 모바일 */
}

@media(min-width:768px){
	/* 모바일아닐 때 */
}

@media(min-width:768px) and (max-width:1024px){
	/* 태블릿 */
}

@media(min-width:768px) and (max-width:1024px) and (orientation:landscape){
	/* 태블릿 가로모드 */
}

 

웹폰트 적용하기

@font-face{
	font-family: A;
    src:url('B');
}

body{
	font-family: A;
}

나눔스퀘어

@import url(https://cdn.jsdeliver.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

Something{
	font-family: 'Nanumsquare'. sans-serif;
    transform: skew(-0.001deg);
}

 

내부링크

클릭 링크	<a href="#spot"> 고고 </a>
목적지	<div id="spot"> 여기로 </div>

  버튼/링크의 href 값을 이동할 위치의 id 값으로 지정해 주는 것

 

전화/이메일 링크

전화	<a href="Tel:010-1234-5678"> 전화 </a>
이메일	<a href="mailto:abc@mail.com"> 메일 </a>

 

구글맵

구글지도에서 해당주소 검색 후 공유버튼 누르고 html주소로 복사해 오기(iframe으로 가져와짐)

 

동일한 너비로 나누기

부모영역	display : table; table-layout : fixed;
자식영역	display : table-cell;

 

배경색 그라디언트 주기

background : linear-gradient(#A, #B);     //A가 위쪽 색상, B가 아래쪽 색상