'HTML' 카테고리의 글 목록 (3 Page)

리다이렉션이란 사용자 지정 위치로 우회시키는 방법입니다.(출력의 방향을 바꾸는)

예를 들어서 내가 만약 네이버로 접속했는데, 네이버에서 다음으로 리다이렉션 시킨다면

나는 네이버를 들어갔어도 결론적으로 다음 사이트에 들어가지게 됩니다.^^

보통 리다이렉션을 js로 작업하는데,

접근한 사용자에 따라 분기를 해서 리다이렉트를 시키는 경우라면 아래와 같이 작업을 합니다.

if( user == '유저이름' ) { 
  window.location.href = '이 유저에게만 보여줄 주소';
}

근데 이번에 관련 검색을 하던 중에

물론, <meta> 태그니까 강제로 태그를 수정하는 작업은 하지 말고, 심플하게 사용할 때 쓰도록 하면 좋을 것 같습니다.

비공개 페이지로 사용자가 접근헀을 경우에 비공개.html 파일의 <head> 부분에 아래와 같이 <meta>태그를 삽입해주면 됩니다.

*동적으로 작업해보고자 한다면,, php나 jsp를 사용하여 분기 처리를 할 수도 있을 것 같습니다.

몇 초 뒤에 리다이렉션할지를 적어줍니다.

어느 주소로 리다이렉션할지를 적어줍니다.

같은 페이지에서 이동시킬 때에는 http, https 프로토콜을 안 써도 되지만 같은 도메인이 아닐경우에는 프로토콜을 써주면 됩니다.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

VSCode extension으로 SASS/SCSS를 사용해보자! (0)	2020.05.06
HTML과 CSS 1도 모르겠지만 테이블만들어보기 (Table Generator) (0)	2019.12.23
<input> autocomplete Attribute , 자동 완성 기능에 대하여 (0)	2019.11.25
input 타입 range 스타일 수정하기_커스텀 스타일 (3)	2019.08.01
유튜브 비디오 태그(iframe) css만으로 반응형 비디오 만들기 (0)	2019.06.26
css 선택자 비교 (0)	2019.06.25
CSS 네이밍 케이스, 방법론 (케밥 kebab-case/파스칼 pascalCase/스네이크snake_case/헝가리) (0)	2019.06.15
사파리 브라우저에서 border-radius에 overflow:hidden 적용 안되는 이슈, 버그(?) (0)	2019.06.15

*예시에 사용한 비디오는 유튜브 장삐쭈님 것을 가져다가 사용하였습니다.

css만으로 반응형 비디오 만들기

동적인 값을 구할 때, 보통 js를 많이들 사용합니다.

하지만, 효율적인 이유로 css로 가능한 부분은 js로 컨트롤 하지 않죠.

javascript를 사용하지 않고 css만으로 유튜브에서 가져온 비디오를 반응형으로 만들어보도록 하겠습니다.

먼저 내가 반응형으로 작업하려는 비디오의 비율을 알아야합니다.

보통 데스크탑에서의 비디오 비율은 16:9 이지만, 아닌 경우도 있으므로 비율을 알고 계산을 진행하도록 합니다.

16:9 비율의 해상도 표

2160p	3840x2160
1440p	2560x1440
1080p	1920x1080
720p	1280x720
480p	1280x720
360p	640x360
240p	426x240

반응형 비디오를 만들기 위해 본인이 올리려는 비디오의 비율을 먼저 아셔야합니다.

모든 값은 반응형이므로 width:100%를 기준으로 생각하여 height값을 넣을 것입니다.

21:9 일경우 9/21 = 0.42857140.4285714285714286‬%... (반올림하던 버리던, 이럴 경우 각자의 판단이 중요합니다^^)

16:9 일경우 9/16 = 0.5625%

4:3 일경우 3/4 = 0.75%

계산 방식 감이 오시죠?

자 그럼 16:9 비율의 동영상으로 가지고 작업한 html과 css를 가져와 보도록 하겠습니다.

HTML

<div class="video_wrap">
  <iframe src="https://www.youtube.com/embed/cEN00wMFB2A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

비디오 태그(iframe, video)와 부모 태그가 필요합니다.

CSS

.video_wrap{ position:relative; width:100%; height:0; padding-bottom:56.25%; }
.video_wrap iframe{ position:absolute; width:100%; height:100% }

-비디오 영역에 실질적인 영역 값을 주게됩니다.

-위에서 계산한 비율 값을 넣어주는데, height가 아니라 padding-bottom 값으로 줍니다.

width:100%, padding-bottom:56.25%

여기서 왜?

height가 아니고 padding-bottom으로 높이 값을 컨트롤하는지 의문인 분들이 있을 수 있습니다.

참조하는 태그가 다르기 때문입니다.

한번 예시를 들어보겠습니다.

-먼저 height를 사용해보도록 하겠습니다.

루트영역 .section을 만들어서 height:1000px을 주었습니다.

그 후에 height:56.25%를 준 결과입니다.

무엇을 참조하는지 가장 잘보이는 부분입니다.

height의 참조 기준은 부모 태그이기 때문에 .section의 height:1000px의 56.25%값이 적용되어 video_wrap의 높이 값이 562.5px로 height가 지정된 것이 확인됩니다.

이렇게 되면 비디오 비율이 깨져서 상, 하단에 검정 배경이 노출되는 것이 확인됩니다.

-padding-bottom값을 이용하면 어떻게 되는지도 보겠습니다.

height:0;을 준 후 padding-bottom:56.25%를 주었습니다.

높이 450px이 된 것으로 보아 padding값은 적용된 태그 자신을 참조하고 있음을 확인할 수 있습니다.

비디오가 깨지지 않고있음이 확인됩니다.

결론을 내리면 아래와 같습니다.

-height의 %는 부모태그 참조

-padding의 %는 적용된 해당 자신을 참조

그래서 padding값을 사용해서 비디오를 반응형으로 만드는 것입니다.

그리고 padding값을 사용하기 때문에 css를 더 추가해줘야합니다.

css 코드를 보면 video_wrap(부모태그)에 position:relative;가 있고 ifram에 position:absolute가 있음을 보셨을 것입니다.

이것은 padding-bottom때문에 iframe이 영역 밖으로 밀려나게되는데 iframe을 absolute로 띄워서 얹기 위함입니다.

그리고 absolute를 사용하기 위해 relative로 부모태그를 기준으로 만들어준 것이구요.

이것이 이해가 안간다면 position에 대해 찾아보시기 바랍니다.

자 이렇게해서 완성본입니다.

See the Pen agyaae by leeyoonseo (@okayoon) on CodePen.

그렇다면 유튜브에서 가져오는 태그만일까?하고 html5 태그인 <video>로도 실험해습니다.

결론부터 말하면 <video> 태그를 사용할 때, 이러한 편법을 쓸 필요가 없습니다.

물론 써도 반응형 비디오가 되기는 합니다만, <video>태그는 자동으로 height를 맞춰줘서 불 필요한 작업입니다.

width:100%, height:100%; 를 동일하게 주었을 때의 결과입니다.

<video>태그 만이 비율을 맞춰 표현함을 볼 수 있었습니다.

따라서 <video>태그일 경우에는 위의 padding-bottom 편법을 쓰지 않아도 됩니다.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

HTML과 CSS 1도 모르겠지만 테이블만들어보기 (Table Generator) (0)	2019.12.23
<input> autocomplete Attribute , 자동 완성 기능에 대하여 (0)	2019.11.25
input 타입 range 스타일 수정하기_커스텀 스타일 (3)	2019.08.01
메타태그로 브라우저 사용자 페이지 우회시키기(리다이렉션 시키기) (0)	2019.07.29
css 선택자 비교 (0)	2019.06.25
CSS 네이밍 케이스, 방법론 (케밥 kebab-case/파스칼 pascalCase/스네이크snake_case/헝가리) (0)	2019.06.15
사파리 브라우저에서 border-radius에 overflow:hidden 적용 안되는 이슈, 버그(?) (0)	2019.06.15
아이프레임(iframe)이란? (0)	2019.06.05

점수표

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 style

속성선택자 a[href=""] (10점) > 클래스 (10점)

최총

important > inline > id > 속성선택자 > class

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

<input> autocomplete Attribute , 자동 완성 기능에 대하여 (0)	2019.11.25
input 타입 range 스타일 수정하기_커스텀 스타일 (3)	2019.08.01
메타태그로 브라우저 사용자 페이지 우회시키기(리다이렉션 시키기) (0)	2019.07.29
유튜브 비디오 태그(iframe) css만으로 반응형 비디오 만들기 (0)	2019.06.26
CSS 네이밍 케이스, 방법론 (케밥 kebab-case/파스칼 pascalCase/스네이크snake_case/헝가리) (0)	2019.06.15
사파리 브라우저에서 border-radius에 overflow:hidden 적용 안되는 이슈, 버그(?) (0)	2019.06.15
아이프레임(iframe)이란? (0)	2019.06.05
조건부 주석(Conditional comments) (0)	2019.06.05

#네이밍 케이스

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 -> null로 끝나는 문자열(string+zero)

# css 방법론

1.BEM

-개발, 디버깅, 유지보수를 위하여 가능한 한 명확하게 네이밍하는 것이 목표

-소문자, 숫자만을 조합

-조합은 하이픈(-)으로 연결하여 작명

-모든것이 클래스이고 중첩된 것은 없다.

블록(block)

-형태(red,big)가 아닌 목적(menu, button)에맞게 결정해야 한다. (header,menu,search-form...)

-환경에 영향을 받지 않아야한다.(여백, 위치 설정x)

-태그, id선택자로 사용하면 안된다.

요소(Element)

-블록안에서 특정 기능을 담당하는 부분

-block__element 형태로 사용(더블 언더바)

-형태(red,big)가 아닌 목적(item, text, title, list)에맞게 결정해야 한다.

-블록에 종속되어 있어 블록의 부분으롬나 사용할 수 있고 다른 요소의 부분으로 사용할 수 없다.

-선택적으로 사용가능해야 한다.(요소가 없을 수도 있다)

수식어(Modifier)

-블록이나 요소의 모양(color,size), 상태(disabled, checked..)를 정의한다.

-block__elemt--modifier, block--modifier(더블 하이픈)로 사용한다.

-블리언 타입, 키-벨류 타입이 있다.

불리언: 수식어가 있으면 값이 true라고 가정(form__button--disabled)

키-벨류:하이픈으로 연결하여 표시한다.(block__element--modifier)

혼합사용(Mix)

-block1,block2__element 형태로 사용가능

(?)-block2__element에 여백이나 위치를 지정하고 block1은 독립적으로 유지할 수 있다.

결론

-블록,요소,수식어의 목적에 적응되면 네이빙이 수월해짐

-용도와 형태 위치를 알수 있다보니 유지 보수 용이

-네이밍이 길어지니 sass, less에 적합

틀린 예시

-중첩이 있으면 안됨.

2.OOCSS(Object Oriented CSS) 객체지향 css

-구조와 모양으로 분리

-반복적인 것은 별도로 분리

-콘테이너와 콘텐츠의 분리(의존적인 스타일 사용x)

.title -> h2, h2.title

네이밍

-가능한 짧고 간결하게 작성

-동작과 형태가 예상 가능하도록 명확히 작성

-형태보다는 목적의 의미를 작성

-구체적이지 않고 일반적으로 사용가능하도록 작성

기존 방식

<a class="facebook_btn">Facebook</a>
<a class="twitter_btn">Twitter</a>

OOCSS 적용

<a class="btn facebook">Facebook</a>
<a class="btn twitter">Twitter</a>

.btn { 공통 버튼 스타일 정의 }

장점

-코드의 재사용성이 높아 코드의 길이가 줄어든다. (css 파일크기가 줄어드므로 속도 향상)

-새로운 요소를 추가할 때 기존 모듈을 통해서 재사용이 가능하고 쉽게 확장가능하다.(유지보수)

단점(비판의 시선)

-복잡해지는 HTML에서는 오히려 유지보수가 힘들다

-가독성이 떨어진다.

-미디어 객체와 함께 적용하기는 좋으나 프로젝트 전반적으로 적용하기에는 어렵다.

따라서 OOCSS, BEM 혼용으로 사용하는 곳들도 있다.

-재사용 가능한 객체들을 OOCSS, 그 이외에는 이름 규칙을 BEM으로 변형

-NHN, AirBnB등 많은 곳에서 혼용으로 사용함.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

input 타입 range 스타일 수정하기_커스텀 스타일 (3)	2019.08.01
메타태그로 브라우저 사용자 페이지 우회시키기(리다이렉션 시키기) (0)	2019.07.29
유튜브 비디오 태그(iframe) css만으로 반응형 비디오 만들기 (0)	2019.06.26
css 선택자 비교 (0)	2019.06.25
사파리 브라우저에서 border-radius에 overflow:hidden 적용 안되는 이슈, 버그(?) (0)	2019.06.15
아이프레임(iframe)이란? (0)	2019.06.05
조건부 주석(Conditional comments) (0)	2019.06.05
CSS3 란 (Cascading Style Sheets) (0)	2019.06.05

Peep

HTML

메타태그로 브라우저 사용자 페이지 우회시키기(리다이렉션 시키기)

'HTML' 카테고리의 다른 글

유튜브 비디오 태그(iframe) css만으로 반응형 비디오 만들기

css만으로 반응형 비디오 만들기

'HTML' 카테고리의 다른 글

css 선택자 비교

점수표

행동

결과

최총

'HTML' 카테고리의 다른 글

CSS 네이밍 케이스, 방법론 (케밥 kebab-case/파스칼 pascalCase/스네이크snake_case/헝가리)

#네이밍 케이스

# css 방법론

'HTML' 카테고리의 다른 글

+ Recent posts

티스토리툴바