IT정보 웹디자인 유익한 정보

게시글에 생략부호를 만들고 싶을 때 display: inline-block; span에 가로길이(width)를 주기위해 inline-block 속성을 부여한다. width: 80%; 가로길이를 정한다. white-space: nowrap; 줄바꿈을 하지 않는다. overflow: hidden; 넘치는 글자는 보이지 않도록 한다. text-overflow: ellipsis; 생략기호를 만들어준다. html 부분 공지사항 text-overflow: ellipsis; 생략기호를 사용하여 게시글의 끝을 처리하였다. 2022.03.14 반품/환불 규정에 대해 알려드립니다. 2022.03.14 S/S 시즌 신규 의류 신상품 안내 2022.03.14 신규회원 대상 할인 이벤트 안내 2022.03.14 css 부분 u..

[css] animation, transition 퍼블리싱 할 때 속도 속성, 속성값 transition-timing-function: 에 여러가지 속성값을 줄 수 있다. div { transition-timing-function: linear; } 체감상 느낌을 표현해보면 1. ease : 빠른 느낌 ( slow fast slow) cubic-bezier(0.25,0.1,0.25,1)) 2. ease-out: 마지막이 느리다. ease 느낌 cubic-bezier(0,0,0.58,1)) 3. linear: 등속 cubic-bezier(0,0,1,1) 4. ease-in-out: 처음과 마지막이 느리다. 약간 등속느낌 cubic-bezier(0.42,0,0.58,1) 5. ease-in: 처음이 느리다...

flex, justify-content 자료 중앙에 배치시키기 높이 100 픽셀 안에서 가로 세로 중앙 수평 에 위치하게 된다. justify-content: space-around; 왼쪽 마진 , 오른쪽 마진 적당히 남기고 배열된다. .box{ display: flex; justify-content: space-around; align-items: center; height: 100px; padding: 0.5em; border: 1px solid #f00; }

1em 은 20픽셀이다. 2em 은 40픽셀이다. em, rem 상대 단위 em : 부모 요소의 글꼴 크기를 기준으로 따라간다. rem : 루트 요소의 글꼴크기(16px: 기본값)를 기준으로 따라간다. 루트요소 란 요소를 의미한다. 루트요소의 기본글꼴크기는 16px 이다. [ 여백 크기를 정할 때 em ] em 으로 내, 외부 여백 크기를 정할 때는 ( margin 이나 padding 사용할 때 ) 자기 자신의 글자 크기를 기준으로 한다. 기본적인 브라우저 기준으로 볼 때 1em 은 16px 을 기준으로 한다.

반응형 이미지 제작: 가로폭 100% 이미지 만들기 반응형 이미지 제작시 참고사항 반응형의 경우 가로쪽 스크롤이 생기면 안된다. max-width: 1200px; 를 주어 가로 사이즈의 최대값 ( max-width )을 부여해준다. 가로 100%의 이미지를 만든다. max-width: 1200px; width: 100%; .img_wrap { /* width: 1200px;*/ max-width: 1200px; width: 100%; background: #f00; margin: 0 auto; } 백그라운드 에 이미지를 넣어서 만드는 방법 가로폭은 max-wdith 로 길이를 지정해주고 높이는 상대적 % 비율로 만들어 넣어준다. 높이(height )는 padding-bottom 으로 넣어준다. 높이 계산..

모바일웹 햄버거 메뉴버튼 만들기 세 줄모양 햄버거 메뉴를 만들 수 있다. span 태그 4줄을 입력하고 positon : absolute 로 세팅하고 2번째와 3번째는 같이 겹쳐 놓는다. https://codepen.io/sevenpia/pen/wvXLLMm Html 구조 html5 css3 javascript jquery css 내용들 @charset "utf-8"; * { margin: 0; padding: 0; } ul, li { list-style: none; font-size: 22px; } a { text-decoration: none; color: inherit; } img { border: 0; } body { font-family: "맑은 고딕", MalgunGothic, arial, s..

css코딩시 브라우저의 세로( y축)의 스크롤이 항상 보이도록 할 경우 css 퍼블리싱할 경우 화면의 내용이 길지 않아서 한 화면에 나오고 있는데.. 일부 요소에 transition 등의 효과를 사용하여 일시적으로 세로 스크롤이 생겼다가 바로 사라지게 되는 경우 y축 스크롤의 가로 크기만큼 화면이 좌우로 흔들리게 됩니다. 그럴 경우 짧은 내용물의 화면이라도 y축의 스크롤이 항상 보이도록해서 세로 스크롤의 width 만큼 자리를 차지하게 하여 화면 흔들림을 방지할 수 있습니다. 브라우저의 세로( y축)의 스크롤이 항상 보이도록 할 경우 body 쪽에 아래 코드를 적어줍니다. overflow-y: scroll; body { font-family: "맑은 고딕", MalgunGohic, arial, sans-..

반응형웹 반응형 웹에서 가로 픽셀 px 을 %로 계산하는 방법 px => % 값으로 계산하는 방법 자식태그(px) / 부모태그(px) = 결과값 결과값 * 100 = %(퍼센트) 픽셀값을 퍼센트 값으로 구할 수 있다. 반응형 레이아웃 잡을 때 꼭 알아야되는 계산법입니다.

css3 animation 모음 ★ http://www.justinaguilar.com/animations/index.html CSS3 Animation Cheat Sheet - Justin Aguilar If you found this project useful, spread the word on Twitter! Direct your questions, comments, concerns, love letters, and cat videos to @JXTN or to my email. www.justinaguilar.com ★ https://www.minimamente.com/project/magic/ Magic Animations CSS3 www.minimamente.com ★ https://anima..

슬라이더 : swiper https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com CDN 연결 HTML 기본 구조 Slide 1 Slide 2 Slide 3 ... Swiper CSS Styles/Size .swiper { width: 600px; height: 300px; } Initialize Swiper const swiper = new Swiper('.swiper', { // Optional paramet..

sns 버튼 코딩소스 평상시에는 그레이 버튼에서 버튼에 마우스을 올리면 색상이 있는 버튼이 보이도록 처리했다. 방법1 텍스트로 코딩후 css로 백그라운 색상과 형태를 변경하는 방법 (일반적 코딩방법) 방법2 : htm l 코드내에 onmouseover 와 onmouseout 으로 코딩할 수 있다. 이미지 제작하여 코딩한다. 방법3 : html 코드는 단순하게 코딩하고 css 만 사용하여 코딩할 수 있다. 해당 이미지의 그레이톤 버튼에서 hover시 해당이미지 나오도록 한다. 이미지를 제작하여 사용한다.. html코딩 css 코딩 span.bt1 { display: block; width: 50px; height: 50px; line-height: 50px; text-align: center; backgr..