메타태그로 브라우저 사용자 페이지 우회시키기(리다이렉션 시키기)
리다이렉션이란 사용자 지정 위치로 우회시키는 방법입니다.(출력의 방향을 바꾸는) 예를 들어서 내가 만약 네이버로 접속했는데, 네이버에서 다음으로 리다이렉션 시킨다면 나는 네이버를 들어갔어도 결론적으로 다음 사이트에 들어가지게 됩니다.^^ 보통 리다이렉션을 js로 작업하는데, 접근한 사용자에 따라 분기를 해서 리다이렉트를 시키는 경우라면 아래와 같이 작업을 합니다. if( user == '유저이름' ) { window.location.href = '이 유저에게만 보여줄 주소'; } 근데 이번에 관련 검색을 하던 중에 태그에도 리다이렉트 기능이 있다는 것을 알게되었습니다. 물론, 태그니까 강제로 태그를 수정하는 작업은 하지 말고, 심플하게 사용할 때 쓰도록 하면 좋을 것 같습니다. 비공개 페이지로 사용자가 ..
유튜브 비디오 태그(iframe) css만으로 반응형 비디오 만들기
*예시에 사용한 비디오는 유튜브 장삐쭈님 것을 가져다가 사용하였습니다. css만으로 반응형 비디오 만들기 동적인 값을 구할 때, 보통 js를 많이들 사용합니다. 하지만, 효율적인 이유로 css로 가능한 부분은 js로 컨트롤 하지 않죠. javascript를 사용하지 않고 css만으로 유튜브에서 가져온 비디오를 반응형으로 만들어보도록 하겠습니다. 먼저 내가 반응형으로 작업하려는 비디오의 비율을 알아야합니다. 보통 데스크탑에서의 비디오 비율은 16:9 이지만, 아닌 경우도 있으므로 비율을 알고 계산을 진행하도록 합니다. 16:9 비율의 해상도 표 2160p 3840x2160 1440p 2560x1440 1080p 1920x1080 720p 1280x720 480p 1280x720 360p 640x360 24..
점수표 class는 10점 속성선택자 10점 id는 100점 inline은 1000점 imporatnt는? 행동 id 1개에 100점, 클래스 101개 1010점 비교 inline기입 1000점 클래스 101개 1010점 비교 important와 inline 비교 important와 id, inline 비교 속성 선택자 10점 클래스 10점 비교 See the Pen css specificity by leeyoonseo (@okayoon) on CodePen. 결과 id 1개(100점) > 클래스 101개(1010점) inline style(1000점) > 클래스 101개(1010점) important (??) > inline style (1000점) important (??) > id, inline s..
CSS 네이밍 케이스, 방법론 (케밥 kebab-case/파스칼 pascalCase/스네이크snake_case/헝가리)
#네이밍 케이스 1.케밥-케이스 kebab-case, spinal-case, Train-Case, Lisp-case -하이픈으로 단어를 연결하는 표기법 -HTML 태그의 id, class 속성으로 흔히 사용됨. 2.파스칼 표기법 PascalCase, BackgroundColor, TypeName, PowerPoint -첫 단어를 대문자로 시작하는 표기법 3.스네이크 케이스(뱀 표기법) snake_case, background_color, type_name -단어를 밑줄 문자로 구분하는 표기법 -perl, php, python, ruby, rust.... 4.헝가리언 표기법 strName, bBusy, szName -접두어를 사용하는 표기법 -str -> string, b -> boolean, sz -> ..