HTML 기본 문서 구조

HTML에서 태그는 <와 >를 이용해서 구분한다.

 

HTML은 대문자와 소문자를 구분하지 않지만, HTML5 표준 명세에서는 태그와 태그안에 사용하는 속성들은 모두 소문자로 사용할 것을 권장한다.

 

또한 HTML은 여는태그와 닫는태그가 있으며, 여는(시작)태그가 <h1>이면 </h1>으로 끝나야한다.

닫는게 필수적인 태그들은 대부분 자동완성을 지원하기 때문에 여러 코드를 짜면서 배우면 좋다.

 

비주얼 스튜디오 코드의 상단 메뉴에서 파일-새파일을 선택하면 빈문서 창이 열리는데 이걸 이용해서 저장하고 저장 단축키는 ctrl+s이다.

<!doctype html><!-- DTD : Document type declaration -->
<html lang="ko">
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>내가 처음 만드는 HTML 문서</title>
    <!-- <meta name='viewport' content='width=device-width, initial-scale=1'> -->
</head>
<body>
    <h1>시간이란...</h1>
    <p>내일 죽을 것처럼 오늘을 살고<br>영원히 살 것처럼
        &lt; 내일을 꿈꾸어라</p>

        <!-- &lt;는 왼쪽꺽쇠 &gt;는 오른쪽꺽쇠 -->
    <img src="images/first.jpg" alt="민들레 홀씨">
</body>
</html>

코드를 짜고 alt+b를 누르면 아래와 같은 화면이 뜬다 이미지는 따로 넣은 것이다.

코드를 보면 맨 위에<!doctype>이 있는데 이것은 문서 유형을 지정하는 선언문이다.

<html lang="ko">는 웹 문서 시작을 알리는 태그이다.

코드 de en fr ja ko zh
언어 독일어 영어 프랑스어 일본어 한국어 중국어

ko위치에 이런 코드를 넣으면 해당 언어표기가 되는 것이다. 물론, 저 표시된 국가의 언어만 사용할 수 있는것은 아니나, 검색범위를 저 언어로 좁혀서 검색할때 좀 더 잘나온다.

문서의 대강의 틀을 결정하는 <head>태그안의 가장 중요한 태그중의 하나는 <title>이다.

<title> 문서제목 </title>로 쓰인다.

 

<meta> 태그 - 문자 세트를 비롯한 문서 정보

텍스트를 덩어리로 묶어주는 태그

텍스트를 블록(block)으로 묶어 처리하는 태그

기본형 역할 설명
<hn> 제목 </hn> 제목 표시하기 제목 테스트는 보통 상단에 위치하며, n은1~6까지 들어갈 수 있고 숫자가 높을수록 크기가 커진다.
<p> 텍스트 </p> 단락 만들기 앞뒤에 줄바꿈이 있는 텍스트 덩어리이다.
많이 사용하는 텍스트이다.
<br> 줄 바꾸기 웹 브라우저 창에서 줄 바꾸기 위한 태그이다
<hr> 수평줄 수평줄을 삽입할 때 사용한다.
<blockquote> 인용 내용 </blockquote> 인용문 인용문을 넣기 위한 텍스트
<pre>텍스트</pre> 입력하는대로 화면에 표시
<preformat>
소스의 공백이 그대로 화면에 표시된다.
<code>, <samp>, <kbd>같은 태그를 사용해 프로그램 소스를 표시할때도 사용한다.

 

 

텍스트를 한 줄로 표시하는 태그

줄바꿈 없이 텍스트를 표시하는 '인라인 레벨'태그이며, 이 태그들은 닫는 태그를 생략할 수 없음.

기본형 역할 설명
<strong> 텍스트 <strong> 굵게+강조표시 낭독기에서 강조됨, 경고나 주의사항에 사용
<b> 텍스트 </b> 굵게표시 문서의 키워드 표시
<i> 텍스트 </i> 이탤릭체로 표시
<italic>
텍스트를 비스듬히 이탤릭체로 표시
<em> 텍스트 </em> 이탤릭체로 강조
<emphasis>
비스듬히 강조표시
<q> 내용 </q> 인용 내용 표시
<quot>
줄바꿈 없이 한줄로 표시됨
<mark> 텍스트 </mark> 형광펜 효과 배경이 노란색으로됨HTML5부터 적용
<span> 내용 </span> 줄바꿈 없이 영역 묶기 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어서 스타일을 적용할 때 표시
<ruby> 내용 <rt> 주석 </rt> </ruby> 동아시아 글자 표시하기 글자에 주석을 표시하기 위한 용도(한문을 위에 히라가나로 표시하는 등)

 

기타 텍스트 관련 태그

기본형 역할 설명
<abbr title=""> 텍스트 </abbr> 약자 표시 title을 함께 사용가능
<cite> 텍스트 </cite> 참고내용 표시 웹문서나 포스트에 사용
<code>텍스트 </code> 소스 코드 컴퓨터 인식을 위한 소스 코드
<kbd> 텍스트 </kbd> 사용자 입력 내용 키보드 입력이나 음성 명령 같은 사용자 입력 내용
<small> 텍스트 </small> 작게 표시 부가 정보처럼 작게 표시해도 되는 텍스트에 사용
<sub> 텍스트 </small> 아래첨자 아래첨자
<sup> 텍스트 </sup> 위첨자 위첨자
<s> 텍스트 </s> 취소선 글 가운데 가로줄 표시
<u> 텍스트 </u> 밑줄 글 아래 가로줄 표시

 

 

목록을 만드는 태그

기본형 역할 설명
<ul> 내용 </ul> 목록 순서가 필요하지 않은 목록(unordered list)만들때 사용
<li> 텍스트 </li> 각 목록의 내용 표시 목록 안에서 원이나 사각형같은 불릿(bullet)이 붙는다.
<ol> 내용 </ol> 순서가 필요한 목록 순서가 필요한 목록을 만들 때 사용, type, start, reversed같은 태그 속성 사용가능
<dl>
     <dt> 제목 </dt>
     <dd> 설명 </dd>
     ....
</dl>
설명 목록 만들기 <dl>태그는 사전 구성처럼 '제목'과 '설명'이 한 쌍인 설명 목록(description list)을 만듭니다.
<dt> 태그는 제목을 만듭니다
<dd> 태그는 설명을 표시합니다.

 

 

표를 만드는 태그

기본형 역할 설명
<table>
    <tr>
        <td> 내용 </td>
        <td> 내용 </td>
        ...
   <tr>
    ...
</table>
표 만드는 용도 <table>은 표를 만드는 태그이다.
<tr>은 열을 나타내는 태그이다.
<td>는 행의 1칸을 나타낸다.
colspan, rowspan 속성 - 행 또는 열 합치기
<caption> 표 제목 </caption>
<figcaption> 표 제목 </figcaption>
표에 제목 붙이기 <caption>태그는 <table> 태그 바로 다음에 사용한다. 표의 위쪽 중앙에 표시되며 안에 다른 태그를 사용해 여러줄로 표시하거나 텍스트를 꾸밀 수 있다.
<figcaption> 태그는 설명글을 붙이고 싶은대상을 <figure> 태그로 감싸고 <figcaption>태그를 이용해 제목이나 설명글을 입력한다.
<thead>
    <tr> ... </tr>
</thead>
<tbody>
    <tr> ... </tr>
</tbody>
<tfoot>
    <tr> ... </tr>
</tfoot>
표 구조 정의 일부 표에서는 제목이 표시된 세로가 자료가 표시된 셀 외에도 표 아래쪽에 합계나 요약을 표시하기도 하는데, 이런 표의 각 셀은 제목이 있는 부분과 실제 내용이 있는 본문 그리고 요약 부분이 있는 부분으로 표의 구조를 나눠놓는 것이좋다.
본문이랑 요약부분은 위치가 바뀌어도 된다.
<col> 여러 열 묶어 스타일 지정 한 열에 있는 모든 셀에 같은 스타일을 적용,
<span>과 함께 사용 가능
<colgroup>
    <col>
    ...
<colgroup>
여러 열 묶어 스타일을 지정 <colgroup>태그 안에 묶는 열의 개수만큼 <col>태그를 넣어주면 된다.
<caption>태그 뒤와 <tr>,<td>전에 사용해야한다.
태그안의<col>개수와 단독으로 사용한<col>의 갯수가 같아야 한다.

 

 

 

 

'HTML > 텍스트 관련 태그들' 카테고리의 다른 글

텍스트관련태그 예제  (0) 2021.08.08

https://validator.w3.org/

 

The W3C Markup Validation Service

Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.

validator.w3.org

여기서 체크하면 된다.

 

https://www.w3schools.com/

 

W3Schools Online Web Tutorials

HTML Example:

This is a heading

This is a paragraph.

Try it Yourself CSS Example: body {   background-color: lightblue; } h1 {   color: white;   text-align: cente

 

www.w3schools.com

 

 

 

여기서 html콘솔 에관한 것 확인도 가능하다

APK

안드로이드 응용 프로그램 패키지(영어: Android application package, APK)는 안드로이드 소프트웨어 미들웨어 배포에 사용되는 패키지 파일이며, '.apk'확장자를 가진다. APK 파일은 우분투 같은 데비안 기반 운영 체제에서 사용하는 뎁 패키지 마이크로소프트 윈도우에서 사용하는 MSI 패키지와 같은 설치 파일과 비슷하다. APK 파일을 만들려면, 안드로이드용 프로그램을 먼저 컴파일한 후, 모든 파일들을 하나의 패키지 파일로 모은다. APK 파일은 해당하는 프로그램의 모든 코드를 포함하며, 자원, 정보, 인증서 및 매니페스트 파일 (en:Manifest file) 등을 포함한다.

안드로이드 응용 프로그램 패키지의 확장자는 .apk ZIP파일 기반인 JAR를 기반으로 하며, 압축 파일의 한 종류이다. MIME 유형은 application/vnd.android.package-archive이다.

 

 

ios jailbreak

iOS 탈옥(영어: iOS jailbreak)은 iOS의 샌드박스 제한을 풀어 타 회사에서 사용하는 서명되지 않은 코드를 실행할 수 있게 하는 과정을 말한다. 시디아의 개발자인 제이 프리맨은 전체 아이폰 중 10%가 탈옥되었다고 추정한다.

 

탈옥을 하는 이유 중 하나는 애플과 앱 스토어가 막아 놓은 컨텐츠에 접근하기 위해서이다.[2] 애플은 앱 스토어에 앱을 등록하기 전에, 먼저 앱이 정책에 부합하는지를 검열하는 절차를 가진다.[3] 하지만, 애플의 검열 기준은 안전성과 보안 문제만에 관한 것은 아니며, 이 기준은 상당히 모호하고 독단적이라는 비판을 받는다.[4] 검열에서 삭제된 앱들을 이용하기 위해서,[5] 사용자들은 탈옥을 함으로써 앱스토어를 이용하지 않고 애플리케이션을 이용할 수 있다. 또한 탈옥을 함으로써 아예 애플에게 검열받지 않은 앱,[6] 즉 사용자가 직접 제작한 앱이나 인터페이스를 사용할 수 있다.

시디아를 통해서 다운받는 애플리케이션들은 애플의 앱스토어 규정을 완전히 무시해도 되기 때문에, 시디아의 대부분의 애플리케이션들은 그 자체로 작동하는 것이 아니라, 앱스토어의 다른 앱들을 해킹하는 용도로 쓰인다.[7] 유저들은 이러한 탈옥 앱을 설치함으로써 인터페이스를 개인화하거나,[7]필요한 기능들을 추가하거나 고칠 수 있으며,[8] 직접 파일에 엑세스함으로써 앱을 좀 더 손쉽게 수정할 수 있다.[9][10] 중국사람들은 애플것보다 쓰기 쉬운 중국어 자판을 설치하기 위해 탈옥을 하기도 한다.[11]

 

iOS 탈옥 - 위키백과, 우리 모두의 백과사전

iOS 탈옥(영어: iOS jailbreak)은 iOS의 샌드박스 제한을 풀어 타 회사에서 사용하는 서명되지 않은 코드를 실행할 수 있게 하는 과정을 말한다. 시디아의 개발자인 제이 프리맨은 전체 아이폰 중 10%가

ko.wikipedia.org

 

 

 

루팅

루팅(영어: rooting)은 모바일 기기에서 구동되는 안드로이드 운영 체제 상에서 최상위 권한(루트 권한)을 얻음으로 해당 기기의 생산자 또는 판매자 측에서 걸어 놓은 제약을 해제하는 행위를 가리키는 말이다.

이 루팅을 통해 해당 기기의 사용자들은 생산자 또는 판매자 측에서 공식 제공하는 버전보다 더 높은 버전의 안드로이드나 CyanogenMod처럼 사용자들이 임의로 개조한 안드로이드를 설치 및 구동할 수 있으며, 사용자가 속한 지역의 안드로이드 사용자들에게 판매하지 않는 프로그램들을 구입하거나 일반 사용자 권한 이상의 권한 등을 필요로 하는 프로그램들을(백업 프로그램, 하드웨어 해킹 프로그램 등) 사용할 수 있다.

안드로이드 특성상 반드시 최고권한(관리자)이 필요한 동작(카메라무음, 파일접근, 시스템앱삭제 등등)을 수행하고자 할 때 진행된다. 한 번 루팅된 안드로이드는 언루팅 하지 않는 이상 몇 번이고 supersu를 지웠다 설치했다 해도 루팅은 그대로 유지된다.

기기의 생산자 또는 판매자 측에서 걸어 놓은 제약을 해제한다는 면에서 iOS 관련 용어인 탈옥(Jailbreaking)과 비슷하지만 안드로이드 루팅은 서드파티 프로그램 설치를 막아 놓은 AT&T 안드로이드 폰들을 제외하고는[1] 루팅 없이도 구글 플레이에서 제공하지 않는 프로그램을 따로 구할 필요가 없다는 차이점이 있다.

 

 

 

 

넷스케이프(몰라도된다.)

 

 

서브라임텍스트

서브라임 텍스트(Sublime Text)는 파이썬 API용으로 작성된 사유 크로스 플랫폼 소스 코드 편집기이다. 수많은 프로그래밍 언어 마크업 언어를 네이티브로 지원하며 플러그인을 사용하여 사용자에 의해 기능을 확장할 수 있다. (플러그인은 일반적으로 자유 소프트웨어 라이선스로 공동체에 의해 빌드, 관리된다)

 

 

 

아톰

아톰(Atom)은 자유-오픈 소스 형태의[4][5] OS X, 리눅스, 윈도우[6] 문서  소스 코드 편집기이다. Node.js로 작성된 플러그인, 깃허브가 개발한 임베디드 깃 관리 지원을 포함한다. 대부분의 확장 패키지는 자유 소프트웨어 라이선스를 취하며 커뮤니티가 만들고 관리하고 있다.[7] 아톰은 크로미엄에 기반을 두며 커피스크립트로 작성되어 있다.[8] IDE로 사용할 수도 있다. 2015년 6월 25일에 정식 1.0 버전이 출시되었다.[9]

 

아톰 (문서 편집기) - 위키백과, 우리 모두의 백과사전

아톰 (문서 편집기) 위키백과, 우리 모두의 백과사전.

ko.wikipedia.org

 

 

 

팬그램

팬그램(pangram)은 알파벳의 모든 글자를 사용해 만든 문장을 뜻한다. 엄격하게 한 글자를 한 번만 사용한 경우도 있고, 복수 사용을 허용한 경우도 있다. 즉, 글이 최대한 짧으면서 모든 글자를 사용했을 때 가치가 높아진다.

그 자체로 언어유희로서 창작되고 활용되기도 하며 장비를 테스트할 때도 이용된다. 특히 시각 디자인에서 폰트 모양을 보여줄 때 요긴하게 사용된다. 레이아웃을 보여줄 때 사용하는 의미 없는 글줄인 로렘 입숨과 성격이 비슷하다.

팬그램의 반대 개념으로, 알파벳의 특정 글자를 사용하지 않고 문장을 만드는 것을 리포그램이라고 하며, 이쪽은 오히려 글이 길어야 가치가 높아진다. 이는 KBS의 스펀지 95회 방송분에서 언급된 적이 있다.

http://guny.kr/stuff/klorem/

 

한글 Lorem Ipsum (간세네)

로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종

guny.kr

 

 

 

브라우저 엔진

트라이던트 엔진은 이질적인 엔진이다.

브라우저 엔진(browser engine)은 주된 모든 웹 브라우저의 핵심이 되는 소프트웨어 구성 요소이다. 브라우저 엔진의 주된 역할은 HTML 문서와 기타 자원의 웹 페이지 사용자의 장치에 상호작용적인 시각 표현으로 변환시키는 것이다.

 

 

 

 

데이트 피커(예전에쓰던거)

jQuery UI(제이쿼리 UI)는 jQuery(자바스크립트 라이브러리), 종속형 시트(CSS), HTML로 구현된 GUI 위젯, 애니메이션 시각 효과, 테마의 묶음이다.[4] 자바스크립트 애널리틱스 서비스 Libscore에 따르면 jQuery UI는 상위 100만 개의 웹사이트 중 197,000곳 이상에서 이용되며 2번째로 유명한 자바스크립트 라이브러리로 분석되었다.[5] 저명한 사용처는 핀터레스트, 페이팔, IMDb, 허핑턴 포스트, 넷플릭스가 포함된다.[6]

jQuery와 jQuery UI 둘 다 MIT 허가서를 통해 jQuery 재단에 의해 배급되는 자유-오픈 소스 소프트웨어이다. jQuery UI는 2007년 9월 처음 게시되었다.[3][7]

 

 

jQuery UI - 위키백과, 우리 모두의 백과사전

jQuery UI(제이쿼리 UI)는 jQuery(자바스크립트 라이브러리), 종속형 시트(CSS), HTML로 구현된 GUI 위젯, 애니메이션 시각 효과, 테마의 묶음이다.[4] 자바스크립트 애널리틱스 서비스 Libscore에 따르면 jQue

ko.wikipedia.org

https://jqueryui.com/datepicker/

 

Datepicker | jQuery UI

Datepicker Select a date from a popup or inline calendar The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (b

jqueryui.com

 

modal

이미지 하이라이트 대신 사용 같은창이어도 사용자가 다른 느낌을 받도록

아래사이트에서 관련 내용 확인가능

https://www.w3schools.com/

 

W3Schools Online Web Tutorials

HTML Example:

This is a heading

This is a paragraph.

Try it Yourself CSS Example: body {   background-color: lightblue; } h1 {   color: white;   text-align: cente

 

www.w3schools.com

 

출처 : 위키백과

 

'HTML > 용어' 카테고리의 다른 글

HTML용어2  (0) 2021.08.05

+ Recent posts