반응형 🎪 놀고있네148 [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. [VS Code] JAVA Project 만들기 목표: Java project 만들기 요약 ctrl + shift + p java: Create Java Project 선택 java project 명 입력 src > app 폴더 확인 실행하기 1. ctrl + shift + p ctrl + shift + p 입력하면, 실행할 수 있는 커맨드가 보여진다. 여기에 java를 타이핑하면 java와 관련된 명령어들이 보여진다. 2. java: Create Java Project 선택 명령어 들에서 java: create java project를 선택한다. 해당 프로젝트와 관련된 폴더를 생성한다. 폴더 선택 후 만들고자 하는 java project 명 입력(e.g. HelloWorldGUIApp)한다. 3. java project 명 입력 java projec.. 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. [HTML] HTML5 페이지 구조 HTML 5의 구조는 크게 헤더와 바디로 나뉜다 헤더는 웹 페이지의 타이틀, 링크 정보(CSS 파일, 폰트 등)이 주로 작성되고 바디는 실제 본문이 되는 부분으로 가장 많은 태그들이 작성되는 공간이다. 그러나 본 게시글에서는 대략적인 구조가 아닌 레이아웃(layout)에 대해 설명하도록 하겠다 element 명 element 표기 헤더 바디 내비게이션(메뉴) 사이드바 아티클 섹션(메인콘텐츠) 푸터 하나씩 차근차근 해보자! 헤더 헤더는 브라우저 탭에 표시되는 사이트 제목을 말한다. ▼ 푸터 푸터는 보여지는 단어처럼 header의 반대격인 foot에 위치한 다는 것이다. foot은 항상 아래쪽에 위치한다. ▼ 위의 결과에서는 footer의 위치가 위쪽에 있어서 무엇인지 파악하기 힘들것이다. 내 블로그의 fo.. 2019. 11. 21. 이전 1 ··· 12 13 14 15 16 17 다음 반응형
