SPACE RUMI

Hi, I am rumi. Let's Splattack!

[IT] 프로덕트 개발/DOM, HTML, CSS - 퍼블리싱 17

www.youtube.com에서 연결을 거부했습니다. HTML에 유튜브 영상 넣기, 영상 자동재생, 비디오 영상 넣기

HTML에 유튜브 영상 넣기 유튜브 영상을 넣으려면 퍼가기 코드로 넣어야 한다. 그렇지 않으면 유튭에서 연결을 거부했다는 문구가 뜰것이다.. 넣고싶은 유튜브 영상에서 공유 버튼을 누른다 퍼가기를 누른다. iframe 부분 코드를 가져와 넣어준다 나는 스타일로 width와 height를 줬기때문에 뺐다. 그리고 allow="autoplay"가 먹지 않아서, src 뒷부분에 ?autoplay=1을 붙여주었다. React에서 영상 임베드하기 useEffect(() => { if (videoRef) { videoRef.current.play(); } },[]); ... *git에서는 100mb 이상 푸시가 안되니.. 임베드 할거라면 용량을 잘 확인하고 압축해서 넣자. 한번 푸시했다가 에러 걸려서 reset하고 ..

@mixin을 사용하여 min, max width를 지정해주는 클래스를 만들자

컴포넌트에 width값을 받아 min, max width를 지정해주는 컴포넌트를 만들수도 있다. 굳이 컴포넌트까지 만들지 않으려면 mixin을사용하여 클래스를 만들어주자. @mixin minmax-classes { @for $i from 50 through $minmax-width { $value: $i * 1px; .minmax#{$i} { min-width: $value; max-width: $value; width: $value; } } } @include minmax-classes; width, min-width, max-width 값이 200으로 들어간다. 생각보다 많이 사용하게되므로 만들어두면좋다. 사용 인덱스 영역

폰트 임베드 하여 사용하기 font-face / 영문, 한글 숫자별로 다른 폰트 지정하기

@font-face src에 여러개의 폰트포맷을 작성할 수 있다. 영문, 한글, 숫자 별로 폰트를 다르게 지정하고싶을때는 unicode-range를 추가해준다. 여러개를 추가할때는 , 로 추가한다. 폰트포맷은 웹 최적화 경량폰트인 woff2 or woff 를 사용한다. @font-face { font-family: "Apple SD Gothic Neo"; src: url("../fonts/AppleSDGothicNeoR.woff2") format("woff2"), url("../fonts/AppleSDGothicNeoR.woff") format("woff"); font-weight: 400; font-style: normal; } @font-face { font-family: "Apple SD Gothi..

Color 변수화하기 / css color 사전 정의하기

컬러 변수화를 어떻게 할 것인지를 정하기 전에 먼저 프로젝트 디자인에 사용된 컬러종류가 얼마나 되는지를 파악한다. 컬러 종류를 파악한다음 opacity값을 사용했는지, 각 컬러의 분류가 단계별로 증감되는 형식인지(그라데이션 팔레트를 사용했는지)에 따라 나누는 편이다. 그라데이션 팔레트를 사용했다면 scss의 map-get을 사용하고, 그렇지 않고 종류가 많지 않다면 일반변수로 정의한다. --root를 사용하는 방식도 있지만 개인적으로는 선호하지 않으므로 생략 변수화하기 (컬러값의 종류가 많지 않을때) $black:#000000; $white:#FFFFFF; $primary-black-1: #121212; $primary-black-2: #999999; $primary-black-3: #E0E0E0; $p..

자주 사용하는 인라인 클래스, base class 만들기

인라인 클래스로 많이 사용하는 기본적인 클래스들을 정의해두자 나머지는 자주쓰는 클래스들은 mixin에서 생성해준다. .w-100 { width: 100%; } .w-fit { width: fit-content; } /* display 속성과 flex */ .d-none { display: none; } .d-block { display: block; } .d-flex { display: flex; } .flex-row { display: flex; flex-direction: row; } .flex-start { display: flex; align-items: flex-start; } .flex-center { display: flex; align-items: center; } .flex-end { d..

reset css / CSS 초기화하기

css를 초기화 해주자. 초기화 코드는 정답이 없고, 가장 많이쓰고 유명한 에릭마이어의 reset code를 사용해도 된다. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter meyerwe..

[SCSS] ... 처리하기 css 말줄임 ellipsis mixin

ellipsis 말줄임 처리는, 자주 사용하는 믹스인이라 미리 만들어두면좋다. @mixin ellipsis($line: 1) { @if ($line == 1) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @else { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; // 공백 없을때 글자 짤림 방지 -webkit-box-orient: vertical; -webkit-line-clamp: $line; } } 기본값은 1로 두고, 변수를 입력해주면 line-clamp에 들어간다. * 컨테이너의 width값이 정해져있어야한다...

[SCSS] 스크롤 믹스인 만들기

스크롤 믹스인을 만들어두자 스크롤 안보이게 처리하기 @mixin scroll-hidden { scrollbar-width: none; /* Firefox */ &::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ } } 스크롤 커스터마이징 하기 @mixin scroll($size, $scroll-color, $bg-color) { overflow:auto; &::-webkit-scrollbar { width: $size; height: $size; } &::-webkit-scrollbar-thumb { background: $scroll-color; } &::-webkit-scrollbar-track { background: $bg-color..

[SCSS] font size mixin class 믹스인으로 폰트 사이즈, 커스텀폰트 클래시스 만들기

폰트 관련 믹스인도 만들어두면 유용하게 쓸 수 있다. 한글폰트, 영문폰트를 각각 설정하는것은 다른파트에서 기록. @mixin /* 10부터 i 까지 폰트 사이즈 만들기 */ /* i값은 0.1, 0.2, 0.3 rem씩 증가 */ /* 기본 html font-size를 10으로 고정 */ html { font-size: 10px; } @mixin font-classes { @for $i from 10 through $max-font { $value: $i * 0.1rem !important; .font#{$i} { font-size: $value; } } } @include font-classes; /* 타입을 받아서 폰트 세팅을 결정 */ @mixin font($type: "title") { @if (..

프로젝트 시작 전, CSS 세팅하기

프로젝트를 시작하기전에 세팅해두면 좋은 스타일 관련 요소들 아카이빙 * React + SCSS 사용환경이며 변동시 꾸준히 추가 업데이트하기 * 폴더구조 Base [CSS] reset css / CSS 초기화하기 css를 초기화 해주자. 초기화 코드는 정답이 없고, 가장 많이쓰고 유명한 에릭마이어의 reset code를 사용해도 된다. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The.. space-rumi.tistory.com 자주 사용하는 인라인 클래스, base class 만들기 인라인 클래스로 많이 사용하는 기본적인 클래스들을 정의해두자 나머지는 자주쓰는 클래스들은 mixin에서 생성해준다...

[SCSS] 믹스인으로 마진 패딩 클래스 만들기 mixin margin and padding classes

믹스인으로 마진 패딩 클래시스를 만들어두면 유용하게 쓸수있다. @mixin $max: 180; // 생성할 최대값 지정 @mixin margin-classes { @for $i from 0 through $max { // 0부터 i까지 증가. max인 180까지 생성 $margin: $i * 1px !important; .ma#{$i} { margin: $margin; } .ml#{$i} { margin-left: $margin; } .mr#{$i} { margin-right: $margin; } .mt#{$i} { margin-top: $margin; } .mb#{$i} { margin-bottom: $margin; } .mx#{$i} { margin-left: $margin; margin-right:..

[CSS] IOS 100vh 스크롤 문제

문제 height: 100vh 사용시 모바일 IOS에서 (+인앱브라우저) 스크롤이 생기는 문제 원인 100vh에 하단 바의 높이까지 포함시켜서 더 크게 인식함 사용이유 body에 100% 를 상속받아 내려오는 케이스를 제외하고, 컨텐츠 영역에서 불가피하게 최상단 레이아웃에 flexbox를 사용해야할 때가 있다. 또는.. 별도의 각종 레이아웃 컴포넌트(헤더,푸터)를 제외한 영역을 100%로 잡아야 할 때 페이지별로 vh 속성을 쓰는게 깔끔할 때. 등등 많은 케이스에서 vh가 요구된다. CSS height: 100vh;// css property 지원 안하는 브라우저 대비용 height: calc(var(--vh, 1vh) * 100); JS useEffect(() => { // css property 사용..

[CSS] 카카오 인앱브라우저 IOS의 경우 스타일 안먹는 문제

문제 카카오 인앱브라우저 IOS환경에서 스타일 안먹는 문제가 발생했다. 버튼이 아예 노출되지 않는 현상, a태그가 파란색으로 보이는 현상 등 특이사항 보이지는 않으나 클릭시 정상작동 함 (스타일 문제로 추정) PC웹에서는 모든 브라우저에서 정상작동 IOS, 안드로이드 웹에서는 정상작동 인앱브라우저 > IOS에서만 정상출력되지않음 해결방법 Xcode 시뮬레이터 IOS 특정 단말을 띄워서 사파리 개발자도구로 원인분석 사파리 환경설정 > 고급 > 메뉴에 개발자모드 노출후 시뮬레이터와 연동 원인은 스타일을 직접 명시하지않으면 초기값을 상속받지 못함. (스타일 누락) 스타일을 빠트리지않고 직접 명시해준다 (color 기본값을 가져오지 못한 케이스) 잘해결되었다.

[CSS] display grid 자동으로 채우기 - repeat auto-fill

마크업 1 2 3 4 5 6 7 8 9 10 스타일 (SCSS) section { padding-bottom: 30px; background-color:#fafafa; } .dashboard-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, 200px); /* 200px짜리 영역을 갯수만큼 만듬 */ grid-auto-rows: 200px; /* 줄바꿈 될때마다 자동으로 200px 로우 생성 */ &__card { /* 카드의 크기는 각 grid 영역으로 잡음 */ width: 100%; height: 100%; background-color: #fff; box-shadow: 0px 2px 4px rgba(0, 0, 0, ..

[HTML] 이메일 화면 제작하기, HTML email 보일러플레이트 / 이메일 마크업 규칙

XHTML XHTML(Extensible Hypertext Markup Language)은 HTML과 동등한 표현 능력을 지닌 XML 마크업 언어로, HTML보다 엄격한 문법을 가진다. XML문서로 HTML을 정의하는 W3C(World Wide Web Consortium) 표준이다. 1. 페이지의 요소가 잘 구성되었음을 보장. 모든 브라우저에서 일관되게 보인다. XHTML을 사용하면 페이지가 접근성 표준을 보다 쉽게 준수한다. Boiler Plate(기본 틀) 재사용 가능하며 같은형태를 띄는 코드를 보일러플레이트 코드라고 한다. 아래는 이메일 형식의 보일러플레이트이다. Row 1 1 2 Row 3 이메일 HTML 작업을 할때 알아둬야할 점 - XHTML이므로 meta태그에 Content-Type을 설정해..

[HTML] 새창으로 열기 target blank와 noopener noreferer

target="_blank" 윈도우를 새창(tab)으로 열고싶으면 태그에 target을 _blank로 적어주면 된다. target의 기본값은 "_self"이며, 현재 프레임에서 오픈한다. 이동하기 rel="noopener noreferer" * 이때 rel 속성에 noopener,noreferer를 반드시 적용해줘야 한다. 그래야 Tabnabbing 피싱(새창을 띄웠을때 기존 사이트를 가짜사이트로 바꿔치기해서 정보를 탈취하는 피싱방법)을 막을 수 있다. noopener : window.opener 객체를 생성하지 않는다. noreferer :window.opener 조작하지 못하게 한다. (참조자 정보 없음)

반응형