KBW's cosmos

스마트폰으로 웹페이지를 둘러볼 때 웹페이지가 App 스럽지 못하다는 생각을 해본적이 있을 것이다. 이는 테두리와 박스 때문이다. 또한 링크나 이미지를 길게 누르면 주소를 복사하거나 이미지를 저장할 수 있는 옵션이 나타난다. 이런 요소들은 웹페이지일 때는 상관없지만 App 처럼 동작하는 것을 방해한다. WebView의 기본 스타일과 동작을 제어할 수 있어야 App과 비슷한 느낌으로 웹페이지를 만들 수 있다. 이는 Webkit CSS의 속성을 통해 제어할 수 있다. html { -webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); } -webkit-touch-callout 속성 : 화..

padding: 0.5rem calc((100vw - 1000px) / 2); 위 식으로 가운데 정렬을 시킬 수 있다. 0.5rem은 위아래 패딩이니 상관없고 핵심은 calc((100vw - 1000px) / 2)이다. calc() CSS함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있다. vw는 vw = viewport width로 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환한다. 100vw가 전체 화면의 기준이 된다. 따라서 100vw는 전체 화면에서의 width값이고 거기서 1000px만큼을 뺀 값을 2로 나누어 이를 좌우 패딩으로 삼는다는 것이다. 이를 정리하면 calc((100vw - (사용할 공간 크기) / 2)로 사용하면 된다.

HTML과 CSS를 만만히 보고 그냥 JS를 배우면서 웹 공부를 시작했는데 막상 웹페이지를 만들다보니 HTML과 CSS의 기초가 부족해 검색창하나 만드는데도 애를 먹었다. 기본적인 것들은 먼저 배우고 시작해야겠다고 생각해 HTML CSS 카테고리를 새로 만들고 공부한 내용을 기록한다. 오늘은 생활코딩 WEB2 CSS 수업을 다 듣고 들으며 필기한 내용을 올려두려고 한다. 출처 : https://youtu.be/Ok0bBJPtgJI 선택자(Selector) : 그냥 태그 이름을 적으면 해당 태그 전체를 선택하는 선택자를 사용한 것이다. class를 이용해 해당 클래스의 선택자를 사용할 때는 .을 이용한다. 그런데 class는 아래와 같이 두 개의 이름을 지정할 수도 있다. 그러면 아래와 같이 속성을 지정할..

⭐ 온라인 코딩 스터디 - 코뮤니티 모각코 후기 ⭐ ✅ 별명 : koh1018 ✅ 참여한 과정 이름 : 한 입 웹개발 (JS) ✅ 기수 : 5월 과정 👉 모각코에 참여하게 된 계기 학기중에 할 만한 활동 및 프로그램을 알아보다가 어느날 인스타에서 하는 코뮤니티 홍보스토리를 봤어요! 이전에 앱을 만들면서 웹도 배워서 하나의 작은 플랫폼 서비스를 만들어보고 싶다는 생각을 했는데 웹을 배울 정말 좋은 기회가 될 것같아서 바로 지원하게 되었습니다! 👉 모각코로 인한 변화 가장 큰 변화라고 한다면 웹을 아예 모르던 제가 웹으로 초보 수준의 챗봇을 만들 수 있게 되었다는 것 같습니다! 아무래도 눈에 보이는 성장이라는게 가장 의미있는 변화가 아닐까 싶어요.. 처음에는 15일 동안 진행한다고 해서 배우기에 너무 짧은 ..

✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 새로 말을 배울 수 있도록 해봤습니다!! Day15.html 냐옹~ 시키기 불 켜줘 Day15.css /*Snow Keyframes*/ @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0p..

✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 typewriter CDN을 가져와서 고양이가 못알아 듣는 말을 했을 때 위에 알림이 뜨도록 만들어봤습니다! Day14.html 냐옹~ 시키기 불 켜줘 Day14.css /*Snow Keyframes*/ @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-moz-keyframes snow { 0% {backgro..

✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 따라하는 고양이 & 말안듣는 고양이를 만들어봤어요! Day13.html 냐옹~ 시키기 불 켜줘 Day13.css /*Snow Keyframes*/ @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, ..

✅ 오늘의 미션 사진 업로드 애용을 넘어 애정하는 첫 구글플레이 출시 앱입니다 ㅠ 많이 부족하지만 첫 앱이라 많이 애정이 가요 ✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 지난 번에 불 끄는 걸 만들어서.. 이번에는 눈내리는 걸 만들어봤어요! 내일 비가 온다고 해서 비오는 걸 해볼까 했는데 눈이 더 이쁜 것 같아서 눈으로 해봤어요~! Day12.html 냐옹~ 시키기 불 켜줘 Day12.css /*Snow Keyframes*/ @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 10..

✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 불 좀 꺼줄래도 재미로 넣어봤습니다 Day11.html 냐옹~ 시키기 불 켜줘 Day11.css .layout { width: 100vw; height: 100vh; padding-top: 50px; } @font-face { font-family: "MaruBuri-Regular"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/MaruBuri-Regular.woff") format("woff"); font-weight: n..

✅ 오늘의 미션 사진 업로드 인터넷에 도는 유명인들의 어록의 단점은 진위를 알기 어렵다는 점이다. The trouble with quotes on the Internet is that you never know if they are genuine. - 에이브러햄 링컨 이게 생각나네요 유명인의 어록도 좋지만 자신의 경험과 깊은 고민으로부터 나오는 생각 한 줄이 정말 가치있다고 생각합니다. ✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 전화를 걸었을 때 배경이 바뀌고 통화시간이 표시되도록 했습니다! 통화가 끝난뒤에는 통화한 시간이 뜨고 7초 뒤에 다시 원래의 화..