퍼블리싱/CSS(22)
-
css: flex
FLEX 1. 부모요소에 주는 태그 display: flex / inline-flex flex-direction flex-wrap: 줄넘김 설정 justify-content 가로 정렬 align-item 세로 정렬 2. 자식요소에 주는 태그 order: z-index와 같은 방식, 미설정 시 최상위 http://css3generator.com/ CSS3Generator by @RandyJensen Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown print..
2020.12.18 -
css로 주사위 만들기, transform, animation 실습/ 자바스크립트, 제이쿼리 없이 슬라이드배너 버튼 만들기
transform rotate 3D 주사위 만들기 실습 .wrap{ width:200px; height:200px; position: relative; font-size:100px; text-align: center; line-height: 200px; color:white; margin:100px auto; transform-style: preserve-3d; transform:rotate3d(1,1,0,0deg); transition:3s; } .wrap:hover{ transform:rotate3d(1,1,0,360deg) } .wrap>div{ width:200px; height:200px; position: absolute; } .box1{ background-color:rgb(218, 112,..
2020.12.11 -
css: multi column, table, transition, trasform
multi column column-count 단 갯수 column-gap 단 간격 column-rule 구분선 table border-collapse:collapse; 테두리 합치기 transition transition-duration transition-property: 위치, 크기, margin/padding, border, color/background, opacity, transform transition-delay transition-timing-function: ease(default), cubic-beizier cubic-beizer https://cubic-bezier.com/ cubic-bezier.com cubic-bezier.com transform :translate() px, ..
2020.12.10 -
css: text-align:justify가 안먹힐때, font-face, shadow, box-sizing, 와이어프레임 오븐
text-align:justify 아시아 문자의 경우 가끔 justify가 먹히지 않는 경우가 있다고 한다. 아래 참조할 것 .rightBottom .footMenu{ text-align: justify; } .footMenu>li{ display: inline-block; } .footMenu:after { content:""; display:inline-block; width:100%; } font-face - ttf : - woff : 모든 브라우저 전부 지원, 익스하위에서 지원안됨 - eot : 익스 하위에서 지원 @font-face { font-family: 'NanumBarunGothic'; src: url('NanumBarunGothic.eot'); src: url('NanumBarunGot..
2020.12.08 -
html, css 종합 예제 클론코딩 실습
* 코딩 순서 1. 알마인드로 구조 먼저 구성 2. html 마크업 3. common css 작성 4. style css 작성 1. 구조 작성 2. html 메인메뉴 바로가기 본문 바로가기 * float의 부모요소 찾아줄 때, css에서 일일히 쓰는 것이 아니라 html 에 clearFix로 클래스 주기 3. common css *, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; color: #333; } body { font-family: , sans-serif; font-size: 14px; font-weight: 40..
2020.12.04 -
css: position, float, 알마인드 이용한 돔트리 만들기, 실습
* 부모 영역에 사이즈를 주고 자식에게 퍼센트 적용 (for 반응형) * 보통 검색창 만들때 placeholder 보다는 label positioning * nav, container 무조건 id * line-height : 행간 지정 및 정렬 * vertical-align : 형제 요소와의 상대적 (행간) 정렬 알마인드 : 돔트리 작성 https://www.altools.co.kr/Download/ALMind.aspx 알툴즈 - 알마인드 알마인드는 마인드맵® 이론을 구현한 프로그램으로, 알마인드만의 독창적인 인터페이스인 Drawing Interface, 작업 정보 설정, 토픽 추가 설명 기능, 다른 파일 형식과의 호환성 지원 등을 통해 개인 www.altools.co.kr position :fixed ..
2020.12.02