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

Study

• inline & block

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

  html의 요소는 '블록레벨 요소'와 '인라인'요소로 분류될 수 있다. 블록레벨? 인라인?? 무엇일까?? 알아보도록 하자. 위와 같이 한 너비를 모두 차지 하는 태그를 block 요소 라고 부르고, 지정된 컨텐츠 내용값만 차지하며, 옆에 다른 값을 바로 이어서 받을 수 있는 태그를 inline 요소라 부른다. 위 그림의 1-4 줄은 block 요소, 5번째 줄은 inline요소 인 것이다. inline 예제를 살펴보도록 하자. 다음 span은 인라인 요소로, 영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다. 이 예제에서 div는 텍스트를 가진 블록레벨 요소이다. 이 텍스트 안에는 인라인 요소인 이 존재한다. span은 인라인이기때문에 전체 문단이 끊기지 않고 하나로 그려진다. 결과를 확인해보..

  Read More
• 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