본문 바로가기

전체보기111

CSS의 새로운 기능 (2022 구글 I/O 주요 기능) 2022 구글 I/O 개발자 컨퍼런스에서 CSS(Cascading Style Sheets)의 새로운 기능을 발표했다. 새로운 CSS 기능 중에서도 주목할만한 Cascade layers, Viewport units, Container queries, acctent-color, acctent-contrast, color-mix, :has(), @nest, @scope 에 대해 알아보자. Cascade layers (브라우저 지원 : Chrome 99, Firefox 97, Edge 99, Safari 15.4) 구체적인 셀렉터나 선언된 순서 (아이디 또는 !important) 등으로 스타일을 덮어씌우면 유지보수가 어려워지는데, 이러한 문제를 해결하기 위해 나온 기능이다. Cascade layers 규칙을 적.. 2022. 6. 17.
픽셀과 DP px (pixel) 화면을 구성하는 기본 단위로, 스크린에 표현할 수 있는 가장 작은 점 하나라고 할 수 있다. 절대적 표시 단위라서 지정한 수치의 이상일 경우 깨져 보일 수 있다. dpi (dots per inch) 1인치에 들어가는 점들의 개수를 의미하며, 이를 dpi단위로 표현한다. 1인치 안에 72px가 들어가있다면 72dpi이다. 보통 웹이미지를 72dpi로, 인쇄물을 300dpi로 작업하는데 여기에서 '해상도(resolution)'라는 단어를 쓰게된다. 수치가 높을 수록 고해상도이므로 72dpi는 저해상도, 300dpi는 고해상도이다. dp (Density-independent Pixels) 밀도 독립적 픽셀이란 안드로이드 OS에서 정의한 논리적 픽셀이다. 기기의 밀도에 상관없이 물리적으로 거.. 2021. 10. 31.
벡터 그래픽 SVG 파일 저장 및 코드 변환 아이콘과 같은 벡터 이미지 사용을 위해서 SVG 파일로 저장하는 방법과, HTML에 사용하기 위해 코드로 변환하는 방법을 공유하고자 한다. SVG를 이해하기 위해 이미지 파일 형식에 대해서 간략히 알아보자. 벡터 VS 비트맵 벡터와 비트맵 모두 디지털 이미지를 저장하는 데 쓰이는 이미지 파일 포맷이다. 웹용 비트맵(Bitmap) 이미지 포맷은 픽셀(이미지를 구성하는 최소 단위) 격자를 사용하여 이미지를 나타낸다. 결과로 생성된 파일은 크기가 커져서 단일 해상도(흔히 저해상도)로 제한되기 쉽다. 따라서 다양한 색상을 가진 이미지를 만들 수 있지만 그만큼 용량이 커진다. 커진 이미지를 적용하더라도 화면 확대 시 이미지가 깨져 보일 수 있다. 반면에 벡터(Vector)는 이미지를 모양, 패스, 텍스트, 필터 .. 2021. 6. 26.
네이버 검색 노출을 위한 웹마스터 도구(서치 어드바이저) 블로그 또는 쇼핑몰과 같은 웹사이트를 네이버 검색 결과에 노출되도록 하기 위해서 필요한 기본 절차는 네이버 웹마스터 도구(서치 어드바이저)에 사이트를 등록하는 것이다. 운영중인 웹사이트가 있다면 네이버 검색 결과 노출을 시도해봐도 좋겠다. * 웹마스터 도구(서치어드바이저) : 웹사이트의 검색수집, 색인 반영 현황을 제공하고 검색에 친화적인 사이트로 관리하는데 필요한 진단 리포트를 제공하는 서비스이다. 웹마스터 도구를 사용하지 않아도 네이버 검색 결과에 사이트 및 웹문서들이 반영될 수 있지만, 네이버 웹마스터 도구를 사용하면 사이트가 어떻게 검색에 반영되는지 확인할 수 있어 사이트 운영에 도움이 될 수 있다. (참조) 웹마스터 도구 등록 방법 1. 서치어드바이저에 접속하여 네이버 계정으로 회원가입 및 로그.. 2021. 5. 29.
Shopify 타사 도메인 연결 : 가비아 도메인 설정 난생처음 해외 판매를 위해 글로벌 쇼핑몰 솔루션인 쇼피파이(Shopify)를 이용 중에 도메인에서 어려움을 겪고 있다면, 쇼피파이 가이드를 봐도 잘 모르겠다면 본 글을 참고해도 좋겠다. 도메인은 인터넷에서 방문하는 웹사이트 주소 또는 URL을 의미한다. 도메인 이름은 Chrome, Firefox, Internet Explorer, Safari와 같은 웹 브라우저의 주소 표시줄에 나타난다. 쇼피파이에서는 도메인을 제공하므로 관리도 함께하면 편하다. 하지만 만일 타사에서 도메인을 구입한 경우라면 양쪽 업체의 관리 화면에서 도메인과 관련된 설정을 해야 한다. 본 글을 통해 타사/가비아에서 구매한 도메인을 쇼피파이에서 제작된 사이트와 연결하는 방법에 대해 알아보자. 1. 가비아에서 네임서버와 DNS 정보 설정 .. 2021. 5. 5.
[JavaScript] JSON JSON을 이해하려면 서버와의 통신에 대해 생각해보자. 웹사이트나 앱과 같은 Client들이 Server와 어떻게 통신할 수 있는지를 정의한 것이 *HTTP이다. * HTTP ( Hypertext Transfer Protocal) : Hypertext를(HTML 문서와 같은 리소스들을) 어떻게 서로 주고받을 수 있는지를 규약 한 프로토콜이다. - Hypertext는 링크만 해당하는 것이 아니라 문서나 이미지 등의 데이터 파일도 해당한다. HTTP는 Client가 Server에게 데이터를 request(요청)하고, 반대로 Server는 요청받은 것에 따라 response(응답)을 Client에 보내 주는 방식을 의미한다. HTTP를 이용해서 Server에게 데이터를 요청해서 받아올 수 있는 방법으로는 *A.. 2021. 4. 14.
[JavaScript] Strict mode 바닐자 자바스크립트는 유연한 언어이기 때문에 개발자가 선언되지 않은 변수의 값을 할당한다던지 기존의 프로토타입을 변경하는 등의 실수를 할 수 있다. 이러한 실수를 방지하기 위해서는 ECMAScript 5에 추가된 Strict mode로 작업하는 것이 좋다. Strict(엄격한) 모드 특징 기존 자바스크립트에는 조용히 무시되던 에러들을 throwing한다. (아래 이미지 참고) JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡으며. strict 모드의 코드는 not-strict 모드의 동일한 코드보다 더 빨리 작동되어 상대적으로 효율적이다. ECMAScript의 향후 버전에서 정의 될 문법을 금지한다. Strict 'use strict'; // 자바스크립트 파일 최상단에 선언 // a.. 2021. 4. 10.
<script>요소 defer와 async : HTML에서 스크립트 불러오기 HTML에서 JavaScript를 포함할 때, 어느 위치에 어떻게 참조시키는 것이 효율적인 방법일까? 브라우저가 HTML을 분석하여 화면에 출력하는 과정을 생각해보자. 우선 브라우저에서는 다운로드한 HTML의 구문을 분석(*parsing)을 하게된다. 브라우저가 HTML을 다운받아서 코드를 한 줄씩 parsing 하다가 를 만나게 되면 parsing 하는 것을 멈추고, script를 서버에서 받아오고 실행(fetching)하게 된다. * parsing HTML 태그에는 시작과 끝이 있고 속성 이름과 값이 있는데, parser는 이 문서에 대한 입력을 parsing(구문 분석)하여 문서 트리를 구축한다. (해당 파일을 브라우저 화면으로 볼 수 있는 일련의 과정) HTML parser는 이미지 같은 non-.. 2021. 3. 29.
[CSS] Position : Sticky CSS position 속성은 요소를 배치하는 방법을 지정한다. position의 속성값으로는 static, absolute, fixed, sticky가 있고, 각 속성의 배치 유형을 알고 사용하면 된다. Sticky의 경우 Position의 계산값(상속 과정에서 부모가 자식에게 물려주는 값)이 sticky인 요소이다. 평소에는 relative인 요소처럼 상대 위치 지정 요소로 처리하지만, 컨테이닝 블록(위치의 기준점이 되는 부모 요소)이 자신의 플로우 루트(또는 스크롤 컨테이너)에서 지정한 특정 임계값을 넘으면 마치 fixed처럼 화면에 고정한다. 고정 상태는 컨테이닝 블록의 반대편 모서리를 만나면 해제된다. 사용 예시 : See the Pen Sticky CSS by hyoeun (@hyonixk) .. 2021. 2. 20.
[CSS속성] 이미지 제어 : object-fit과 object-position 지난 글에서 스크롤 메커니즘이 있어도 배경 이미지를 고정시킬 수 있는 background-size와 attachment의 속성을 살펴봤다. background-size와 attachment : 페이지 스크롤 시 배경 이미지 고정 background-size 배경 이미지의 사이즈를 지정한다. background-size에 대한 자세한 내용은 여기를 참고 background-attachment 배경 이미지의 위치가 고정되어 있는지의 여부를 지정한다. scroll : 내.. hyoni-k.tistory.com 이번 글에서는 내가 원하는 사이즈의 박스 안에 이미지 컨텐츠를 배치하고자 할 때 필요한 CSS 속성인 object-fit, object-position에 대해 알아보고자 한다. object-fit : 이.. 2021. 2. 20.
window.open(); 윈도우팝업 제작 및 호출 var window = window.open(url, windowName, [windowFeatures]); → url HTML페이지, 이미지 파일 또는 브라우저에서 지원하는 리소스에 대한 경로도나 URL이 될 수 있다. 빈 문자열("")로 지정되면 새 창으로 열린다. → windowName (선택항목) target으로 지정할 경우 , 요소의 속성에 대한 대상으로 사용할 수 있다. 이름에는 공백이 없어야 하며, 이 이름이 창 제목으로 사용되지는 않는다. → windowFeatures (선택항목) 새로 연 창에 대한 항목의 기능들을(창의 기본 크기 및 위치, 도구 모음 포함 여부 등) 정의한다. 기능은 쉼표로 구분하여, 문자열에는 공백이 없어야 한다. 예: window.open('/popup.html', .. 2020. 12. 19.
[CSS속성] 텍스트를 강조하는 방법 텍스트를 강조하기 위해서 다음과 같은 방법이 있을것이다. 1. 텍스트의 두께를 상대적으로 무겁게 하여 강조 font-weight: bold; 2. 텍스트의 색상으로 강조 color: red; 3. 텍스트의 배경에 색상을 주어 강조 background-color: #fdd000; 4. 텍스트에 언더라인을 주어 강조 text-decoration: underline; text-decoration: underline dotted blue; (underline 속성에 대한 학습은 여기(MDN)를 참고) 텍스트에 단순히 text-decoration: underline으로 선을 넣으면 되지만, 구조적으로 적용이 안되는 상황에는 가상클래스와 같은 방법으로 선을 넣어야 할 것이다. 이처럼 불가피한 상황이거나 또는 밑줄에.. 2020. 12. 3.
jQuery 기본 문법 사용, 선택자와 메서드 본 글은 Tutorial Republic을 토대로 작성했습니다. jQuery 표준/기본 구문! 달러 기호($)로 시작하고 세미콜론(;)으로 끝난다. 제이쿼리에서 달러 기호는 jQuery의 별칭이다. 다음 예제는 기본적인 문장을 보여주는 코드이다. ▷ $(document).ready(handler); → document 엘리먼트로 호출 ▷ $( ).ready(handler); → 빈 엘리먼트로 호출 ▷ $(handler); → 특정 엘리먼트 없이 바로 호출 jQuery ready()메서드는 일반적으로 익명 함수와 함께 사용된다. 따라서 위의 예는 다음과 같은 축약 표기법으로 작성 가능하다. ● on 메서드로 알아보는 이벤트 연결 방법 // Syntax $(selector).on(event,childSele.. 2020. 11. 17.
UX 디자인 프로세스와 리서치 방법 UX 디자인 프로세스의 기본 모델: 더블 다이아몬드UX 디자인 프로세스의 기초가 되는 더블 다이아몬드 모델은 문제 파악(Problem)과 해결책 도출(Solution)이 반복되는 과정을 보여줍니다. 이 모델은 네 단계로 구성됩니다.1. Discover (발견)2. Define (정의)3. Develop (개발)4. Deliver (제공)1. Discover (발견) 단계이 단계에서는 사용자 리서치를 통해 문제를 파악합니다. 리서치 방법은 크게 두 가지로 나뉩니다.정량적 리서치 (Quantitative Research)- 설문 조사, 로그 분석 등을 통한 수치화 가능한 데이터 수집- 대규모 표본을 대상으로 간접적인 조사 수행정성적 리서치 (Qualitative Research)- 개인 또는 소수 그룹 대상.. 2020. 11. 9.
[VS Code] 확장 프로그램 Extensions : 확장 프로그램 설치 확장 프로그램은 좌측 마켓플레이스 아이콘을 클릭하면 검색하여 찾을 수 있다. 원하는 확장 프로그램 페이지 내 Install 버튼을 클릭하면 해당 프로그램이 활성화된다. Material Icon Theme 작업 파일에 해당하는 프로그램(CSS, HTML, React..)의 아이콘을 보여주는 아이콘 테마. 어떤 파일인지 구분이 편해짐 Prettier - Code formatter 단축키(Cmd/Ctrl + Shift + P) 한번으로 코드를 자동으로 형식화하여 일괄 정리. 드래그하여 해당 영역의 코드 정리 또는 드래그 선택 없이 전체 코드 정리 가능 Indent-rainbow 들여쓰기 된 영역을 구분하기 쉽게 보여줌 Auto Close Tag HTML/XML 시작 .. 2020. 10. 28.
반응형

티스토리툴바