Nyong's Blog
0%

201103_TIL(iframe과 반응형 웹)

Posted on Edited on In , ,

오늘 한 것

padding을 이용한 iframe 삽입.

  • 반응형 웹에서 iframe을 이용하여 영상을 삽입할 경우, viewport의 너비에 따라 영상 비율을 유지 시켜줄 필요가 있다.
1
2
3
4
5
6
7
8
9
10
11
12
<figure class="ediya-youtube-wrapper">
  <iframe
    style="background: url(./images/youtube-cover.jpg) no-repeat  center center cover"
    src="https://www.youtube.com/embed/UGPo0RqhbKU"
    frameborder="0"
    allowfullscreen
    aria-labelledby="ediyaYoutube"
  ></iframe>
  <figcaption class="a11y-hidden" id="ediyaYoutube">
    [이디야커피] 고객감사 영상
  </figcaption>
</figure>

일반 iframe

  • 위와 같은 경우 화면에 여백이 남아있지만 영상 크기는 변하지 않는다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.iframe-wrapper {
  width: 100%; /*너비는 최대로 준다.*/
  height: 0 !important; /*높이 값에 영향을 받지 않게 한다.*/
  position: relative;
}

.iframe4-3 {
  /*4:3비율 영상의 높이 백분율*/
  padding-top: 75%;
}

.iframe16-9 {
  /*16:9비율 영상의 높이 백분율*/
  padding-top: 56.25%;
}

.iframe-wrapper iframe {
  /*반응형 블럭 컨테이너에 영상을 넣는다.*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
<figure class="ediya-youtube-wrapper iframe-wrapper iframe16-9">
  <iframe
    style="background: url(./images/youtube-cover.jpg) no-repeat  center center / cover"
    src="https://www.youtube.com/embed/UGPo0RqhbKU"
    frameborder="0"
    allowfullscreen
    aria-labelledby="ediyaYoutube"
  ></iframe>
  <figcaption class="a11y-hidden" id="ediyaYoutube">
    [이디야커피] 고객감사 영상
  </figcaption>
</figure>
  • .iframe4-3, .iframe16-9 등을 넣어 알맞은 비율의 컨테이너를 만든다.

반응형 영상

  • 위와 같이 padding을 이용한 반응형 블록 컨테이너를 만들 수 있다.
  • 참고로 padding, margin의 % 값은 상위 컨테이너 블록의 width 기준이다!

CSS변수 지정

1
2
3
4
5
6
7
8
9
10
/*CSS 색상변수*/
:root {
  --theme-bright: #fff;
  --theme-default: #14182c;
  --theme-primary: #24388d;
}

.text {
  color: var(--theme-default);
}
  1. --를 입력 후 변수명과 지정 속성을 넣어 선언한다.
  2. var()를 통해서 사용할 수 있다.
  • 테마를 사용할 경우 모든 CSS의 색상을 변경하지 않고 변수에 할당된 값만 변경할 수 있기 때문에 유용하다.

공부한 javaScript 코딩 문제

1.같은 숫자는 싫어

문제 설명
배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다.
이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다.
단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다.
예를 들면,

arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다.
arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다.
배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요.

제한사항
배열 arr의 크기 : 1,000,000 이하의 자연수
배열 arr의 원소의 크기 : 0보다 크거나 같고 9보다 작거나 같은 정수

나의 답

1
2
3
4
5
6
7
8
9
10
11
12
13
function solution(arr) {
  var answer = [];
  var j = 0;
  answer[0] = arr[0];

  for (var i = 1; i < arr.length; i++) {
    if (answer[j] != arr[i]) {
      j++;
      answer[j] = arr[i];
    }
  }
  return answer;
}

감탄한 타인의 답안

1
2
3
function solution(arr) {
  return arr.filter((val, index) => val != arr[index + 1]);
}
  • filter()함수는 생각도 못 했다. 사실 아직도 정확히 왜 되는지 모르겠다.

2.두 정수 사이의 합

문제 설명
두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요.
예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다.

제한 조건
a와 b가 같은 경우는 둘 중 아무 수나 리턴하세요.
a와 b는 -10,000,000 이상 10,000,000 이하인 정수입니다.
a와 b의 대소관계는 정해져있지 않습니다.

입출력 예
a b return
3 5 12
3 3 3
5 3 12

나의 답

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function solution(a, b) {
  var answer = 0;

  if (a < b) {
    for (var i = a; i <= b; i++) {
      answer += a;
      a++;
    }
  } else {
    for (var i = b; b <= a; i++) {
      answer += b;
      b++;
    }
  }
  return answer;
}

감탄한 타인의 답안

1
2
3
4
function adder(a, b) {
  var result = 0;
  return ((a + b) * (Math.abs(b - a) + 1)) / 2;
}
  • 수학 공부를 열심히 하자.. 댓글 중 ‘가우스의 재림’ 이라는 댓글이 있었는데 웃겼다.

3.문자열 내 p와 y의 개수

문제 설명
대문자와 소문자가 섞여있는 문자열 s가 주어집니다.
s에 ‘p’의 개수와 ‘y’의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요.
‘p’, ‘y’ 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다.

예를 들어 s가 pPoooyY면 true를 return하고 Pyy라면 false를 return합니다.

제한사항
문자열 s의 길이 : 50 이하의 자연수
문자열 s는 알파벳으로만 이루어져 있습니다.

입출력 예
s answer
pPoooyY true
Pyy false

입출력 예 설명
입출력 예 #1
‘p’의 개수 2개, ‘y’의 개수 2개로 같으므로 true를 return 합니다.

입출력 예 #2
‘p’의 개수 1개, ‘y’의 개수 2개로 다르므로 false를 return 합니다.

나의 답

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function solution(s) {
  var answer = true;
  var result = [];
  result = s;
  var p = 0;
  var y = 0;

  for (var i = 0; i < result.length; i++) {
    if (result[i] == "p" || result[i] == "P") p++;
    else if (result[i] == "y" || result[i] == "Y") y++;
  }

  if (p == y) answer = true;
  else answer = false;

  return answer;
}

감탄한 타인의 답안

1
2
3
4
5
function numPY(s) {
  return (
    s.toUpperCase().split("P").length === s.toUpperCase().split("Y").length
  );
}
  • 대소문자를 모두 구분할 필요가 없었다. .toUpperCase()함수가 있었구나. .split()함수도 익숙하지 않아 사용하지 못 하였다..

출처: programmers

오늘 느낀 것

  • 반응형 웹은 경우의 수에 따라 CSS를 만들어야해서 복잡하긴 하지만 재밌다.

  • 공통 속성을 만들고 viewport에 따라 세분화된 속성을 적용하는 게 훨씬 효율적인 듯 하다.

  • 요즘 간단한 javaScript 문제를 푸는데 재미있다.

  • javaScript는 처음 해보는 거라 좀 어렵지만 그래도 간만에 코딩하니 재밌다.. 쉬운 문제라 그런 걸지도..

  • 함수를 많이 써보고 찾아봐야겠다. 내장함수를 잘 써야 효율적인 코딩이 가능하다.

Nyong’s GitHub