본문 바로가기
728x90

프론트엔드111

[CSS] Transition 애니메니션 효과 property duration timing-function CSS 애니메이션 효과 주기 Transition property duration timing-function Transition-property : 이벤트시 변경 원하는 Property Transition-duration : 변경 시간 Transition-timing-function : 변경 속도 샘플 예제 .box { background-color : royalblue; width : 100px; height : 100px; } .box:hover { background-color : tomato; transition-property : background-color; transition-duration : 500ms; transition-timing-function : ease; } 출력 결과 2021. 3. 5.
[CSS] Background 속성 CSS background-image background-repeat background-size background-position background 관련 속성 background-image : 이미지 주소, 경로 background-repeat : 이미지 반복 여부 background-size : 이미지 사이즈 자동 축소 확대 background-position : 이미지 중앙부 포커스 출력 CSS Selector { background-image : url('이미지주소'); /*이미지 반복 여부*/ background-repeat : no-repeat; /*이미지 중앙부 포커스 출력*/ background-position : center; /*커버에 맞춰 이미지 사이즈 자동 축소 확대*/ back.. 2021. 3. 4.
[CSS] transform - Translate 수평, 수직 정렬 CSS 수평 수직 정렬 Transform - translate CSS 를 사용하다보면, 좌우,상하 가운데 정렬을 해야할 일이 많다. 가운데 정렬할수 있는 방법에는 다양한 방법이 있지만, transform 속성 또한 상당히 많이 사용이 되고 있다. CSS Selector { transform : translate(좌우, 상하); } 샘플예제 출력 결과 코드 수정 .container > .box { width : 200px; height: 200px; background : royalblue; /*하단의 코드 추가*/ transform : translate(100%,100%); } 출력 결과 2021. 3. 4.
[CSS] box-sizing border-box content-box CSS 박스 사이즈 관련 속성 box-sizing CSS에서 박스의 크기를 지정하였는데도 원하는 크기로 안바뀌는 경우에는 css의 box-sizing 속성을 확인해볼 필요가 있다. CSS Selector { box-sizing : content-box; (기본값) box-sizing : border-box; } box-sizing 속성을 content-box로 하면, 설정해놓은 사이즈는 padding, border 속성의 사이즈를 제외한 박스 자체의 사이즈로 설정이 된다. 즉, width 와 height 를 100px로 설정해 놓아도, border : 5px; padding : 5px 으로 설정하게 되면, width 는 120px이 되는 것이다. padding, border 의 설정 사이즈를 포함하여 원.. 2021. 3. 4.
[CSS] BEM (Block Element Modifier) 표기법 코드는 가독성이 중요하다. 하지만 코드양이 많아지면 그만큼 클래스명도 다양해지고 구조 또한 복잡해진다. 그래서 클래스 명의 명확성과 일관성, 의미론을 유지할수 있는 CSS 표준에는 BEM 표기법이 있다. BEM 은 Block Element Modifier 의 약자이다. 클래스 이름 안에 언더바 두개씩 있고, 마이너스 표시가 그 뒤에 두개씩 있는 경우를 접해본적이 있다면, 그게 BEM 을 활용한 클래스의 표기이다. 예시) main__item--blue 하지만 간혹 보면 BEM 표기법을 아이디에 사용하는 경우도 종종 있는데, 이는 잘못된 방법으로, 클래스에만 사용하여야 한다. 하단의 간단한 예제를 통해 BEM 의 의미를 이해하도록 하자 샘플 예제 Html 설명 Block : Element : Modifier.. 2021. 3. 4.
[Javascript] 버튼 클릭시 원하는 링크 이동 자바스크립트(Javascript) 링크 이동 window.location = '원하는 링크주소'; a태그의 속성 href 값에 링크 주소를 설정해 놓으면, 클릭시 해당 링크로 이동한다. Button 태그에서 원하는 링크로 이동하는 방법 티스토리 2021. 3. 3.
[Javascript] fetch API Javascript Web에서 리소스의 비동기 처리 - fetch API fetch는 promise 기반으로 비동기 네트워크 통신을 알기쉽게 기술하는 방법이다. fetch로부터 반환되는 promise객체는 Error발생시 reject하지않고, resolve를 통해 전달된 response내의 .status를 통하여 네트워크 상태를 진단할수 있다. (ex 200 성공 404 실패 데이터없음 등.) fetch('경로 또는 url') .then(response => response.json() or response.text()) .then(data => console.log(data)); 2021. 2. 25.
[Javascript] 배열 요소 검색 array.find() 자바스크립트 배열 요소 검색 array.find() array.find(CallbackFunction) 배열 내 요소 검색의 방법에는 여러가지가 있지만, 중복 무관하게 첫번째 나오는 하나의 요소를 찾아야 할떄는 find()가 가장 적절하다. [샘플예제 :javascript] const students = [ {name : 'hong' , score : '100'}, {name : 'kim' , score : '60'}, {name : 'seo' , score : '90'}, {name : 'lee' , score : '80'}, {name : 'jung' , score : '40'}, {name : 'han' , score : '50'} ] //50점 학생 찾기 { const student = stude.. 2021. 2. 23.
[프론트엔드] HTML 데이터 속성 dataset FrontEnd HTML Element Attribute - Dataset HTML 데이터 속성은 엘리먼트 내 attribute명으로 data- + 키이름 으로 사용 Javascript 에서 해당 데이터의 속성을 접근하기 위해서는 엘리먼트명.dataset.키이름 ※일반적인 객체와 같이 dataset[키이름] 으로는 접근 불가! [샘플 예제] [결과 출력] 2021. 2. 23.
[Javascript] 배열 (Array) - map() 자바스크립트의 Array.map(CallbackFunction):Array 함수는 배열의 모든 요소를 순회하며 콜백 함수의 기능을 실행하는 역할을 한다. Array.map(CallbackFunc) : [] 배열 내 요소를 순회하는 방법에는 여러가지가 있지만, map 함수는 여러 줄을 사용하는 for 에 비하여 코드양이 적어지고 가독성이 좋아지기때문에 사용을 많이 하는 편이다. const arr = [1,2,3,4,5]; const arr_map = arr.map(val => val*2); console.log(arr_map); [출력 결과] [2,4,6,8,10] 2021. 2. 23.
728x90

티스토리툴바