HTML19 HTML5 - 아직 이거 몰라? 일하면서 많다면 많은 코옵(Co-op) 학생들을 만나봤고 인터뷰도 해본 결과 HTML의 기초를 잘 모르는 상태로 React, Angular, 또는 Vue를 시작하는 사람들이 많다는 걸 느꼈습니다. 그래서 오늘은, 개인적인 경험을 바탕으로, 알아두면 좋은 HTML 몇 개를 가져와 봤습니다. 어코디언 (Accordion)어코디언, 혹시 생소하신가요?사이트의 Q&A 페이지에 보면 질문을 클릭하면 아래로 열리면서 답변이 나오는 걸 보신 적 있을까요?이런 요소를 어코디언이라고 합니다.전에는 어코디언을 만들려면 여러 개와 을 사용해서 UI를 만들고 자바스크립트를 버튼에 연결해서 상호작용할 수 있는 함수도 만들어야 했습니다.하지만 이제는 단 2개의 HTML요소로 쉽게 만들 수 있습니다.바로 과 입니다. Detai.. 2024. 7. 4. 클릭 투 플레이 <iframe> 웹 사이트나 블로그를 제작할 때, 페이지에 영상을 삽입해야 하는 경우가 종종 있습니다.일반적으로 유튜브 영상을 포함해 대부분의 영상 삽입에는 태그를 사용하셨을 것입니다. 영상 한두 개 정도는 큰 문제가 없을 수 있지만, 영상이 여러 개일 경우 페이지 성능에 영향을 미칠 수 있습니다.이러면 페이지 로딩 시간이 길어지고, 페이지에 따라서는 반응 속도가 느려져 렉이 걸린 것처럼 보이기도 합니다. 혹시 다른 사이트나 블로그를 보면서 이미지를 클릭했더니 영상으로 바뀌는 것을 본 적이 있으신가요?만약 본 적이 있다면 "왜 이렇게 했지?"라고 궁금해하거나 "오~ 좀 있어 보이네"라고 생각했을 수도 있습니다. 이러한 방식은 페이지 성능을 최적화하고 사용자 경험을 향상하기 위한 방법 중 하나입니다.오늘은 이러한 문제를.. 2024. 6. 30. [웹 접근성] 웹 접근성을 위한 올바른 이미지 활용법 요새는 이미지 없는 사이트를 찾아보기 힘들 정도로 이미지는 텍스트 다음으로 많이 사용됩니다. 이렇게 이미지를 많이 사용하는 이유 중 하나를 꼽으라면 편리함 이겠죠. 장문의 글 없이도 많은 양의 정보를 전달할 수 있다는 편리함. 그런데 이미지에도 웹 접근성이 적용된다는 거 알고 있나요? 이미지에는 대체 텍스트라는 정보를 추가할 수 있는데요, 이 대체 텍스트를 어떻게 작성하는지가 핵심입니다. 이미지의 대체 텍스트는 HTML 이미지 요소에 ‘alt’ 속성을 사용합니다. alt 속성은 스크린 리더와 같은 보조 프로그램 사용자도 이미지의 정보를 접할 수 있도록 도와주는 역할을 합니다. 대체 텍스트를 작성할 때는 최대한 정확하고 간결하게 작성하는 게 중요합니다. 대체 텍스트의 길이는 주로 120~125자 이내로 하.. 2023. 6. 22. [HTML] 첫발 내딛기 <4. input 유형의 모든것> 1000의 얼굴을 가진 . 어디까지 사용해 봤니? 어느 정도 HTML에 익숙해져서 웹사이트를 만들어 보았다면 분명 을 사용해 봤을 것이다. 은 생각 외로 자주 사용되는 요소다. 우리가 흔하게 볼 수 있는 로그인 페이지에서, 날짜를 선택할 때, 여러 옵션을 선택할, 등등 사용되는 요소가 이다. 그럼 은 대체 어디까지 사용 가능할까? 지금부터 하나하나씩 의 다양한 유형들을 알아보자. 텍스트 유형 요소의 기본 유형은 텍스트이다. 하지만 텍스트도 다 같은 텍스트는 아니다. 일반 텍스트도 있고, 이메일도 있고, 비번도 있고. 텍스트 유형들은 다음과 같이 사용할 수 있다. 일반 텍스트 유형은 말 그대로 텍스트를 입력할 때 사용하는 유형이다. 이메일 유형은 이메일 주소를 입력할 때 사용하는 유형이다. 이 유형은 이메.. 2023. 2. 26. [HTML] srcset 속성을 사용해 웹 페이지의 성능과 사용자 경험을 개선해보자! srcset 속성은 HTML 이미지 태그에서 사용되는 속성으로, 여러 개의 이미지 파일을 지정하여 사용자의 기기 및 연결 속도에 따라 적절한 이미지를 선택할 수 있게 해준다. 이를 통해 웹 페이지의 로딩 속도를 향상시키고, 사용자 경험을 개선할 수 있다. srcset 속성을 사용하면 좋은 점: 웹 페이지의 로딩 속도 향상: 적절한 이미지만 로딩하기 때문에, 웹 페이지가 빠르게 접속될 수 있다. 사용자 경험 개선: 이미지의 크기가 적절한 기기에서 제대로 보일 수 있기 때문에, 사용자의 이미지 경험이 개선된다. 반응형 웹 디자인 지원: srcset 속성을 사용하면, 적절한 이미지를 선택할 수 있기 때문에, 반응형 웹 디자인을 지원할 수 있다. 용량 절감: srcset 속성을 사용하면, 적절한 이미지만 선택하.. 2022. 12. 21. HTML 쉽게 배우기 | 표 <table> 만들기 안녕하세요 이번 편 에서는 HTML에서 표 만드는 방법을 알아볼게요 표는 정보를 열과 행으로 나눠서 전달할 때 많이 사용되는 요소입니다 이렇게 설명하면 뭔가 생소하고 처음 들어보는 거 같죠? 간단하게 설명하자면 우리가 알고 있는 시간표, 가계부, 등이 표로 만들어져 있습니다 그러면 표를 HTML에서 만들려면 어떤 요소/요소들이 필요한지 알아볼게요 먼저 "이 내용들이 표다"라고 지정할 이 필요합니다 그리고 "이건 표의 열 이다"라고 지정할 , "이건 표의 행이다"라고 지정할 가 있습니다 **'열'과 '행'이 헷갈리시는 분들은, '열'은 가로줄, '행'은 세로줄이라고 생각하시면 쉬우실 거예요** 이번 편에서는 정말 간단한 시간표 2개를 만들면서 HTML에서 어떻게 표를 만들고 열과 행을 어떻게 사용할 수 있.. 2020. 12. 21. HTML 쉽게 배우기 | 양식 <form> 1 안녕하세요 오늘을 (양식)에 대해서 알아볼게요 은 어떤 양식을 만들때 사용하는 요소입니다 양식을 만들때는 여러가지의 요소들이 사용됩니다 그래서 편은 2파트로 나눠서 알아볼게요 앞서 말했듯이, 양식을 만들때는 여러가지의 요소들이 사용됩니다 사용되는 요소들은 label input select button textarea fieldset legend 이 있습니다 input은 저번편에서 이미 알아봤죠 오늘은 label, button, 그리고 textarea를 알아 볼게요 양식을보면 여러 칸들이 있죠 이름 쓰는 칸, 주소 쓰는 칸, 경력쓰는 칸 등등 은 그 칸에 이름을 달때 사용하는 요소입니다 에는 for 속성이 있는데, 이 속성은 input과의 관계를 형성합니다 은 다음과 같이 사용할수 있습니다 Name: Na.. 2020. 11. 29. HTML 쉽게 배우기 | 입력창 <input> 안녕하세요 오늘은 에 대해서 알아볼게요 은 셀프 클로징 요소로 닫힘 태그가 없습니다 은 긴 네모 박스 모양으로, 사용자가 정보를 입력할 수 있는 요소입니다 은 여러 가지의 용도로 사용할 수 있습니다 예상외로 우리는 을 정말 많이, 그리고 자주 사용합니다 로그인할 때, 댓글 쓸 때, 날짜를 고를 때, 등등 "내가 본 로그인은 박스 모양이 아니던데?" 은 다른 요소들에 비해서 개발자들이 스타일을 제일 많이 바꾸는 요소중 하나입니다 의 기본 스타일은 네모난 박스 모양인데, 이 스타일을 바꿔서 우리가 자주 보는 예쁜 모양으로 변합니다 그럼 의 기본 코드를 볼게요 을 사용할 때 필수 속성은 type 하나입니다 이 type에 따라서 추가되는 속성이 달라집니다 의 type은 여러 개가 있는데, 그중 몇 개만 알아볼게.. 2020. 11. 22. HTML 쉽게 배우기 | 오디오 <audio> 오랜만이에요 오늘은 웹 페이지에 음악을 넣는 방법을 알려드릴게요 가끔 네이버에서 웹툰 볼 때 배경 음악을 들어본 적 있나요? 웹툰 제목은 기억 안 나는데, 언제 한번 납량특집으로 나온 웹툰에서 공포감을 극대화하기 위해서 배경 음악을 사용한 적이 있었어요 주인공이 버스 타고 어디 가는데 터널 안에서 어린아이의 모습을 한 귀신이 사람들 죽이고 뭐 그런 내용이었는데요 배경 음악 때문에 훨씬 더 무섭게 본 기억이 있네요 솔직히 이처럼 정말 특별한 콘텐츠가 아니고서는 웹사이트에서 음악을 사용하지는 않죠 그 이유 중 하나는, 음악 파일이 너무 크면 로딩하는데 시간이 걸리고 또 그만큼의 데이터를 사용하기 때문이죠 "그럼 알아볼 필요 없네요?"라고 하시면 할 말 없네요 굳이 이유를 대자면.... 재밌으니까? 그러면 오.. 2020. 11. 15. 이전 1 2 3 다음 반응형
