반응형 HTML31 [JS] JavaScript Engine의 종류 목표: JavaScript에 대해 알아보자. 요약 JavaScript는 Client-side scripting language이다. JavaScript를 해석하는 Engine(V8, Rhino, Chakra, Webkit 등)은 여러가지가 있다. 웹 페이지는 HTML, CSS, JavaScript로 구성되어있다. 1) HTML은 웹페이지의 컨텐츠를 제공한다. 2) CSS는 HTML의 구성요소들에 색상, 글씨체와 같은 디자인 요소를 관리한다. 3) JavaScript는 웹페이지와 사용자 간에 상호작용을 위한 동작(behavior) 중심의 스크립트 언어이다. 1. JavaScript는 Client-side scripting language JavaScript는 client-side에 사용되는 스크립트 언어이.. 2019. 12. 13. [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. [HTML] Table 삽입하기 🐱🏍🐱🏍(+ caption, span 등) 목표: HTML문서에 Table을 삽입해보자 요약 기본 스타일 테이블 표 스타일 지정 캡션 넣기 위에 그림에서 보이는 것처럼 테이블 태그의 종류는 : table tag/elements : table row : table column : table header : caption 이게 기본임 1. 기본 스타일 테이블 기본스타일 테이블은 보시는 바와같이 좀.. 구리다 2. 표 스타일 지정 header에 표 스타일을 지정해줄 수 있다. 아재력 상승 🐱🏍🐱🏍🐱🏍 아재력 상승 🐱🏍🐱🏍🐱🏍🐱🏍🐱🏍🐱🏍 style="display:inline-block;width:740px;height:200px" data-ad-client="ca-pub-9512983930357661" data-ad-slot="5785.. 2019. 11. 22. [HTML] HTML Tags/Elements, Attributes 구분하기 목표: HTML에서 Tags, Elements, Attributes 구분하기 요약 Tag나 Elements 나 동일한 의미로 사용 Attributes는 Tag/Elements의 속성을 정의함 Elements Elements는 HTML 문서를 이루는 개별적으로 동작하는 컴포넌트/명령어 HTML은 Element들로 이뤄져있고, Elements은 Nested 구조가 가능해 뭔말이냐고? Elemnet 안에 Element가 들어가 있을 수 있다는 말이다. style="display:inline-block;width:740px;height:200px" data-ad-client="ca-pub-9512983930357661" data-ad-slot="5785466884"> Tag Tag는 Elements 와 혼용해서.. 2019. 11. 21. [Font] Google Fonts 사용하기 목표: Google에서 제공하는 Web Font를 사용해보자 요약 Google Fonts 접속 Language 선택 폰트 선택 코드 복사 1. Google Fonts 접속 Google Fonts URL: https://fonts.google.com/ Google 에서는 무료로 사용할 수 있는 폰트들을 제공한다. 역시 구글구글하는 이유가 있다 ❤ Google Fonts URL에 들어간다. 2. Language 선택 언어별로 구분할 수도 있고, 폰트 특성에 따라서도 선택이 가능하다. 가장 널리 사용되고 있는 Latin 을 선택해봤다. Latin 언어를 제공하는 폰트 중 (거의 모든 폰트는 기본적으로 라틴을 제공한다.) 마음에 드는 폰트를 선택한다. ** 참고 사항 폰트 > SEE SPECTIMEN 클릭하면 .. 2019. 11. 21. 이전 1 2 3 4 다음 반응형
