본문 바로가기
반응형

전체 글132

[폰트] TTF vs. OTF 차이가 뭘까? 어떤 걸 사용하지? TTF 폰트 OTF 폰트 차이가 뭘까? 어떤 걸 사용하지? 얼마 전, 신년 인사 팝업을 디자인 하기 위해, 신년인사 분위기에 어울리는 폰트(Font)가 필요해졌습니다. 폰트는 유상으로 판매하는 유료폰트가 있고, 무상으로 배포하는 무료폰트가 존재합니다. 디자인으로 첨예한 이슈가 아니라면 대부분의 사용자라면 저작권 이슈로부터 자유로운 무료 폰트를 많이 사용하고자 할 것입니다. 그런 의미에서 은 기본적으로 많은 사람들이 사용하는 무료폰트를 배포하고 있습니다. 저도 이미 네이버 글꼴을 사용하고 있으나, 추가로 사용할만한 글꼴을 찾기 위해 네이버 폰트에 접속을 한 후, '마루 부리'라는 이름의 폰트를 사용하기로 했습니다. 글꼴을 내려 받기 위해 [마루 부리 글꼴 전체 내려받기] 버튼을 클릭하면, maruburi... 2023. 1. 1.
Alert창 버튼 클릭으로 띄우기(ft. modal, 모달, 팝업) 웹 사이트를 운영하다보면, 방문객들에게 이런 저런 안내가 필요해집니다. 아주 아주 예전에는 '팝업창'이라는 형식으로 사실상 브라우저 창을 작은 크기로 새로 띄우는 방식을 이용하곤 했었지만(← 요즘 시대에서는 공부할 필요 없는 내용) 최근 웹환경에서는 브라우저 창을 새로 띄우는 팝업은 보안취약 등의 이유로 거의 사용하지 않습니다. 요즘은 보통 Modal 이라고 부릅니다. Javascript로 Alert 띄우기 자바스크립트로 띄우는 브라우저에 기본 내장되어 있는 Alert은 모양이 별로 예쁘지 않습니다. 그래서 주로 개발자들이 테스트를 위해서 주로 사용하고, 웹사이트 방문객들에게 보여질 내용은 보통 그렇게 띄우지 않습니다. 크롬 개발자모드(F12) → Console 창에 다음과 같이 타이핑하고 Enter를 .. 2022. 12. 31.
Javascript의 변수 선언: var, let, const는 서로 어떻게 다를까? var ? let ? const? 차이가 뭘까? 다른 사람들이 짜 놓은 자바스크립트 코드를 살펴보자면, 변수를 선언할 때 var를 쓰는 사람도 있고, let을 쓰는 사람도 있고, const를 쓰는 사람들도 있습니다. 물론 만들어진 목적에 맞게 잘 사용하는 사람도 있고, 습관처럼 그냥 사용하는 사람들도 있을 겁니다. 그래도 뭐 이참에 그 차이를 명확하게 잘 이해하고 적시적소에 잘 사용하는 게 바람직하겠죠? 선언, 할당 그리고 범위 우선 '변수(Variable)'이라는 것에는 선언, 할당, 범위라는 개념이 있습니다. var를 예로 들자면 var number; // 변수명만 써주면 '선언' number = 1 // 값을 넣어주면 '할당' var number = 1; // 선언과 동시에 할당하는 것도 가능. 나.. 2022. 12. 30.
[실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 아주 간단하게 이미지 반응형으로 넣기 매년 연말 연시가 되면, 고객분들로부터 신년인사 팝업 게재 요청이 들어옵니다. 매년 반복되는 시즈널한 루틴업무죠. 인사말씀 분량이 많은 경우 팝업 이미지 사이즈도 좀 커지게 되는데요, 이렇게 좀 사이즈가 큰 이미지의 경우 휴대폰에서 볼 때는 모바일 반응형으로 사이즈가 알아서 줄어들어 주면 좋겠죠? 실무에서 자주 사용하는 간단한 팁을 공유해드려봅니다. 일단 신년인사용 팝업을 디자인해서 메인 페이지에 게재를 했습니다. 팝업 게재 부분은 로 분리되어 구성되어 있구요, 해당 부분의 코드는 다음과 같습니다. 기본적인 이미지 삽입 방법 id나 label 부분에는 popup_20180922_cs라고 되어 있는 걸 보니, 2018년도에 코드를 작성한 이후 필요할 때마다 이미지만 바.. 2022. 12. 29.
[실무꿀팁] 문단 맞추기 위해 사용한 <br>태그, 반응형에서 제거하기 태그 태그는 break, 즉 문단에서 Enter를 입력해서 줄바꿈을 하는 기능을 수행합니다. 그래서 같은 식으로 2번을 넣게 되면 문단과 문단 사이를 한 줄 띄어주는 결과를 내줍니다. 그런데 화면이 넓은 PC 보기 모드에서는 이런 정렬방식이 효과적일 수도 있지만, 화면이 좁은 Mobile 보기 모드에서는 태그가 없는 경우가 더 선호되기도 합니다. 이러한 태그 사용 간극의 차이, 어떻게 하면 좋을까요? 오늘은 실무에서 자주 사용되는 방식으로 Tip으로 기록해두기로 합니다. 태그의 일반적인 사용방식 다음과 같은 코드를 대충 짜보았습니다. You are 'ESTJ' 옳다고 생각되는 일은 거침없이 밀고 나가는 엄격한 관리자형 연애 초반엔 표현이 서툴러도 점점 표현력이 좋아짐 주변에 말 잘 안함 상대랑 잘 맞으면.. 2022. 12. 28.
getElementById를 쓸까, querySelector를 쓸까? getElementById ? querySelector ? Javascript에서 이 두 가지 함수는 서로 비슷한 동작결과를 수행합니다. 지금도 저는 초보지만 더 꼬꼬마이던 시절에는, 도대체 왜 저 두 함수는 비슷한 기능을 하는데 어떻게 구분해서 사용을 하는 것인지 무척 궁금했더랬습니다. 전문 개발자들은 저 2가지 함수 중에 어떤 것이 더 낫다!라고 분석하고 심지어 의견을 다투기도 합니다. 뭐.. 그건 전문가들의 영역에서 발생하는 것이라 생각해두고, 저는 초보자에게는 편리하고 직관적인 것이 더 좋다고 생각합니다. 그래서 결론부터 말하자면, querySelector()를 사용하는 게, 초보자라면 Javascript를 공부하고 이해하고 활용하는 데 더 효과적일 수 있겠다고 생각합니다. 왜냐구요? 쉽고 간결하.. 2022. 12. 27.
반응형

티스토리툴바