HTML·CSS/responsiveWeb8 iframe Youtube 반응형 만들기 참조 : http://triki.net/prgm/1491 [CSS] 삽입된 유튜브 동영상을 반응형(Responsive)으로 만들기 – 모두의매뉴얼 워드프레스 블로그를 사용하면서 유튜브 동영상을 주소만 넣으면 아주 간단하게 삽입할 수 있습니다. 하지만 이 유튜브 동영상을 사용자에게 보여주는 과정에서 문제가 발생하는데 크기가 자동으로 조절 되지 않고 굉장히 크거나 작게 표현되는 것입니다. 구글링 해보니 그 문제점을 CSS 로 해결 할 수 있는 방법이 있어 기록으로 남겨 봅니다. (워드프레스의 경우를 예로 하고 있지만 유튜브 동영상이 임베드 된 경우면 거의 비슷할테니 같은 방식을 적용하면 워드프레스가 아 triki.net ■ 중요한 부분은 16:9 비율을 맞추기 위하여 iframe(position:absolu.. 2020. 3. 27. '2020.03.26 반응형 이미지 최근에는 해상도에 따라서 다른 해상도의 이미지를 제공하는 방식으로 한다고 함. 참고 : 고밀도 디스플레이를 위한 이미지 다루기 1. 2개의 이미지를 제공하여, 해상도나 미디어에 따라 다른 이미지를 제공 / 쿼리를 활용 // 장점 : 호환성이 좋음 2. srcset 을 이용하여 다른 해상도의 이미지를 제공 // 장점 : 편함 * 다음 트로이 / 기기별 해상도 제공 3. 쿼리를 활용하여 백그라운드 이미지 파일 변경 2020. 3. 26. 1줄 / 2줄 줄임 1. 스크롤바가 생기면 안됨 2. 주석을 잘 달자 3. 반응형은 한 섹션단위로 확인해가면서 하자 4. 1줄 줄임 text-overflow 사용 조건 ! white-space는 엔터키가 적용되지않는 속성으로 사용해야되고 (no-wrap / pre) / over-flow:hidden이 들어가야하고, width 값이 고정적이여야지 가상요소로 ・・・ 5. 2줄 줄임은 webkit을 활용해야함. 2020. 3. 24. '2020.03.20 IR기법(Images Replacement) reset.css 활용 .ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우(Phark Method) */ .ir_wa {display:block; overflow:hidden; position:relative; z-index:-1; width:100%; height: 100%;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(WA IR) */ .ir_su {overflow: hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9.. 2020. 3. 20. '2020.03.19 1. font-awsome 사용방법 확인 - 웹 아이콘을 이미지가 아닌 폰트로 사용할 수 있게 해주는 CSS 스타일. 따라서 fonts 파일도 링크 걸어줘야 함. - 웹 아이콘이 이미지가 아닌 폰트로 사용할 수 있게 되므로, font-size, color 등의 font 속성을 활용할 수 있는 장점과 이미지 해상도가 좋아짐 2. css 로 말풍선 삼각형 구현 - border color에 transparent를 주는 방식을 활용하여 삼각형을 만들어냄 - 주로 after, before를 활용 - 예를 들어 아래와 같이 속성값을 설정한다면 border-top:5px 0 0 #000; border-left:5px 0 0 transparent; border-right:5px 0 0 transparent; borde.. 2020. 3. 19. '2020.03.18 1. 문서세팅 - sublimeText3 를 설치하여 수업을 진행하기를 권함 - 계속해서 등록하라는 문구가 나와서, 귀찮음 / VSC로 옮겨서 수업을 듣기로 함 2. 유투버 선생님이 진행하는 홈페이지를 클론 코딩하는 방식으로 진행될 듯함 - 따라서 만들어보고, RESET, 모더나이저 등에 대한 개념, 파비콘, 메타부분에 대한 것들도 함께 배우는 의미에서 그대로 그 진행을 따라가려함 2020. 3. 18. 반응형 웹 기본 Layout 출처 : https://github.com/webstoryboy/responsive2019 2020. 3. 16. responisveWeb_반응형 웹 반응형 사이트 레이아웃 반응형 사이트 만들기(2019) - YouTube www.youtube.com * 가장 기초적으로 @media all and (min-width: 768px) and (max-width: 1024px) { 실행문 } 의 경우, "최소 가로값 768px 최대 - 가로값 1024px 사이"에서 실행될 CSS 스타일을 결정할 수 있다. 2020. 3. 15. 이전 1 다음
