반응형 🎪 놀고있네/HTML & CSS42 [HTML] 엔티티, Entity란? 목표: 엔티티(Entity)에 대해서 파악하기 요약 마크업언어와 충돌하는 것을 방지하기 위해 HTML에서 규정한 문자열의 코드 규약 안녕하세요 냥장판 입니다 🐱👤🐱👤 이번 게시글에서는 HTML에서 엔티티(Entity)라는 것이 무엇인지 확인해보겠습니다. 엔티티는 HTML의 예약어(reserved characters) HTML 엔티티(Entity)는 HTML 문서를 작성할 때 태그(tag)와 혼용되는 것을 방지하기 위해 마크업과 충돌을 막기 위해 브라우저가 문자열을 해석하는데 혼란을 막기 위해 특정 문자열을 예약어(reserved characters)로 지정한 문자셋을 말한다. 즉, 특정 문자열을 코드로 표기한 집합이라고 생각하면 쉽다. 엔티티는 우리가 흔히 사용하는 특수문자(@#$#$^!), 환율($.. 2019. 12. 23. [HTML] Time 태그 사용법 알아보기 목표: Time 태그의 의미와 사용법을 알아보자. 이번 게시글에서는 HTML에서 흔히 사용하는 Time Tag에 대해서 알아보겠다. 1. Time Tag의 용도 Time tag는 일반 텍스트로 보이는 날짜와 시간 정보를 진짜 날짜, 시간 정보임을 HTML에게 알려주기 위해 사용한다. 따라서 HTML5을 지원하는 모든 브라우저는 Time tag를 통해 아 얘가 진짜 날짜, 시간 정보네? 라고 파악한다. 한 예로, Google에서 무언가를 검색했다. 올라온 게시글 중에 최근 1개월간 작성된 것을 확인하고 싶다. 그때 Google에서는 이 time 태그를 통해 우리에게 해당 게시글이 언제 작성이 된 것인지를 알려준다. Google과 같은 모든 브라우저가 이 Time 태그로하여금 사용자의 달력과 자동으로 연동하.. 2019. 12. 20. [HTML] FORM - 간단한 회원가입 페이지 만들기 목표: 회원가입 페이지를 구성하고 싶다 이전 게시글 에서는 HTML에 FORM 이라는 태그에 대해 소개했다. Form은 여러개의 컨트롤 요소들이 있고, 이 컨트롤 요소들을 조합해서 하나의 HTML 파일을 완성할 수 있다. 그럼 다양한 컨트롤 요소를 가지고, 아주 간단한 회원 가입 페이지를 만들어 보자. 컨트롤 요소 구성하기 데이터베이스나 서버로 연결하는 것은 나중에 생각하고, 정말정말 기본적인 회원가입 페이지를 구성하고 싶다. Form에 어떤 컨트롤 요소(control elements)가 필요할까? 모든 일의 시작과 기본은 구성하기 라고 생각한다!! 👍 예를 들어, 위와 같은 내용으로 회원가입 페이지를 구성하고 싶다면, 이 페이지에서 어떤 폼 컨트롤 요소가 사용되었는지 살펴보자. Email Input e.. 2019. 12. 17. [HTML] Form 이란? 폼 사용하기 목표: Form element에 대해 파악하기 요약 폼(FORM)은 컨트롤 요소(control elements)들로 구성된다. 우리가 특정 사이트에 로그인 할때, 계정 아이디와 비밀번호를 입력하는 화면을 수도 없이 많이 봤을 것이다. 거의 대부분의 사이트가 데이터베이스 서버로 나의 계정 정보를 가지고 있고, 나의 아이디, 비밀번호를 입력해서 서버에 내 정보가 있고, 이것이 일치하면 로그인을 할 수 있다. 아주 상식적인 얘기를 했다. 여기서 사용되는 HTML의 태그는 FORM 이다. HTML에서 FORM 이란, 사용자가 정보를 입력, 선택할 때 사용되는 태그이다. 즉, 서버로 입력한 데이터를 전송할 때 사용한다. 컨트롤 요소(control elements) 폼은 여러개의 컨트롤 요소로 구성된다. 컨트롤 요.. 2019. 12. 16. [HTML] lang attribute 활용하기 - 언어 선택 옵션 목표: 언어선택 옵션에서 lang attribute 활용하기 요약 element에 lang attribute 사용하기 direction auto로 설정하기 언어를 선택하거나 변경할 때 볼 수 있는 흔한 이미지들이다. 어떻게 처리하는 것이 바람직할까? 1. element에 lang attribute 사용하기 언어 특성을 반영하고 싶은 element에 lang 사용하기 2. direction auto로 설정하기(e.g. Arabic) 우선 direction을 설정하지 않고, language attribute를 아랍어로 설정하면 Google로 확인해본 결과 방향처리가 잘못되었어! 일부러 중간에 lang attribute를 사용하지 않아봤음 그럼 사용해보자 똑같은데? 이럴거면 왜 auto를 사용해? bi-dir.. 2019. 11. 26. [HTML] lang attribute 란? 목표: lang attribute 파악하기 Language attribute 란 Language attribute는 HTML로 작성된 웹페이지 내 텍스트의 기본 언어값을 선언하기 위해 사용함 검색엔진에서 html 문서의 언어특성을 파악할 때 사용됨 검색엔진의 major 언어와 같은 lang attribute를 검색함(e.g. 구글 코리아: lang="ko") 사용방법 문서의 기본 언어값을 나타내므로 html element에 사용하는 걸 권고함(by W3C) body element는 HTML문서 전체를 커버할 수 없음 그리고, 다른데 쓰지 말라고 안함 필요에 의하면 다른 elements에 사용 가능함 langauge attribute의 차이점을 보여주지 일반적으로 한국에서 Google을 사용해서 영어로된 .. 2019. 11. 25. [HTML] 언어별 폰트적용 (Attribute - class 활용) 목표: 언어별로 다양한 폰트 적용하기 요약 link 태그를 이용한 Web Fonts 연결(Google Fonts) style에서 class attribute 사용하기 class 사용하기(classname) 각 언어별로 어울리는 폰트가 있다는 것! HTML에서 언어별로 다양한 폰트를 적용하고 싶은데! 1. link 태그를 이용한 Web Fonts 연결(Google Fonts) Google에서 무료로 제공하는 Web Fonts를 이용해보자! 사용방법은 아래 게시글을 참고바람 2019/11/21 - [기타] - [Font] Google Fonts 사용하기 [Font] Google Fonts 사용하기 목표: Google에서 제공하는 Web Font를 사용해보자 요약 Google Fonts 접속 Language .. 2019. 11. 25. [HTML] 이미지 삽입하기 목표: 이미지를 넣어보자 요약 HTML 파일 내에 이미지 파일이 있는 경우: 이미지 이름 넣기 다른 서버에 있는 이미지를 사용하는 경우 이미지 URL을 링크하는 경우: hyperlink tag 사용 이번 게시글에서는 HTML 파일 내에 이미지 파일을 삽입하는 것을 해보려고 한다. a href에 대한 사용법은 아래 게시글 꼭 참고! 2020/01/09 - [놀고있네/HTML & CSS] - [HTML] Link 태그 사용하기 - 기본편 [HTML] Link 태그 사용하기 - 기본편 목표: Link 태그 사용하기 요약 URL 하이퍼링크 걸기: href 이미지 하이퍼링크 걸기: href, img 안녕하세요 냥장판 입니다 HTML문서에는 Link 또는 Hyperlink 라는 태그가 있어요. 이 태그는 다른 ht.. 2019. 11. 23. [HTML] List 사용하기 (😁 버킷리스트) 목표: HTML에서 List를 사용해보자 요약 Unordered lists Ordered lists Description lists 리스트(list )에도 다양한 종류가 있다. Name Tags Description Unordered lists 순서 없어, 글머리 기호있어 Ordered lists 순서 있어, 번호 매기기 있어 Description lists 순서 없어, 글머리, 번호 없어, 대신 들여쓰기 있어 1. Unordered lists 구조: unordered list > lists 글머리 기호 바꾸고 싶어! 글머리 기호랑, 글머리 기호가 달린 리스트는 영어로 뭐라고 하게? bullet, bulleted list 콩글리시 만들생각하지말구 외워주길 바란다. 글머리 기호를 그림으로 하고싶어!! ht.. 2019. 11. 22. 이전 1 2 3 4 5 다음 반응형
