CSS를 이용해 객체 가운데 위치하기!


객체를 가운데에 두는 방법에는 여러 개가 있다. 
calc를 기억해두려는 목적으로 글을 쓰기 시작했는데, 내가 작업하면서 써봤던 방법을 작성해두려고 한다. (flex-box는 논외)

조건은 부모 객체의 가운데에 위치시키기다.

HTML
<div class="wrapper">
  <div class="popup">   
  </div>
</div>

CSS
.wrapper{
  position:relative;
  width:400px;
  height:400px;
  background-color:#cacaca;
}
.popup{
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-75px;
  margin-left:-75px;
  width:150px;
  height:150px;
  background-color:pink;
}

이런 식으로 영역의 50%를 top, left 내리고 그 객체 사이즈의 반 값을 빼주는 형식으로 작업했다.
(객체 시작 위치를 기준으로 50% 이동하기 때문에 객체의 값을 빼줘야 가운데 위치한다.)

위와 비슷하게 calc를 쓸 수 있다.
CSS
.wrapper{
  position:relative;
  width:400px;
  height:400px;
  background-color:#cacaca;
}
.popup{
  position:absolute;
  top: calc(50% - 75px);
  left: calc(50% - 75px);
  width:150px;
  height:150px;
  background-color:pink;
}

top: calc(50% - 75px);
left calc(50% - 75px);
(75px은 객체의 반 값)

[예제]

See the Pen study-alignment css3 by leeyoonseo (@okayoon) on CodePen.



IE9~ 지원하는데, 부분 지원이라고 나온다.

물론 값이 변수일 경우에는 js로 비슷하게 작업했다.

HTML
<div class="wrapper">
  <div class="popup">   
  </div>
</div>

CSS
.wrapper{
  position:relative;
  width:400px;
  height:400px;
  background-color:#cacaca;
}
.popup{
  position:absolute;
  top:50%;
  left:50%;
  width:150px;
  height:150px;
  background-color:pink;
}

JS
const popup = document.getElementsByClassName('popup')[0];
const _width = popup.offsetWidth;
const _height = popup.offsetHeight;
popup.style.marginTop = -(_width/2)+'px';
popup.style.marginLeft = -(_height/2)+'px';

가운데에 위치하기 위한 margin 값 들을 변수로 받아서 계산한 후에 적용시켜준다.
이렇게 하면 width, height 값이 변하더라도 깨지지 않는다.

[예제]

See the Pen study-alignment js by leeyoonseo (@okayoon) on CodePen.



저작자표시 비영리 변경금지

'개념' 카테고리의 다른 글

로컬 스토리지(Local Storage)  (0) 2019.06.05
쿠키(Cookie)  (0) 2019.06.05
CND이란?  (0) 2019.05.16
MVC 패턴  (0) 2019.05.16
구글 API KEY생성하는 법  (0) 2018.10.26
void 0 이란?  (0) 2018.10.23
let 키워드, const 키워드  (0) 2018.10.23
ES6 매개변수 기본 정의  (0) 2018.10.16


02. Rest 파라미터 - 스프레드(Spread) 연산자와 Rest  파라미터  


Spread 연산자로 파라미터를 작성한 형태를 Rest 파라미터라고 한다.
function(param, paramN, ...rest);
const number = [1,2,3]
getNum(...number);

function getNumt(num1, num2, num3){
    console.log(num1, num2, num3);
}

결과 값
num1 = 1
num2 = 2
num3 = 3

호출하는 함수의 파라미터에 3개의 값을 쓰고 
호출받는 함수의 파라미터를 2개의 값만 썼을 경우 3번째 파라미터 값은 설정되지 않는다.(예제1)
이때, rest 파라미터를 사용함으로써 배열 엘리먼트로 저장할 수 있다.(예제2)
(예제1)

getNum(...[1,2,3]);

function getNum(num){
    console.log(num);
}

결과 값
1

=============================================
(예제2)

getNum(...[1,2,3]);

function getNum(...rest){
    console.log(rest);
}

결과 값
[1,2,3]

...rest라고 적어 둔 arguments 명은 변경되어도 된다. (...number, ...test 등등)

Spread와 Rest가 '...'으로 표현하는게 같아서 뭐가 다르지? 생각할 수도 있다.
기능적으로 차이가 있다.

Spread 파라미터는 분리,전개
1.호출하는 함수의 파라미터에 사용한다.
2.파라미터로 사용 시 전개하는 기능을 한다.

Rest 파라미터는 전개된 엘리먼트 배열로 설정
1.호출받는 함수의 파라미터에 사용한다.
2.파라미터 값을 설정하고 설정되지 못한 나머지 파라미터 값들을 배열에 설정한다. 


저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

gulp로 js 파일, css파일 Minify 및 Merge하기  (0) 2019.12.17
e.target.dataset과 jQuery의 .data()의 결과 값은 다를 수 있다.  (0) 2019.11.15
태그 내부에 컨텐츠 추가하기 append(), prepend(), appendTo(), prependTo(), before(), after()  (0) 2019.10.02
placeholder.js 라이브러리 소스 분석 도전, 스터디 개념  (0) 2019.06.05
01. Spread 연산자 - 스프레드(Spread) 연산자와 Rest 파라미터  (0) 2018.10.29
Google Javascript Maps API를 사용하여 지도 올리기!  (0) 2018.10.26
ajax 이슈, 파라미터 값이 안 보내져요. (processData)  (0) 2018.10.24
input 포맷(전화번호 입력받기)__regex__replace__substr  (0) 2018.10.24


01. Spread 연산자 - 스프레드(Spread) 연산자와 Rest  파라미터  


iterable object의 element를 하나씩 분리하여 전개한다.
iterable 객체는 반복 객체로써 객체의 원소에 하나씩 차례로 접근 가능하다.

' ... ' 점 세개로 시작해서 뒤에 이터러블 오브젝트를 써주면 된다.
[...iterableObj]
function(...iterableObj){ }

예시
let first = [1,2];
let last = [9,10];
let result = [...first, 3,4,5,6,7,8, ...last];

console.log(result);

결과 값
1,2,3,4,5,6,7,8,9,10

...first를 전개하여 1,2의 값을 result의 배열에 넣어준다.
그 후 3~8까지의 숫자가 배열에 들어있고 ...last를 전개하여 9,10을 result의 배열에 넣어줌으로써
1~10까지의 결과 값이 나온다.
(전개 시 result의 length 값은 10, 전개가 안되면 8)

문자열 전개 시에는 string 오브젝트가 iterable 오브젝트 이므로 쓸 수 없다.
let spreadObj = [...'okayoon'];

console.log(spreadObj);

결과 값
['o','k','y','o','o','n']

파라미터로 넘길 때 (spread parameter)
const number = [1,2,3];
getNum(...number);

function getNum(num1,num2,num3){
    console.log(num1, num2, num3);
}

결과 값
num1 = 1
num2 = 2
num3 = 3
함수 호출 전에 ...number를 전개한 후 파라미터로 전달하기 때문에 결과 값과 같은 형태가 된다.

호출하는 함수의 파라미터 값이 분리된 형태를 spread 파라미터라고 한다.


저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

e.target.dataset과 jQuery의 .data()의 결과 값은 다를 수 있다.  (0) 2019.11.15
태그 내부에 컨텐츠 추가하기 append(), prepend(), appendTo(), prependTo(), before(), after()  (0) 2019.10.02
placeholder.js 라이브러리 소스 분석 도전, 스터디 개념  (0) 2019.06.05
02. Rest 파라미터 - 스프레드(Spread) 연산자와 Rest 파라미터  (0) 2018.10.29
Google Javascript Maps API를 사용하여 지도 올리기!  (0) 2018.10.26
ajax 이슈, 파라미터 값이 안 보내져요. (processData)  (0) 2018.10.24
input 포맷(전화번호 입력받기)__regex__replace__substr  (0) 2018.10.24
버튼 클릭하여 해당영역으로 스크롤 이동하기 scrollintoview();  (0) 2018.10.23

 

사전작업으로 구글 인증키를 발급 받은 후 진행해야 합니다.
 
예시
HTML
<body>
  <section>
    <h1>남산타워</h1>
    <div id="google-map"></div>
  </section>
  
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDSaNN-dG5G4UMVIrrYU2M5-h2JTMxUdQE&callback=initMap"
      async defer></script>
            
      <script>
      	// 이곳에 코드 작성
      </script>
</body>
</body> 위에 google API script를 추가해줍니다.

그리고 API가 로드된 후에 script가 읽혀질 수 있도록 아래에 <script> 영역을 생성합니다.

 

 

CSS

#google-map {
  width:500px;
  height: 300px;
}
*필수로 맵 엘리먼트의 높이 값을 지정해줘야 합니다.
 

JS

<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('google-map'), {
      center: {
      	lat: 37.551073, 
        lng: 126.987893
      },
      zoom: 15
    });
  }
</script>

위에 작성했던 <script>안에 코드를 넣어줍니다.

center에서 lat과 lng의 값은 좌표 값입니다. 여기에서 좌표값을 참조할 수 있습니다.

zoom은 얼마나 지도를 확대할 수 있는지입니다. 숫자가 클수록 더 커집니다.

 

lat(latitude), lng(longitude) 값 구하기

place name에 주소를 입력해줍니다.
lat, lng값을 복사해서 위의 스크립트 내부에 붙여넣기하면 해당하는 좌표로 설정된 맵이 나옵니다.

 

 

예제

*무료 사용 건 수가 넘으면 콘솔에 에러가 납니다.

See the Pen zmyVrE by leeyoonseo (@okayoon) on CodePen.

 

저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

태그 내부에 컨텐츠 추가하기 append(), prepend(), appendTo(), prependTo(), before(), after()  (0) 2019.10.02
placeholder.js 라이브러리 소스 분석 도전, 스터디 개념  (0) 2019.06.05
02. Rest 파라미터 - 스프레드(Spread) 연산자와 Rest 파라미터  (0) 2018.10.29
01. Spread 연산자 - 스프레드(Spread) 연산자와 Rest 파라미터  (0) 2018.10.29
ajax 이슈, 파라미터 값이 안 보내져요. (processData)  (0) 2018.10.24
input 포맷(전화번호 입력받기)__regex__replace__substr  (0) 2018.10.24
버튼 클릭하여 해당영역으로 스크롤 이동하기 scrollintoview();  (0) 2018.10.23
자동으로 연도 변경하여 삽입하기  (0) 2018.10.23

+ Recent posts

티스토리툴바