본문 바로가기

분류 전체보기

 (244)
[justice] Parameter 파라미터란? 파라미터를 구글로 찾아보았을 때 오른쪽 상단에 매개변수라고 나온다. 감이 안잡히는데 보통 url을 보면 https://www.youtube.com/embed/wvAL45BZnh0?autoplay=1 url 뒤에 물음표가 보일 텐데 그 물음표를 기점으로 뒤에 붙는 매개들을 파라미터 즉 매개변수라 한다. 예를 들어 조건을 붙여서 게시판의 목록에서 하나의 게시물을 눌렀을 때 해당 인덱스를 파라미터로 물고 게시의 내용 페이지로 이동하여 보여주는 역할을 한다. 또는 로그인을 했을 때 보여지는 마이페이지나 배송관리 등 구별해야하는 페이지에서 매개변수가 사용되어 각 사용자의 정보를 보여준다.
[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..
[css] display flex 크로스브라우징 display: flex;를 많이 사용 하는 추세인데 이에 맞게 크로스브라우징을 해야한다. 가급적이면 display: table;이나 float: left;를 사용하려 하지만 display: flex;가 주는 스타일의 간편함 때문에 계속 찾게 되는 것 같다. 아래는 기본적으로 flex할 대상의 부모에게 flex 해주는 스타일이다. ul { display: -ms-flexbox; display: -webkit-box; display: flex; } flex 대상의 각각의 높이가 다른 정렬 - top으로 하기 li { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } - center로 하기 li { -webkit-box-a..
[javascript] 디바이스별로 이미지 적용하기 예시) PC기준 디폴트 이미지 명 : imageName.png 테블릿 이미지 명 : imageName_TA.png 모바일 이미지 명 : imageName_MO.png 랩탑 이미지는 있으면 imageName_LT.png 로 준비할 것. var BREAK_POINT_CNT = 4; var VIEW_TYPE; var PREV_VIEW_TYPE; var DESKTOP_START_POINT = 1440; var LAPTOP_START_POINT = 1024; var TABLET_START_POINT = 768; var MOBILE_START_POINT = 480; function setViewType() { //var wid = $('html').prop('scrollWidth'); var width = wind..
[css] font 설정 스포카산스네오를 예로 들어 설명하겠다. 1. 적용하고자 하는 폰트 css 파일을 만든다. SpoqaHanSansNeo.css @charset "utf-8"; /* * 스포카한산스네오 */ @font-face{ font-family:'SpoqaHanSansNeo'; font-weight: 300; src:url(SpoqaHanSansNeo-Regular.eot); src:url(SpoqaHanSansNeo-Regular.eot?#iefix) format('embedded-opentype'), url(SpoqaHanSansNeo-Regular.woff) format('woff'), url(SpoqaHanSansNeo-Regular.ttf) format('truetype'); } @font-face{ font..
[publishing] display: grid; 에 대하여 display: flex; 와 비슷한 성질인 듯하나 display: grid; 는 말그대로 웹 디자인에서 사용하는 그리드 개념과 비슷하다. flex 처럼 부모에 display: grid;를 설정 한 후, 그 안의 items을 정렬하는 스타일을 추가한다. 1 2 3 4 5 6 7 8 grid-template-columns: repeat(4, 1fr); grid-template-columns 는 각 그리드 아이템의 너비를 결정한다. 테이블에서 column를 생각하면 쉽다. grid-template-columns: repeat(4, 1fr); 은 grid-template-columns: 1fr 1fr 1fr 1fr;와 같은 말이다. - repeat()를 사용하면 그리드가 많이 분할될 경우 간략하게 스타일을 추..

티스토리툴바