드리블 탑 디자인 앱 만들기 Part #1 레이아웃 코딩

자 우리 첫 시리즈에서는 디자이너들의 성지라 불리는 드리블 닷컴에서 앱 컨셉으로 멋진 디자인을 하나 선정해서 디자인을 직접 앱으로 까지 구현에 보는 시리즈를 진행할 예정입니다 그러면 시작해 보겠습니다 우선 구글에서 Dribbblecom을 검색합니다 그리고 ui 로 검색을 하셔서 상단에 보이는 것 중에 네 번째 작품 아주 멋진앱이죠 정재성님이 제작하신 한국 분이신 것 같네요 제작하신 멋진 디자인을 직접 앱으로 구현을 해 보도록 하겠습니다 우선 GIF스크러버로 이미지를 따구요 첫번째 시간은 현재 보이는 이 화면 Html과 CSS로 우선 구성을 할 거구요 뒷 시리즈에서 자바스크립트와 프로그래밍을 이용해서 실제 앱으로 만드는 과정을 진행할 예정입니다 기본적인 개발은 크롬의 개발자 도구를 이용해서 진행이 될 예정이구요 깃 허브에서 무료로 제공하고 있는 아톰이란 에디터의 일부 도움을 좀 받을 예정이예요 atom

io 에 접속하셔서 무료로 다운로드 받아서 사용하실 수 있습니다 자 그럼 시작해 볼까요 우선 작업 폴더를 하나 만들어 보겠습니다 Dribbble Todo 라는 폴더를 만들고 일단 폴더엔 index html 아 이래서 계속해요 cml tel 써서 본 모양 잡으시구요 타이틀은 드리블 투두리스트 라고 정하고 그 다음에 스타일 파일을 하나 만들어 주겠습니다 스타일 점 CSS 그리고 링크 스타일 시트 stylecss 여기 세팅이 되었습니다 그럼 이번에는 만든 파일을 탐색기에서 열어 주시면 작업 준비 가 되었죠 F12를 눌러서 개발자 모드를 실행해 주시고 모바일 모드 아이폰X사이즈로 선택을 하셔서 작업 준비를 합니다 개발자 도구에 소스탭에서 애드 폴더를 추가 하시면 작업 한게 바로 적용이 되요 이렇게 선택을 하시고 권한을 승인 해주시면 이렇게 바로 들어왔죠 이렇게 되고 태그를 만들어 볼게요 div 컨테이너 를 먼저 만드시구요 상단에 헤더 영역 컨텐츠 영역, 카드 영역까지 총 3개의 div 를 만들게요 컨텐츠 카드 에어리어 세 가지 영역을 만들고 새로고침 보이시죠 영역이 그럼 이쪽에 소스를 추가해 놨기 때문에 이쪽에 스타일을 플러스 버튼을 누르고 계시면 스타일 시트를 고를 수가 있어요 그러면 스타일에 컨테이너가 추가됐고 소스에 확인를 해보시면 스타일의 추가된 게 보이시죠 이런식으로 작업은 계속 진행 될 예정 입니다 그러면 기본적으로 html , body 가로 세로 사이즈를 지정 해주시고요 마진은 0으로 기본을 잡아주면 됩니다 보이시죠 순서는 바꿀게요 컨테이너 컨테이너 싸이즈도 세로 사이즈를 지정해 줍니다 영역이 넓어진게 보이시죠 컨테이너에는 배경색을 이쪽에 개발자 도구를 띄워서 배경색을 캡쳐 합니다 실제 배경색은 아래쪽에 그라데이션이 들어가 있어서 아래쪽을 다시 복사를 해서 배경을 linear gradient 라고 해 주시고 이렇게 코마를 이용해서 직접 입력해주시면 이렇게 그라데이션이 배경이 똑같이 적용이 됩니다 그러면 일단은 준비가 됐어요 화면 크기를 좀 비슷하게 맞춰주시고 이번에는 전체 컨테이너에 이제 컬러를 포인트 컬러를 흰색으로 지정해주세요 헤더를 꾸며 보겠습니다 왼쪽 가운데 오른쪽 총 세개의 div를 만들어 줄게요 레프트, 타이틀, 라이트 가운데영역에는 투두라고 입력을 해주겠습니다 새로고침을 눌러보시면 글씨가 작죠 모바일 사이즈에 맞는 뷰 포트를 지정을 안해줘서 그런건데요 다른 사이트에 보시면 뷰 포트 샘플이 있어요 복사해서 메타 뷰포트 태그를 넣어주시면 커졌죠? 안쓰는 창은 닫아 주시고 화면에 보이는 아이콘은 폰트어썸 사이트에서 제공하는 폰트를 이용할 예정입니다 폰트어썸닷컴 이라고 입력을 하시고 폰트어썸을 사용하기 위해서는 스타트를 누르셔서 링크를 만들어 주셔야 되요 링크 주소가 나오죠 클릭해서 복사 네 준비가 됐습니다 그럼 바로 아이콘을 검색해서 사용하실 수 가 있어요 메뉴 이 부분을 클릭 에서 복사 하시면 되구요 복사해서 붙여놓고 이번엔 오른쪽에 써치 마찮가지로 이부분 클릭해서 붙여 넣으시고 F5를 눌러서 확인 아이콘이 나오는게 보이시죠 이번엔 아이콘이 나왔으니 스타일링을 해볼게요 패딩 20px 그리고 디스플레이 플렉스 가로배열로 만들어 주시구요 그다음 헤더 아래에 있는 div에는 공통적으로 torx 꼭 초 속성으로 예 안녕 을 해주시면 3개가 나란히 이렇게 가로배치 가 됐습니다 헤더에 레프트는 text-align left 그리고 타이틀은 text-align center 그리고 라이트는 text-align right 이렇게 붙여 주시면 구성이 됬죠 그러면 이번에는 글씨체를 먼저 초반에 맞춰줄게요 구글에서 구글폰트라고 검색 하시면 네 구글에서 제공하는 폰트를 사용할 수 있는데 이중에 가장 비슷한 모양의 roboto를 추가를 해주시면 사용할 수 있습니다 기본 폰트웨이트는 400 이고, 그담에 500을 추가로 이렇게 해주시면 링크 소스가 나오네요 링크 소스는 헤더에 붙여주시고 아래쪽에 폰트패밀리를 복사해서 사용하시면 폰트 패밀리는 html body 에 넣어줄게요 새로고침을 하시면 바뀐게 보이시죠 그러면 이번에는 하단에 컨텐츠 영역을 만들어 볼게요 컨텐츠 영역은 처음에 my image 이미지가 들어갈 자리구요 그리고 중간위치에 큰 글씨 영역이죠 h2 Hello Jane 그다음에 아랫쪽에 p 태그로 그리고 제일 아래 p 태그에는 투데이라는 클래스를 입력하겠습니다 모양이 나왔죠 우선 콘텐츠 영역부터 디자인 해줄게요 여백을 패딩 40픽셀을 주시고 마이 이미지 컨텐츠 안에 있죠 마이이미지는 백그라운드 흰색을 주시고 가로 50px, 세로 50px border-radius로 원형으로 만들어 주시고 그리고 그림자를 만들어 줍니다 10px 만큼 내려온 그림자를 이런 느낌으로 예 이정도 모양이 되겠네요 안의 이미지는 구글에서 iu 를 검색해서 이미지를 하나 골라볼게요 copy image adress background image url 복사한 것을 붙여 넣으시고 background-size : 100px background-position 이정도로 맞춰 주겠습니다 그리고 h2 h2는 폰트 사이즈를 좀 키우구요 30정도로 font weight 두께는 기본 400 이정도 해주시면 될 것 같아요 이번엔 p 태그 p 태그는 마진을 없애주시구요 컨텐츠의 p 태그만 따로 스타일링을 해줄게요 투명도를 05 정도 주시고요 이후에 배경 색에 계속 바뀔 거라 색상을 직접 지정하지 않고 반투명 주었어요 그리고 하단에 따로 투데이라고 클래스를 준 영역있죠? 그부분은 폰트 크기를 12px 정도 주시고 투명도를 다시 진하게 해주시구요 마진을 50 정도 좀 줄일게요 싸이즈를 45 정도로 해 주겠습니다 모양이 대충 나오죠 그리고 이번에는 하단에 카드영역 카드영역은 전체 영역과 그리고 카드 위치를 잡는 카드에이리어를 이렇게 카드라고 먼저 해주고요 그리고 실제 카드 안의 디자인 영역은 inner라고 지정을 해주겠습니다 그럼 inner안에 좌측에 카드아이콘 모양 만들어 주시고 오른쪽에 셋팅 버튼 만들어 주신 다음에 하단의 내용을 하나로 묶을게요 bottom 이라고 하나 묶고 그 안에 p 태그를 9 tasks h2 , personal 여기까지 준비가 됐고 이 아래 영역은 스테이터스 라고 하나로 묶어 주시구요 스테이터스에 오른쪽에 숫자 영역과 왼쪽에 실제 바영역 그려야겠죠 왼쪽은 트랙이라고 할까요 트랙과 트랙 안에 있는 바 그리고 오른쪽에 83 클래스를 'per'라고 따로 주겠습니다 html 은 준비가 됐어요 이제 그러면 카드 영역을 우선 크기를 잡아볼게요 어 크기 확인을 위해서 임시로 백그라운드를 반투명을 줘 보겠습니다 그러면 상단 여백에 있는게 보이실 상단 여백은 컨텐츠에서 만들어 준 거라 padding-bottom 만 좀 줄이구요 세로 사이즈를 잡아야 겠죠 세로 사이즈는 전체 영역의 100% 에서 상단 영역이요 빠진 만큼 딱 계산 할 거에요 그래야 나중에 이렇게 화면아 움직였을 때 틀어지지 않고 아래쪽 영역에 맞게 조절이 되기 때문에 칼큘레이터 ( calc )를 사용해서 100% 마이너스 300px 상단 영역에 맞게 조절을 해볼게요 345 정도가 적당 하겠네요 상단 영역을 제외한 나머지 영역을 꽉 채우겠단 뜻이에요 이정도로 잡아주시고 이번엔 카드 실제 안쪽 영역을 잡아줘 보겠습니다 카드도 마찬가지로 임시로 사이즈 확인을 위해서 임시 배경색을 반투명으로 지정을 하시구요 세로는~ 100% 마찮가지로 가로도 지정 해주세요 그 상단에 카드에어리어 영역에서 하단 여백을 만들어 줄 거에요 패딩을 상단은 0 그리고 좌우 양쪽에 40씩 주시구요 하단은~ 50 정도 하단 영역 이 위로 안 올라오죠 이거는 보더 박스(border-box) 설정을 안해서 그런건데요 박스사이징을 다시 소스를 돌아와서 스타일 제일 위에 별은 박스사이징(box-sizing) 보더 박스(border-box)로 지정을 해주시면 위에 올라온 게 보이시죠 보더 박스를 설정하면 사이즈 설정 된 안쪽으로 패딩 영역이 들어와서 전체 지정한 사이즈의 영향을 미치지 않고 스타일링을 할 수 있습니다 자 이번엔 카드는 배경색을 흰색으로 만들어주시고 아 죄송 합니다 카드의 inner 영역에 스타일링 해줄 거예요 카드

흰색으로 만들어 주시고, 세로 사이즈는 꽉 채워주시고 그리고 컬러는 회색으로 지정해 주겠습니다 여백을 위해서 패딩을 입력을 해주시고 border-radius를 이용해서 라운드를 만들어 주시면됩니다 이제 임시로 적용한 백그라운드 필요가 없으니까 두개 다 삭제를 할게요 이렇게 삭제를 하구요 이번에는 그림자도 만들어 줍시다 이런식으로 그림자를 만들어 주고요 모양이 만들어졌죠? 이번엔 아이콘을 만들어 줄게요 아까와 마찮지로 폰트 어썸에서 user라고 검색을 하시면 비슷한 모양의 아이콘이 나오죠 복사 해서 카드아이콘 영역 그리고 오른쪽에 dot 라고 입력을 해 주시고 마찮가지로 비슷한 아이콘을 복사 해주시면 됩니다 자 볼까요? 들어왔죠? 그럼 이번엔 카드 아이콘을 모양을 만들어 보겠습니다 카드 아이콘은 우선 테두리를 만들어 주시구요 좀 연하게 만들어 줄게요 가로사이즈 50, 세로 사이즈도 50px border-radius로 원형으로 만들어 주시고 텍스트를 가운데로 line-height를 이용해서 가운데로 만들어 주시구요 그리고 사이즈를 좀 키울게요 폰트사이즈를 키우구요 컬러는 배경색의 중간정도 색상으로 이렇게 지정 해주시면 모양이 만들어집니다 그리고 float left로 왼쪽으로 이번엔 셋팅 버튼 float right로 오른쪽으로 붙여주시고 양쪽으로 조절이 됐죠 그리구 이번엔 카드의 bottom 인데요 position absolute를 이용해서 바닦으로 붙여주세요 bottom zero 카드 바깥으로 빠져 나오는게 보이시죠 그거는 바로 상단에 있는 inner의 포지션 relative를 이용해서 이렇게 안쪽으로 모양을 잡아줄 수 있습니다 다시 bottom 으로 와서 가로 사이즈를 100%로 만들어 주시고 좌측으로 붙이고 여백을 만들어 주겠습니다 네 이제 모양 잡는건 준비가 됐어요 이번엔 카드안에 있는 h2는 마진을 줄여 볼게요 10으로 줄여 주시고 컬러도 좀 진하게 더 진하게 할까요 이 정도가 괜찮겠네요 스테이터스도 만들어 줍니다 스테이터스는 float right로 오른쪽으로 붙여주시고 그리고 폰트 크기는 20px 그리고 가상 엘리먼트를 추가를 해 줄거에요 단위가 % 이다 보니까 ::after 를 이용해서 content % 를 입력해주시면 예 나온 게 보이시죠 나중에 개발에서 스크립트로 숫자 만 바꿔줄 예정이라 이렇게 작업을 했습니다 이번엔 트랙 트랙은 background를 회색을 주시고 세로 사이즈는 4px 정도 오른쪽이 숫자 영역을 뺀 만큼 가로를 좀 조정을 할게요 calc 를 이용해서 30px 정도를 빼주시면 됩니다 자 그리고 다시 'per'로 와서 margin-top 마이너스 값을 이용해서 자리를 잡아줍니다 이번엔 바 영역인데 바의 길이는 따로 inline으로 입력을 해 줄게요 html에서 직접 이미 라인으로 스타일 width 83% 이렇게 해 주는 이유는 나중에 개발 적용할 때 보시면 카드마다 숫자에 따라서 바의 길이가 달라질거예요 그래서 감안을 해서 미리 인라인으로 이렇게 길이를 잡아 줬습니다 스타일은 스테이터스에 그리고 세로는 4 px 잡힌게 보이시죠 또 배경색은 전체 배경색을 이용할 겁니다 컨테이너에서 사용했던 배경색을 복사해서 붙여 넣으시고 그라데이션이 새로 방향인데 여기서는 가로 방향이죠? linear-gradient에 가로 방향으로 to left 라고 입력해주시면 준비가 됐습니다 이렇게 크기가 늘어나면 아래쪽으로 늘어나는게 보이시죠 완성된 카드를 두개를 더 만들 거에요 영상에 보시면 이렇게 총 3개가 보이죠 그래서 카드 영역을 복사를 해서 하나, 둘 그러면 아래쪽으로 구성이 된게 보이시죠 이것을 속성을 가로로 만들어 줄 거에요 이것 때문에 이렇게 만들어 놓은건데 카드에어리어에서 display 를 flex 바로 배치되는게 보이시죠 카드 고유의 사이즈를 이용 할 거라서 이렇게 정렬이 되면 안되잖아요 카드영역에서는 flex none 속성을 부여해 주면 네 고유의 사이즈로 지정됩니다 예 그림과 같이 여백이 좀 필요하겠죠 그래서 margin-right 15px 이정도 조절이 되면 비슷하게 나왔죠 실제 영역이 전체가 움직이기 때문에 영역을 좀 잡아 줄게요 overflow , auto 이렇게 일단 1차 준비가 완료가 됐습니다 다음 시간에는 이제 영상 에서와 같이 상세페이지와 이렇게 움직였을 때 액션들을 만들어야죠 자바 스크립트 강좌가 될 것 같네요 첫 번째 시간 여기까지입니다 감사합니다

Part 2 of 3 on Emotional Fitness – the outcomes and benefits of understanding our emotions

나는 좋은 감정적 인 결과의 일부에 대해 이야기하고 싶다 나는 나를 위해 개인적으로 성장과 성장을 발견했습니다

자신감과 자기 이해에 있지만 사고 방식의 전체 변화에있다 이전에는 내 마음이 끊임없이 분석을 생각하며 매우 적극적이었습니다 실제로 머리를 통해 말하고 사람들이 듣고 싶어하는 것을 생각하고 내가 여기에서 자신감을 키웠을 때 받아 들여지라고 말하기 위해 필요한 것은 무엇인가? 다른 곳에서 다른 목소리를 듣고 나는 그 목소리를 듣는다 나는 느끼는 것을 말한다 내가 알지 못하는 것은 내 권리이며, 다른 사람들을 돌보는 일을 포함하지 않는다

현실은 내가 더 잘 알고 있지만, 다른 것에 대해서도 알고 있다고 생각합니다 사람들은 생각하지만 당신은 잘 생각합니다 그리고 그것은 다른 사람들이 그릴 수 있다는 것을 의미합니다 그들이 동의 하느냐 반대 하느냐에 대한 자신의 결론이지만 이것이 나의 견해이다 다른 사람들과 끊임없이 마음을 분석하지 않아도 될 그냥 존재하고 괜찮은 사람이 될 수있는 가장 큰 중 하나입니다

교대감이 좋다

Sketch Web Design Course: E-commerce Checkout Page Design Part 2 of 2

저는 Skillthrive의 Hunter이고 두 부분으로 구성된 Sketch 과정의 두 번째 수업에 오신 것을 환영합니다 이번 강의에서는 체크 아웃 디자인 개념의 장바구니 섹션을 만드는 방법을 알려 드리겠습니다

또한 아직 작성하지 않았다면 다음과 같이 최종 Sketch 파일을 다운로드하십시오 Skillthrivecom의 무료 회원 설명에 참여할 수있는 링크가 있습니다 시작하려면 'T'를 눌러 텍스트 레이어를 만들고 '장바구니'를 입력하십시오

이 텍스트가 수업 1에서 만든이 텍스트 스타일로 설정되어 있는지 확인하겠습니다 텍스트 레이어를 왼쪽에서 95 픽셀, 위쪽에서 110 픽셀 이동합니다 하단은 오른쪽에있는 'Card Details (카드 세부 정보)'레이어의 하단에 맞춰져 있습니다 타원형 도구에 액세스하려면 'O'를 누르고 만들려면 드래그하는 동안 Shift 키를 누릅니다 150 픽셀의 원입니다

나는 경계를 끈 다음 무료 코스 파일로 돌아가서 하나를 드래그합니다 포함 된 시계 이미지의 여기에 와서 높이를 150 픽셀로 조정하고 원 위에 이미지를 맞 춥니 다 두 레이어를 모두 선택하고 마스크를 만듭니다 이 새 그룹의 이름을 '시청'이라고하겠습니다 위의 텍스트 레이어에서 그룹을 80 픽셀 이동합니다

텍스트 도구로 돌아가서 'Trendy Bamboo'를 제품 이름으로 입력하겠습니다 텍스트를 선택하고이 텍스트 스타일을 선택합니다 텍스트 레이어의 중심을 이미지 위에 놓고 65 픽셀 떨어진 곳으로 옮깁니다 레이어를 선택하고 Option 키를 누른 상태에서 드래그하여 복제합니다 텍스트를 선택하고 'Large'를 입력하여 시계 크기를 나타냅니다

그러면 텍스트를 다시 선택하고 가중치를 중간, 크기를 15, 문자 간격은 05입니다 또한이 텍스트 스타일을 저장 한 다음 레이어가 레이어의 맨 위가 제목의 맨 아래에 닿아 있다고 가정합니다 이제 수량 선택기로 이동합니다 먼저 가로 9 픽셀, 세로 3 픽셀의 사각형을 만듭니다

국경을 끄고 채우기가 순수한 흰색인지 확인하겠습니다 이 사각형의 이름을 '마이너스'로 지정하겠습니다 나는 사각형을 복제하여 11 픽셀 너비로 만들 것입니다 이 직사각형을 복제하여 여기에 올리면 90도 회전합니다 그런 다음 두 직사각형을 모두 선택하고 'Union'을 클릭하여 도형을 결합합니다

나는이 새로운 모양을 '플러스'라고 부를 것이다 'U'를 치면 둥근 사각형 도구로 바뀌고 둥근 사각형을 만들겠습니다 가로 60 픽셀, 세로 40 픽셀입니다 채우기를 해제하고 테두리 색상을 순수한 흰색, 두께를 1, 반지름을 8로 설정합니다 텍스트 도구로 가서 '1'을 입력합니다

텍스트는 'Large'텍스트의 글꼴과 동일해야하지만, 그렇지 않은 경우에는 저장된 텍스트 스타일을 선택하십시오 이제 숫자를 사각형 내부에 놓고 숫자와 사각형을 그룹화하고, 그룹의 이름을 '수량'으로 지정하십시오 그런 다음 둥근 직사각형의 왼쪽에 20 픽셀을 마이너스 기호로 가운데 맞추어 놓습니다 그 다음에는 더하기 기호를 반대로하십시오 마이너스, 플러스 및 수량을 그룹화하고 그룹의 '수량 선택기'이름을 지정하겠습니다

새 그룹을 제품 제목에 상대적으로 배치하고 간격을 240 픽셀 추가합니다 다음으로, 가격을 입력하고 텍스트 스타일을 제품 제목과 동일하게 변경하겠습니다 저는 텍스트를 중심에두고 그 양을 130 픽셀만큼 움직일 것입니다 22 픽셀 너비와 2 픽셀 높이의 새 사각형을 만들고, 테두리를 채우고 채우기가 순수한 흰색인지 확인하십시오 도형을 45도 회전시킨 다음 Command-D로 복제합니다

중복 된 이 아이콘을 클릭하면 가로로 뒤집습니다 그런 다음 두 직사각형을 모두 선택하고 'Union'을 클릭하여 모양을 결합합니다 모양을 '삭제'라고 이름을 정하고 가격 레이어에 가운데 놓고 110 픽셀 떨어진 곳으로 옮깁니다 마지막으로 키보드에서 'L'을 눌러 라인을 만듭니다 나는 교대를 잡고 완벽하게 직선을 만들기 위해 끌고 갈 것이다

색상이 순수한 흰색인지, 두께가 하나인지, 길이가 1,095 픽셀인지를 확인합니다 시계 이미지에 맞춰 왼쪽으로 45 픽셀 이동하고 이름을 '디바이더'로 바꿉니다 제품 섹션의 모든 레이어와 그룹을 선택하고 Command-G로 그룹화합니다 이 그룹의 이름을 '장바구니 항목'으로 지정하고 기호로 바꿀 것입니다 나는 심볼을 복제하고 각 새로운 섹션을 서로 45 픽셀 씩 간격을두기 위해 옵션을 잡을 것입니다

재정의를 사용하면 제품 제목, 이미지, 가격 등을 동적으로 변경할 수 있습니다 원본 Symbol에 영향을주지 않고 텍스트 도구로 돌아가서 '쇼핑 계속'을 입력하겠습니다 레이어를 왼쪽 정렬하고 마지막 장바구니 항목의 아래쪽에서 45 픽셀 이동합니다 옵션을 잡고 오른쪽으로 드래그하여 텍스트 레이어를 복제하고 텍스트 레이어를 변경합니다 text to 'Subtotal :'텍스트 레이어를 다시 복제하고 총 가격을 입력합니다

이 경우에는 '$ 10797'이며 텍스트 스타일을 변경합니다 부분합 위에 레이어를 배치하고 10 픽셀 간격으로 배치합니다 부분합 및 가격 레이어를 그룹화하고 이름을 '소계'로 지정합니다 바로 정렬합니다

카트 항목으로 이동하고 하단에서 40 픽셀 이동합니다 장바구니 섹션으로 만든 모든 레이어를 그룹화하고 장바구니 이름을 지정하겠습니다 그리고 그게 다야! 우리는 프로젝트를 수출하고 세계와 공유 할 준비가되었습니다 이 Sketch 튜토리얼이 마음에 들면, 여기에서 확인하십시오 그리고이 비디오가 마음에 들면, 그것을 엄지 손가락으로 올려 구독하고 친구와 공유하십시오

나는 다음에 너를 볼거야

Shop Web Design – Adobe XD to HTML CSS Tutorial (Part 1/2)

안녕 모두들 인도네시아에서 Angga Risky에 오신 것을 환영합니다 어떻게 지내십니까? 이번에는 디자인을 공부하고 HTML 및 CSS에 디자인을 적용하는 법을 배웁니다 그래서 우리는 Adobe XD Software를 사용하여 처음 디자인 할 것입니다 그 다음엔 부트 스트랩으로 HTML과 CSS로 디자인을 만들 것입니다 좋아요

시작하기 전에 오늘의 질문이 있습니다) 어제 저는 채널 커뮤니티에서 많은 질문을 받았습니다 그리고 하나씩 대답하고 싶습니다 그래서 지금 질문은 그래픽 디자이너가 된 기분이 어떻습니까? 그래, 그게 내가 가진 질문이야 자이 디, 그 전에 2005 년에는 그래픽 디자이너로 일했습니다 그리고 저는 마케팅에 대해 많은 것을 배웠습니다 그리고 인터페이스와 비주얼 디자인에 대해서도 마찬가지입니다 그래서 나는 내 자신의 디자인 기술을 향상시킬 수있는 것들로부터 또한 관계 및 네트워크 기술 향상 (관계 속) 또한 마케팅에서의 카피 라이팅 기술에 대한 전문성을 높입니다 그것은 어때? 나는 행복하고 매우 혼란 스럽다 때로는 관리자가 둘 이상 있기 때문에 때때로 디자인 A를하면 갑자기 매니저가 A 디자인을 변경하라고합니다 하지만, 다른 관리자 그는 그가 A 디자인을 좋아한다고 말한다 What and so ?? 어떻게하면이 프로젝트를 끝낼 수 있으며, 심지어 이것이 항상 불완전해진다 거기에 많은 관리자가 있다는 것을 알고 있습니다 하지만, 지금 내 제안은

최고 직책을 가진 관리자의 지시를 따르십시오 때로는 제품 또는 회사의 소유자이기 때문에 최고 관리자의 목소리를 따를 것입니다 가장 낮은 관리자가 아닙니다 예를 들어 관리자가 3 명이므로 가장 높은 방향을 따를 수 있습니다 그래서, 그는 너를 도울거야

회사 소유자에게 디자인을 확인하려면 결론은, 최고 관리자의 방향을 따르고 디자인은 제품 소유자가 확인합니다 좋아요

이번에는 비디오에 대해 계속하겠습니다 오늘은 Adobe XD 및 HTML CSS를 사용하여 디자인 할 것입니다 하지만 매우 길기를 원하지 않기 때문에 2 개의 비디오로 만들 것입니다 그래,이 비디오에서 우리는 첫 번째 비디오를 만들 것입니다 디자인을 HTML 및 CSS (Bootstrap)로 구현하려면 알았어, 그냥 가자

좋아, 내 데스크톱에 오신 것을 환영하며 디자인을 위해 1 개의 그림을 준비했습니다 전자 상거래 웹 사이트에서 가져온 것입니다 먼저 사진이나 제품 사진을 준비 할 수 있습니다 그래서 이것은 Adobe XD입니다 그래서 우리는 중간 크기의 아트 보드를 만들 것입니다

그런 다음 문서를 먼저 저장합니다 그 후 우리는 Adobe XD에서 그리드 시스템을 사용합니다 또한 사용하는 CSS 프레임 워크를 기반으로 사용자 정의 할 수 있습니다

그래서 Bootstrap 프레임 워크를 사용하여 더 쉽고 빠르게 만들 것입니다 메뉴의 왼쪽과 오른쪽에 로고가 있어야합니다 나중에 우리 제품에서 얻을 수있는 주요 색상은 나중에 더 적합합니다

Shop Web Design – Adobe XD HTML CSS Tutorial Part (2/2)

안녕 모두 다시 돌아 왔고 이전 비디오의 비디오 연결입니다 이 비디오에서 우리는이 디자인을 계속할 것입니다

HTML 템플릿에 부트 스트랩 프레임 워크 사용 그리고 현재로서는 웹 사이트에서 사용할 자산의 일부부터 시작해야합니다 이번에는 Part 1에서 비디오까지 시청 해 주셔서 감사합니다 이제이 비디오에 대해 조언을 해주시기 바랍니다

그래서이 비디오가 당신에게 좋은 것이라고 생각한다면 나에게 말해줘 그리고 그것이 충분하지 않다면, 당신은 또한 나에게 그것을 향상시키는 방법을 말할 수있다 Ok, 인도네시아 인사, 나는 Angga 위험하다, 다시 너희들을 만난다 🙂

Biggest Challenge and Self Acceptance – MBP Fitness Part 3

내 고객으로부터 많은 피드백을받은 부분은 내가 당신에게 왔다고 말하는 것입니다 당신이 우리의 건강의 모든 측면에 집중하기 때문에, 우리의 육체적 인 건강뿐만 아니라 우리의 정신 건강과 그것이 어디에 나는 대부분 투쟁하거나 나는 섭식 장애와 싸웠고, 당신도 잘 먹었습니다

그리고 그것은 내가 혼자가 아니며 다른 사람들이 있다는 것을 알게 해주었습니다 그걸 극복하고 과거를 지나치게되어서 내가 뭔가에 불과했기 때문에 열어 봤어 비록 그것이 보이지는 않았지만 정말로 내 인생을 이어 받았다 그것은 외부의 사람들에게, 내 안에서는 지금과 다른 느낌을 받았습니다 나는 단지 완전히 새로운 사람처럼 느껴 져요

그게 언제 였고 어떻게 그 일을 겪었습니까? 고등학교 때 내가 음식을 제한하기 시작했습니다 그것이 일어날 때마다 그리고 대학에서 시작되었습니다 그것은 정말로 나 빠졌다 술 취하기, 술 마시기, 네가 나가서 술에 취해서 일어날 것이기 때문에 나는 그 장애의 일부분을 정말로 고려하지 않고 단지 그 부분으로 인도했다

나는 정말로 열심히 나 자신에게 열심히 노력할 것이다 그리고 내가 그 다음날 할 것 인 것은 나는 말할 것이다 "나는 사과 만 먹을거야 나는 다른 것을 먹지 않을거야 " 그리고 나서 나는 정말로 다음주에 자신을 제한 할 것이고 사이클은 계속해서 일주일에 여러 번의 빙빙 소리를 듣게됩니다

오 초점 나는 갈가리 찢길 싶다 나는 체중을 잃고 싶지 지방을 잃고 싶다 그 다음 나는 제한하고 있었다 나 자신이 하루에 800000 칼로리에 그리고 운동량에 대해 내가하고있는 일을하고 있었다 1 일 1 시간의 웨이트 트레이닝의 최상단에 일주일에 6 일, 약 45 분의 심장 박동이 있습니다

내 몸은 분명히 살아남을 수 없습니다 근본적으로 무슨 일이 일어날까요? 나는 며칠을 제한 할 것이고, 그러면 나는 단지 binge 밖으로 가득 차 있고 나는 쓰레기의 6,000의 열량 같이 이야기하고있다 모든 종류의 음식 내 몸 전체와 완전히 분리 된 것처럼 몸 상태가 좋지 않았다 몸을 잡고 음식을 섭취하게하십시오

나는 거기 앉아서 먹고 먹고 먹을 것이다 때때로 그것은 던지기에 뒤따를 것입니다 – 그래서 그것은 폭식 행위의 더 많은 것이 었습니다 퍼지와 함께 아니면 바닥에 앉아서 울게 될 것이고 나는 너무 화가 나서 자신을 부끄러워 할 것입니다 다음날, 나는 다시 제한으로 돌아갈 것이고 나는 하드 코어 운동으로 돌아갈 것이다

나는 전에 폭음을 당했고 그것이 얼마나 불편한 지 확신합니다 나는 전에 binged 많은 사람들을 알아 어쩌면이 연속적인 사이클이 아니었지만 그것이 발생했기 때문에 핑 소리가났습니다 나는 과자에 나쁘다, 나는 모두 나가 간다 내가 그것을 보지 않았기 때문에 그것은 거대한 문제였다

왜냐하면 나는 계속 그것을 정당화하려고 노력했기 때문에 문제였다 나는 그것을 정당화하고 말하기를 "그것은 나의 속임수 식사였다" 그러면 나는 또 하나, 또 하나, 그리고 때로는 5 ~ 6이 될 것입니다 binges 매일 폭음이 될 수도 있습니다

나가 원한 모두는이주기에서 나가기위한 것이었다 나는 "나는 더 이상 이렇게 살 수 없다" 나는 그 날에 친구들과 함께 외출하기 전에 그것을 할 것이고, 그 다음에 가지 않을 것입니다 나는 그것을 할 것이고 나는 가지 않을 것이다 나는 "더 이상 갈 수 없어서 미안해

"라고 말할 것입니다 나는 너무 아파서 혼자 화가 나서 체육관에 가려고한다 그것을 해결하십시오 나는 그것이 내 친구들의 생일 중 하나 였고 나는 미조에게 가기로되어 있었지만 나는 전에 밤에 술에 취해서 나는 "그 다음날 술 마실 수 없다 그렇게 많은 칼로리가 될 것입니다

" 그것은 내가 너무 많은 일을하고 내 삶을 즐기는 것을 막았습니다 음식에 관심이 있었고 쿠키가 하나뿐이라면 건강에 좋지 않은 관계였습니다 나는 아무 말도 할 줄 몰랐다 내 머리 속에는 그 쿠키가 나에게 좋지 않았다 만약 내가 그 쿠키를 가지고 있었다면, 나는 단지 그것을 날려 버렸다

나는 모든 것을 불었다 " 그 사고 방식에서 벗어날 방법을 찾아야했습니다 나는 더 이상 이렇게 살 수 없다 " 매주 주말마다 빙빙 돌면서 나 자신을 발견하는 것은 나에게 화가났다 이후에 또는 단지 외설물에 노력하고 있기 때문에 나는 단지 아프다고 느끼고 싶지 않습니다

이런 삶을 살아라 그 때 나는 빙판이나 어떤 종류에 대해서 열어 본 Instagram에 많은 사람들을 발견했습니다 섭식 장애와 나는 그들이 말하는 것을 경청하려고 정말로 노력했다 나는 binges를 멈추는 방법을 연구했다 나는 YouTube에 가서 다른 소녀들의 이야기와 그들이 한 일을 비디오로 보았습니다

기본적으로, 사람들이 계속해서 반복해서 말한 유일한 것은 – 그리고 나는 원하지 않았다 그것을 받아들이 기 위해서 – 당신은 다이어트를 그만두고 제한을 멈춰야합니다 더 많은 칼로리를 섭취하거나 폭음을 할 때마다 심장을 계속 지탱할 수 없거나 당신은 폭력에 대해 생각하고, 받아들이며, 다음에 자신을 제한하지 않습니다 일 이렇게 천천히 나는 나의 열량을 증가하는 것을 시작했다

나는 체중을 얻는 것을 두려워했다 나는 규모가 움직이는 것을 볼 것이고 나는 말했다 "오 마이 갓 이것은 작동하지 않습니다 나는 지금 체중을 얻고있다

나는 이것에 대해 너무 화가났다 " 그러나 나는이 체중을 얻는 것이 더 나을 거라는 것을 알았 기 때문에 그것을 받아 들여야 만했다 binging주기에서 나는이 과정을 신뢰하고 그것으로 가야합니다 나는 천천히 칼로리를 계속 증가시켰다

그래서 그것은 느린 과정 이었습니까? 그것이 "나는 이렇게하고있다"같은 날이었던 것은 아닙니다 아니, 내가 계속 벗어나려고 노력했기 때문에 그러나 나는하지 않았다 아마도 내가 중학교 1 학년이 끝날 때였 다 나는 꽤 잘 진행되고있는 것을 기억합니다

그런 다음, 저는 비키니 경쟁을하기를 원했던 트레이너와 일하고있었습니다 기본적으로 제한을 의미합니다 그는 오후 12시 이후에 탄수화물 섭취를 금지했습니다 그는 단지 달걀 흰자와 생선을 먹기를 원했고 매우 제한적이었습니다 그 제한적인 패턴에서 빠져 나왔다 – 나는 아직도 조금씩 뛰어 들고 있었지만 어쩌면 격주로 한 번씩, 그리고 저에게는 승리였습니다

나는 체중을 얻는 것을 끝내었다 내 2 학년 때 나는 140 파운드까지 130 파운드 였고 그래서 나는 약 10 파운드를 입었다 나는 내 몸을 포용하고 나의 곡선을 조금 더 받아 들였다 나는 여전히 약간의 의식이 있었고, 100 % 자신감이 아니었지만 나는 확실히 기분이 좋고 술이 적어졌습니다 내가 여기에 핵심적인 것이었다면 나는 그 다음날을 제한하지 않았다

나는 그걸로 옮겨서 괜찮다고 스스로에게 말한다 당신은 폭음을 할 것이고 당신은 때때로 재발 할 것입니다 그러나 그것은 100 퍼센트 괜찮습니다 나는 이것을 받아 들였고, 내가이 비키니 대회를 먹기 시작했을 때, 매일 반복되는 일들이 계속 반복되고 있습니다 나는 방금 내가 있던 곳으로 돌아갔다

나는 내가 거의 회복 된 지점으로 가고 있다고 생각했다 나는 빙빙이 일어나고 있기 때문에 나는 이것을 할 수 없다고 말했다 이걸로 가야 해 지난 여름에 Instagram을 옮기고 정말로 이야기 할 때마다 정말 작았습니다 저의 투쟁에 대해 이야기하고 이야기를 나누며 조금 여는 것입니다

나는 이렇게 생각했다 "나는 이것이 나를 도울 것입니다 " 다른 사람들에게도 도움이 될 것입니다 투쟁하는 사람들과 그들이 그것을 고치기 위해 무엇을하고 있는지 그것은 여성들 사이에서 매우 일반적입니다 – 단지 신체 이형성을 가지고 있습니다

이렇게 많은 소녀는 Instagram에이 supermodel 또는이 진짜 마른 여자를 비교한다 또는 이 여자는 아마도 포토 호핑이고 그들은 자기 자신에 대해 나쁘다고 느낍니다 아무도 자신의 "이상"이 아니기 때문에 모두가 때때로 신체 이미지로 고생 할 것입니다 완전한" 모두는 그들의 가장 나쁜 비평가이고 우리는 항상 우리가 누구보다 낫다 고 생각합니다 지난 여름 나는 "나는이 일을 잘하고있다

" 다시 말하지만, 나는 시간을내어 함께식이 요법을 중단하고 조금 더 체중을 늘렸다 그것은이 10 월까지 이끌었다 2017 년 10 월경, 나는 최대의 것을 얻었습니다 나는 지금까지 약 146 파운드 정도였습니다 나는 OMG와 같았다

나는 그 시점에서 규모에 대해서조차 신경 쓰지 않았다 나는이 빙고를 멈추고 나는 내 자신을 즐겁게하고 있기 때문에 내가 본 것 중에 가장 자신이 있었다 인생, 나는 내가 원하는 것을 먹고있다, 나는 내가 먹는 모든 것을 걱정하지 않는다, 나는 가고있다 체육관에서 나는 실제로 음식을 더 먹기 때문에 운동을하고있다 나는 전반적으로 사람으로서 그리고 전반적으로 전반적으로 훨씬 나아 졌다고 느꼈다

나는 결코 내가 정복 할 수 있다고 생각한 것을 정복했다 그것은 가장 안도감이었습니다 그것은 정직하게 나에게 기쁨의 눈물을 가져온다 내가 내가 결코 도착할 수 없다라고 생각할 때가 있었기 때문에 아웃 나는 문자 그대로, "나는 여기에 갇혀있다

" 그것에서 빠져 나올 수 있다는 것은 거대했고 정말로 내 몸과 나의 커브를 포용했습니다 더 높은 체지방 비율이 정말 컸습니다 그것은 정말로 자기 사랑과 육체적 인 긍정에 대해 이야기하기 시작했을 때 당신이 누구인지 당신 자신이 진실이고 당신이 무엇이든 상관없이 피부를 좋아합니다 나는 여전히식이를하려고 노력했을 것입니다 내가 더 많이 먹는 것을 두려워했다면 더 많은 무게를 얻는 것을 두려워하지 않았다

음식, 나는 여전히 내 인생의 한 부분에있을 것입니다 계속해서 나 자신과 불행 해 그것은 내가 실제로 체격이 행복을 가져 오지 않을 것이라고 말할 때입니다 "마른 체형"이거나 이상적인 몸매를 가진 것이 행복을 가져다 줄 것입니다 당신에게 행복을 가져다주는 것은 당신이 실제로 당신의 삶을 살아갈 때, 당신이 즐기는 일을 할 때, 당신이 사랑하는 사람들과 자신을 둘러싼 다

그때 먹는 것을 좋아한다면, 먹어! 아이스크림을 좋아한다면, 그것을 완전히 자르지 마십시오 – 할 이유가 없습니다 그 시점에서, 나는 "나는 나 자신을 가게 해줄 까?"하고 묻습니다 또는 나는 아닌가요? 나는 그것에 너무 붙어 있었다 나는 "아니, 나는하지 않았다" 나는 회복해야했고 이것이 내가해야만하는 일이다

이제 균형을 찾았습니다 그래서 내가 원하는 것을 먹고 있었기 때문에 나는 그것을 원하는만큼 많은 균형을 이루지 못했다 나 자신에게 말하기보다는 나는 그것을 가질 수 없다 그리고 나를 위해 정신은 당시에 좋았다 그럼, 분명히, 나는 더 희박 해지고 싶습니다

그러나 나는 쇼를 위해 몸을 기댈 때 이것을하지 않고있다 나는 끝 날짜가 없다 나는 조금 더 희박 해지고 싶다 나는 다시식이 요법을 시작했는데 좋았어요 나는 다이어트를하고 싶지 않습니다

나는 칼로리를 조금 자르고 다시 매크로를 추적하기 시작했다 내가 먹고 있었던 것 그것은 약 1 월까지 갔다 나는 매우 건강한 방법으로 10 파운드를 잃어 버렸다 그 다음 1 월에 일이 정말로 나를 위해 전환하기 시작했을 때입니다

그 때 나는 적당한 역방향 식단을 겪었습니다 그리고 그것은 거의 일종의 대량이지만, 전체를 통해 매크로를 계산했습니다 나는 다른 코치를 고용 했으므로 실제로 코치와 일하고있다 지난 6 개월 동안 그는 나를 그렇게 많이 도왔다 나는 심지어 그에게 충분한 신용을 줄 수 없다

어떻게 그를 선택하셨습니까? Instagram에서 나는 많은 여성들이 그를 따라 일해 왔고 그는 정말로 너의 심적 상태를 가장 먼저 생각하고, 내가 원한 것이다 나는 여전히 다이어트를 통해 모든 대사 손상과 내부 손상을 입었습니다 과거에 나는 정말로 그것을 복원하고 내가 정말로 내 훈련을 사랑하는 곳으로 가고 싶었다 나는 물건을 바꾸고 싶었다

나는 적절한 역방향 식단을 거치지 않았고 근본적으로 반전의 시점이었다 규정 식은 당신의 내부 체계를 복구하고 당신의 물질 대사를 규칙 등을 맞댄 얻는이다 역전 다이어트를 할 때마다 다이어트의 반대입니다 천천히 칼로리를 증가시킬 것입니다 이제, 내가 회복하고 체중을 얻었을 때마다, 그것은 통제되지 않았습니다

칼로리 섭취 내가 원하는 것을 먹는 것은 나만의 것이었다 나는 칼로리를 보지 않고, 내가 보았던 매크로를 보지 않았다 어떤 날은 다른 사람들보다 더 많았습니다 언젠가는 정말 건강했고, 다른 날에는 그렇지 않았습니다

건강한만큼 그러나 이것으로 저는 피트니스와 제 정신력, 자신감 사이의 균형을 찾길 원했습니다 그와 함께 작업 한 이후, 그는 나를 대량으로 데려갔습니다 기본적으로 나는 유지 보수 칼로리 이상으로 먹고 있었지만 실제로는 더 가벼워졌습니다 이 과정에서 나는 몸 상태가 좋지 않았기 때문에 몸이 음식을 필요로했기 때문에

그것은 아직도 손상을 입었으므로 음식이 정말로 필요했고 지금은 나의 신진 대사가 최고입니다 아마도 그럴 수 있었던 지점 이제는 영양에 대한 확신이 훨씬 강해서 정확하게 이해합니다 어떤 제한도없이 내 몸에 필요한 것, 아니면 내가 원하는 것을 먹지 않고 예를 들어, 내 매크로를 추적 할 때, 나는 여전히 여기에 HaloTop을 가지고 있고, 쿠키를 여기 저기에 두거나 10 개를 먹을 필요는 없습니다

그것은 내가 하루 중 나머지 시간 동안 sh * t처럼 먹도록 유도하지 않습니다 나는 미량 영양소와 거시 영양소를 가지고 단백질 목표를 달성하고, 탄수화물 목표 및 뚱뚱한 목표 그러나 나는 아직도 탄수화물로 거기에 다른 것들을 끼워 넣을 것입니다 "나는 탄수화물을위한 채소 만 가질 수 있습니다 나는 단지 고구마와 쌀만 가질 수있다

" 나는 이제 탄수화물 공급원으로 팬케이크를 먹어도 괜찮습니다 이렇게하면 균형을 찾을 수있었습니다 그것이 내가 놓친 마지막 물건이었다