-------------------
프린트
tory84.com/page.php?bbs=dev_html&bbs_idx=10
width: 21cm;
min-height: 29.7cm;
@page {
size: A4 landscape;
margin: 0;
/*size: landscape;*/
}
@media print {
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
viewport 속성 : <meta name="viewport" content="width=device-width, initial-scale=1.0">
- 웹브라우저의 화면을 각 디바이스에 최적화 된 크기로 표현해준다.
- 코드 작성시 위의 태그를 기계적으로 입력해주면 된다.
---------------------
textarea 크롬에서 placeholder에러
크롬과 같은 몇몇 브라우저에서 textarea태그를 한 줄에 쓰지 않으면 palceholder 속성이 적용되지 않기 때문 - textarea 여는 태그와 닫는 태그 한 줄에
textarea 줄바꿈 http://ooppa.tistory.com/2010 <textarea name="#" placeholder="여러분의 소중한 의견을 들려주세요. # 질문시 이미지 첨부는 하단의 라이브리를 이용하세요"></textarea>
-----------------------------------------------
margin으로 화면 꽉 채우는 라운드 컨텐츠박스
. roundBox { background:white; -webkit-border-radius: 1.5rem; -moz-border-radius: 1.5rem; border-radius: 1.5rem; padding-bottom:1.5rem; position:absolute; top:1rem; right:1rem; left:1rem; bottom:1rem;
}
-----------------
테이블 속성처럼 세로 정렬, 세로 가운데 정렬
display:table-cell;
-------------
이미지 배율 유지하면서 사이즈 영역에 맞추기
object-fit:contain;
-----------------------------------------
상하단 고정, 중간 스크롤영역 높이 꽉 채우기
body {
overflow:hidden;
}
. scrollWrap { z-index:1; overflow-y:auto; -webkit-overflow-scrolling:touch; - 아이폰 터치 부드럽게 overflow-x:hidden; height:100%; }
. wrapper.fixedT, . wrapper. fixedTB { padding-top:6.4rem; overflow:hidden; z-index:1; }
. wrapper.fixedTB { padding-bottom:9.6rem; }
. fixedTop { position:absolute; z-index:10; top:0; left:0; width:100%; height:6.4rem; background:white; border-bottom:solid 1px rgb(228, 229, 230); }
. fixedBottom { width:100%; height:9.6rem; padding:2.4rem 0 3.2rem 0; background:white; border-top:solid 1px rgb(228, 229, 230); }
< div class=" wrapper fixedTB" >
< div class ="fixedTop" ></div>
< div class ="scrollWrap "></div>
< div class = "fixedBottom "></div>
</div>
----------------------------------------------
li 스타일 inline-block으로 줬을때 간격 4px 벌어지는 현상
ul에 font-size:0;으로 주고 li에 폰트사이즈 다시 주기
----------------
말줄임표
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
------
rem
-------------------------------
li 스타일
before로 불릿 스타일 주면서 들여쓰기 유지하기
.CG_main li {
margin:0 0 12px 0;
padding:0 0 0 17px;
font-size:13px;
line-height:17px;
color:#222;
}
.CG_main li:before {
display:inline-block;
content:'';
width:4px;
height:4px;
background:#222;
vertical-align:middle;
margin-left: -15px;
margin-right: 5px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
------------------------------------------
ul, 등의 엘리먼트 나열에서 width, min-width 값 주지 않고도 li등의 엘리먼트가 떨어지지 않게 하는 방법 - white-space:nowrap;
* li는 float시키면 nowrap주어도 떨어짐, 반드시 float:none 상태에서 inline-block 으로 정렬
ul.tabL {
position:relative;
height:28px;
margin-bottom:15px;
white-space:nowrap;
}
.tabL li, .tabL li.on {
display:inline-block;
글자 수 줄이는 방법, 글 자동으로 줄이기
.ellipsis{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis}
http://www.codeigniter-kr.org/bbs/view/tip?idx=8307
------------------------------------------
테이블 간격
min-height 적용 안될때
th line-height 100%로 하면서 최소높이 유지하기
th:after 로 display:inline-block; 주기 - A
td에 100% 채운 text inpu, textarea, selectbox 등의 뒤, bottom에 A가 떨어져서 간격 생기는 것 방지하기 위해 : margin-right:-1px; -textarea 뒤에, 즉 밑에 간격 여전히 생김
-> th에만 after 로 inline-block 주기 - 세로 테이블일때 td에 데이타가 없는 경우 th가 간격 유지해주어야함
td는 line-height로 유지
.CG_tb1 td, .CG_tb2 td {
line-height:18px;
}
.CG_tb2 th {
padding-left:12px;
}
.CG_tb1 th:after, .CG_tb2 th:after {
display:inline-block;
content:'';
height:19px;
margin-right:-1px;
vertical-align:middle;
}
------------------------------------------
background 안에 opacity 포함하기 -> opacity 값을 0으로 따로 준 후 hover시 opacity 1로 변경해도 background에 적용된 opacity가 적용되도록
opacity:1이 됐을때 background:rgba에 적용한 0.9가 1이 소환한 값이 된다.
.dialog_overlay {
position: absolute;
z-index: 100;
background: rgba(55, 55, 55, 0.9);
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
-webkit-backface-visibility: hidden;
}
.dialog--open .dialog_overlay {
opacity: 1;
pointer-events: auto;
}
------------------------------------------
padding, border가 with값에 영향주지 않게 하는 방법
ie8이상, firefox, chrome, safari, opera (firefox만 벤더프리픽스 사용 -moz-)
box-sizing:border-box;
width:300px;
padding:20px;
border:20px;
http://cafe.naver.com/hacosa/117316
box-sizing:content-box; /* 기본값 */
box-sizing:border-box; /* 가로 세로 모두 패딩값과, 보더 값을 포함 */
box-sizing:initial; /* 설정된 기본값 */
box-sizing:inherit; /* 부모속성*/
------------------------------------------
margin-bottom 다음에 오는 엘리먼트의 margin-top 병합 현상
margin-bottom과 margin-top 겹침
->해결 방법 ??
http://thrillfighter.tistory.com/479
------------------------------------------
폼 태그 마우스클릭 효과 없애기
textarea:focus, select:focus, input:focus, input.text1:focus, button:focus, a:focus
-------------------------------------------
https://blog.naver.com/qqprriy/60158702575
백그라운드 사이즈 조절, 백그라운드 자동 조절, 자동으로 늘어나는 백그라운드
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="background-image: url('/irj/portalapps/com.km.es.portal.resources/en/images/logon/kia_login_background.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center">
https://kmibtest.dealer-portal.net/irj/portal
백그라운드 위치 고정
background-attachment:fixed;
https://blog.naver.com/cburang/220262515254
--------------
테이블 선택자
짝수열, 홀수열만 선택하기 even, odd
.elmBody .scrollDiv .EL_tb1 tr:nth-child(even) {
background-color: #f2f2f2;
}
https://blog.naver.com/cheol9lee/221141979807
------------
transform, translate, skew, scale
뒤틀기
skew
https://pjh445.blog.me/220067233848
div {
-ms-transform:skew(20deg, 20deg); /* ie9 */
-webkit-transform:skew(20deg, 20deg); /* chrome, safari, opera */
transform:skew(20deg, 20deg);
}
가로, 세로 사이즈 변경, 병행 / 단독 - 한 사이즈만 변경 가능 scale
https://pjh445.blog.me/220067247628
div {
-ms-transform:scale(0.5, 1.2); /* ie 9 */
-webkit-transform:scale(0.5, 1.2); /* chrome, safari, opera */
transform:scale(0.5, 1.2); /* general */
}
이미지 반전, 뒤집기https://blog.naver.com/bbangpower/221012559131
img {
transform: scaleX(-1);
}
scaleX(), scaleY(), scaleZ()는 동일한 객체에 대해서 같이 사용될 수 없다. 같이 사용해야 한다면 scale3d() 함수를 이용.
img {
transform: scale3d(0.5, 0.5, 1);
}
-webkit-transform:rotate(15deg) scale(1.5,1.5);
---------------
글꼴