본문 바로가기

DEVELOP

 (150)
[css] unordered list ul 태그 li에 dot 붙이기 여태 디자인 시안이 넘어왔을 때 목록에 '.'이 붙어있으면 background-image 처리로 dot를 붙였었다. li::before 스타일을 사용하여 dot을 표현할 수 있지만, 리스트 텍스트가 길어서 두줄로 구현 될경우 dot이 다음과 같은 현상이 생겼기 때문이다. 그치만 li::before 스타일에 position: absolute;를 추가하여 스타일링 하면 굳이 포토샵이나 이미지 점을 사용하여 dot을 구현하지 않아도 된다. ul.dots-list li { position: relative; margin-top: 5px; padding-left: 12px; font-size: 18px; font-weight: 300; line-height: 27px; } ul.dots-list li::befor..
[css] flex 세로 정렬 크로스 브라우징 보통 display: flex;를 가로 정렬을 위해서 사용한다. 또한 flex-direction 스타일의 default도 row;이다. 하지만 세로 정렬을 하되 전체 정중앙 정렬을 해야할 경우가 있다. 이럴땐 display: flex; 후에 flex-direction: column;를 추가해주면 되는데 문제는 크로스 브라우징이다. 사용자가 어떠한 브라우저를 사용할지는 모르는 일이라 모든 브라우저 상황을 고려해야한다. flex 세로 정렬 크로스 브라우징 스타일은 다음과 같다. .style { -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; }
[plugin] 반응형 slick 설정시 ".slick-list" padding 없애기 데스크탑에서는 세개씩 보여주고 centerMode: true; 설정을 해둔 슬라이드를, 모바일에서는 하나씩 보여주려한다. 하지만 모바일 환경에서는 이전, 다음 슬라이드가 여전히 보인다...! 소스를 보면 클래스 slick-list에 스크립트 스타일로 패딩이 좌우 잡히기 때문에 보이는 것이다. 아무리 css로 slick-list width 값을 100%로 해주어도 보일것이다. 왜일까 계속 디버깅한 결과, 처음 디폴트 데스크탑 옵션에서 centerMode: true;로 설정을 해주었기 때문에 모바일 환경에서는 slidesToShow를 1로 해주고, centerMode: false;로 설정해주어야 다음과 같이 깔끔하게 보인다. 핵심은 slick.js의 옵션인 centerMode에 있었다.
[css] 드래그 방지 스타일 체크박스나 라디오박스의 레이블 텍스트가 드래그 가능한 채로 사용자에게 노출이 된다면, 이런 상황에 맞딱드린다. 이를 방지하는 스타일은 아래와 같다. -ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none;
[css] 정중앙 정렬2 과거에 element 정중앙 정렬에 대해서 포스팅을 한적이 있다. jintrue.tistory.com/entry/css%EB%A1%9C%EB%A7%8C-%EC%A0%95%EC%A4%91%EC%95%99%EC%A0%95%EB%A0%AC-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 [CSS] 중앙정렬 html 이벤트 종료 css .end-box { display: flex; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); align-items: center; } .end-box p { color: #fff; font-.. jintrue.tistory.com 이 포스..
[script] 유튜브 커버 커스텀 하기 원하는 유튜브 링크를 추가했을 때 화면상에 해당 영상의 인트로 이미지가 나온다. 아래 처럼. 그치만 디자인에 따라 재생 버튼 또는 시작 전 intro가 변경 될 수 있다. (위에 타이틀에서 말한 유튜브 커버란 아래처럼 재생 버튼 또는 시작 전 intro 디자인을 말한다.) 해당 소스는 다음과 같다. #eventTutor .video-box .yt_box { width: 702px; height: 394px; background: url('https://www.home-learn.co.kr/front/imgs/event/event_aitutor/cover_youtube_aitutor.jpg') no-repeat center top; background-size: contain; cursor: pointer..
[coding] 유튜브 코드에 추가하기 유튜브 반응형 높이에 대한 스크립트를 이야기 하다가 문득 유튜브를 코드에 추가하는 법을 상세하게 다루고 싶어서 포스팅한다. 1. 원하는 유튜브 영상 페이지로 간다. 2. 해당 영상 위에서 오른쪽 마우스 > 소스 코드 복사 3. 복사해서 붙여넣기 하면 아래와 같은 코드가 붙여넣어질것이다. autoplay; 옵션은 자동으로 영상을 재생하는 옵션. 4. 영상사이즈를 디바이스에 맞게 하기위해 div로 감싼후 스타일을 지정하면된다. 5. 유튜브 디바이스별 높이 사이즈 정의 스크립트 참고 : jintrue.tistory.com/entry/script-%EC%9C%A0%ED%8A%9C%EB%B8%8C-%EB%B0%98%EC%9D%91%ED%98%95-%EB%86%92%EC%9D%B4-%EC%A0%95%EC%9D%98
[script] 유튜브 반응형 높이 정의 요즘 사이트에 역동적인 효과를 위해 동영상 유튜브를 많이 사용한다. 모바일 디바이스를 위해 유튜브 높이를 조절해줘야한다. 유튜브 영역에 name을 videoHeight 정의한후 아래의 스크립트를 해당영역 뒤에 추가해주면 된다. 디바이스별로 삽입한 유튜브의 높이를 상황에 맞춰 조절하는 스크립트. html javascript $(window).resize(function () { updateYtboxHeight(); }) updateYtboxHeight(); function updateYtboxHeight() { $('[name="ytFrame"]').each(function (index, val) { let wid = $(val).outerWidth(); console.log('w',wid); let he..

티스토리툴바