분류 전체보기55

• 

  input type file에서 카메라 - 파일 작업 선택 속성 추가 모바일에서 작업 선택이라고 바텀 시트가 올라오면서 카메라 - 갤러리 - 파일 이런식으로 선택을 할 수 있는 속성을 알게 되었습니다. 여태 input type="file" 에서 속성을 추가하면 간단하게 해결이 됩니다. 하지만 PC 에서는 일반 input file로 보이기 때문에 테스트는 모바일해야 합니다. "image/*;capture=camera"는 HTML의 input 요소에서 사용하는 accept 속성의 값 중 하나입니다. 이 값은 웹 페이지에서 파일 업로드를 위한 입력 필드를 정의할 때 사용됩니다. 여기에 대한 설명은 다음과 같습니다: "image/": 이 부분은 파일 형식을 지정하는 부분입니다. "image/"는 이미지 파일의 모든 형식을 허용하겠다는 의미입니다. 즉, 사용자가 업로드할 수 있는 .. HTML 2023. 10. 5.

• 

  [SQL] Select 쿼리문에 대해 요즘 스파르타코딩클럽에서 국비교육 과정으로 엑셀보다 쉬운 SQL을 수강하게 되었습니다. SQL 이전에는 막막하고, 정말 엑셀보다 쉬운 것인가라는 의문점을 가지고 시작하였는데, 생각보다 재미있게 접근이 가능했고, 튜터님이 쉽게 설명해주고, 즉문 즉답이라는 막강한 프로그램을 이용하여 버벅대는 부분을 넘어갈 수 있어서 좋았습니다. 1. Select 데이터베이스에서 데이터를 선택해 가져오겠다 라는 의미입니다. 사용할 수 있는 예문으로는 아래와 같습니다. SELECT * FROM ORDERS 위의 코드대로 작성하게 된다면, ORDERS 테이블을 선택해서 가져오겠다라는 의미입니다. SELECT email, name, like FROM USERS 아까 위의 내용처럼 *을 사용하게 되면 전체 필드를 가져오는 것이지만,.. 카테고리 없음 2023. 4. 24.

• 

  github: 모르면 배워야 한다 일단 저는 이제 퍼블리셔로 근무한지 1년이 넘었습니다. 하지만 형상관리를 github으로 한 프로젝트가 없었고, 현재까지도 SVN 환경에서 계속해서 근무를 하게 되었습니다. 제가 배운 지식에서 기초적인 지식이 없이 텅 비었다고 생각하여 하나씩 배워가는 마음으로 다시 작성하려고 합니다. 각설하고 일단은 github에 대해 알아보고 제가 배운 내용으로 작성하려고 합니다. 1. Github이란 무엇인가? Github은 개발자들이 코드를 관리하고 공유하는 데 사용되는 협업 도구입니다. Git이라는 버전 관리 시스템을 기반으로하며, 코드를 저장하고 다른 사람들과 함께 작업할 수 있는 기능을 제공합니다. 개발자들은 코드를 업로드하고 저장소(repository 이하 레포지토리)를 만들어 다른 개발자들과 공유할 수 있.. 웹 퍼블리셔 일기 2023. 4. 14.

• 

  사파리에서 디바이스별로 확인하는 방법 (응답형 디자인 모드) 크롬에서는 디바이스별로 레이아웃을 볼 수 있는 것이 개발자 도구에 떡하니 있는데, 사파리에서는 찾아볼 수가 없었습니다. 사파리에서는 조금 다른 메뉴인 [응답형 디자인 모드 시작] 이란 메뉴를 선택해야 디바이스별로 레이아웃을 볼 수 있습니다. 사파리 -> 개발자용 -> 응답형 디자인 모드 시작 응답형 디자인 모드가 실행되면 위의 디바이스를 클릭하면 레이아웃을 확인할 수 있습니다. iOS 기기 디바이스인 아이폰 SE부터 아이패드 프로(12.9인치)까지 확인이 가능합니다. 디바이스를 클릭하면 세로/가로로 전환되면서 레이아웃을 확인할 수 있습니다. 가로/세로 사이즈를 늘리고 싶다면, 하단에 네모박스처럼 생긴 부분을 드래그하면 늘릴 수도 있습니다. 이번에 아이폰 디바이스를 확인하면서 사용한 응답형 디자인 모드였습.. HTML 2022. 12. 26.

• 

  함수의 return은? 함수의 return이 처음에는 굉장히 헷갈렸습니다. 왜 함수에 마지막에 저녀석을 왜 쓰는 거지? 저걸 위에 쓰니까 다른 코드들이 작동이 되지 않았던 부분에서 공부를 하면서 찾기 시작했습니다. (사실 이전에 공부했던 부분을 정리하였는데, 요즘은 강의를 들으면서 개인적으로 다른 내용도 추가하고 정리를 하는 부분입니다.) - return 문법은 왜? return 우측 값을 반환합니다. return 에는 아무거나 작성이 가능합니다. (숫자, boolean) -> 어떤 값도 반환하지 않는 경우에는 사용하지 않는 것이 좋습니다. 함수 종료 기능을 가지고 있습니다. 이전에 학원에서 공부했을 때는 함수 실행문 밑에 return이 있는 거를 그냥 따라치기 했었는데, 그냥 그런가보다만 했었는데, 3번 함수 종료 기능을 모.. JavaScript 2022. 12. 17.

• 

  [CSS] 그리드 Grid를 익혀보자 (일단 기초편 #1) 제가 최근에 사용했던 CSS 레이아웃 스킬은 조금은 챙피하지만 display: flex; 이게 전부였습니다. 하지만 최근 Grid로 간단하게 레이아웃을 짤 수 있고, 이 방법이 유용하다는 것을 배우면서 확실히 쉽고 직관적으로 할 수 있다고 생각하여 최근에는 자주 애용하고 있습니다. ※ CSS grid는 IE, 즉 인터넷 익스플로러에서는 지원하지 않습니다. IE를 대응을 해야되는 분들에게는 display:grid가 아닌 다른 방법으로 레이아웃을 짜는 것을 권장드립니다. 1. HTML 코드 일단 그리드를 그릴 수 있는 HTML 코드를 작성합니다. 2. CSS 코드 .grid-container{ display:grid; grid-template-columns: 100px 100px 100px; grid-tem.. CSS 2022. 11. 7.

• 

  [웹 접근성] aria-expanded, 토글-아코디언 메뉴 속성값! 최근에 프로젝트를 하면서 웹 접근성을 하나씩 뜯어보면서 궁금한 부분이 있어서 정리를 하는 느낌으로 블로그에 포스팅을 하고 있습니다. 토글 및 아코디언 메뉴에서 접근성 코드가 들어가게 됩니다. 과금미사용된 아이템을 환불 받을 수 있나요? (CSS는 따로 잡지 않았습니다.) 현재 토글 메뉴에서 aria-expanded="false" 로 최초로 닫혀있는 상태입니다. 과금미사용된 아이템을 환불 받을 수 있나요? 답변 사이트 운영자 답변 구매한 후에 24시간 이내에 환불 요청을 하신다면 가능합니다. 과금 부분을 클릭하게 되면 태그에 있던 aria-expanded="true"로 속성값을 변화시킵니다. view 클래스를 가지고 있던 div 태그를 display: block 값을 줍니다. 다른 방법으로도 접근성을 하는.. HTML 2022. 5. 10.

• 

  맥Mac용 키보드에서 백틱 입력 방법 자바스크립트 ES6에서 백틱 (` `)을 은근히 많이 사용됩니다. 윈도우 PC에서는 백틱키가 숫자 1번 좌측에 ~키와 같이 배치가 되어 누르면 작성이 가능했지만, 맥(mac) 전용 키보드에서는 백틱을 찾지 못하면서 당황한 적이 있습니다. 매직키보드에서도 숫자 1 좌측옆에 있는 키를 누르면 됩니다. 하지만 한글 상태에서는 누르게 되면 ₩ 표시가 됩니다. 그러면 백틱은 어떻게 사용해야하나? 영문으로 전환된 상태에서 해당 키를 누르면 ` ` 나오게 됩니다. 많이 알고 계시지만, 은근히 미세먼지팁같은 내용입니다. 카테고리 없음 2022. 4. 13.

• 

  [웹 퍼블리셔 293일차] 여러분의 새해 계획은 뭔가요? 정말 오랜만에 쓰는 퍼블리셔 일기입니다. 다음 주가 되면 이제 300일이 되어갑니다. 작년에는 그래도 프로젝트도 많이 경험하면서 참으로 감사한 한 해였습니다. 일단, 취업도 됐으니까..! 그러면서 2022년에는 개인적으로 이루고 싶은 일들이 있어서 여기에다가 써보려고 합니다. (이렇게 선포를 해야 지키는 원동력이 된다는..) 독서 120권 읽기 (최소 100권) 방송통신대학교 편입 (1월 추가모집으로 편입 예정 JLPT 2급 or 3급 시험 (이건 하반기 목표라서..) 지금 당장에는 위의 계획들 밖에 없네요. 뭐 대단한 걸 계획한줄 아셨겠지만^^;; 뭐 두리뭉실하게 Vue를 마스터하겠다, React를 마스터하겠다 이런 식의 목표보다는 구체적인 것이 좋다고 생각합니다. "Vue로 To-do 리스트를 만들어.. 웹 퍼블리셔 일기 2022. 1. 22.

• 

  [CSS] 배경이미지를 넣어보자! background 추가 속성들! 기존에 img 태그를 통해서 이미지를 삽입하는 방법도 있지만, HTML 요소 뒤에 배경 이미지를 넣는 방법이 있습니다. 바로 CSS의 background-image 속성입니다. 전체 페이지부터 부분적으로 배경이미지를 설정할 수 있습니다. 1. background-image .box1 { background-image: url("이미지 경로") } background-image 속성에 url (" ") 괄호 안에 경로를 넣으면 배경 이미지가 삽입됩니다. 이미지 경로만 넣어둔다면 딱 맞는 사이즈라면 모르겠지만, 사이즈가 다른 이미지라면 바둑판 모양처럼 반복이 됩니다. background-repeat의 repeat는 기본값입니다. 반복이 되지 않으려면 아래의 코드와 같이 기재를 하면 됩니다. 2. backgr.. CSS 2021. 12. 28.

• 

  [CSS] box-sizing, 테두리까지 포함 시키는 방법! 여러 요소를 배치하려면 각 요소들의 너비 값을 기준으로 해야합니다. width, height 속성 값이 컨텐츠 영역의 너비와 높이만 나타내게 되는데, 여기에서 padding이나 border를 설정했다면 설정된 값만큼 빼서 width와 height를 계산해야합니다. 이렇게 매번 계산하게 되면, 너무 비효율적입니다. 이러한 방법을 CSS 속성인 box-sizing을 이용하면 padding과 border값을 포함시켜서 사용할 수 있게 설정이 가능합니다. .box1{width:300px;height:300px;padding:20px;border:5px solid #ccc;} .box2{width:300px;height:300px;padding:20px;border:5px solid #ccc; box-sizing.. CSS 2021. 12. 27.

• 

  [CSS] box-shadow, 그림자를 넣어보자! box-shadow는 그림자 속성입니다. 이미지부터 감싸는 div 등 전체를 지정하는 것에 따라 넣을 수 있습니다. box-shadow의 속성 값에 따라 그림자의 위치부터 흐림, 번짐, 심지어 색상까지 조절할 수 있습니다. box-shadow를 사용하면 수평, 수직 거리는 필수적으로 지정을 해야하고, 나머지 값들은 옵션으로 설정이 가능합니다. (기본값은 none 입니다.) .box1{ box-shadow: 10px 10px 5px red; } 앞에서 부터 수평, 수직, 번짐, 그림자 색상으로 속성을 기재하였습니다. - 수평 거리: 양수로 설정하면 오른쪽, 음수로 설정하면 왼쪽 이동 - 수직 거리: 양수로 설정하면 아래로, 음수로 설정하면 위로 이동 - 흐림: 양수 값으로 설정하면 점점 흐려집니다. 기본값.. CSS 2021. 12. 26.