Kang-ji

http://blog.rightbrain.co.kr/?p=8499

아이폰X를 위한 디자인

새로 발표된 아이폰X에 대응하기 위해 추가된 주요 사항은 다음과 같습니다.

• 아이폰 6/7 대비 세로 크기 145pt 증가 (812pt 375pt)
• 화면 배율은 @3x 사용
• 사용할 수 없는 영역(상단바, 둥근 화면 모서리)을 피하기 위한 안전영역(safe area) 추가
• 큰 네비게이션 타이틀을 사용할 수 있게 됨
• 홈 화면 진입, 앱 전환 제스처와 충돌하지 않도록 제스처 사용

위 사항들은 아이폰X가 출시되면서 앞으로 iOS 앱 디자인을 할 때도 유의해야 하는 중요한 UI 가이드입니다. 하단에서 더욱 자세히 살펴보기로 하겠습니다.

1. Size

아이폰X의 세로모드의 경우,  디스플레이 너비는 아이폰 6,7,8의 4.7인치 디스플레이 너비와 동일하며,  높이는 4.7인치 디스플레이보다 145pt 더 큽니다. 이 것은 기존보다 콘텐츠를 위한 공간이 약 20% 더 늘어 난 것을 의미합니다.

그리고 위 표에서 보는 것과 같이 아이폰X는 배율이 3배(@3x)인 고해상도 슈퍼 망막 디스플레이를 사용합니다.

기존의 포토샵과 같은 툴을 이용하여 디자인을 하시는 분들이라면 아이폰X는 3배수 이미지를 사용한다는 점을 유의하면서 디자인을 하셔야겠습니다.

1. 아이폰X Cutout (notch)

아이폰X는 전면 상단 카메라, 스피커, 마이크 및 새로운 얼굴 ID 센서를 수용하기 위해 화면 상단에 컷 아웃(notch)이 있습니다.

1. Safe Area

안전영역(safe area)은 원래 TV OS에서 처음 도입된 개념으로 컨텐츠가 가리지 않는 것이 보장되는 영역입니다. 아이폰 X이 등장하면서 안전영역을 폰에서도 사용하게 되었습니다. 디자인할 때 주요 콘텐츠와 버튼이 이 영역을 벗어나지 않도록 해야 합니다.

iPhone X를 디자인할 때 화면을 채우는 디자인 레이아웃이 장치의 둥근 모서리, 센서 하우징 또는 홈 화면에 액세스하기 위한 표시기로 가려지지 않도록 해야합니다.

탐색 막대, 표 및 모음과 같이 시스템에서 제공하는 표준 UI 요소를 사용하는 대부분의 응용 프로그램은 장치의 새로운 폼 팩터에 자동으로 적응합니다. 배경 이미지는 디스플레이의 가장자리까지 확장되며 UI 요소는 적절하게 삽입되고 배치됩니다.

커스텀  된 레이아웃이 있는 앱의 경우, 자동 레이아웃과 안전 영역 및 여백 레이아웃 가이드를 준수했다면 iPhone X를 지원하는 것이 상대적으로 쉽습니다. 자동 레이아웃(Auto Layout)에 관련해서는 하단에서 다시 살펴보겠습니다.

다음은 안전영역(Safe Area) 및 아이폰X 디자인을 할 시 참고할 유의사항입니다.

전체 화면 경험을 제공하십시오. 배경이 디스플레이의 가장자리까지 뻗어 있고 테이블 및 컬렉션과 같이 세로로 스크롤 가능한 레이아웃이 맨 아래까지 계속 이어져 있는지 확인하십시오.

상태 표시 줄 높이에 주의하십시오. iPhone X에서 상태 표시줄은 다른 iPhone보다 높습니다. 시스템의 양호한 모습을 유지하기 위해 Apple은 iPhone X의 상태 표시 줄 높이를 20pt에서 44pt로 두 배 늘렸습니다. 그리고 스마트 폰의 둥근 모서리 화면으로 이동했습니다. 이를 고려하여 사용자의 디바이스를 기반으로 콘텐츠를 유동적으로 배치하도록 앱을 업데이트해야 합니다. 음성 녹음 및 위치 추적과 같은 백그라운드 작업이 활성화되어 있어도 iPhone X의 상태 표시줄의 높이는 변경되지 않습니다.

현재 디자인된 앱이 상태 표시줄을 숨기고 있다면 iPhone X디자인에 대한 결정을 재고하길 요청합니다. 상태 표시줄에는 사람들이 유용하다고 생각하는 정보도 표시되기 때문에 이 정보는 부가 가치에 대한 대가로만 숨겨져 있어야 합니다. iPhone X 의 표시 높이는 4.7 “iPhone보다 더 많은 수직 공간을 제공하며 상태 표시줄은 앱과 상관없는 화면 영역을 차지합니다.

1. Auto Layout

아이폰 6와 6+가 출시된 이후 기존과 비교하여 가장 크게 변화한 점은 아무래도 iOS의 디스플레이 크기가 다양해졌다는 점일 것입니다. 이런 변화로 인해 그 전에 좌표와 크기로 작업하던 방식으로는 다양한 디스플레이 사이즈에 대응하기 어렵다는 결론에 도달한 apple은 Adaptive layout (Auto layout) 에 대한 지원을 하게 되었습니다.

자동 레이아웃(Auto Layout)은 구성요소들 간의 관계를 ‘규칙’으로 정의해서 화면 크기가 변경되더라도 적용되게 하는 방법입니다. 이제는 이러한 자동 레이아웃을 이용하여 아이폰6, 6+ 이후 iOS 시리즈, 아이폰X까지도 상대적으로 쉽게 지원할 수 있습니다.

자동 레이아웃에 대한 더 자세한 내용은 Auto Layout Guide 또는 UITraitCollection를 참고합니다.

1. 다양한 종횡비 및 오리엔테이션 지원

많은 앱이 특정 너비와 높이 또는 비율에 따라 콘텐츠를 배치합니다. 하지만 아이폰X의 화면 높이와 비율은 다른 아이폰장치와 다르죠. 그렇기 때문에 아이폰X에서는 콘텐츠의 크기가 올바르게 조정되었는지 확인이 필요합니다.

그리고 가로 방향으로도 앱을 테스트해야 합니다. 대부분의 문제는 가로방향에서 나타나기 때문입니다. 기기가 왼쪽, 오른쪽으로 회전된 모든 상태를 테스트합니다.

1. iPhone X 디자인 가이드 라인 따르기

이미 언급했듯이 화면의 둥근 모서리와 함께 노치 (notch) 때문에 앱의 콘텐츠가 잘릴 수 있습니다. iPhone X 용으로 디자인할 때 이 노치영역을 주의해야 합니다. 이 목적을 위해 Apple은 안전 영역 가이드를 작성하고 이를 손상시키지 않으면서 앱에 콘텐츠를 배치하는 방법을 알려주었습니다. 앱의 배경이 가이드를 따르지 않아야 한다면 버튼, 그림, 텍스트 등과 같은 다른 콘텐츠가 반드시 있어야 합니다.

* 이미지 출처 : https://www.cleveroad.com

1. 앱에서 iPhone X 가로 모드를 생각하기

휴대 전화를 가로 모드로 전환하면 콘텐츠에 최대 공간을 제공하기 위해 상태 표시줄이 숨겨집니다.

모든 앱이 iPhone X 가로 모드의 이점을 필요로하지는 않지만 사실상 그 사용법에 대한 시나리오는 여전히 남아 있습니다. 예를 들어 사진, 비디오, 텍스트와 같은 다양한 종류의 콘텐츠를 전체 화면으로 볼 때 적합합니다. 그리고 게임이 있습니다. 사용자가 iPhone X와의 상호 작용을 끝내면 가로로 바뀌므로 세로 모드로 쉽게 전환할 수 있어야 합니다.

Apple은 표준 UI 요소 (예 : 테이블, 탐색 모음 등)를 사용하는 앱이 새로운 폼 팩터에 자동으로 적응하기 때문에 괜찮을 것이라고 확신합니다. 맞춤 레이아웃을 사용하는 앱의 경우 자동 레이아웃이 적용되고 ‘iPhone X 안전 영역을 따라 여백 가이드’가 있는 경우 가로 모드 적응이 비교적 쉽습니다.

기존 앱을 아이폰X용으로 업데이트하려면 먼저 배경 이미지를 포함한 asset을 PDF로 업데이트하거나 @3x이미지를 추가해야 합니다. 그리고 안전 영역을 켜서 안전 영역 레이아웃 가이드에 맞춰 수정합니다. (안전 영역 레이아웃 가이드는 위쪽, 아래쪽 및 가장자리 구속조건을 변경하므로 이 부분을 확인하고 필요한 경우 수정하세요.)

만약 세로 스크롤이 있는 경우, 안전 영역 가이드에 맞춰 오토 레이아웃을 통해 기존의 앱을 아이폰X용으로 빠르게 대처할 수 있지만, 한 화면에 전체 배경 이미지 소스가 들어가는 경우 아이폰X를 위한 디자인을 업데이트 해야 할 것 같습니다.

컨트롤은 모서리, 센서 하우징에서 멀리 이동해야 합니다. 기존의 Touch ID는 물리적 홈버튼이 없는 아이폰X에서는 사용할 수 없으므로 Face ID로 대체 가능하게 해야 합니다.
모든 사항을 수정한 후에는 아이폰X 시뮬레이터에서 앱을 빌드하여 실행하고 각각의 레이아웃 구성을 하나씩 확인해야 합니다.

새로운 디바이스가 출시 될 때마다 개발자와 디자이너가 고려해야 할 사항들이 추가되고 있습니다. 그리고 더욱 편리하기도 때로는 더욱 힘들기도 한 것 같습니다.
다음 아이폰 시리즈는 어떤 디자인일까요? 아이폰X과 같은 디자인일까요? 아니면 새로운 시도의 디자인 혹은 기존의 아이폰시리즈로 돌아갈까요?

* 참고자료 및 출처

https://www.apple.com/iphone-x/

https://www.developerinsider.in/iphone-x-ios-developer-guide/

https://www.cleveroad.com/blog/designing-for-iphone-x–9-ways-to-make-your-app-look-neat-and-clean-on-non-standard-screen

https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

https://developer.apple.com/ios/update-apps-for-iphone-x/

https://www.raywenderlich.com/173928/develop-design-iphone-x

http://leipiel.tistory.com/12

https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/index.html#//apple_ref/doc/uid/TP40010853-CH7-SW1

http://mathewsanders.com/designing-adaptive-layouts-for-iphone-6-plus/

https://www.raywenderlich.com/173928/develop-design-iphone-x

https://blog.shako.net/ios-human-interface-guidelines-summary/

삼항연산자

var a = ( 조건문 ) ?  b  :  c  ;

               조건문이 true일때 b가 담기고, 조건문이 false일때 c가 담긴다.

if 조건문

if (a>b) {
	c =10;
} else {
	c= 20;
}

조건 (삼항)연산자

(a > b) ? c=10 : c=20;

html DOM 내에 iframe이 있고, 그 안에서 html 을 로드할 경우

페이지 내에 iframe이 있고, 그 안에 html페이지가 로드할 경우 사용

if 조건문

if ($('#iframe', parent.document).length > 0){
	var targetFrameContent = $('#iframe', parent.document).get(0);
	if (targetFrameContent.contentDocument) {
		targetFrameContent.contentDocument;
	} else {
		targetFrameContent.contentWindow.document;
	}
	('#iframe', parent.document).css({"height" : (targetFrameDocContent.body.scrollHeight + 17) + "px"});
}

조건 (삼항)연산자

if ($('#iframe', parent.document).length > 0){ 
	var targetFrameContent = $('#iframe', parent.document).get(0); 
    var targetFrameDocContent = (targetFrameContent.contentDocument) ? targetFrameContent.contentDocument : targetFrameContent.contentWindow.document;
	$('#iframe', parent.document).css({"height" : (targetFrameDocContent.body.scrollHeight + 17) + "px"});
}
		

삼항연산자를 사용하여 코드라인이 줄어드는 장점이 있으나 

가독성이 떨어 질 수 있으므로 증복처리는 피하는 것이 좋다.

• if ($('#iframe', parent.document).length > 0){ ... }

      -  #iframe(자식요소)의 parent.document (iframe의 부모요소) 길이가 0보다 클 때 실행

• var targetFrameContent = $('#iframe', parent.document).get(0);

      -  #iframe(자식요소)의 parent.document(iframe의 부모요소)에서 첫번째 인덱스(0)를 가져와 targetFrameContent 에 대입

    -  $(selector).get(index);  : 선택한 요소를 배열의 (index)번째로 가져온다. 

• (targetFrameContent.contentDocument) ?  targetFrameContent.contentDocument  :  targetFrameContent.contentWindow.document ;

     -  contentDocument 프로퍼티 : iframe에 의해 생성된 document 객체

     -  contentWindow 프로퍼티 : iframe에 의해 생성된 window객체

     -  true 일때 .contentDocument : document 객체 

     -  false 일때 .contentWindow.document : window의 document 객체

• $('#iframe', parent.document).css( { "height" : (targetFrameDocContent.body.scrollHeight + 17) + "px" });

#iframe의 부모페이지 

scrollHeight의 픽셀(pixel)

scrollHeight는 읽기 전용 속성

참고 링크

https://strangelight.tistory.com/entry/iframe-%EB%B6%80%EB%AA%A8-%EC%9E%90%EC%8B%9D-%EC%A0%91%EA%B7%BC

https://mylife365.tistory.com/10

https://zeronica.tistory.com/80

https://medium.com/@vcjoo/vscode-%EC%97%90%EC%84%9C-github-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-4a293cc87530https://happygold.tistory.com/21

https://withcoding.com/120

https://demun.github.io/vscode-tutorial/git/

https://withcoding.com/120

https://promobile.tistory.com/378

https://alfenmage.tistory.com/entry/Git-%EC%A0%80%EC%9E%A5%EC%86%8C%EC%99%80-VS-code-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0-with-VS-Team-Services-VSTS

https://niceman.tistory.com/22?category=941090

http://gnujoow.github.io/dev/2016/09/22/Dev4-lets-use-linter/

https://niceman.tistory.com/105

https://atom.io/themes/atom-material-ui

https://kamang-it.tistory.com/entry/%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%EC%95%84%ED%86%B0%EC%97%90%EC%84%9C-%EC%BD%98%EC%86%94terminalcmd%EC%B0%BD-%EC%97%B4%EA%B8%B0atom-terminal

https://rogerdudler.github.io/git-guide/index.ko.html

https://material-ui.com/getting-started/installation/

vscode 설치

https://code.visualstudio.com/

git 설치 

https://git-scm.com/download

cmd창에서 설정해줄것

git config --global user.name username
git config --global user.email user@email.mail

그 후 vscode를 실행하면 자동으로 git을 찾아준다.

https://alfenmage.tistory.com/entry/Git-%EC%A0%80%EC%9E%A5%EC%86%8C%EC%99%80-VS-code-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0-with-VS-Team-Services-VSTS

https://emflant.tistory.com/135

https://kutar37.tistory.com/entry/3%EB%B6%84%EB%A7%8C%EC%97%90-Github-Page%EB%A1%9C-%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80%EC%A0%9C%EC%9E%91

https://opentutorials.org/course/3084/18891

https://dribbble.com/shots/1181328-Freebie-Friday-Flat-Transparent-UI-Kit-PSD-link-inside?list=searches&tag=transparent

https://fribly.com/2014/02/16/flat-ui-kit-8/

https://fribly.com/2013/11/30/free-ios7-style-uiux-kit-designers/

https://www.pinterest.co.kr/pin/359302876517168795/

https://ko.khanacademy.org/computing/computer-programming/programming

http://ko.aquaextremeworld.org/bubble-wall/floor-standing-bubble-wall/liquor-indoor-wine-water-panel-bubble.html

주류 실내 와인 물 패널 버블 분수 디스플레이 랙 LED 조명

인테리어 스테인리스 LED 춤 버블 물 기능 캐비닛 와인 찬장 황금 프레임

https://www.google.com/search?q=%EC%99%80%EC%9D%B8%EB%94%94%EC%8A%A4%ED%94%8C%EB%A0%88%EC%9D%B4&source=lnms&tbm=isch&sa=X&ved=0ahUKEwi7pMekqY3hAhWGBIgKHbCMB0oQ_AUIDigB&biw=1920&bih=937#imgrc=T11Oz3EoeZYILM:

http://it.chosun.com/site/data/html_dir/2010/10/12/2010101285015.html

삼성, LCD 뒤를 잇는 누드 디스플레이 선봬

출처 : http://it.chosun.com/site/data/html_dir/2010/10/12/2010101285015.html

https://blog.lgcns.com/1162

https://say2you.tistory.com/5557

https://ko.aliexpress.com/item/Custom-size-touch-interactive-samsung-panel-cctv-OLED-transparent-monitor-digital-kiosk/32754994570.html

사용자 정의 크기 터치 인터랙티브 삼성 패널 cctv OLED 투명 모니터 디지털 키오스크

키워드

터치스크린 , 인터랙티브, 투명디스플레이, 와인디스플레이, 키오스크

투사형디스플레이, lg디스플레이, 투과형디스플레이, 플렉서블 디스플레이

다양한 스크롤 효과를 추가하여 반응형 웹 페이지에 시각적으로 재미있는 요소를 추가해 봅니다.

https://helpx.adobe.com/kr/muse/how-to/responsive-web-design-scroll-effects.html

/*--------------------

  인터렉티브관련 소스

----------------------*/

Interactive fluid 액체

https://codepen.io/jscottsmith/pen/XgWyPp

Interactive mosaic background

https://codepen.io/xposedbones/pen/XXpgpj

Interactive CSS3 iPhone 6

https://codepen.io/MorenoDiDomenico/pen/jEyKxK

Interactive Resume

https://codepen.io/mikemang/pen/jrBkJJ

Webflow Interactions

https://codepen.io/team/webflow/pen/pvydKd

Interactive Canvas Starfield

https://codepen.io/bigsweater/pen/KbCIh

angular interactive box-model diagram

https://codepen.io/carolineartz/pen/ogVXZj

Canvas Particle Animation

https://codepen.io/JulianLaval/pen/KpLXOO

Profile Edit Interaction

https://codepen.io/suez/pen/Jddzpr

Hamburger Menu Button Interaction

https://codepen.io/himalayasingh/pen/GzZWyX

Interactive SVG Info Graph

https://codepen.io/chrisgannon/pen/pbzEYr

Stars (interactive)

https://codepen.io/Thibka/pen/BRzgOM

Interactive solar system (sass)

https://codepen.io/lazercaveman/pen/aRoLaB

Interactive responsive SVG Camera

https://codepen.io/jh3y/pen/yOwjbZ

Velo Slider - with Borders (scss)

https://codepen.io/StephenScaff/pen/dWmJxj

Its snowing!

https://codepen.io/loktar00/pen/CHpGo

Interactive electric car dashboard

https://codepen.io/david_barukcic/pen/grPOoQ

CSS BUTTONS!!

https://codepen.io/derekmorash/pen/XddZJY

Interactive Polygons wall

https://codepen.io/soju22/pen/VRLoLw

Rain

https://codepen.io/MillerTime/pen/oXmgJe

Ratings Inspiration

https://codepen.io/tadaima/pen/rjvYab

Coca Cola Vending Machine (Interactive)

https://codepen.io/giohobbins/pen/zqdQeO

JavaScript/Flexbox/SCSS Interactive Keyboard

https://codepen.io/joshuajcollinsworth/pen/VPXVbW

Shimmering neon text

https://codepen.io/comehope/pen/GBwvxw

https://codepen.io/devcodetips/pen/LGRJEo

Animated viewBox Data Visualization

https://codepen.io/sdras/pen/dXoLEJ

Gold Animation (mo.js + anime.js)

https://codepen.io/mattrothenberg/pen/MpwwpL

여러개의 스크롤이벤트 사용시

원페이지 랜딩페이지를 구현할때

상단 menu와 사이드 navigation을 각 section별로 걸어 부드럽게 내려가는 스크롤 

2번째 section부터 top버튼이 생성되어 클릭시 최상단으로 스크롤되는 효과

html

<body>
  <header id="header">
      <div class="header">
          <h1 class="logo"><a href="index.html"><img src="static/imgs/logo.png" alt="로고"></a></h1>
          <nav class="gnb">
            <ul>
              <li><a href="#section1">About</a></li>
              <li><a href="#section2">Portfolio</a></li>
              <li><a href="#section3">Technology</a></li>
              <li><a href="#section4">Contact Us</a></li>
            </ul>
          </nav>
      </div>
  </header>
  <!-- page_control -->
  <nav id="page_control">
    <div class="dots_wrap">
      <a class="dot active" href="#section1"><span class="blind">About</span></a>
      <a class="dot" href="#section2"><span class="blind">Portfolio</span></a>
      <a class="dot" href="#section3"><span class="blind">Technology</span></a>
      <a class="dot" href="#section4"><span class="blind">Contact Us</span></a>
    </div>
  </nav>
  <!-- //page_control -->
  <div id="topBtn">
    <p class="top_btn">
    <a href="#top"><i class="up"></i><span>top</span></a>
    </p>
  </div>

  <div id="container">
    <section id="section1">
      <div class="section_header">
          <h3>section1</h3>
      </div>
      <div class="section_body"> section1 </div>
    </section>
    <section id="section2">
      <div class="section_header">
          <h3>section2</h3>
      </div>
      <div class="section_body">section2 </div>
    </section>
    <section id="section3">
      <div class="section_header">
          <h3>section3</h3>
      </div>
      <div class="section_body">section3</div>
    </section>
    <section id="section4">
      <div class="section_header">
          <h3>section4</h3>
      </div>
      <div class="section_body">section4</div>
    </section>
  </div>
</body>

style

<style>

#topBtn{ 
display: none; position: fixed; right: 6.474%; z-index: 40; width: 40px; height: 40px; bottom: 4.5%; font-size: 12px; text-align: center; vertical-align: middle; text-transform: uppercase; border-radius: 50%; border:1px solid rgb(225,225,225);
}

.top_btn{ margin-top: 3px;}
.top_btn i{display: inline-block; text-align: center; border: solid #fff;  border-width: 0 1px 1px 0; padding: 3.5px;}
.top_btn i.up{ transform: rotate(-135deg); -webkit-transform: rotate(-135deg);}
.top_btn span{display: block;}

</style>

script

<script>

    $(document).ready(function () {

      // scroll
      var speed = 700;

      function scrolling(obj) {
        if (!obj) {
          $('html, body').animate({ scrollTop: 0 }, speed);
        } else {
          var posTop = $(obj).offset().top;
          $('html, body').animate({ scrollTop: posTop }, speed)
        }
      };


      // menu link
      $('.gnb ul li a').click(function () {
        var direction = $(this).attr("href");
        scrolling(direction);
        moveSection($(this).parent().index()+1);
      });


      $(".dots_wrap a").click(function () {
        var direction = $(this).attr("href");
        scrolling(direction);
        moveSection($(this).index()+1);
      });


      /* 스크롤 모션 */
      setGrid('.section_body');

      function setGrid(target) {
        var $win = $(window),
        $target = $(target);
        
        var scrollMotion = function () {
          var scrollTop = $win.scrollTop(),
            winH = $win.height();
          $target.each(function (i) {
            var $this = $(this),
              position = this.getBoundingClientRect().top;  // 요소의 크기와 요소의 viewport에서의 상대적인 위치를 반환

            if (position < winH) {
              $this.addClass('show');
            } else {
              $this.removeClass('show');
            }
          });
        };

        scrollMotion();
        $(window).on('scroll', scrollMotion);
      }

      var currentPage = 1;

      // scroll mousewheel
      var moveTop = null;

      $(".section").each(function () {
        // 개별적으로 Wheel 이벤트 적용
        $(this).on("mousewheel DOMMouseScroll", function (e) {
          e.preventDefault();
          var delta = 0;


          if (!event) event = window.event;
          if (event.wheelDelta) {
            delta = event.wheelDelta / 120;
            if (window.opera) delta = -delta;
          } else if (event.detail) delta = -event.detail / 3;



          // 마우스휠을 위에서 아래로
          if (delta < 0) {
            if ($(this).next() != undefined) {
              moveTop = $(this).next().offset().top; //타겟의 다음 좌표의
            }

            // 마우스휠을 아래에서 위로
          } else {
            if ($(this).prev() != undefined) {
              moveTop = $(this).prev().offset().top;
            }
          }

          // 화면 이동 0.8초(800)
          $("html,body").stop().animate({
            scrollTop: moveTop + 'px'
          }, {
              duration: 1000, complete: function () {
                moveSection();
              }
            });
        });
      });


      function moveSection(idx){
        if(moveTop == $('#section1').offset().top || idx==1){

          $('.gnb ul li').removeClass('active');
          $('.gnb ul li:nth-child(1)').addClass('active')
          $('.dots_wrap a').removeClass('active');
          $('.dots_wrap a:nth-child(1)').addClass('active');

        }else if(moveTop == $('#section2').offset().top || idx==2){

          $('.gnb ul li').removeClass('active');
          $('.gnb ul li:nth-child(2)').addClass('active')
          $('.dots_wrap a').removeClass('active');
          $('.dots_wrap a:nth-child(2)').addClass('active');

        }else if(moveTop == $('#section3').offset().top || idx==3){

          $('.gnb ul li').removeClass('active');
          $('.gnb ul li:nth-child(3)').addClass('active')
          $('.dots_wrap a').removeClass('active');
          $('.dots_wrap a:nth-child(3)').addClass('active');

        }else if(moveTop == $('#section4').offset().top || idx==4){

          $('.gnb ul li').removeClass('active');
          $('.gnb ul li:nth-child(4)').addClass('active')
          $('.dots_wrap a').removeClass('active');
          $('.dots_wrap a:nth-child(4)').addClass('active');
        }
      }

      // tab JS
      $('ul.tab>li').click(function () {
        var activeTab = $(this).attr('data-tab');
        $('ul.tab>li').removeClass('current');
        $('.tab_content').removeClass('current');
        $(this).addClass('current');
        $('#' + activeTab).addClass('current');
      })
    });

  </script>

<script>
  $(window).scroll(function() {
  	if ($(this).scrollTop() > 500) {
  		$('#topBtn').fadeIn();
  	} else {
  		$('#topBtn').fadeOut();
  	}
  });

  $("#topBtn").click(function() {
  	$('html, body').animate({
  		scrollTop : 0
  	}, 400);
  	return false;
  });

</script>

http://www.gisdeveloper.co.kr/?p=2122

https://m.blog.naver.com/PostView.nhn?blogId=st004329&logNo=221018707838&proxyReferer=https%3A%2F%2Fwww.google.com%2F

https://codepen.io/Kangjii/pen/WmKREw

PNG 파일 CSS로 색상 변경하기

.button { 
    width: 40px; height:40 px
    background:rgb(0,35,255); 
	-webkit-mask-box-image:url('...png');
	mask-image: url('...png');
	background-position:center;  background-size:cover;  position:relative; 
}

.button:hover{ 
	transition:0.4s;  background:rgba(0,35,255,0.8);
}

SVG파일 CSS로 색상 변경하기

주의: mask-image는 ie 브라우저 미지원!!!  

height: 50px;

/* Background Option 1: Use a background-color as the fill */
background-color: red;

/* Background Option 2: Use a background-image as the fill */
background-image: url(background.png);

/* Syntax Option 1: mask shorthand */
mask: url(icon.svg) no-repeat 50% 50%;
-webkit-mask: url(icon.svg) no-repeat 50% 50%;

/* Syntax Option 2: mask-image only */
mask-image: url(icon.svg);
-webkit-mask-image: url(icon.svg);

 하단에 footer 고정

https://m.blog.naver.com/PostView.nhn?blogId=eggtory&logNo=220744380205&proxyReferer=https%3A%2F%2Fwww.google.com%2F

페이지의 하단에 footer 고정 시키기

position:fixed를 사용하면 컨텐츠 양에 상관 없이 항상 브라우져 하단에 고정되어 있는 footer를 보게 됩니다.

컨텐츠 양이 많을 경우 컨텐츠가 끝나는 지점에 footer를 고정시키기 위해서는 아래와 같이 심플한 소스를 사용하시면 됩니다.

<div id="wrapper">
    <div id="header">header</div>
    <div id="container">나는 container입니다.
 </div>
 <div id="footer">footer</div>
</div>

html,
body {
    margin:0;
    padding:0;
    height:100%;
}

#wrapper {
    position:relative;
    min-height:100%;
}
#header {
    height:70px;
    background:#ccc;
}

#container {
  	padding:20px;
}

#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:70px;   
    background:#ccc;
}

상대적인 값 

em

타이포그래피에서 현재 지정된 포인트 사이즈를 나타내는 단위

부모 사이즈의 상대적으로 크기가 계산되어 진다.

<div class="parent">
	parent
	<div class="child"> child</div>
</div>

.parent {
	font-size: 8em; /* 128px */
}
.child {
	font-size: 0.5em; /* 64px */
}

브라우저에서 HTML에 할당되는 기본폰트 사이즈는 16px이다.

.parent 사이즈가 8em이라는 것은 부모요소인 HTML16px의 8배가 곱해진 값.

.parent는 16px * 8 = 128px 로 브라우저에 표기됨.

parent안에 있는 .child의 폰트사이즈 0.5em은 부모인 parent의 0.5배가 계산되어진 128px * 0.5 = 64px 로 브라우저에 표기가 된다.

이때 %로 지정할 경우의 폰트사이즈는 .parent 는 800% 가되고  .child는 부모의 폰트사이즈에서  50%로 나타낼 수 잇다. 동일한 결과값이 나옴. 

rem

em에서 root를 나태는 r이 더해진 단위로 부모에 따라 사이즈가 계산되는 것이 아니라 

루크에 지정된 폰트사이즈에 따라 크기가 결정되는 단위. 

.parent {
	font-size: 8rem;  /* 128px */
}
.child {
	font-size: 0.5rem; /* 8px */
}

viewport 에 관련된 단위 (vw, vh, vmin, vmax)

vw

• 100vw는 viewport width 너비의 100%로 쓴 값
• 50vw는 viewport width 너비의 50%로 사이즈를 지정한다. 

vh

• viewport height 

vmin

• vmin은 브라우저의 너비와 높이 중 작은 값의 50%

vmax

• vmax는 라우저의 너비와 높이 중 큰 값의 50%

%

부모요소의 상대적으로 크기가 계산되는 단위

위의 em대신 %로 계산하게 되면 아래와 같다. 

.parent {
	font-size: 800%; /* 128px */
}
.child {
	font-size: 50%; /* 64px */
}

총정리

부모요소의 사이즈에 따라서 사이즈가 변경되야한ㄴ다면 %나 em과 같은 단위를 사용한다.

부모와 상관없이 브라우저 기준의 사이즈에따라 반응해야하면 부포트단위인 vm,vh나 rem을 사용하면된다. 

요소의 너비와 높이에 따라 사이즈가 변경되야하면 %나 부포트단위인 vm,vh를 사용하면 된다. 

폰트사이즈에 따라서 사이즈가 반응해야하면 em과 rem을 사용한다. 

예제 

버튼의 컴포넌트

버튼의 폰트를 rem을 사용해서 만들게되면 root의 폰트사이즈에 다라 크기가 결정되기 때문에 

최상단의 body나 다른 컴포넌트 안에서 사용할때와 크기의 변동사항이없다. 

em을 사용해서 만든다면 body에 서 사용할때와 부모요소에서 사용햇을대 크기차이가 달라지게 된다.

페이지 어디에서 사용되어져도 사이즈가 그대로 고정되야한다면 rem

어디에서 사용되냐에따라 사이즈가 유동적으로 변경되야하면 em을 사용한다. 

html 예제

<body>
    <div class="level1">
        <h1>level 1</h1>
        <div class="level2">
            <h1>level 2</h1>
            <div class="level3">
                <h1>level 3</h1>
                <div class="level4">
                    <h1>level 4</h1>
                </div>
            </div>
        </div>
    </div>
</body>

em 예제

body { font-size: 16px; }
.level1 { font-size: 2em; /* 32px */ }
.level2 { font-size: 2em; /* 64px */ }
.level3 { font-size: 2em; /* 128px */ }
.level4 { font-size: 2em; /* 256px */ }

rem 예제

body { font-size: 16px; }
.level1 { font-size: 2rem; /* 32px */ }
.level2 { font-size: 2rem; /* 32px */ }
.level3 { font-size: 2rem; /* 32px */ }
.level4 { font-size: 2rem; /* 32px */ }

기본

See the Pen Untitled by KangJi (@Kangjii) on CodePen.

flex 사용

See the Pen Untitled by KangJi (@Kangjii) on CodePen.

flex-direction

축의 방향

flex-direction: row 가 기본.

/* 한 줄의 글을 작성하는 방향대로 */
flex-direction: row;

/* <row>처럼, 대신 역방향 */
flex-direction: row-reverse;

/* 글 여러 줄이 쌓이는 방향대로 */
flex-direction: column;

/* <column>처럼, 대신 역방향 */
flex-direction: column-reverse;

/* 전역 값 */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;

justify-content

justify-content: flex-start;  기본값

/* Positional alignment */
justify-content: center;     /* Pack items around the center */
justify-content: start;      /* Pack items from the start */
justify-content: end;        /* Pack items from the end */
justify-content: flex-start; /* 축에서 시작지점 */
justify-content: flex-end;   /* 축에서 끝지점 */
justify-content: left;       /* Pack items from the left */
justify-content: right;      /* Pack items from the right */

/* Baseline alignment */
/* justify-content does not take baseline values */

/* Normal alignment */
justify-content: normal;

/* Distributed alignment */
justify-content: space-between; /* 축을 기준으로 균일하게 정렬 */
justify-content: space-around;  /* Distribute items evenly
                                   Items have a half-size space
                                   on either end */
justify-content: space-evenly;  /* Distribute items evenly
                                   Items have equal space around them */
justify-content: stretch;       /* Distribute items evenly
                                   Stretch 'auto'-sized items to fit
                                   the container */

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: revert-layer;
justify-content: unset;

justify-content: space-between; 

See the Pen Untitled by KangJi (@Kangjii) on CodePen.

align-items

/* Basic keywords */
align-items: normal;
align-items: stretch;

/* Positional alignment */
/* align-items does not take left and right values */
align-items: center; /* Pack items around the center */
align-items: start; /* Pack items from the start */
align-items: end; /* Pack items from the end */
align-items: flex-start; /* Pack flex items from the start */
align-items: flex-end; /* Pack flex items from the end */

/* Baseline alignment */
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /* Overflow alignment (for positional alignment only) */
align-items: safe center;
align-items: unsafe center;

/* Global values */
align-items: inherit;
align-items: initial;
align-items: revert;
align-items: revert-layer;
align-items: unset;

Flex 속성

flex-grow

flex-grow만을 사용할경우 각 여백에 대한 비율로 조정되기 때문에 의도한바로 너비를 지정하기 어렵다. 

/* <number> values */
flex-grow: 1;
flex-grow: 0.6;

/* Global values */
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;

See the Pen Untitled by KangJi (@Kangjii) on CodePen.

flex-basis

flex-basis:auto가 기본속성값

flex-basis:0으로 해주게되면 의도하는 정확한 비율대로 나눌수 있어 사용하기에 효율적이다. 

/* <'width'> 지정 */
flex-basis: 0;
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/* 원본 크기 키워드 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* 플렉스 아이템 내용 크기에 따라 조절 */
flex-basis: content;

/* 전역 값 */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

See the Pen Untitled by KangJi (@Kangjii) on CodePen.

Flex 축약형으로 사용하기

See the Pen Untitled by KangJi (@Kangjii) on CodePen.

Animation 

엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜준다.

애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다.

Animation 속성

Animation 축약형 예시

@keyframes sample-ani {
    0% {
        transform: translate(0, 0);
    }
    50% {
        background: red;
        transform: translate(300px, 0);
    }
    100% {
        transform: translate(400px, 500px);
    }
}
.box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border: 2px solid #000;
    background: #fff000;
    animation: sample-ani 2s linear forwards 3;
}

개발자도구에서 확인하기

1. animation-duration

한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정

/* Single animation */
animation-duration: 6s;
animation-duration: 120ms;

/* Multiple animations */
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;

2. animation-timing-function 

가속도를 지정해준다. 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정

transition때와 마찬가지로 개발자도구에서 제공되는 cubic-bezier 에디터를 사용하여 적용할 수 있다. 

축약 속성 animation를 사용하여 모든 애니메이션 속성을 한꺼번에 설정하는 것이 편리하다.

/* Keyword values */
animation-timing-function: ease; /* 애니메이션 중간까지 속도가 올라가고 중간 이후 느려짐 cubic-bezier(0.25, 0.1, 0.25, 1.0) */
animation-timing-function: ease-in; /* 천천히 시작해 끝날때까지 빨라짐 cubic-bezier(0.42, 0, 1.0, 1.0)  */
animation-timing-function: ease-out; /* 빨리 시작해 점점 느려짐 cubic-bezier(0, 0, 0.58, 1.0)  */
animation-timing-function: ease-in-out; /* 천천히 시작했다 빨라지고 다시 느려지며 끝남 cubic-bezier(0.42, 0, 0.58, 1.0) */
animation-timing-function: linear; /* 등속 cubic-bezier(0, 0, 1.0, 1.0) */
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(17); 
animation-timing-function: steps(4, end);

/* Steps Function keywords */
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);

/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: revert;
animation-timing-function: revert-layer;
animation-timing-function: unset;

cubic-bezier

+ 베지어 곡선 이란?

컴퓨터 그래픽 등에서 사용되는 매개변수 곡선으로 부드러운 곡선을 만드는데 이용.

폰트 애니메이션 등에 사용.

cubic-bezier는 베지어 곡선을 정의하는 함수로 

4개의 포인트 (P0, P1, P2, P3)로 정의한다.

https://cubic-bezier.com/#.17,.67,.83,.67

3. animation-delay

애니메이션의 시작할 시점을 지정한다. 시작 즉시, 잠시 후에, 또는 애니메이션이 일부 진행한 시점부터 시작할 수 있다.

/* Single animation */
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;

/* Multiple animations */
animation-delay: 2.1s, 480ms;

4. animation-iteration-count 

- 몇 번 반복될지 지정한다.

animation-iteration-count: 3;         /* 3번 반복 */
animation-iteration-count: infinite;  /* 무한 반복 */

5. animation-delection

애니메이션이 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부를 지정한다..

/* Single animation */
animation-direction: normal;
animation-direction: reverse; 	/* 반대로 재생 */
animation-direction: alternate; /* 출발에서 끝. 끝에서 출발지점으로 번갈아가며 재생 */
animation-direction: alternate-reverse;  /* 출발은 반대부터 시작하여 번갈아가며 재생 */

/* Multiple animations */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

/* Global values */
animation-direction: inherit;
animation-direction: initial;
animation-direction: unset;

6. animation-fill-mode

 애니메이션의 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정한다..

/* Single animation */
animation-fill-mode: none;
animation-fill-mode: forwards; /* 끝나는 시점의 위치로 지정*/
animation-fill-mode: backwards;
animation-fill-mode: both;

/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

7. animation-play-state

애니메이션이 실행 중인지 일시 중지되었는지 설정한다.

hover일때 paused를 지정해주면 마우스오버했을대 멈추를 효과를 줄 수 있다.

/* Single animation */
animation-play-state: running;
animation-play-state: paused;

/* Multiple animations */
animation-play-state: paused, running, running;

/* Global values */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: revert;
animation-play-state: revert-layer;
animation-play-state: unset;

8. animation-name

@keyframes 규칙을 이용

.box {
	animation-name: sample-ani;
}

@keyframes sample-ani {
    0% {
        transform: translate(0, 0);
    }
    50% {
        background: red;
        transform: translate(300px, 0);
    }
    100% {
        transform: translate(400px, 500px);
    }
}

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations

Transition

CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공.

속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다.

Transition 속성

1. transition 사용하기

- transition을 사용하면 제공되는 모든요소가 기본으로 사용된다.

transition: 1s 2s;  /* duation, delay */

2. transition-property: all; 모든요소의 transition을 사용하겠다.

transition-property: all /* 모든요소 사용 */

3. transition-duration 재생시간 

transition-duration: 1s;

4. transition-timing-function  가속도

transition-timing-function: ease;    /*기본값*/
transition-timing-function: linear;  /*등속도(동일한속도)*/
transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(0.01, 0.82, 0.54, 1.19);

개발자도구에서 속성값 ease앞에 있는 아이콘을 클릭하여 cubic bezier Editor를 열면

transition 의 동작을 나타내주는 그래프를 볼 수 있고 그래프의 각 x축과 y축에있는 원형을 움직여 효과를 변경해줄 수 있다. 

5. transition-delay: 시작시간

transition-delay: 2s; /* 2초 후에 실행된다*/

width, backround-color, font-size 등 수치로 표현되는 변화값을 transition 줄 수 있다. 

Transform

Transform 속성

1. scale()  :  X 또는 Y축으로 확대/ 축소

transform: scaleX(2);          /* X축으로 비율만큼 확대, 축소 */
transform: scaleY(2);          /* y축으로 비율만큼 확대, 축소 */
transform: scale(2, 2);        /* x축, y축으로 비율만큼 확대, 축소 */

2. rotate()  : 지정 요소 회전

transform: rotateX(15deg);  /* x축 기준으로 15deg 만큼 회전 */
transform: rotateY(15deg);  /* y축 기준으로 15deg 만큼 회전 */
transform: rotate(-15deg);  /* -15deg 만큼 회전 */

3. translate() : 지정 요소 X 또는 Y축으로 이동

transform: translateX(10px);        /* X축으로 이동 */
transform: translateY(10px);        /* Y축으로 이동 */
transform: translate(20px, -10px);  /* X축, Y축으로 이동 */

4. skew() : 지정 요소 X 또는 Y축으로 기울이기

transform: skewX(15deg);          /* x축으로 15deg 만큼 기울이기 */
transform: skewY(15deg);          /* y축으로 15deg 만큼 기울이기 */
transform: skew(15deg, 15deg);    /* x축, y축으로 15deg 만큼 기울이기 */

transform-origin 속성 

지정요소의 기준점 변경하기

transform-origin: right bottom;  // px, 백분율(%), top, left, center, right, bottom

https://validator.w3.org/unicorn/

https://jigsaw.w3.org/css-validator/

https://validator.w3.org/