HTML+SCSS(CSS3)
웹 개발의 가장 기본이라 할 수 있는 HTML/CSS 내용을 담고 있습니다.
-
👋 반응형 웹의 미디어 쿼리 (Media Query) 와 Viewport 안녕하세요 TriplexLab 입니다. 오늘은 미디어 쿼리를 사용할때 max-width와 min-width의 차이점에 대해서 말씀드릴게요. /** 반응형 만들때 min-width기준으로 css 작성하는 기준을 설명합니다. min-width는 모바일의 해상도가 가장 우선으로 읽혀야 합니다. */ /** 모바일의 해상도 기준 */ @media screen and (min-width: 320px){ .bg1 { width: 100px; height: 100px; background-color: red; } } /** 테블릿 해상도 기준 */ @media screen and (min-width: 768px){ .bg1 { backgroun..
미디어 쿼리 (Media Query) 와 Viewport👋 반응형 웹의 미디어 쿼리 (Media Query) 와 Viewport 안녕하세요 TriplexLab 입니다. 오늘은 미디어 쿼리를 사용할때 max-width와 min-width의 차이점에 대해서 말씀드릴게요. /** 반응형 만들때 min-width기준으로 css 작성하는 기준을 설명합니다. min-width는 모바일의 해상도가 가장 우선으로 읽혀야 합니다. */ /** 모바일의 해상도 기준 */ @media screen and (min-width: 320px){ .bg1 { width: 100px; height: 100px; background-color: red; } } /** 테블릿 해상도 기준 */ @media screen and (min-width: 768px){ .bg1 { backgroun..
2021.05.23 -
유튜브(Youtube) 영상 비율에 마쳐 반응형으로 만들기 안녕하세요 TriplexLab 입니다. 오늘은 유튜브(Youtube) 영상 컨텐츠를 16:9비율에 마쳐 반응형으로 만드는 방법에 대해서 살려보도록 하겠습니다. 먼저 유튜브로 가셔서 퍼오고 싶은 영상를 퍼옵니다. 그리고 하단 처럼 수정합니다. ✍️ 유튜브 영상 비율 코드 padding-bottom 계산식은 height / width * 100 입니다. /* 비디오 컨텐츠를 16:9비율에 마쳐 반응형으로 만들기 */ .video {position: relative; margin: 0 auto; max-width: 900px; width: 100%;} .video > div{ width: 100%; padding-bottom: 56.25%;} /* p..
유튜브(Youtube) 영상 비율에 마쳐 반응형으로 만들기유튜브(Youtube) 영상 비율에 마쳐 반응형으로 만들기 안녕하세요 TriplexLab 입니다. 오늘은 유튜브(Youtube) 영상 컨텐츠를 16:9비율에 마쳐 반응형으로 만드는 방법에 대해서 살려보도록 하겠습니다. 먼저 유튜브로 가셔서 퍼오고 싶은 영상를 퍼옵니다. 그리고 하단 처럼 수정합니다. ✍️ 유튜브 영상 비율 코드 padding-bottom 계산식은 height / width * 100 입니다. /* 비디오 컨텐츠를 16:9비율에 마쳐 반응형으로 만들기 */ .video {position: relative; margin: 0 auto; max-width: 900px; width: 100%;} .video > div{ width: 100%; padding-bottom: 56.25%;} /* p..
2021.05.15 -
👍이미지 슬라이드 (Carousel) 안녕하세요 TriplexLab입니다. 오늘은 HTML + CSS3 만 가지고 이미지 슬라이드를 만들어 보겠습니다. 이번에 구현하는 이미지 슬라이드는 IE 버전은 지원되지 않습니다. 참고하세요 1 2 3 * { box-sizing: border-box; } .slider { width: 600px; text-align: center; border-radius: 10px; overflow: hidden; } .slides { display: flex; overflow-x: auto; /* overflow: hidden; */ scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling..
이미지 슬라이드 (Carousel)👍이미지 슬라이드 (Carousel) 안녕하세요 TriplexLab입니다. 오늘은 HTML + CSS3 만 가지고 이미지 슬라이드를 만들어 보겠습니다. 이번에 구현하는 이미지 슬라이드는 IE 버전은 지원되지 않습니다. 참고하세요 1 2 3 * { box-sizing: border-box; } .slider { width: 600px; text-align: center; border-radius: 10px; overflow: hidden; } .slides { display: flex; overflow-x: auto; /* overflow: hidden; */ scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling..
2021.03.20 -
🎯 퍼포먼스 사이드 메뉴 html+scss 안녕하세요 TriplexLab 입니다 :) 오늘은 퍼포먼스 사이드 메뉴에 관해서 살펴보도록 하겠습니다. TRIPLEXLAB Spealers Headphones Televisions Accessories TRIPLEXLAB/CONTENTS /* css reacet */ body, h1, h2, h3, ul, li { margin: 0; padding: 0; } li { list-style-type: none; } a { color: inherit; text-decoration: none; } img { vertical-align: top; } /* css layerout */ .l__wrapper { max-width: 1200px; margin: 0 auto; ..
퍼포먼스 사이드 메뉴 html+scss🎯 퍼포먼스 사이드 메뉴 html+scss 안녕하세요 TriplexLab 입니다 :) 오늘은 퍼포먼스 사이드 메뉴에 관해서 살펴보도록 하겠습니다. TRIPLEXLAB Spealers Headphones Televisions Accessories TRIPLEXLAB/CONTENTS /* css reacet */ body, h1, h2, h3, ul, li { margin: 0; padding: 0; } li { list-style-type: none; } a { color: inherit; text-decoration: none; } img { vertical-align: top; } /* css layerout */ .l__wrapper { max-width: 1200px; margin: 0 auto; ..
2021.02.10 -
CSS 아이콘 라이브러리 fontello 사용하기 안녕하세요. TriplexLab 입니다. :) 오늘은 CSS 라이브러리 중 하나인 fontello에 대해서 알아보겠습니다. 여러 아이콘을 폰트로 제공하는 서비스입니다. 👀 fontello를 이용해서 아이콘을 웹페이지에 삽입하는 방법 1. http://fontello.com/ 페이지에 접속한다. 2. 원하는 아이콘을 선택한다. 3. 우측 상단에 Download webfont 클릭을 한다. 그럼 다운로드 받으면 압축파일을 풀고, 디렉토리(파일)을 자체를 현재 자신이 진행하고 있는 프로잭트 디렉토리(파일)에다가 붙여넣기를 한다. demo.html 파일을 보면 밑에와 같은 화면이 나올것에요. 여기서 아이콘 옆에있는 이름들을 class에 갔다가 붙이는 것이에요. ..
CSS 아이콘 라이브러리 fontello 사용하기CSS 아이콘 라이브러리 fontello 사용하기 안녕하세요. TriplexLab 입니다. :) 오늘은 CSS 라이브러리 중 하나인 fontello에 대해서 알아보겠습니다. 여러 아이콘을 폰트로 제공하는 서비스입니다. 👀 fontello를 이용해서 아이콘을 웹페이지에 삽입하는 방법 1. http://fontello.com/ 페이지에 접속한다. 2. 원하는 아이콘을 선택한다. 3. 우측 상단에 Download webfont 클릭을 한다. 그럼 다운로드 받으면 압축파일을 풀고, 디렉토리(파일)을 자체를 현재 자신이 진행하고 있는 프로잭트 디렉토리(파일)에다가 붙여넣기를 한다. demo.html 파일을 보면 밑에와 같은 화면이 나올것에요. 여기서 아이콘 옆에있는 이름들을 class에 갔다가 붙이는 것이에요. ..
2020.12.27 -
반응형일 작업할때 유지할수 있는 수직 정렬 안녕하세요 TriplexLab 입니다 :) 오늘은 반응형 리스폰일때 유지할수 있는 수직 정렬에 관해서 이야기를 해볼게요. 크게 2가지로 나눌수가 있어요 1번 display: table, table-cell을 하는 방법 2번 position: absolute,와 relative로 하는 방법. 오늘은 먼저 display: table, table-cell 속성을 이용해서 수직 정렬를 해볼게요 HTML 심플하고 고저스한 디자인의 서랍입니다. 튀어나온 손잡이 없이 깔끔하게 처리하여 다양한 용도로 사용할 수 있습니다. DETAIL VIEW CSS .box_bg { height: 50vh; /*vh은 %게념과 비슷하다. 다만 %는 직개 부모 에도 %가 선언되어 있어야 한다면..
반응형일 작업할때 유지할수 있는 수직 정렬반응형일 작업할때 유지할수 있는 수직 정렬 안녕하세요 TriplexLab 입니다 :) 오늘은 반응형 리스폰일때 유지할수 있는 수직 정렬에 관해서 이야기를 해볼게요. 크게 2가지로 나눌수가 있어요 1번 display: table, table-cell을 하는 방법 2번 position: absolute,와 relative로 하는 방법. 오늘은 먼저 display: table, table-cell 속성을 이용해서 수직 정렬를 해볼게요 HTML 심플하고 고저스한 디자인의 서랍입니다. 튀어나온 손잡이 없이 깔끔하게 처리하여 다양한 용도로 사용할 수 있습니다. DETAIL VIEW CSS .box_bg { height: 50vh; /*vh은 %게념과 비슷하다. 다만 %는 직개 부모 에도 %가 선언되어 있어야 한다면..
2020.12.09 -
🙋♂️ inline-block과 float 중 어떤 것을 써야 할까? 안녕하세요 TriplexLab 입니다 :) 오늘은 가로 배치 속성에 대해서 이야기를 해볼게요 가로 배치 속성 중에서 inline-block과 float 2가지 속성이 있어요. inline-block에 대해서 이야기를 해볼게요 각각의 박스들을 inline-block 가로 정렬을 시켜보겠습니다. .grid { width: 500px; margin: 0 auto; background-color: dimgrey; text-align: center; /*inline-block의 장점은 폰트의 성질도 포함되고 있어서 text-align으로 정렬을 쉽게 할수가 있다.*/ font-size: 0; /*양 옆쪽, 밑에 4px정도 여백을 없에주는 방법..
inline-block과 float 중 어떤 것을 써야 할까?🙋♂️ inline-block과 float 중 어떤 것을 써야 할까? 안녕하세요 TriplexLab 입니다 :) 오늘은 가로 배치 속성에 대해서 이야기를 해볼게요 가로 배치 속성 중에서 inline-block과 float 2가지 속성이 있어요. inline-block에 대해서 이야기를 해볼게요 각각의 박스들을 inline-block 가로 정렬을 시켜보겠습니다. .grid { width: 500px; margin: 0 auto; background-color: dimgrey; text-align: center; /*inline-block의 장점은 폰트의 성질도 포함되고 있어서 text-align으로 정렬을 쉽게 할수가 있다.*/ font-size: 0; /*양 옆쪽, 밑에 4px정도 여백을 없에주는 방법..
2020.12.08 -
css3 Boxsizing 정리 안녕하세요 TriplexLab 입니다. 오늘은 css3 속성인 Box-sizing에 관해서 알아볼게요 css를 공부하다 보면 기본적으로 box model(박스모델)이라는 5가지 속성을 배우게 될텐데 (width, heigh, padding, border, margin) 5가지를 일리리 계산해서 width, heigh값을 조절해야 하는 벙거러움이 있었다. 선배 계발자분들은 css3가 나오기 전에는 width, heigh값을 일리리 계산해줬다는 말.... 그래서 더이상 노가다 하지 말라고 W3C에서 Box-sizing이라는 것을 배포해줬네요. 먼저 코딩을 보기전에 호환성을 채크해볼까요?? 거의 완벽하게 호환이 되는것을 확인할수 있어요. Hello World! Hello Wor..
📦 css3 Boxsizing 정리css3 Boxsizing 정리 안녕하세요 TriplexLab 입니다. 오늘은 css3 속성인 Box-sizing에 관해서 알아볼게요 css를 공부하다 보면 기본적으로 box model(박스모델)이라는 5가지 속성을 배우게 될텐데 (width, heigh, padding, border, margin) 5가지를 일리리 계산해서 width, heigh값을 조절해야 하는 벙거러움이 있었다. 선배 계발자분들은 css3가 나오기 전에는 width, heigh값을 일리리 계산해줬다는 말.... 그래서 더이상 노가다 하지 말라고 W3C에서 Box-sizing이라는 것을 배포해줬네요. 먼저 코딩을 보기전에 호환성을 채크해볼까요?? 거의 완벽하게 호환이 되는것을 확인할수 있어요. Hello World! Hello Wor..
2020.11.29 -
📌패럴렉스 스크롤 만들기 background-attachment: fixed; 안녕하세요 TriplexLab입니다. 오늘 해볼 것은 바로 패럴렉스 만들기입니다. 패럴렉스란 나눠진 페이지를 스크롤할 때 뒷 배경을 고정시켜 놔서 안 움직이게 하는 것입니다. 즉 스크롤을 하면 다음 페이지가 현재 페이지를 덮습니다. 라고 생각하시면 이해하시기 편합니다. 브라우저 호환성에 대해서 먼저 체크를 해보죠!! Can I use... Support tables for HTML5, CSS3, etc CSS background-attachment Method of defining how a background image is attached to a scrollable element. Values include `scroll..
패럴렉스 스크롤 만들기 background-attachment: fixed;📌패럴렉스 스크롤 만들기 background-attachment: fixed; 안녕하세요 TriplexLab입니다. 오늘 해볼 것은 바로 패럴렉스 만들기입니다. 패럴렉스란 나눠진 페이지를 스크롤할 때 뒷 배경을 고정시켜 놔서 안 움직이게 하는 것입니다. 즉 스크롤을 하면 다음 페이지가 현재 페이지를 덮습니다. 라고 생각하시면 이해하시기 편합니다. 브라우저 호환성에 대해서 먼저 체크를 해보죠!! Can I use... Support tables for HTML5, CSS3, etc CSS background-attachment Method of defining how a background image is attached to a scrollable element. Values include `scroll..
2020.11.21 -
css3 transition 안녕하세요 TriplexLab입니다. css3 속성중 transition은 원하는 요소에 자연스러운 1.변형을 일으키거나 2.애니메이션효과를 줄 수 있습니다. 오늘은 transition 변형에 관해서 알아보도록 하겠습니다. css3 속성은 최신 기술이기 때문에 인터넷 익스플로러 9 이하 버전은 지원하지 않습니다. Can I use... Support tables for HTML5, CSS3, etc caniuse.com 저 같은 퍼블리셔들이 혹은 프론트앤드 개발자들이 항상 최신 기술에 관해서 브라우저들의 버전들 마다 호환성을 지원해주는지 안해주는지 확인해주는 싸이트가 있습니다. 속성명 설명 transition-property: width 어떤 속성에게 변형을 적용할지 지정합니..
css3 transitioncss3 transition 안녕하세요 TriplexLab입니다. css3 속성중 transition은 원하는 요소에 자연스러운 1.변형을 일으키거나 2.애니메이션효과를 줄 수 있습니다. 오늘은 transition 변형에 관해서 알아보도록 하겠습니다. css3 속성은 최신 기술이기 때문에 인터넷 익스플로러 9 이하 버전은 지원하지 않습니다. Can I use... Support tables for HTML5, CSS3, etc caniuse.com 저 같은 퍼블리셔들이 혹은 프론트앤드 개발자들이 항상 최신 기술에 관해서 브라우저들의 버전들 마다 호환성을 지원해주는지 안해주는지 확인해주는 싸이트가 있습니다. 속성명 설명 transition-property: width 어떤 속성에게 변형을 적용할지 지정합니..
2020.11.21