자바스크립트에서 return false해줘야 할때

Posted by HULIA(휴리아)
2020. 11. 12. 14:15 프론트엔드/자바스크립트

a태그에 이벤트 걸때 href="#"을 사용할때가 있는데 이때 클릭이벤트나 다른 이벤트를 걸면 자동으로 상단으로 스크롤이 되게 되는데
클릭이벤트에 alert이나 실행후에 스크롤이 되지 않기 위해서는 return false라고 주면 스크롤이 실행되지 않는다

개발자와 디자이너 협업스터디 200919

Posted by HULIA(휴리아)
2020. 9. 19. 23:58 프론트엔드/그래픽디자인_퍼블리싱

만다라트 기법
->키워드 찾기

브랜드 아이덴디티
->첫인상 만들기(이걸 만다라트로 함)

 

만다라트 키워드(부드러운, 달콤한, 부드러운 등등)에서 뽑아낸 느낌으로 컬러칩을 만든다

color.adobe.com/ko/create/color-wheel

 

https://color.adobe.com/ko/create/color-wheel

 

color.adobe.com

메인컬러 2~3개
서브컬러 2~3개

선정 후 디자인 시작하면 된다

 

레퍼런스 찾기 시작

behance.net에서
1)research 웹디자인 파랑
2)developer 웹디자인 파랑
3)designer 웹디자인 파랑

 

 

디자인선행작업
1)키워드 도출(만다라트로 이용)
2)컬러 키워드 ->산정 
메인/서브 컬러 만들기
3)레퍼런스 찾기(behance pinterest 드리블 노트폴리오 사이트를 활용해서)
핀터레스트가 드리블이랑 비핸스랑 다 연결되어 있음
4)디자인가이드(개발자에게 컨벤션이랑 같다)

개발자의 컨벤션 = 디자인가이드

 

예시1

저는 미팅때 주요 키워드를 3가지 정도 뽑아와서 
로고 디자인도 프로젝트에 포함되어있으면 브랜딩 작업 우선하고요
핀터레스트에서 관련된 키워드 전부다 검색해서 이미지 자료들을 스케치 파일로 불러옵니다
그중에서 이미지 맵처럼 만들어서 브랜드 로고 먼저 만들고 색상은 마지막에 선택하는 편이며, 사이트 디자인은 로고 결정된 후에 작업 시작합니당

 

예시2
회사BI가 정해진 경우
저는 현재는 회사사이트 리뉴얼디자인하는게 거의 전부라서 말씀하신대로 로고랑 대표이미지색상이 정해져있어서 그거에 맞게 웹사이트 많이 봐요 요즘 웹사이트어떻게 구성되어있나 그래서 그거 짜집기해서 메인만들고 서브페이지 작업합니다

인하우스 회사
자체서비스를 디자인하는 회사임(외주아니고/외부신경안쓰고)


서핏
-크롬앱
-디자인 아티클을 보여줌
-최신 트렌드를 보여줌
ex)밀리의 서재 디자인가이드를 배포했다(확인)

 

 

www.carbondesignsystem.com/

디자인 가이드 잘된 곳

carbon design system으로 검색
디자인도 되어있지만 코드값도 잘 되어있다

 

공부하는데 가장 좋은것은 커뮤니티이다~
저작자가 직접 올리기 때문에
디자인 몰라도 가입해보자


TODO)
디자인에 필요한 크롬 앱 검색해서 찾아보기


개발쪽은 스크립트 진행
html css는 대소문자 구문안하자미나
스크립는 대소문자 구분함

 

HTML

<button class="btn">button</button>
<div class="article">article text</div>

 

CSS

.article{
display:none;
}

.article.--act{
display:block;
}

 

JAVASCRIPT

let $btn = document.querySelector(".btn");
let $article = document.querySelector(".article");

 

$btn.addEventListener("click", function(){

  $article.classList.toggle("--act");

 

});

 

구글에서

자바스크립트 선택자
자바스크립트 변수
자바스크립트 이벤트 부여
자바스크립트 클래스 제어

라고 검색하면 많이 나옴

 

함수로 만들어서 재사용할수 있다^^ 토글되는 것들을 여러개 만들데 다음의 함수를 이용한다
fuction setClickEvent(btnName, articleName){
  let $btn = document.querySelector(btnName);
  let $article = document.querySelector(articleName);

  $btn.addEventListener("click", function(){

    $article.classList.toggle("--act");

 });

};

 

setClickEvent(".btn", ".article");

 


리디자인해보자

 

리디자인
기존서비스를 두고 새롭게 디자인하는 방법(포트폴리오처럼)

26일까지 하고 서비스 선정하기
메인만 구축/디자인 하기
서비스 사이트 골라보기

아이콘은 svg로 한다

잘 전달되면 좋은 디자인
의도한 봐가 잘 전달되는지


figma에서 svg넣으면 된다
figma앱에서 드래그앤 드롭하면 된다

float와 clearfix

Posted by HULIA(휴리아)
2020. 8. 9. 19:45 프론트엔드/그래픽디자인_퍼블리싱

웹에서 배치를 할때 옆으로 나란히 태그를 나열할때 float를 사용하는데

float의 적용범위를 지정해주는 css가 clearfix이다

즉, float와 clearfix는 항상 쌍으로 사용된다

 

clearfix는 css 파일에

.clearfix::after{display:block;content:'';clear:both}

이렇게 설정해주고

float가 적용된 요소의 최 상단의 요소에 clearfix를 추가해 주면 된다

 

HTML파일

<div class="btn_tab clearfix">
      <button class="act" data-index="0">1</button>
      <button data-index="1">2</button>
      <button data-index="2">3</button>                
</div>


CSS파일

.tab .btn_tab button{
    float:left;
    width: 33.33%;
    height:40px;
    border-right:1px solid #fff;
    background: #666;
    color: #f1f1f1;
    font-size: 14px;
    text-align: center;
    line-height: 40px;
    box-sizing: border-box;    
}

reset css

Posted by HULIA(휴리아)
2020. 8. 9. 19:36 프론트엔드/그래픽디자인_퍼블리싱

body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,dl,dd,ol,ul,fieldset,legend,figure,menu{margin:0;padding:0;border:0} table,th,td{border-spacing:0;border-collapse:collapse} ol,ul,li{list-style:none} h1,h2,h3,h4,h5,h6{font-size:1em;font-weight:normal} body,input,textarea,keygen,select,button{font:normal 12px/1.2 'Open Sans','Noto Sans',sans-serif} input,textarea,select,button{margin:0;padding:0;border-radius:0;color:#333;outline:0;vertical-align:middle} a:link,a:visited,a:hover,a:active{text-decoration:none} a,button,input[type='submit'],input[type='button'],input[type='reset']{border:0;background:transparent;cursor:pointer} img{border:0;vertical-align:top}

개발자와 디자이너 협업 스터디 프로젝트 한 이유

Posted by HULIA(휴리아)
2020. 7. 18. 15:01 프론트엔드/그래픽디자인_퍼블리싱

개발자의 기초 기본내용에 대해서 복습

-확실히 알려주면서 깨닫는 부분도 있고

-정리를 하면서 좋은 자료를 만들수가 있음

 

디자인 기초
-디자인이 어떻게 되어가는지 기초과정에 알게 되었고

-UX/UI관련으로 기초지식 쌓고 툴도 사용해 보고

-아이콘이나 배너 등을 어떻게 만드는지

-디자인 시안관련 프로세스 관련으로 지식 습득

 

퍼블리싱 해보자
-개인적인 일하는 범위를 확장하고 싶은 생각이 있었고

-개발자 입장에서는 디자이너와 중간에 있는 퍼블리싱까지 접근가능하다고 생각했었습니다

-퍼블리싱으로 포트폴리오 사이트나 알바를 할수있지 않을까 하는 막연한 생각도 있었구요~ㅎ

 

디자이너 인맥

-어떤 일을 할때 개발자에게는 디자이너가 필요한 부분이 있습니다

-이번 기회로 디자이너를 알아두어서 나중에 인맥으로써 부탁이나 함께 하는 일을 만들수가 있겠죠?

개발자와 디자이너 협업스터디 3일차

Posted by HULIA(휴리아)
2020. 7. 18. 14:14 프론트엔드/그래픽디자인_퍼블리싱

날짜:200718


CSS 1일차

reset CSS와 nomalize CSS가 있는데

reset CSS는 모든 태그의 설정을 초기화하는것이고

nomalize CSS는 브라우저의 태그 설정을 일치화 해주는 것

 

실무에서 reset CSS를 nomalize CSS보다 많이 쓰인다
왜냐면 초기화해놓고 하는것이 설정한 대로 만들 수 있기때문

브라우저의 설정이 있으면 그에 맞춰서 가야하기 때문


float속성 원래는 left 옆에 출력
float가 레이아웃을 위한 것이 아니기 때문에
.clearfix를 해줘야 함 그게 float가 적용되는 범위를 설정해준다
float가 적용되면 인라인이 된다

 

html5에서는 disable의 속성값에 true false안써도 된다

disable이나 안쓰면 true false가 되는 것이다~ㅎ

 


디자인관련

모바일 UX/UI 디자인시 고려해야 할 사항(2번째 시간)

https://brunch.co.kr/@chulhochoiucj0/8

 

모바일 UI·UX 디자인시 고려해야 할 가이드라인 1

애플 iOS HIG와 Material design 가이드를 중심으로 | 모바일 앱과 웹 디자인은 데스크톱 웹 디자인과는 많은 부분이 다릅니다. 이는 각 기기device의 특성과 사용 맥락의 차이에서 기인합니다. 우선 모��

brunch.co.kr

 

 

 

 

 

 

 

아래의 사이트에서 잘된 디자인인지 아닌지를 테스트를 해볼 수 있습니다

https://cantunsee.space/

 

Can't Unsee

A game where you need to pick the design that is most correct. Test your attention to details!

cantunsee.space

 

개발자와 디자이너 협업스터디 2일차

Posted by HULIA(휴리아)
2020. 7. 8. 23:20 프론트엔드/그래픽디자인_퍼블리싱

날짜:200704


HTML5

 


디자인관련

웹디자인 작업시 유의해야할점

1. 트랜드에 맞게 디자인했는지 확인

2. 느린 로딩시간은 금물

3. 이미지 사용시 고품질의 이미지를 사용한다

4. 너무 많은 컬러를 사용하지 않는다

2~3가지 색상으로 제한해서 사용한다

5. 기기에 상관없이 동일한 경험 제공하기

적응형과 반응형의 차이점 설명은 아래링크에서 확인

https://blog.naver.com/eirene100999/221652032305

6. 사용하기 쉽고 명확한 네비게이션 디자인하기(네비게이션은 간결성, 명확성, 일관성을 가지고 있어야 한다)

7. 클릭 가능한 요소는 정확하게 알려라

버튼 디자인을 위한 7가지 기본규칙은 아래링크에서 확인

https://joylife052.tistory.com/entry/%EB%B2%84%ED%8A%BC-%EB%94%94%EC%9E%90%EC%9D%B8%EC%9D%84-%EC%9C%84%ED%95%9C-7%EA%B0%80%EC%A7%80-%EA%B8%B0%EB%B3%B8-%EA%B7%9C%EC%B9%99-%E2%80%93-UX-Planet

8. 광고는 적절하게 복잡하지 않게 디자인하기

배너광고회피(banner-blindness)현상에 관련된 자료 설명

cafe.naver.com/netmaru/17117

 

 

예전사이트를 검색해볼수 있는 사이트

https://web.archive.org/

 

Wayback Machine

 

web.archive.org

 

2020년 트랜드 웹디자인 및 피하면 좋을 디자인 참고 자료

2020 웹 디자인 트렌드 TOP9

nhj12311.tistory.com/256

 

2020년 웹디자인 트렌드 TOP 9

나름 저도 개발자이고 웹과 앱을 운영하는 입장에서 웹디자인에 대해서 아예 관심이 없을 수가 없습니다. 이번에 좋은 글을 보게 되어 제 블로그에 옮겨담는 정리를 해봅니다. 좋은 디자인과 경

nhj12311.tistory.com

한 번에 알아보는 2020 트렌드 웹 디자인

blog.naver.com/kosoodream/221790295323

 

2020디자인트렌드 알아보기! _ 웹디자인편

​웹디자인 트렌드는 끊임없이 변화하고 있습니다.2020년에는 수많은 디자이너들이 다양한 방식으로 디자인...

blog.naver.com


모바일 UI디자인을 위한 UX원칙 10가지

1. 우리는 사용자가 아니다

사용자의 입장을 객관적으로 살필수 있는 가장 좋은 방법은 데이터 관찰, 데이터는 실제 사용자가 행동한 결과를 바탕으로 나타나기 때문에 논쟁보다는 문제 해결에 초점을 맞추도록 도와준다

2. 각화면에서 한가지 행동에만 집중하게 한다

스마트폰 화면은 아주 작다.따라서 한 화면에서는 한가지 행동에만 집중하게 한다

3. 반응을 보여줘야 한다

버튼을 누를때 로딩바이든 토스트이든 반응을 보여줘야 한다

마이크로 인터렉션 : 사용자에게 섬세하게(입력중에도) 반응해, 사용자가 도달해야 할 목표까지 매끄럽게 가도록 돕는 디자인(비밀번호 등록시에 적용하면 좋다)

4. 맥락 있는 흐름을 만든다

광고, 앱스토어, 앱 연결하는 흐름을 만들자

5. 시각적 일관성을 유지한다

컬러, 폰트, 버튼, 이미지, 아이콘, 간격 등등 일관되어야 한다

6. 예상할 수 있어야 한다

같은 속성은 통일하여 무의식 중에 예상할수 있도록 만들 수 있다

7. 의미있는 움직임만 보여준다

체크했을때만 버튼이 보여준다던지, 입력했을때만 버튼을 보여준다 던지 등이 의미있는 움직임 이다

모션은 좋은 사용자 경험을 위한 도구여야 한다. 모션 자체가 목적이 되면 안된다. 사용자의 시선을 움직임이 있는 버튼으로 향하게 만들어 자연스럽게 버튼을 누르는 행동을 유도할 수 있다.

8. 누구나 이해하기 쉬운 글을 제공한다

삭제하시겠습니까의 확인창에 확인과취소가 아니라 취소와 전체삭제(삭제)가 있으면 좀더 명확하게 쉽게 전달된다

9. 사용자의 익숙함을 존중한다

기존꺼에서 최대한 비슷하게 해야함

10. 필요한만큼만 단순하게 디자인한다

 

https://brunch.co.kr/@dalgudot/110

 

UI 디자인을 위한 UX 원칙 10가지(ver 2.0)

디자인 독학하기 07 | UI/UX 디자인 경험을 공유합니다 :) [Contents] UI 디자인을 위한 UX 원칙 10가지 01 우리는 사용자가 아니다. 02 각 화면에서 한 가지 행동에만 집중하게 한다. 03 반응을 보여줘야

brunch.co.kr

 

모바일 UI/UX 디자인시 고려해야할 사항

https://brunch.co.kr/@chulhochoiucj0/8

 

모바일 UI·UX 디자인시 고려해야 할 가이드라인 1

애플 iOS HIG와 Material design 가이드를 중심으로 | 모바일 앱과 웹 디자인은 데스크톱 웹 디자인과는 많은 부분이 다릅니다. 이는 각 기기device의 특성과 사용 맥락의 차이에서 기인합니다. 우선 모��

brunch.co.kr

 

 

그외 참조사이트

brunch.co.kr/@ebprux/628

 

UI/UX 디자이너가 되기 위한 7단계

UX 디자인 배우기 #140 | 안녕하세요.  [예민한 UX 디자인/총 25시간 인강]  전민수입니다. 지난 20년간 UI/UX 강의와 컨설팅을 하면서 수집했던 해외 자료를 저 혼자만 공유하기에 아까워 브런치를 ��

brunch.co.kr

brunch.co.kr/@ebprux/616

 

웹디자인에서 반드시 해야 할 것과 하지 말아야 할 것

UX 디자인 배우기 #135 | 안녕하세요.  [예민한 UX 디자인/총 25시간 인강]  전민수입니다. 지난 20년간 UI/UX 강의와 컨설팅을 하면서 수집했던 해외 자료를 저 혼자만 공유하기에 아까워 브런치를 ��

brunch.co.kr

brunch.co.kr/@ebprux/562

 

미니멀리스트 디자인의 주요 원칙

UX 디자인 배우기 #121 | 안녕하세요.  [예민한 UX 디자인/총 25시간 인강]  전민수입니다. 지난 20년간 UI/UX 강의와 컨설팅을 하면서 수집했던 해외 자료를 저 혼자만 공유하기에 아까워 브런치를 ��

brunch.co.kr

brunch.co.kr/@ebprux/503

 

모바일 UI 디자인 애니메이션 3가지 원칙

UX 디자인 배우기 #120 | 안녕하세요.  [예민한 UX 디자인/총 25시간 인강]  전민수입니다. 지난 20년간 UI/UX 강의와 컨설팅을 하면서 수집했던 해외 자료를 저 혼자만 공유하기에 아까워 브런치를 ��

brunch.co.kr

brunch.co.kr/@ebprux/447

 

#09. 카드 UI 인터랙션

인터랙션 트랜드 깊이 파고 들기 | 카드 UI 인터랙션 카드 스크롤 방식 UI 패턴 카드 스와이프 방식 UI 패턴 스와이프과 스크롤 방식 혼합 카드 인터랙션 방식 UI 패턴 컨텍스트 기반 카드 방식 카��

brunch.co.kr

brunch.co.kr/@chulhochoiucj0/8

 

모바일 UI·UX 디자인시 고려해야 할 가이드라인 1

애플 iOS HIG와 Material design 가이드를 중심으로 | 모바일 앱과 웹 디자인은 데스크톱 웹 디자인과는 많은 부분이 다릅니다. 이는 각 기기device의 특성과 사용 맥락의 차이에서 기인합니다. 우선 모��

brunch.co.kr

brunch.co.kr/@designpopceo/26

 

2019 UI UX 및 웹디자인 벤치마킹 사이트 총정리

디자이너에게 필요한 UI/UX 및 웹디자인 벤치마킹 사이트 총정리 | 디자인팝 대표 김민호입니다. 오늘은 지난번에 이어 실무 디자인 프로젝트 작업 시 아이디어 및 콘셉트 도출을 위해 전 세계적�

brunch.co.kr

 

개발자와 디자이너 협업스터디 1일차

Posted by HULIA(휴리아)
2020. 7. 4. 23:36 프론트엔드/그래픽디자인_퍼블리싱

2020년 6월 27일

 

 

개발자와 UI/UX디자이너간의 소통할 수 있는 UI가이드관련 프로그램(프로토타이핑 툴이라고 이야기한다)

1. 제플린

https://zeplin.io/

1개 프로젝트 무료 이상은 유료

https://www.sharedit.co.kr/zeplin

 

2. 피그마

https://www.figma.com/

https://brunch.co.kr/@seeyeonj/18

 

3. 스케치(맥전용-유료)

4. 어도비XD

 


디자인 가이드 참고

구글 - https://developer.android.com/design?hl=en

 

Android 개발자  |  Android Developers

Android를 위한 디자인 Android 사용자는 앱이 플랫폼과 일관된 방식으로 표시되고 작동하기를 기대합니다. 개발자는 시각적 패턴 및 탐색 패턴을 위해 머티리얼 디자인 가이드라인을 준수해야 할 �

developer.android.com

애플 - https://developer.apple.com/design/human-interface-guidelines/

 

Human Interface Guidelines - Design - Apple Developer

Human Interface Guidelines Get in-depth information and UI resources for designing great apps that integrate seamlessly with Apple platforms.

developer.apple.com

기본적인 디자인 가이드는 애플과 구글 사이트에서 참고하면 된다~


해상도별 사용자 분포현황

gs.statcounter.com/screen-resolution-stats/desktop/south-korea

 

Desktop Screen Resolution Stats Republic Of Korea | StatCounter Global Stats

This graph shows the stats of desktop screen resolutions in South Korea based on over 10 billion monthly page views.

gs.statcounter.com

최대로 많은 해상도를 기준으로 작업하지 않고 최소로 사용하는 해상도를 기준으로 만들어 넣고 남은공간은 해상도에 맞춰서 늘어날 수 있게 한다

위의 해상도 분포 현황이 이런데 가장 작은 사이즈인 1280*720 해상도 맞춰서 레이아웃을 잡고 남은 해상도에 맞춰서 늘어날수 있게 작성한다


웹 레이아웃 관련 용어

http://designbase.co.kr/webdesign-2/

 

#2 이 용어 뭔지 아세요? - 웹디자인 입문 강좌

오늘은 웹디자인 입문 강좌 두 번째 시간입니다. 웹디자인과 관련된 알아두면 좋은 용어를 살펴보겠습니다. 어포던스가 뭔지 아시나요? WSG는 뭘까요? LNB와 GA는 뭘까요? 웹 디자인 쪽으로 처음 ��

designbase.co.kr

UX

UI

Responsive Web

Web Style Guide

Affordance

Layout

Grid

GNB

LNB

사이드바

헤더와 푸터

CTA

input창 / placeholder / label

Favicon

웹서버와 웹호스팅

도메인

웹 퍼블리싱

크로스브라우징

SEO

GA


디자인베이스 강의 - 레이아웃 그리드 관련

youtu.be/Q_gcAAKfGKw


https://brunch.co.kr/@clay1987/98

 

2019 웹 디자인 트렌드 (번역본)

UI 디자이너가 알아야할 2019 웹디자인 트렌드 | 이 게시물은 Thedesign.com의 채널의 'Web Design Trends for 2019' 라는 문서를 번역한 게시글입니다. 맥락상 이해가 쉽도록 의역 + 수정했기 때문에 정확하지

brunch.co.kr


디자인 소스 및 정보 모음

http://koreawebdesign.com/link/

 

Korea Web Design

Korea Web Design,

koreawebdesign.com


디자이너들이 많이 사용하는 사이트

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

 

Pinterest

요리법, 집 꾸미기 아이디어, 영감을 주는 스타일 등 시도해 볼 만한 아이디어를 찾아서 저장하세요.

www.pinterest.co.kr

https://www.behance.net/

 

최고의 Behance

오늘의 큐레이터 추천 프로젝트

www.behance.net

https://dribbble.com/

 

Dribbble - Discover the World’s Top Designers & Creative Professionals

Discover the world’s top designers & creatives Dribbble is the leading destination to find & showcase creative work and home to the world's best design professionals. Sign up

dribbble.com

https://logopond.com/

로고

 

Logopond - Logo, Brand & Identity Inspiration

Featured Artist: Brandmaistro

logopond.com

https://logospire.com/

로고

 

Logospire - a logo inspiration gallery

Million droplets by methodform

logospire.com


국내관련 사이트 모음집

https://www.dbcut.com/bbs/index.php

 

디비컷 - 웹디자인 벤치마킹 및 우수 웹사이트 모음

디비컷은 신규 오픈한 국내외 웹사이트를 소개 평가하는 웹디자이너 커뮤니티입니다.

www.dbcut.com

www.gdweb.co.kr/main/index.asp

 

굿디자인웹

국내 최우수 웹디자인 선정, 웹사이트. 굿디자인웹

www.gdweb.co.kr

rwdb.kr

반응형웹사이트만 모음

 

RWDB

RWDB Responsive Web Design dB Web awards, 우수 하이브리드웹·반응형웹 모음 사이트

rwdb.kr


해외사이트 모음집

https://www.awwwards.com/

 

Awwwards - Website Awards - Best Web Design Trends

Awwwards are the Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.

www.awwwards.com

www.thebestdesigns.com/

 

The Best Designs - Web Design Inspiration

The best of web design and web design inspiration - updated regularly with new designs and web designers, and featuring the best Wordpress Themes.

www.thebestdesigns.com

 

www.cssdesignawards.com

CSS를 적극 활용한 웹사이트 모음

 

CSS Design Awards - Website Awards - Best Web Design Inspiration - CSS Awards

AWARDED 2020 JUL 5 Portfolio of Romain Penchenat : a 20 years old french Digital Product Designer. A CSS only 3D experience. Nana Zhvania UX / UI Designer UI 9 UX 8.8 INN 8.8 8.87 Labib Jaffar Senior Visual Designer UI 8.5 UX 8.6 INN 9 8.7 Gleb Kuznetsov H

www.cssdesignawards.com

https://thefwa.com/


디자인 시안작업순서

1.처음 기획서를 받으면 여기저기 검색을 해서 괜찮은 사이트를 캡쳐해놓거나 주소를 저장해 놓는다

2.컨셉과 구도를 잡았으면 시안작업을 한다

3.시안을 그려나가면서 어떻게 구성하고 어떤 효과를 줄것인가도 염두하면서 작업을 한다

부모창 닫을때 지금 보고 있는 웹 페이지 창을 닫으려고 합니다 confirm 없이 닫는 방법

Posted by HULIA(휴리아)
2019. 12. 31. 14:17 프론트엔드/자바스크립트

자바스크립트

브라우저 창 강제로 닫기
부모창 묻지 않고 닫기
묻지 않고 창 닫기

 

top.window.close();

parent.close();
부모창을 닫을때 위의 두 함수를 이용하는데
그때마다 지금 보고 있는 웹페이지 창을 닫으려고 합니다. 이 창을 닫으시겠습니까?
라는 confirm창을 뜨게 되는데요

이 confirm이 안뜨면서 부모창을 닫을려면 다음과 같이 하시면 됩니다
parent.window.open('about:blank','_self').close();
부모창을 닫아야 하는데 open을 써야 하는게 이상할수 있지만 이게 됩니다^^

안드로이드 권한을 부여받도록 처리해야하는 위험한 권한 및 권한 그룹

Posted by HULIA(휴리아)
2019. 12. 23. 23:49 프론트엔드/안드로이드

https://developer.android.com/guide/topics/security/permissions.html?hl=ko#normal-dangerous

 

시스템 권한  |  Android 개발자  |  Android Developers

Permissions Google I/O 2015—Android M Permissions: Best Practices for Developers Android is a privilege-separated operating system, in which each application runs with a distinct system identity (Linux user ID and group ID). Parts of the system are…

developer.android.com

위의 링크에서 발췌한 내용입니다~

 

안드로이드 6.0(마시멜로우)버젼부터는 즉 targetSdkVersion 23부터는 아래의 위험한 권한에 대해서 사용자로부터 권한을 받아야 하는 로직이 들어가야 합니다

 

 

 

앱 권한을 받는 방법은 다음의 링크에서 확인하세요

https://developer.android.com/training/permissions/requesting?hl=ko