본문 바로가기

전체 글54

[HTML] srcset 속성을 사용해 웹 페이지의 성능과 사용자 경험을 개선해보자! srcset 속성은 HTML 이미지 태그에서 사용되는 속성으로, 여러 개의 이미지 파일을 지정하여 사용자의 기기 및 연결 속도에 따라 적절한 이미지를 선택할 수 있게 해준다. 이를 통해 웹 페이지의 로딩 속도를 향상시키고, 사용자 경험을 개선할 수 있다. srcset 속성을 사용하면 좋은 점: 웹 페이지의 로딩 속도 향상: 적절한 이미지만 로딩하기 때문에, 웹 페이지가 빠르게 접속될 수 있다. 사용자 경험 개선: 이미지의 크기가 적절한 기기에서 제대로 보일 수 있기 때문에, 사용자의 이미지 경험이 개선된다. 반응형 웹 디자인 지원: srcset 속성을 사용하면, 적절한 이미지를 선택할 수 있기 때문에, 반응형 웹 디자인을 지원할 수 있다. 용량 절감: srcset 속성을 사용하면, 적절한 이미지만 선택하.. 2022. 12. 21.
[웹 접근성] 쉽게 배워서 전문가 처럼 사용하기 지난 글에서 왜 웹 접근성을 배워야 하는지 간단하게 알아봤다. 그럼 이젠 웹 접근성을 어디서 어떻게 시작해야 쉽게 배울 수 있는지를 알아볼 차례다. 당연한 말 같겠지만, 웹 접근성을 쉽게 배우려면 쉬운 것부터 배우면 된다. 그런데 그 쉬운 게 배울게 좀 많다는 게 함정이다. 그래도 쉬워서 금방 배울 수 있다. 본격 적으로 배우기 전에, 어떻게 배울 지도 살펴보자. 개인적으로 무언가를 배울 때 뭘 먼저 배우고, 어떻게 배울지 생각해 본다. 배우는 방법이 어렵거나 복잡하면 쉬운 것도 어려워지기 때문이다. 지난 3년 동안 웹 접근성을 공부하고 사용해보니 제일 쉽게 배우는 방법은 직접 보고 테스트해보는 거다. 직접 하나하나 테스트해보면 왜 접근성이 좋은 방식과 그렇지 않은 방식의 차이를 경험해 볼 수 있어 빨리.. 2022. 12. 6.
[웹 접근성] 웹 개발자가 접근성을 꼭 알아야 하는 이유 웹 개발을 처음 시작했던 이미 직업으로 하고 있던, 모든 웹 개발자는 웹 접근성을 꼭 알아야 한다. 웹 접근성이 뭐길래 이렇게 강조하는 걸까? 웹 접근성을 한 마디로 설명하자면 "웹 사이트에서 제공하는 정보를 모두 동등하게 접하고 이용하는 것"이라고 할 수 있겠다. 여기서 모두 동등하게 가 웹 접근성의 본질이다. 우리는 웹 사용이 숨 쉬는 것만큼 당연한 시대에 살고 있다. 일상의 대부분이 웹에서 이뤄지고 있기 때문이다. 고향 가는 기차표를 살 때, 음식을 주문할 때, 내가 좋아하는 아이돌의 영상을 볼 때, 등등 많은 일들을 웹에서 할 수 있다. 우리한테는 이렇게 쉽고 편한 웹이지만 누군가에게는 어려울 수도, 거의 사용 불가능할 수도 있단 걸 생각해본 적 있나? 예를 들어보자, 부산으로 여행 가려고 기차표.. 2022. 10. 11.
Python | 웹 스크랩핑 VS 웹 크롤링 - 차이점을 아시나요~🎵 프로그래밍 언어를 처음 배울 때 제일 궁금한 건 "이건 어따 써먹지?"이다. 그중에서도 파이썬은 사용 용도가 방대해서 이 질문의 답으로 여러 가지를 들어봤을 거다. 추측하자면 데이터 사이언스, AI, 그리고 웹 이 탑 3에 들 거다. 그리고 간혹 웹 스크 랩핑, 또는 웹 크롤링도 들어봤을 거다. 그런데 웹 스크 랩핑과 웹 클롤링의 차이점을 알고 있는가? 언뜻 들으면 "같은 거 아냐?"라고 할 수 있다. 뭐, 쉽게 말하면 비슷하다. 둘 다 웹 페이지에서 내가 필요로 한 정보를 가져오는 용도로 사용된다. 그럼 차이점은? 각자 가져오는 정보에 차이가 있다. 웹 스크 랩핑은 내가 필요한 정보를 어디서, 어떤 정보를 가져올지 이미 알고 있는 경우다. 즉, 사이트/페이지의 주소와 거기서 어떤 정보를 가져올지를 이미.. 2022. 6. 1.
Linked List - 링크 리스트 어떤 언어이든 코딩의 기초를 배웠다면 array, 배열에 대해서 알 것이다. 하지만 Linked List는 학교에서 공부하지 않았다면 생소할 수도 있겠다. Linked List는 배열과 사용 방법은 비슷하지만 구조적으로 다르게 작동한다. 제일 쉽게 풀어본다면 배열과 linked list가 메모리를 어떻게 사용하는가 를 볼 수 있겠다. 배열은, 이미 알고 있듯이, 메모리를 연속적으로 차지한다. 예를 들어 배열의 인덱스 0의 메모리 주소가 0x01이라고 치자. 그리고 배열의 크기는 4, 즉 4개의 값을 가지고 있다. 이 배열을 메모리에 저장하려면 메모리에 5개의 공간이 끊기지 않고 연속적으로 존재해야 한다. 다시 말해서 메모리 주소 0x01부터 0x04 가 이 배열에 사용된다. 만약, 그럴 일은 없겠지만, .. 2022. 3. 22.
Binary Tree를 알아보자 코딩 공부를 시작했다면 한 번쯤은 "데이터 구조", "알고리즘" 이 두 단어들을 들어봤을 거다. 데이터 구조와 알고리즘은 코딩 테스트/인터뷰에서 자주 등장하는 주제로, 신입 개발자의 실력을 테스트해보는 용도로 사용된다. 오늘은 여러 데이터 구조 종류 중 binary tree에 대해서 알아보자. Binary tree는 거꾸로 뒤집힌 나무 모양과 비슷하다. Binary tree는 node로 구성돼있고, 각 node는 최고 2개의 child node를 가질 수 있다. Binary tree를 시작하는 node를 root라고 부르고, root는 반드시 딱 하나만 존재할 수 있다. node는 값을 저장하는 value, 왼쪽/오른쪽 child node에 연결할 수 있는 pointer들로 구성돼있다. node를 코드로.. 2022. 3. 17.
Javascript | 데이터 타입 모음 자바스크립트의 기본 데이터 타입들을 알아보자!! 자바스크립트에는 여러 개의 데이터 타입들이 존재합니다. 그러면 어떤 데이터 타입들이 존재하고 어떻게 사용할수있는지 알아보겠습니다. 숫자 타입 자바스크립트에서 숫자를 사용해서 간단한 수학을 할 수 있고 또 자바스크립트에 내장돼있은 수학 함수들을 사용해서 sin/cos 같은 수학도 할 수 있습니다. 우리가 아는 기본 수학 기호들은 더하기(+), 빼기(-), 나누기(/), 그리고 곱하기(*) 가있죠 그런데 코딩에서는 수학기호 하나가 더 있습니다, 바로 모듈러(%)입니다. 모듈러는 나누기와 비슷하지만 반대로 작동합니다. 나누기는 나누어진 숫자를 주고 (30 / 3 = 10) 모듈러는 나머지 숫자를 줍니다 (30 % 3 = 0) 자바스크립트 자체에 있는 수학 함수를.. 2021. 8. 9.
Javascript | 자바스크립트, 이건 뭐지? 어서 와, 자바스크립트는 처음이지? 안녕하세요 Javascript(자바스크립트)의 세계로 오신 걸 환영합니다 자바스크립트는 웹 개발의 꽃 이라고 할 수 있는 부분인데요 웹 브라우저에서만 작동되는 언어로 웹 페이지에서 유저의 행동에 반응할때 사용됩니다 예를 하나 들어볼게요 다크모드 아시죠? 웹사이트의 전체적 색이 어두워지는 거 이 다크모드 버튼을 클릭했을 때 웹사이트의 스타일(CSS)을 바꾸는걸 자바스크립트가 해주는 겁니다 이 외에도 정말 많은 일들을 할수있는데요 어떤 것들을 할 수 있는지 알아보기 전에 자바스크립트를 어떻게 사용하고 어떻게 작성하는지를 먼저 알아볼게요 오늘은 처음이니까 제일 기본들만 알아볼게요 자바스크립트 사용하기 자바스크립트는 두 가지 방법으로 사용할 수 있습니다 첫 번째는 HTML의 .. 2021. 6. 21.
Chrome(크롬) 브라우저 스마트하게 사용하기 크롬 브라우저의 새로운 기능들 알아보기 안녕하세요 최근에 발견한 크롬 브라우저의 새로운 기능들을 알려드릴까 해요 이미 알고 계시는 분들도 있겠지만 모르고 계신 분들을 위해서 정리해 봤습니다 1. 탭 관리 인터넷 하다 보면 많이 열려있는 탭들 이제는 탭 이렇게 정리해 보세요 1. 탭에 우클릭 후 '새로운 그룹에 추가' 2. 그룹 이름, 색 정하기 3. 그룹 만들기 성공. 같은 방식으로 새로운 그룹을 만들거나 다른 탭을 만든 그룹에 추가해 주세요 이렇게 정리하고 나면 이렇게 변합니다 그룹 이름을 클릭하면 이렇게 최소화됩니다 필요한 브라우저를 찾으려면 브라우저 서치 창에서 찾을 수 있습니다 2. QR코드 주소창을 클릭하시면 맨 오른쪽에 QR코드 아이콘이 있습니다 이거는 현재 보고 있는 페이지의 주소를 QR코드.. 2021. 6. 9.
반응형

티스토리툴바