하루하루 발전하는 개발자와 블로그🙌🏻 하루하루 발전하는 개발자와 블로그🙌🏻

분류 전체보기

• position 속성_ relative, absolute, fixed

  Study/css 2020. 6. 22. 22:04

  Position CSS의 position 프로퍼티를 사용하면 html코드와 상관없이 그리고 싶은 어느 위치에나 요소를 그릴 수 있다. 즉, 문서상에 요소를 배치하는 방법을 지정하는 역할을 한다. position에서 사용하는 값은 4개가 있는데, static은 거의 사용하지 않아서 넘어가겠다. position: static; position: relative; position: absolute; position: fixed; relative .relative { position: relative; } 이렇게 position: relative 한다고 해서 클래스명이 relative인 div의 위치가 변하고 이런건 아니다. 사실 이 것 자체로는 특별한 의미는 없다. 위치를 이동시켜주는 top, right, b..

  Read More
• position:absolute 인 요소를 중앙에 위치시키는 방법

  Study/css 2020. 6. 19. 12:33

  css 를 하다보면 position을 사용해야할 때가 있다. 그런데 position은 위치를 위, 아래 , 오른쪽, 왼쪽 하나하나 지정을 해줘야해서, 내가 원하는 위치에 둘 수는 있지만 정 가운데 두고 싶을 때에는 어렵다...ㅋㅋㅋ 이럴때, 중앙정렬 하는 방법! .title {position:absolute; left;50%; transform:translateX(-50%);} 화면의 전체 가로 수치에서 절반 만큼의 위치로 이동 시킨다. (left:50%) 자신의 가로 수치의 절반 만큼 마이너스 이동 시킨다. (transform:translateX(-50%)) 참조:http://blog.freezner.com/archives/1877

  Read More
• CSS: Shrink-to-fit a DIV to equal the width of its content

  Study/css 2020. 6. 17. 18:40

  Shrinking a DIV-Container to fit the width of its content can be very useful sometimes, especially if you tried margin: 0 auto to center and found out it doesn’t work. Why not? Because DIVs are block elements and take all the space they can get. To still equal the width of the DIV to the width of its content, we need to make it display:inline-block or display:table. The former has the disadvanta..

  Read More
• web API :: Navigator

  Study/JavaScript 2020. 6. 13. 15:22

  Navigator 인터페이스는 사용자 에이전트의 상태와 신원 정보를 나타낸다. 스크립트로 해당 정보를 질의할 때와 애플리케이션을 특정 활동에 등록할 때 사용한다. Navigator 객체는 window.navigator 읽기 전용 속성으로 접근할 수 있다. Navigator 속성 예 Navigator.geolocation : 장치의 위치에 접근을 허락하는 Geolocation 객체를 리턴한다. Navigator.cookieEnabled : 쿠키 설정이 무시될 경우 false를 반환하고 그렇지 않을 경우 true를 반환한다. NavigatorOnLine.onLine : 브라우저가 온라인인지 아닌지를 가리키는 Boolean을 리턴한다. 등등.. navigator의 다양한 속성들은 아래의 mdn 문서를 참고하자..

  Read More
• Array.from()

  Study/JavaScript 2020. 6. 13. 13:06

  Array.from() 메서드는 유사 배열 객체(array-like object)나반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만든다. console.log(Array.from('foo')); // expected output: Array ["f", "o", "o"] console.log(Array.from([1, 2, 3], x => x + x)); // expected output: Array [2, 4, 6] 구문 Array.from(arrayLike[, mapFn[, thisArg]]) 매개변수 arrayLike : 배열로 변환하고자 하는 유사 배열 객체나 반복 가능한 객체 mapFn : 배열의 모든 요소에 대해 호출할 맵핑 함수 thisArg : mapF..

  Read More
• :not ()

  Study/css 2020. 6. 13. 12:16

  부정(negation) CSS 가상 클래스 :not(X)는 인수로 간단한 선택자(selector) X를 취하는 기능 표기법이다. X는 다른 부정 선택자를 포함해서는 안 된다. 구문 :not(selector) { style properties } 예제 //index.html Some text. Some other text. One more text //index.css p:not(.classy) {color: red;} body:not(p) {color: green;} 위의 css 및 html이 주어진다면, 이 같은 출력을 얻습니다: Some text. Some other text. One more text 출처 : https://developer.mozilla.org/ko/docs/Web/CSS/:not

  Read More
• forEach()와 map()의 차이점

  Study/JavaScript 2020. 6. 13. 11:58

  공통점 forEach, map, reduce의 공통점은 "배열을 이용한다"는 점이다. 배열의 값을 조작해서 원하는 결과값을 도출하는데 의미가 있다. forEach()와 map()의 차이점 1. 새로운 배열을 반환하는 map() 다른 점을 알아보자. forEach()가 배열 요소마다 한 번씩 주어진 함수(콜백)를 실행하는 것과 달리, map()은 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한 결과를 모아 새로운 배열을 반환한다는 특징을 가지고 있다. 그리고, 그 함수는 1. currentValue (배열 원소의 값) 2. index (현재 요소의 인덱스) 3. array (현재 배열) 이 세 개의 인자를 가지고 호출된 다. 배열의 각 원소에 3을 곱하는 코드를 두 메서드의 특징에 맞게 짜..

  Read More
• 데이터 속성 사용하기 (data attribute)

  Study/html 2020. 6. 12. 15:44

  html5 특성 요소와 연관되어 있지만 확정된 의미를 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인 되었다. data-*속성은 표준이 아닌 속성이나 추가적인 DOM 속성, Node.setUserData()과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML요소에 추가 정보를 저장 할 수 있도록 해준다. data-* 전역 특성은 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 HTML과 DOM 사이에서 교환할 수 있는 방법이다. HTML 문법 문법은 간단하다. 어느 엘리먼트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있다. 화면에 안보이게 글이나 추가 정보를 엘리먼트에 담아 놓을 수 있다. 아래 dat..

  Read More