HTML24 [HTML] 첫발 내딛기 <4. input 유형의 모든것> 1000의 얼굴을 가진 . 어디까지 사용해 봤니? 어느 정도 HTML에 익숙해져서 웹사이트를 만들어 보았다면 분명 을 사용해 봤을 것이다. 은 생각 외로 자주 사용되는 요소다. 우리가 흔하게 볼 수 있는 로그인 페이지에서, 날짜를 선택할 때, 여러 옵션을 선택할, 등등 사용되는 요소가 이다. 그럼 은 대체 어디까지 사용 가능할까? 지금부터 하나하나씩 의 다양한 유형들을 알아보자. 텍스트 유형 요소의 기본 유형은 텍스트이다. 하지만 텍스트도 다 같은 텍스트는 아니다. 일반 텍스트도 있고, 이메일도 있고, 비번도 있고. 텍스트 유형들은 다음과 같이 사용할 수 있다. 일반 텍스트 유형은 말 그대로 텍스트를 입력할 때 사용하는 유형이다. 이메일 유형은 이메일 주소를 입력할 때 사용하는 유형이다. 이 유형은 이메.. 2023. 2. 26. [HTML] 첫발 내딛기 <3. 시멘틱 요소> HTML의 시멘틱 요소 소개와 사용 방법 시멘틱 요소는 특정한 의미를 가지고 있는 요소를 말한다. 기본적으로 HTML의 거의 모든 요소는 시멘틱 요소라고 볼 수 있다. 시멘틱 요소가 중요한 이유는 접근성이다. 시멘틱 요소를 사용하면 쉽게 페이지의 접근성을 좋게 만들 수 있다. 페이지의 접근성이 좋으면 뭐가 좋을까? 당연히 장애를 가진 사용자들이 웹 사이트/어플을 사용하는데 도움이 된다. 둘째로는 SEO에 도움이 된다. 접근성과 SEO가 무슨 상관이 있을까? 이렇게 생각해 보자, 인터넷을 사용할 때 없으면 제일 불편한 것은 무엇일까? 시력이다. 시력이 없으면 웹 페이지에 있는 정보를 습득하고 이해하는데 많은 노력과 시간이 필요하다. 검색엔진을 다르게 보면 앞을 못 보는 정말 똑똑한 사용자다. 검색엔진이 페.. 2023. 2. 13. [HTML] 첫발 내딛기 <2. 요소와 속성> HTML 요소와 속성의 관계 HTML의 요소는 요소만 사용할 수도 있지만 속성을 같이 사용하면 요소를 사용할 수 있는 범위가 확 넓어진다. 수많은 요소들 중 속성 없이 사용할 수 있는 요소들도 있지만, 속성이 꼭 있어야 사용할 수 있는 요소들이 있다. 요소 타입 HTML에 있는 수많은 요소들은 크게 두 가지 타입으로 나눌 수 있다: 유저 상호작용 요소 그룹화 요소 유저 상호작용 요소 이 타입의 요소는 말 그대로 유저와 상호작용하는 요소다. HTML의 , , 등이 유저 상호작용 요소에 속한다. 그룹화 요소 그룹화 요소는 여러 요소들을 한 군데에 모아 그룹화 할 수 있는 요소다. 좀 더 쉽게 말하자면 여러 개의 요소들을 하나의 요소 안에 넣고 정리할 수 있는 요소다. HTML의 , , 등이 그룹화 요소에 속.. 2023. 1. 29. [HTML] 첫발 내딛기 <1. 구조 와 요소> HTML 구조 HTML은 우리가 브라우저에서 보는 내용들을 작성할 수 있는 웹 언어로 HTML 문서를 작성해서 정보들을 브라우저에 표시할 수 있다. HTML의 기초 구조는 4개로 나뉘어 있다. 문서 타입 문서의 시작 문서의 머리 문서의 몸 문서 타입 HTML에서 문서타입은 브라우저가 페이지를 열기 전에 필요로 한다. 이 문서 타입으로 브라우저는 이 HTML 문서를 어떻게 해석해야 하는지 알 수 있다. HTML5에서는 만 사용하면 된다. 문서의 시작 HTML문서는 시작점이 필요하다. 태그로 문서를 시작할 수 있다. 여기서 중요한 포인트! 시작이 있으면 끝도 있는 법. HTML문서의 끝은 으로 끝낼 수 있다. 문서의 머리 HTML문서의 머리에는 페이에 관한 정보들이 들어간다. 머리에는 대체로 페이지 제목, .. 2023. 1. 27. [HTML] srcset 속성을 사용해 웹 페이지의 성능과 사용자 경험을 개선해보자! srcset 속성은 HTML 이미지 태그에서 사용되는 속성으로, 여러 개의 이미지 파일을 지정하여 사용자의 기기 및 연결 속도에 따라 적절한 이미지를 선택할 수 있게 해준다. 이를 통해 웹 페이지의 로딩 속도를 향상시키고, 사용자 경험을 개선할 수 있다. srcset 속성을 사용하면 좋은 점: 웹 페이지의 로딩 속도 향상: 적절한 이미지만 로딩하기 때문에, 웹 페이지가 빠르게 접속될 수 있다. 사용자 경험 개선: 이미지의 크기가 적절한 기기에서 제대로 보일 수 있기 때문에, 사용자의 이미지 경험이 개선된다. 반응형 웹 디자인 지원: srcset 속성을 사용하면, 적절한 이미지를 선택할 수 있기 때문에, 반응형 웹 디자인을 지원할 수 있다. 용량 절감: srcset 속성을 사용하면, 적절한 이미지만 선택하.. 2022. 12. 21. HTML 쉽게 배우기 | 디브 <div> 사용법 HTML에서 는 뭐고 어떻게 사용하는가? 안녕하세요 오늘은 HTML 시리즈의 마지막으로 에 대해서 알아볼게요 HTML문서에 따르면 '는 여러 요소들을 하나의 섹션으로 그룹하는 컨테이너' 라고 소개합니다 쉽게 말해서 그냥 빈 박스에요 자체에는 스타일이나, 넓이, 높이, 등 아무것도 없습니다 그럼 를 왜 쓰냐? 정리와 컨트롤 입니다 를 사용하면 여러 요소들을 그룹지을수 있고, HTML 코드를 좀더 깔끔하게 정리할수 있습니다 이렇게 정리된 요소들은 주로 CSS를 사용해서 예쁘게 꾸미는데, CSS는 선택자(selector)를 사용해서 스타일할 요소를 고를수 있습니다 요소들이 로 정리되 있으면 CSS 선택자를 사용해서 콕집어 스타일링하기 쉬워집니다 아직 잘 이해가 안가시나요? 비슷한 예로 누구나 한번쯤은 해본 서.. 2020. 12. 28. HTML 쉽게 배우기 | 표 <table> 만들기 2 HTML 표()의 열/행에 제목 넣기, 그리고 표()의 구조 알아보기 안녕하세요, 오늘은 저번에 알아본 의 나머지 부분에 대해서 알아볼게요 우리가 아는 표에는 제목이 있어요 예를 들어서, 시간표에 각 행의 제목은 요일, 각 열의 제목은 수업시간 이렇게 각 행과 열에 제목이 있어서 우리가 표를 봤을 때 이게 어떤 내용의 표인지 쉽게 알아볼 수 있죠 저번 편에서 시간표를 만들 때 제목을 안 넣고 만들었는데 오늘, 저번편에서 만든 시간표에 제목을 넣어 볼게요 표의 행/열에 제목 넣기 표에서 제목은 를 사용해서 넣을 수 있습니다 와 마찬가지로 는 안에서 사용합니다 저번에만 든 시간표의 첫 번째 줄에 를 사용했었는데 그 를 로 바꿔주면 이렇게 글씨가 굵어지는걸 볼 수 있습니다 이렇게 글씨가 굵어 짐으로써 제목을 .. 2020. 12. 27. HTML 쉽게 배우기 | 표 <table> 만들기 안녕하세요 이번 편 에서는 HTML에서 표 만드는 방법을 알아볼게요 표는 정보를 열과 행으로 나눠서 전달할 때 많이 사용되는 요소입니다 이렇게 설명하면 뭔가 생소하고 처음 들어보는 거 같죠? 간단하게 설명하자면 우리가 알고 있는 시간표, 가계부, 등이 표로 만들어져 있습니다 그러면 표를 HTML에서 만들려면 어떤 요소/요소들이 필요한지 알아볼게요 먼저 "이 내용들이 표다"라고 지정할 이 필요합니다 그리고 "이건 표의 열 이다"라고 지정할 , "이건 표의 행이다"라고 지정할 가 있습니다 **'열'과 '행'이 헷갈리시는 분들은, '열'은 가로줄, '행'은 세로줄이라고 생각하시면 쉬우실 거예요** 이번 편에서는 정말 간단한 시간표 2개를 만들면서 HTML에서 어떻게 표를 만들고 열과 행을 어떻게 사용할 수 있.. 2020. 12. 21. HTML 쉽게 배우기 | 양식 <form> 2 안녕하세요 오늘은 에서 사용되는 , , 그리고 에 대해서 알아볼게요 이력서 같은 양식을 보면 인적사항, 학력사항, 자격증, 등등 나눠져있는걸 볼수있죠 이렇게 각 섹션을 만들때 을 사용합니다. 의 정의는 양식에 비슷한 내용들을 그룹화 하는데 사용되는 요소입니다. 이 요소를 사용하면 요소 안에있는 내용 주위에 박스를 그립니다. 이 박스를 그림으로서 양식의 내용들이 어떤식으로 그룹됐는지 알아보기 쉬워집니다. 양식을보면 각 섹션에 제목이 있는걸 볼수있습니다 으로 양식의 내용들을 나누었으면, 로 나누어진 각 그룹에 제목을 붙일수 있습니다 이 요소는 의 제목을 정하는 요소이기 때문에 밖에서 사용하면 그 의미를 잃어버립니다. 그렇게 때문에 안에서 사용합니다. 종이 양식에서는 볼수 없지만, 온라인 양식에서는 한번쯤은 .. 2020. 12. 12. 이전 1 2 3 다음 반응형
