본문 바로가기
반응형

분류 전체보기174

[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.
[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.
[HTML] HTML5 페이지 구조 HTML 5의 구조는 크게 헤더와 바디로 나뉜다 헤더는 웹 페이지의 타이틀, 링크 정보(CSS 파일, 폰트 등)이 주로 작성되고 바디는 실제 본문이 되는 부분으로 가장 많은 태그들이 작성되는 공간이다. 그러나 본 게시글에서는 대략적인 구조가 아닌 레이아웃(layout)에 대해 설명하도록 하겠다 element 명 element 표기 헤더 바디 내비게이션(메뉴) 사이드바 아티클 섹션(메인콘텐츠) 푸터 하나씩 차근차근 해보자! 헤더 헤더는 브라우저 탭에 표시되는 사이트 제목을 말한다. ▼ 푸터 푸터는 보여지는 단어처럼 header의 반대격인 foot에 위치한 다는 것이다. foot은 항상 아래쪽에 위치한다. ▼ 위의 결과에서는 footer의 위치가 위쪽에 있어서 무엇인지 파악하기 힘들것이다. 내 블로그의 fo.. 2019. 11. 21.
[HTML] HTML 파일 Chrome에서 실행하기 목표: 작성된 파일(e.g. Test.html)을 Chrome 브라우저에서 실행하기 요약 Configure Tast 실행: ctrl + shift + p tasks.json 파일 생성 및 수정 MSBuild 실행 tasks.json 파일에 Chrome 설정 반영하기 파일 선택 후 실행 HTML Extensions 설치, HTML 사용하기는 아래 게시글 참고! 2019/11/20 - [놀고있네/HTML] - [HTML] VS Code - HTML Extensions 설치, HTML 사용하기 [HTML] VS Code - HTML Extensions 설치, HTML 사용하기 목표: VS Code에서 HTML 사용하기 요약 EXTENTIONS > [HTML] 검색 > HTML Snippets 설치 EXPLOR.. 2019. 11. 20.
반응형

티스토리툴바