YG - 96년생 , 강아지 있음, 개발자 희망

사이트를 모바일 웹앱으로 실행되도록 하는 방법 1. html의 header에 다음과 같이 넣어주면 됩니다 // 홈 화면에 추가했을 때 보여질 앱의 이름 // 모바일에서 전체화면으로 보이게 할 지 여부 // 상태 표시줄 배경 색상 설정 2. 아이콘 설정을 해줍니다 아래의 사이트에서 아이콘을 넣고 설정해줍니다. 필요한 대부분의 아이콘 파일과 link, meta 코드를 알려주어 편합니다 https://www.favicon-generator.org/ 보투게더의 코드 아이패드용 스플래시 화면을 설정하고 싶을 땐 따로 설정을 해야 합니다 저희의 경우 아래와 같이 설정해보려고 했으나 아이패드에서는 제대로 나오지 않고 있습니다. 참고 자료의 링크를 참고하여 설정을 해야하는 것으로 이해되었어요 // 작동이 안됨 참고자료..

저는 맥박 형태에서 웨이브로 바꾸려고 시도했는데 바꾸기가 어려웠습니다. 팀원 제로가 만들어줘서 기록해두려고 합니다. 맥박 형태보다 웨이브 형태가 좋은 이유 Bill Chung의 연구에 따르면 스켈레톤 내 애니메이션을 규칙에 맞게 사용하면 사용자가 더 로딩 시간을 더 짧게 느끼게 된다고 합니다. 맥박보다는 웨이브 효과 왼쪽에서 오른쪽으로 움직이는 애니메이션 애니메이션은 Skeleton 컴포넌트에 주의를 끌만큼 빠르지 않아야 함 Everything you need to know about skeleton screens How do we know that skeleton screens actually work? uxdesign.cc CSS 속성 { border-radius: 4px; background-col..

class CSS 속성을 줄 때 클래스를 이용합니다. 그 이유는 CSS 속성을 고치기 위해 class 명을 고치게 되어도 사이트 로직에 영향을 주지 않게 하기 위함입니다. 예를 들어 회사에 퍼블리서와 개발자가 따로 있다면 퍼블리셔 - 개발자 간의 협업을 할 때 서로 건드리는 부분을 달리 해서 서로의 작업에 영향을 주지 않도록 하는 것입니다. id Javascript 코드에서 querySelector를 지정할 때 사용합니다. class와 id를 구분 지어 사용하는 컨벤션의 장점과 단점 id와 class를 나누어 사용하는 컨벤션을 사용한다면 CSS를 바꾸거나, 로직을 변경할 때 id 혹은 class를 변경해도 영향을 덜 준다는 장점이 있습니다. 단점으로는 불필요한 id와 class를 만들어 사용하는 경우가..

카카오톡으로 이미지, 사이트 제목 , 설명등을 공유하고 싶을 때가 있는데 방법을 소개해드리려고 합니다 1. OG(Open Graph), 오픈그래프 - 오픈그래프는 페이스북이 기존의 메타 데이터 표기방법을 참조하여 만들었습니다. - 어떠한 HTML 파일의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 이미지 등 다양한 요소들을 통일해서 사용할 수 있도록 정의해놓은 프로토콜 입니다. 오픈그래프 기본 태그 og:title - 사이트의 제목 og:type - 사이트의 종류 예) website og:image - 사이트를 나타낼 대표 이미지(미리보기 이미지) og:url - 사이트의 대표 url 2. 프로젝트에 적용해보기 - 오픈그래프를 적용하기 위해서는 웹 서비스가 필요하다.(즉, 로컬개발에..

https://developer.mozilla.org/ko/docs/Web/CSS/white-space white-space - CSS: Cascading Style Sheets | MDN CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정합니다. developer.mozilla.org pre-wrap 연속 공백 유지. 줄 바꿈은 개행 문자와 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다. pre-line 연속 공백을 하나로 합침. 줄바꿈은 개행 문자와 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다. 혹은 pre를 사용하셔도 됩니다.

저도 저 기능을 사용하고 싶은데 이름이 기억이 안나서 해멨습니다. title 전역특성은 요소와 관련된 추가 정보를 제공하는 텍스트를 나타냅니다. 타이틀을 사용한 코드 © 2021 - Kim Young Gil, All rights reserved. 타이틀을 여러줄로 표현할수도 있다. https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/title title - HTML: Hypertext Markup Language | MDN title 전역 특성은 요소와 관련된 추가 정보를 제공하는 텍스트를 나타냅니다. developer.mozilla.org

google google google google google scss 파일 @import "_variable.scss"; @import "_mixins.scss"; a { margin-bottom: 10px; &:nth-child(odd) { @include link(red); } &:nth-child(even) { @include link(blue); } } mixins 파일 @mixin link($color) { text-decoration: none; display: block; color: $color; } css 에서 변수를 줄 수 있다. @import "_variable.scss"; @import "_mixins.scss"; a { margin-bottom: 10px; &:nth-child(..

Title Another Title Save Another Save scss 는 변수를 설정할 수 있습니다. _varibale.scss $bg: red; $title: 32px; styles.scss @import "_variable.scss"; body { color: $bg; } h2 { font-size: $title; } button { color: blue; } .box { color: blue; &:hover { color: green; } h2 { font-size: 18px; &:hover { color: red; } } button { color: $bg; } } /* .box { color: blue; } .box :hover{ color:green; } .box h2 { font-si..