본문 바로가기

웹개발9

클릭 투 플레이 <iframe> 웹 사이트나 블로그를 제작할 때, 페이지에 영상을 삽입해야 하는 경우가 종종 있습니다.일반적으로 유튜브 영상을 포함해 대부분의 영상 삽입에는 태그를 사용하셨을 것입니다. 영상 한두 개 정도는 큰 문제가 없을 수 있지만, 영상이 여러 개일 경우 페이지 성능에 영향을 미칠 수 있습니다.이러면 페이지 로딩 시간이 길어지고, 페이지에 따라서는 반응 속도가 느려져 렉이 걸린 것처럼 보이기도 합니다. 혹시 다른 사이트나 블로그를 보면서 이미지를 클릭했더니 영상으로 바뀌는 것을 본 적이 있으신가요?만약 본 적이 있다면 "왜 이렇게 했지?"라고 궁금해하거나 "오~ 좀 있어 보이네"라고 생각했을 수도 있습니다. 이러한 방식은 페이지 성능을 최적화하고 사용자 경험을 향상하기 위한 방법 중 하나입니다.오늘은 이러한 문제를.. 2024. 6. 30.
[웹 접근성] 쉽게 배워서 전문가 처럼 사용하기 지난 글에서 왜 웹 접근성을 배워야 하는지 간단하게 알아봤다. 그럼 이젠 웹 접근성을 어디서 어떻게 시작해야 쉽게 배울 수 있는지를 알아볼 차례다. 당연한 말 같겠지만, 웹 접근성을 쉽게 배우려면 쉬운 것부터 배우면 된다. 그런데 그 쉬운 게 배울게 좀 많다는 게 함정이다. 그래도 쉬워서 금방 배울 수 있다. 본격 적으로 배우기 전에, 어떻게 배울 지도 살펴보자. 개인적으로 무언가를 배울 때 뭘 먼저 배우고, 어떻게 배울지 생각해 본다. 배우는 방법이 어렵거나 복잡하면 쉬운 것도 어려워지기 때문이다. 지난 3년 동안 웹 접근성을 공부하고 사용해보니 제일 쉽게 배우는 방법은 직접 보고 테스트해보는 거다. 직접 하나하나 테스트해보면 왜 접근성이 좋은 방식과 그렇지 않은 방식의 차이를 경험해 볼 수 있어 빨리.. 2022. 12. 6.
[웹 접근성] 웹 개발자가 접근성을 꼭 알아야 하는 이유 웹 개발을 처음 시작했던 이미 직업으로 하고 있던, 모든 웹 개발자는 웹 접근성을 꼭 알아야 한다. 웹 접근성이 뭐길래 이렇게 강조하는 걸까? 웹 접근성을 한 마디로 설명하자면 "웹 사이트에서 제공하는 정보를 모두 동등하게 접하고 이용하는 것"이라고 할 수 있겠다. 여기서 모두 동등하게 가 웹 접근성의 본질이다. 우리는 웹 사용이 숨 쉬는 것만큼 당연한 시대에 살고 있다. 일상의 대부분이 웹에서 이뤄지고 있기 때문이다. 고향 가는 기차표를 살 때, 음식을 주문할 때, 내가 좋아하는 아이돌의 영상을 볼 때, 등등 많은 일들을 웹에서 할 수 있다. 우리한테는 이렇게 쉽고 편한 웹이지만 누군가에게는 어려울 수도, 거의 사용 불가능할 수도 있단 걸 생각해본 적 있나? 예를 들어보자, 부산으로 여행 가려고 기차표.. 2022. 10. 11.
HTML 쉽게 배우기 | 디브 <div> 사용법 HTML에서 는 뭐고 어떻게 사용하는가? 안녕하세요 오늘은 HTML 시리즈의 마지막으로 에 대해서 알아볼게요 HTML문서에 따르면 '는 여러 요소들을 하나의 섹션으로 그룹하는 컨테이너' 라고 소개합니다 쉽게 말해서 그냥 빈 박스에요 자체에는 스타일이나, 넓이, 높이, 등 아무것도 없습니다 그럼 를 왜 쓰냐? 정리와 컨트롤 입니다 를 사용하면 여러 요소들을 그룹지을수 있고, HTML 코드를 좀더 깔끔하게 정리할수 있습니다 이렇게 정리된 요소들은 주로 CSS를 사용해서 예쁘게 꾸미는데, CSS는 선택자(selector)를 사용해서 스타일할 요소를 고를수 있습니다 요소들이 로 정리되 있으면 CSS 선택자를 사용해서 콕집어 스타일링하기 쉬워집니다 아직 잘 이해가 안가시나요? 비슷한 예로 누구나 한번쯤은 해본 서.. 2020. 12. 28.
HTML 쉽게 배우기 | 입력창 <input> 안녕하세요 오늘은 에 대해서 알아볼게요 은 셀프 클로징 요소로 닫힘 태그가 없습니다 은 긴 네모 박스 모양으로, 사용자가 정보를 입력할 수 있는 요소입니다 은 여러 가지의 용도로 사용할 수 있습니다 예상외로 우리는 을 정말 많이, 그리고 자주 사용합니다 로그인할 때, 댓글 쓸 때, 날짜를 고를 때, 등등 "내가 본 로그인은 박스 모양이 아니던데?" 은 다른 요소들에 비해서 개발자들이 스타일을 제일 많이 바꾸는 요소중 하나입니다 의 기본 스타일은 네모난 박스 모양인데, 이 스타일을 바꿔서 우리가 자주 보는 예쁜 모양으로 변합니다 그럼 의 기본 코드를 볼게요 을 사용할 때 필수 속성은 type 하나입니다 이 type에 따라서 추가되는 속성이 달라집니다 의 type은 여러 개가 있는데, 그중 몇 개만 알아볼게.. 2020. 11. 22.
HTML 쉽게 배우기 | 오디오 <audio> 오랜만이에요 오늘은 웹 페이지에 음악을 넣는 방법을 알려드릴게요 가끔 네이버에서 웹툰 볼 때 배경 음악을 들어본 적 있나요? 웹툰 제목은 기억 안 나는데, 언제 한번 납량특집으로 나온 웹툰에서 공포감을 극대화하기 위해서 배경 음악을 사용한 적이 있었어요 주인공이 버스 타고 어디 가는데 터널 안에서 어린아이의 모습을 한 귀신이 사람들 죽이고 뭐 그런 내용이었는데요 배경 음악 때문에 훨씬 더 무섭게 본 기억이 있네요 솔직히 이처럼 정말 특별한 콘텐츠가 아니고서는 웹사이트에서 음악을 사용하지는 않죠 그 이유 중 하나는, 음악 파일이 너무 크면 로딩하는데 시간이 걸리고 또 그만큼의 데이터를 사용하기 때문이죠 "그럼 알아볼 필요 없네요?"라고 하시면 할 말 없네요 굳이 이유를 대자면.... 재밌으니까? 그러면 오.. 2020. 11. 15.
HTML 쉽게 배우기 | 비디오 <video>/<iframe> 안녕하세요, 오늘은 HTML을 사용해서 비디오를 넣는걸 알아볼께요. 웹페이지에 비디오를 넣는 방법은 두 가지가 있는데요, 하나는 태그와 내 비디오 파일을 사용하는 방법, 다른 하나는 태그와 유튜브를 사용하는 방법입니다. 태그를 사용해서 비디오 넣기 저번에 이미지를 넣을때 태그를 사용했었죠. 이와같이 비디오를 넣을때 태그를 사용해서 비디오를 넣을수 있습니다. 태그와 같이 태그에 src 를 제공해야 합니다. 저는 짧은 비디오를 하나 다운 받아서 html 문서와 같은 위치에 저장했습니다. 그리고 태그를 아래와 같이 작성합니다. 호환되지 않는 브라우저 입니다. 하나 하나 살펴볼까요? 태그와는 다르게 는 열림/닫힘 태그로 이루어져 있습니다. width="400", 이거 모르시는분 없죠? 맞아요, 비디오의 넓이를 .. 2020. 10. 19.
HTML 쉽게 배우기 | 링크 <a> 안녕하세요. 오늘은 링크에 대해서 알아볼게요. 링크란 단어가 생소하신 분들을 위해서 간단하게 설명하자면, 웹사이트에서 클릭했을 때 다른 페이지로 간다거나, 파일이 다운로드됀다거나 할 때 있죠? 이런 걸 링크라고 부릅니다. 링크 태그는 와 로 만들 수 있습니다. 열림 태그와 닫힘 태그 사이에 링크에 대한 글을 작성하면 됩니다. (p 태그 사용 안 합니다) 이 링크 태그에는 하나의 필수 속성이 있고, 몇 가지의 추가할 수 있는 속성들이 있습니다. 필수 속성과 두 가지의 추가 속성을 살펴볼게요. (네, 이 3개 이외의 다른 건 사용해본 적이 없습니다 😓) 필수 속성: href href 는 링크의 목적지 주소를 제공하는 속성입니다. 예를 들어서 Google 이렇게 링크를 만들면 클릭했을 때 구글로 이동합니다. .. 2020. 10. 12.
HTML 쉽게 배우기 | 헤더 (h1~h6) 저번 편에서, , , , , 태그들을 알아봤습니다. 이번에는 HTML에서 중요한 헤더를 알아볼게요. HTML에는 h1 부터 h6 까지 6개의 헤더가 있습니다. h1이 글 크기가 제일 크고 점점 작아져요. 헤더가 어떤 역할을 하냐면, 책 앞에보면 목차가 있죠? 헤더를 잘 쓰면 웹 페이지의 목차 역할을 합니다. 헤더를 쓸때는 몇가지의 규칙이 있는데요 웹 페이지에서 h1은 항상 제일 위에 있어야 합니다. h1위에 h2, h3, h4, h5, h6가 있으면 안됩니다. 헤더를 순차적으로 사용해야 합니다. h1쓰고 바로 밑에 h4를 쓰면 안됩니다. h1 바로 밑에는 h2가 있어야 합니다. 모든 웹 페이지에 h1은 항상 있어야 합니다. 헤더의 주용성을 이렇게 강조하는 이유는 스크린 리더때문 입니다. 스크린 리더를 사.. 2020. 9. 19.
반응형

티스토리툴바