본문 바로가기
반응형

HTML31

[HTML] charset 의 중요성 ❤ 목표: charset은 왜 쓰는거죠?요약인코딩(Encoding)과 관련있음 안녕하세요 냥장판 입니다 HTML문을 살펴보면 상단에 아래와 같은 구문이 작성된 걸 아주 얼핏 보셨을거에요 그냥 무심코 지나쳤던 charset 의 소중함을 알려드릴게요! 1. 인코딩(Encoding)과 관련있음 인코딩은 내가 작성한 구문을 컴퓨터가 해석할 수 있게 변환 해주는거에요. 자세한 설명은 아래를 참고하시고요.2019/11/28 - [놀고있네/i18n] - [Characters] 글자가 깨져요[Characters] 글자가 깨져요목표: 글자가 깨지는 이유를 알아보자 요약 문제는 인코딩(encoding) 표준화된 인코딩 방법: Unicode 웹서핑 또는 문서를 열었을 때, 외계 문자를 본적 있을 것이다. 갑자기 컴터가 암에 걸.. 2020. 1. 16.
[HTML, Chrome] 크롬에서 HTML 작업하기 - 개발자도구 목표: 크롬에서 HTML 작업하는 방법 요약 크롬 내 개발자 도구를 실행한다 Sources > Filesystem에 workspace를 추가한다. 안녕하세요 냥장판 입니다 HTML 문서를 만들어서 테스트해보고 싶을 때, HTML 문서를 수정하고 싶을 때 특정 도구를 설치할 필요없이 Chrome에서 작업이 가능하답니다! 저는 HTML 문서 말고도 Java나 SQL문을 공부하고 있어서 별도의 에디터를 사용하고 있어요. 그런데 HTML 문서만을 위해 특정 에디터를 설치하는 건 너무 낭비같아서 Chrome을 활용한 방법을 알려드릴게요! 1. 크롬 내 개발자 도구 실행 크롬을 실행하면 페이지 오른쪽 상단에 설정 창을 클릭해주세요. 개발자 도구(Developer tools) 메뉴를 클릭해 주세요. 그러면 아래 그림.. 2020. 1. 14.
[HTML] Link 태그 사용하기 - 맨위로 이동 목표: Link 태그를 활용해서 맨위로 이동 구현하기 요약 id(아이디) 달아주기 href에 해당 id 링크하기 안녕하세요 냥장판 입니다 웹페이지를 쭉 내리다가 맨 위로(페이지 상단) 올라가고 싶을 때가 있죠? 웹서핑이든, 쇼핑이든 페이지 상단으로 올라갈 때 우리는 TOP 이미지나 버튼을 클릭합니다. 이번 게시글에서는 위로 올라가는 방법(?) 알려드릴게요! 일단 징그럽게 긴 텍스트를 입력합니다; 스크롤바가 있고, 밑으로 내려가다가 맨 위로 가려면 마우스를 계속 굴려야해요 1. id(아이디) 달아주기 각 요소마다 아이디(id)를 달아주는 거에요 이동하고 싶은 곳 속성에 id를 달아주세요 2. href 에 해당 id 링크하기 그래서 맨 아래에 내려갔을 때 Link 태그에서 해당 id를 가진 속성을 호출하는 .. 2020. 1. 11.
[HTML] Link 태그 사용하기 - download 속성 안녕하세요 냥장판 입니다 지난 게시글에서는 Link 태그 기본사용법에 대해서 살펴봤어요 2020/01/09 - [놀고있네/HTML & CSS] - [HTML] Link 태그 사용하기 - 기본편 [HTML] Link 태그 사용하기 - 기본편 목표: Link 태그 사용하기 요약 URL 하이퍼링크 걸기: href 이미지 하이퍼링크 걸기: href, img 안녕하세요 냥장판 입니다 HTML문서에는 Link 또는 Hyperlink 라는 태그가 있어요. 이 태그는 다른 html 문서나 이.. miaow-miaow.tistory.com 이번 시간에는 Link 태그로 이미지를 올려놓고, 이 이미지를 다운받을 때 사용하는 속성에 대해 알려드릴게요 1. download 속성 download 속성 사용방법은 아래와 같아요... 2020. 1. 10.
[HTML] Link 태그 사용하기 - 기본편 목표: Link 태그 사용하기 요약 URL 하이퍼링크 걸기: href 이미지 하이퍼링크 걸기: href, img 안녕하세요 냥장판 입니다 HTML문서에는 Link 또는 Hyperlink 라는 태그가 있어요. 이 태그는 다른 html 문서나 이미지 파일 등을 연결할 때 사용합니다. 말 그대로 링크한다는 개념이에요. 위에 그림을 보면 Hello 라는 컨텐츠에 a 태그와 href 속성을 사용해서 링크를 한다는 개념입니다. 자세히 살펴보죠 1. URL 하이퍼링크 걸기: href 링크(a) 태그는 반드시 href 속성이 설정되어 있어야됩니다. href 속성이 없다면, 다른 속성(target, download, rel, rev, hreflang, type, referrerpolicy)들도 사용할 수 없어요. 기본 .. 2020. 1. 9.
[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.
반응형

티스토리툴바