ALL (9) 썸네일형 리스트형 [vanila Javascript] setsetInterval 활용 순차적 클래스 추가, 제거 See the Pen Untitled by JuYoung Lee (@juyoung-lee) on CodePen. 1. 무한반복 //2.5초 간격으로 moveNextList 실행 setInterval(moveNextList, 2500); const animateList = document.querySelectorAll('.animate-list li'); const animateListLength = animateList.length; // li갯수 let crrentIndex = 0; //현재 인덱스 값 animateList[crrentIndex].classList.add('active'); //초기화 function moveNextList () { //다음 인덱스 = (현재인덱스 +1) / 4(li 갯.. [프론트개발] Json 응답, 요청 처리 function getCampaignInfo() { const promotion_uuid = 'PMT-D6AFE6BA-7D04-5939-2D97-61843A9584E2'; // 통신에 사용될 XMLHttpRequest 객체 const httpRequest = new XMLHttpRequest(); // Post 방식으로 요청 httpRequest.open("POST", `${baseApiUrl}event/custom/get`, true); // Response Type을 Json으로 사전 정의 httpRequest.responseType = 'json'; //정의된 서버에 Json 형식의 요청 Data를 포함하여 요청을 전송 httpRequest.send(JSON.stringify({'promotion_.. [javascript] 스크롤에 따라 나타나고 사라지는 헤더 (모바일웹/웹뷰) [HTML] header section1 section2 section3 section4 [CSS] * {margin:0; padding: 0;} body { width: 360px; } header { position: absolute; left: 0; top: 0; width: 360px; height: 100px; font-weight: 800; line-height: 100px; text-align: center; background-color: #fff; opacity:0; } header.fade.fixed { position: fixed; opacity:1; z-index: 100; border: 1px solid #333; -webkit-transition: all 0.8s ease; -m.. SVG/CSS keyframes : 글자 테두리 애니메이션 SVG는 CSS 와 JS적용이 가능한 확장 가능한 벡터 그래픽(Scalable Vector Graphics)이다. SVG와 CSS Animation을 활용하여 글자 테두리가 그려지며 글씨 색이 채워지는 애니메이션을 만들어보았다. [HTML] HELLO svg 태그 안에 text태그를 사용하면 글씨를 그려줄 수 있다. text의 text-anchor는 요소를 정렬하는 데 사용되며 start | middle | end 의 값을 줄 수 있고 나는 중간에 정렬을 하고자 middle을 사용했다. x축, y축으로 세부 위치를 조절해주었다. [CSS] svg { width: 250px; height: 100px; font-size: 50px; font-weight: 800; background:#eee; } svg .. [SASS(SCSS)] @mix-in : @font-face [SASS(SCSS)] @mixin font-face($name, $fail, $weight: normal, $style: normal) { @font-face { font-family: "#{$name}"; src: url('../font/#{$fail}.woff') format('woff'); font-weight: $weight; font-style: $style; } } @include font-face('NanumSquareOTFRegular', 'NanumSquareOTFRegular'); @include font-face('NanumSquareOTFBlod', 'NanumSquareOTFBlod' , 600); font-face라는 mix-in을 만들어 복잡한 코드를 하나로 묶어 사용. 최상.. [React] 컴포넌트와 props 사용하기2 : 컴포넌트안에 페이지 별 다른 내용 넣기, 컴포넌트 스타일 다르게 하기 컴포넌트를 만들어 사용하다보니 아래와 같은 고민점이 생겼다. 1. 레이아웃은 같은데 레이아웃 안에 스타일이 다른 내용이 추가되어야 하는 상황 2. 같은 레이아웃이지만 스타일이 다른 상황 1번의 경우 {props.children}를 사용하여 컴포넌트 안에 마크업을 할 수 있도록 할 수 있다. 2번의 경우 className을 props로 만들어, 해당 클래스를 가진 props에 스타일링을 해 주었다. 모달을 컴포넌트로 만들어보았다. [Component] const Modal = (props) => { return ( {props.title} {props.desc} {props.children} ) } export default Modal 모달 별로 사이즈가 달라 {styles.modal_content}에 사.. [SASS(SCSS)] @mix-in : px 값 vw 값으로 단위 변환하기 웹뷰나 모바일 버전 작업시 뷰포트 단위인 vw를 사용하여 개발을 하고있다. 하지만, 디자인에서 넘어오는 단위는 px값인데 이럴때 SASS에서 mixin을 사용하여 px값을 vw값으로 변환하여 사용할 수 있다. [mixin.scss] $mobile-contents-width: 360px; @mixin vw($property, $px) { //viewport 계산식 $viewportWidth: math.div(1px, $mobile-contents-width) * 100; $pxs: null; $vws: null; //속성값이 1개일경우, 여러개일 경우 @each $value in $px { @if type-of($value) == 'number' { $px: math.div($value, 1px); $px.. [React] 컴포넌트와 props 사용하기1 아래 이미지와 같이 게시물이 없을때 노출되는 화면에서 보여지는 레이아웃의 스타일은 같고, 이미지와 텍스트만 달라지는 경우 컴포넌트와 props를 적용해보았다. [components] function NoResult(props) { return ( {props.text} ) } export default NoResult 화면 레이아웃 마크업을 해주고, 같은 레이아웃 내에서 변경될 부분 에 props를 적용해주었다. img 의 URL : {props.url} 하단 텍스트 : {props.text} +) 컴포넌트는 무조건 최상위 태그가 있어야하고, 최상위 태그가 필요없을 시 으로 감싸 줄 수 있다 [page] //event.js import NoResult from '../../../../components/.. [React] 셀렉트 박스 오류 : [warning]Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>. 아래 사진과 같이 select Box 클릭 전에 "문의유형을 선택해주세요" 가 보이고, 클릭 후 옵션에는 보이지 않게 하고 싶었다. [오류코드] 문의유형을 선택해주세요 회원정보 이용안내 오류/불편 이벤트 제휴 기타 위와 같이 해당 option에 selected를 넣었을때 아래와 같은 콘솔 오류가 났다. [warning]Use the `defaultValue` or `value` props on instead of setting `selected` on . [해결코드] 문의유형을 선택해주세요 회원정보 이용안내 오류/불편 이벤트 제휴 기타 옵션에 selected를 넣는 대신, 최상단 select 에 defaultValue="default"를 넣는 것으로 해결하였다. 이전 1 다음
