let a= 221;
let b=a-5;
a=4;
console.log(b,a);

//변수를 초기화하거나 생성할때는 let을 사용 한번선언하면 참조만 하면됨


바닐라자바스크립트에서 let은 변수를 초기화하거나 생성할때 사용된다.

출력결과는 


216, 4


a =221대입  

b=216 값인 상태에서

a=4로 다시치환

이후

console.log(b,a);에서는

바뀐값 216, 4 가출력된다.


var=varible 이라는 뜻으로 let처럼 변수로 사용된다.


이것과 반대되는 개념이 const인데 상수=변하지않는값

으로 알면된다, 상수는 다른사람들이 값을 변경하고 싶어도 값을 변경할수 없는 값으로

const a =216;

let b =216-a;

a=4;

console.log(b,a);

출력하면 에러가 출력된다 이유는 const로 초기정의를 했기때문이다.


HTML 색상은 미리 정의 된 색상 이름 또는 RGB, HEX, HSL, RGBA, HSLA 값을 사용하여 지정됩니다.


색상 이름

HTML에서는 색상 이름을 사용하여 색상을 지정할 수 있습니다.

토마토
주황색
도저 블루
중간시 그린
회색
슬레이트 블루
제비꽃
라이트 그레이

직접 해보기»

HTML은 140 개의 표준 색상 이름을 지원 합니다 .


배경색

HTML 요소의 배경색을 설정할 수 있습니다.

안녕하세요 세계



Lorem ipsum dolle 앉아 amet, consipetuer adipiscing elit, sed diam 딱정벌레, 노랑, 흰색, 미소, 미소, 그런 다음, 최소한의 노력으로 운동을 시작하십시오.

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

직접 해보기»

텍스트 색상

텍스트 색상을 설정할 수 있습니다.

안녕하세요 세계

Lorem ipsum dolle 앉아 amet, consipetuer adipiscing elit, sed diam 딱정벌레, 노랑, 흰색, 미소, 미소,

그런 다음, 최소한의 노력으로 운동을 시작하십시오.

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
직접 해보기»

테두리 색

테두리 색상을 설정할 수 있습니다.

안녕하세요 세계

안녕하세요 세계

안녕하세요 세계

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
직접 해보기»

색상 값

HTML에서는 RGB 값, HEX 값, HSL 값, RGBA 값 및 HSLA 값을 사용하여 색상을 지정할 수도 있습니다.

색상 이름 "토마토"와 동일 함 :

rgb (255, 99, 71)
# ff6347
hsl (9, 100 %, 64 %)

색 이름 "토마토"와 동일하지만 50 % 투명 :

rgba (255, 99, 71, 0.5)
hsla (9, 100 %, 64 %, 0.5)

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
직접 해보기»


RGB 값

HTML에서는 다음 공식을 사용하여 색상을 RGB 값으로 지정할 수 있습니다.

rgb ( 빨강, 초록 , 파랑 )

각 매개 변수 (빨강, 녹색 및 파랑)는 0에서 255 사이의 색상 강도를 정의합니다.

예를 들어, 빨간색은 가장 높은 값 (255)으로 설정되고 다른 값은 0으로 설정되므로 rgb (255, 0, 0)는 빨간색으로 표시됩니다.

색상을 검정색으로 표시하려면 모든 색상 매개 변수를 다음과 같이 0으로 설정해야합니다. rgb (0, 0, 0).

흰색을 표시하려면 모든 색상 매개 변수를 다음과 같이 255로 설정해야합니다. rgb (255, 255, 255).

아래의 RGB 값을 혼합하여 실험 해보십시오.




16 진수 값

HTML에서는 다음 형식의 16 진수 값을 사용하여 색상을 지정할 수 있습니다.

rrggbb

rr (빨강), gg (녹색) 및 bb (파랑)는 00에서 ff 사이의 16 진수 값입니다 (십진수 0-255와 동일).

예를 들어, 빨간색은 가장 높은 값 (ff)으로 설정되고 다른 값은 가장 낮은 값 (00)으로 설정되므로 #ff0000은 빨간색으로 표시됩니다.




HSL 가치

HTML에서는 색상, 채도 및 명도 (HSL)를 사용하여 다음과 같은 형식으로 색상을 지정할 수 있습니다.

hsl ( 색조 , 채도 , 명도 )

색조는 0에서 360까지의 색상환에 대한 정도입니다. 0은 빨간색이고 120은 녹색이며 240은 파란색입니다.

채도는 백분율 값이고, 0 %는 회색 음영을 나타내며 100 %는 풀 컬러입니다.

밝기도 백분율, 0 %는 검은 색, 50 %는 밝거나 어두움, 100 %는 흰색입니다.



가벼움

밝기는 색상을 지정하려는 빛의 양으로 표시 할 수 있습니다. 0 %는 빛이 없음을 의미하고 50 %는 50 %의 빛을 의미하고 100 %는 완전한 밝기를 의미합니다.






RGBA 값

RGBA 색상 값은 색상의 불투명도를 지정하는 알파 채널이있는 RGB 색상 값의 확장입니다.

RGBA 색상 값은 다음과 같이 지정됩니다.

rgba ( 빨강, 초록 , 파랑, 알파 )

알파 매개 변수는 0.0 (완전 투명)과 1.0 (투명하지 않음) 사이의 숫자입니다.





HSLA 가치

HSLA 색상 값은 색상의 불투명도를 지정하는 알파 채널이있는 HSL 색상 값의 확장입니다.

HSLA 색상 값은 다음과 같이 지정됩니다.

hsla ( 색조, 채도 , 밝기, 알파 )

알파 매개 변수는 0.0 (완전 투명)과 1.0 (투명하지 않음) 사이의 숫자입니다.




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

HTML 스타일 - CSS  (1) 2018.12.21
HTML 주석  (0) 2018.12.18
HTML 인용문 및 인용문 요소  (0) 2018.12.18
HTML FORMATING 텍스트 서식지정  (0) 2018.12.18
HTML 스타일  (0) 2018.12.18

HTML 주석


주석 태그는 HTML 소스 코드에 주석을 삽입하는 데 사용됩니다.


HTML 덧글 태그

다음 구문을 사용하여 HTML 소스에 주석을 추가 할 수 있습니다.

<!-- Write your comments here -->

열기 태그에는 느낌표 (!)가 있지만 닫기 태그에는 느낌표가 없습니다.

참고 : 브라우저는 주석을 표시하지 않지만 HTML 소스 코드를 문서화하는 데 도움을 줄 수 있습니다.

의견을 통해 HTML에 알림 및 미리 알림을 추가 할 수 있습니다.

<!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here -->
직접 해보기»

HTML 코드 줄을 한 번에 하나씩 주석 처리하여 오류를 검색 할 수 있기 때문에 주석은 HTML 디버깅에도 유용합니다.

<!-- Do not display this at the moment
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
직접 해보기»


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

HTML 스타일 - CSS  (1) 2018.12.21
HTML 색상  (0) 2018.12.18
HTML 인용문 및 인용문 요소  (0) 2018.12.18
HTML FORMATING 텍스트 서식지정  (0) 2018.12.18
HTML 스타일  (0) 2018.12.18

HTML 인용문 및 인용문 요소

인용

Here is a quote from WWF's website:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
직접 해보기»

짧은 인용문을위한 HTML <q>

HTML <q>요소는 짧은 인용을 정의합니다.

브라우저는 일반적으로 <q>요소 주위에 따옴표를 삽입합니다 .

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
직접 해보기»



견적을위한 HTML <blockquote>

HTML <blockquote>요소는 다른 소스에서 인용 된 섹션을 정의합니다.

브라우저는 대개 들여 쓰기 <blockquote>요소를 사용합니다.

<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
직접 해보기»



약어에 대한 HTML <abbr>

HTML <abbr>요소는 약어 또는 머리 글자를 정의합니다.

마킹 약어는 브라우저, 번역 시스템 및 검색 엔진에 유용한 정보를 제공 할 수 있습니다.

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
직접 해보기»






연락처 정보에 대한 HTML <address>

HTML <address>요소는 문서 또는 기사의 연락처 정보 (작성자 / 소유자)를 정의합니다.

<address>요소는 일반적으로 이탤릭체로 표시됩니다. 대부분의 브라우저는 요소 앞뒤에 줄 바꿈을 추가합니다.

<address>
Written by John Doe.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
직접 해보기»




작업 제목에 대한 HTML <cite>

HTML <cite>요소는 저작의 제목을 정의합니다.

브라우저는 대개 <cite>이탤릭체로 요소를 표시합니다.

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
직접 해보기»





양방향 재정의 HTML <bdo>

HTML <bdo>요소는 양방향 재 지정을 정의합니다.

<bdo>요소는 현재의 텍스트 방향을 무시하는 데 사용됩니다 :

<bdo dir="rtl">This text will be written from right to left</bdo>
직접 해보기»





HTML Quotation and Citation Elements

TagDescription
<abbr>Defines an abbreviation or acronym
<address>Defines contact information for the author/owner of a document
<bdo>Defines the text direction
<blockquote>Defines a section that is quoted from another source
<cite>Defines the title of a work
<q>Defines a short inline quotation


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

HTML 색상  (0) 2018.12.18
HTML 주석  (0) 2018.12.18
HTML FORMATING 텍스트 서식지정  (0) 2018.12.18
HTML 스타일  (0) 2018.12.18
HTML 단락  (0) 2018.12.18

HTML 텍스트 서식 지정

텍스트 서식 지정

This text is bold

This text is italic

This is subscript and superscript

직접 해보기»




HTML 서식 요소

이전 장에서는 HTML 스타일 속성 에 대해 학습했습니다 .

HTML은 특별한 의미로 텍스트를 정의하기위한 특별한 요소 를 정의합니다 .

HTML과 같은 요소 사용 <b>과 <i>같은 출력 서식을 굵게 또는 기울임 꼴 텍스트를.

서식 요소는 특수한 텍스트 유형을 표시하도록 설계되었습니다.

  • <b> - 굵은 텍스트
  • <strong> - 중요 텍스트
  • <i> - 기울임 꼴 텍스트
  • <em> - 강조된 텍스트
  • <mark> - 표시된 텍스트
  • <small> - 작은 텍스트
  • <del> - 삭제 된 텍스트
  • <ins> - 삽입 된 텍스트
  • <sub> - 첨자 텍스트
  • <sup> - 위첨자 텍스트

HTML <b> 및 <strong> 요소

HTML <b>요소는 특별히 중요하지 않고 굵게 표시된 텍스트를 정의합니다 .

<b>This text is bold</b>
직접 해보기»

HTML <strong>요소는 의미가 "강한"중요성이 추가 된 강력한 텍스트를 정의합니다 .

<strong>This text is strong</strong>
직접 해보기»




HTML <i> 및 <em> 요소

HTML <i>요소는 아무 중요성없이 기울임 꼴 텍스트를 정의합니다 .

<i>This text is italic</i>
직접 해보기»

HTML <em>요소는 강조된 텍스트를 의미 론적 중요성을 추가하여 정의합니다 .

<em>This text is emphasized</em>
직접 해보기»

참고 : 브라우저 <strong>는 <b>, 및 <em>로 표시 됩니다 <i>그러나, 이러한 태그의 의미의 차이는 다음 <b>과 <i>굵은 이탤릭체 텍스트를 정의하지만, <strong>및 <em>텍스트가 "중요"을 의미합니다.


HTML <small> 요소

HTML <small>요소는 더 작은 텍스트를 정의 합니다.

<h2>HTML <small>Small</small> Formatting</h2>
직접 해보기»

HTML <mark> 요소

HTML <mark>요소는두드러진 또는 강조 표시된 본문:

<h2>HTML <mark>Marked</mark> Formatting</h2>
직접 해보기»

HTML <del> 요소

HTML <del>요소는삭제 된 (삭제 된) 텍스트.

<p>My favorite color is <del>blue</del> red.</p>
직접 해보기»

HTML <ins> 요소

HTML <ins>요소는삽입 된 (추가 된) 텍스트.

<p>My favorite <ins>color</ins> is red.</p>
직접 해보기»

HTML <sub> 요소

HTML <sub>요소는 아래 첨자 텍스트를 정의 합니다.

<p>This is <sub>subscripted</sub> text.</p>
직접 해보기»

HTML <sup> 요소

HTML <sup>요소는 위 첨자 텍스트를 정의 합니다.

<p>This is <sup>superscripted</sup> text.</p>
직접 해보기»






HTML 텍스트 서식 요소

TagDescription
<b>

Defines bold text  

<em>

Defines emphasized text 
<i>Defines italic text
<small>Defines smaller text
<strong>Defines important text
<sub>Defines subscripted text
<sup>Defines superscripted text
<ins>Defines inserted text
<del>Defines deleted text
<mark>

Defines marked/highlighted text


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

HTML 주석  (0) 2018.12.18
HTML 인용문 및 인용문 요소  (0) 2018.12.18
HTML 스타일  (0) 2018.12.18
HTML 단락  (0) 2018.12.18
HTML 제목  (0) 2018.12.17

HTML 스타일

나는 빨강이다.

나는 푸른 색이다.

나는 빅이야.

직접 해보기»

HTML 스타일 속성

HTML 요소의 스타일 설정은 style속성을 사용하여 수행 할 수 있습니다 .

HTML style속성의 구문 은 다음  같습니다.

<tagname style="property:value;">

이 속성 은 CSS 속성입니다. 값은 CSS의 값입니다.





HTML 배경색

이 background-color속성은 HTML 요소의 배경색을 정의합니다.

이 예제에서는 페이지의 배경색을 powderblue로 설정합니다.

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
직접 해보기»




HTML 텍스트 색상

이 color속성은 HTML 요소의 텍스트 색상을 정의합니다.

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
직접 해보기»



HTML 글꼴

이 font-family속성은 HTML 요소에 사용할 글꼴을 정의합니다.

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
직접 해보기»





HTML 텍스트 크기

이 font-size속성은 HTML 요소의 텍스트 크기를 정의합니다.

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
직접 해보기»




HTML 텍스트 정렬

이 text-align속성은 HTML 요소의 가로 텍스트 정렬을 정의합니다.

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
직접 해보기»



테스트해보기




단원 요약

  • styleHTML 요소 스타일 지정에 속성 사용
  • 사용하여 background-color배경 색상
  • 사용하여 color텍스트 색상을
  • 사용하여 font-family텍스트 글꼴
  • 사용하여 font-size텍스트 크기에
  • 사용하여 text-align텍스트 정렬


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

HTML 인용문 및 인용문 요소  (0) 2018.12.18
HTML FORMATING 텍스트 서식지정  (0) 2018.12.18
HTML 단락  (0) 2018.12.18
HTML 제목  (0) 2018.12.17
HTML 속성  (0) 2018.12.17

HTML 단락

HTML <p>요소는 단락을 정의합니다 .

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
직접 해보기»
참고 : 브라우저는 단락 앞뒤에 공백을 자동으로 추가합니다 (여백).



HTML 표시

HTML이 어떻게 표시 될지 확신 할 수 없습니다.

크고 작은 화면과 크기가 조정 된 창은 다른 결과를 만듭니다.

HTML을 사용하면 HTML 코드에 여분의 공백이나 추가 행을 추가하여 출력을 변경할 수 없습니다.

페이지가 표시 될 때 브라우저는 여분의 공백과 여분의 행을 제거합니다.

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser 
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser 
ignores it.
</p>




끝 태그를 잊지 마라.

대부분의 브라우저는 종료 태그를 잊어 버린 경우에도 HTML을 올바르게 표시합니다.

<p>This is a paragraph.
<p>This is another paragraph.
직접 해보기»

위의 예제는 대부분의 브라우저에서 작동하지만, 의존하지는 않습니다.

참고 : 종료 태그를 삭제하면 예기치 않은 결과 또는 오류가 발생할 수 있습니다.




HTML 줄 바꿈

HTML <br>요소는 줄 바꿈을 정의합니다 .

<br>새 단락을 시작하지 않고 줄 바꿈 (새 줄)을 사용하려면 다음을 사용하십시오 .

<p>This is<br>a paragraph<br>with line breaks.</p>
직접 해보기»



시 문제

이시는 한 줄에 표시됩니다 :

<p>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</p>
직접 해보기»



HTML <pre> 요소

HTML <pre>요소는 서식이 미리 지정된 텍스트를 정의합니다.

<pre>요소 내부의 텍스트 는 고정 너비 글꼴 (일반적으로 Courier)로 표시되며 공백과 줄 바꿈을 모두 유지합니다.

<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>
직접 해보기»



Test Yourself with Exercises!





HTML 태그 참조

W3Schools 태그 참조에는 HTML 요소 및 해당 속성에 대한 추가 정보가 들어 있습니다.

TagDescription
<p>Defines a paragraph
<br>Inserts a single line break
<pre>Defines pre-formatted text







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

HTML FORMATING 텍스트 서식지정  (0) 2018.12.18
HTML 스타일  (0) 2018.12.18
HTML 제목  (0) 2018.12.17
HTML 속성  (0) 2018.12.17
HTML 요소  (0) 2018.12.17

클래스에서 기반클래스가 있고 파생클래스가 있다

기반클래스를 슈퍼클래스

파생클래스를 서브클래스라고도 한다 



기본클래스,파생클래스


부모클래스,자식클래스


슈퍼클래스,서브클래스


설계를 해서 기본클래스 설계로 조금더 단순화 효율성을 높인다


사람-> 여자-> 할머니

사람클래스는 여자클래스의 부모클래스

할머니클래스는 여자클랫의 자식클래스



도그, 자식클래스의 부모클래스 



Virtual 붙으면 메서드에 가상메서드가 나온다.


가상메서드란 자식클래스에 있는 메서드를 호출한는 가상메서드다


makesound라는 메서드가 자식한테 잇으면 그걸 호출한다.



상속을 받는다는것은


클래스: 상속받을클래스(부모클래스)


Protect 접근제한자


자식클래스는 부모클래스에 엑세스가 가능하며 

Private 필드가 있다면 상속받은 자식클래스에서도 엑세스 하지못한다.


하지만 public 이나 protected라는 접근제한자는 접근가능한다.



부모클래스의 메서드 생성자에 전부 접근 가능하다.


부모클래스의 생성자 를호출할때 부모클래스를 호출할때 방법은


자식클래스의 생성자 다음에 : 찍고 base

Ex) : base() 

라고 하며  base() 부모클래스를 나타냄


:base(petId,name,color,gender) 


자식메서드를 재정의할때는 override 붙여준다.


상속을 왜하나 클래스가 많을수록 

관리차원?


부모클래스 변수에 자식클래스를 대입할수있다.



Is 연산자를 쓰면 bool 형을 리턴하고 값을 불형으로 나온다


Pet is cat (ex)

if(pet is cat)

{

부모클래스가 어떤건지 알수잇다.


만약에 맞다면 부모클래스를 자식클래스로 치환할때

  (pet as cat).scratch();


}


상속의 이점은 복잡한 프로그램을 짜봐야 알수있다.










HTML 표제

제목

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
직접 해보기»

HTML 표제

표제는 <h1>to <h6>태그 로 정의됩니다 .

<h1>가장 중요한 제목을 정의합니다. <h6>가장 중요하지 않은 머리글을 정의합니다.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
직접 해보기»


참고 : 브라우저는 제목 앞뒤에 공백을 자동으로 추가합니다 (여백).


제목은 중요하다.

검색 엔진은 표제를 사용하여 웹 페이지의 구조와 내용을 색인화합니다.

사용자는 제목을 기준으로 페이지를 훑어 봅니다. 문서 구조를 표시하려면 표제를 사용하는 것이 중요합니다.

h1이 제일중요한 머리글 h2가다음 h3가 다음


주의 : 제목에만 HTML 표제를 사용하십시오. 제목을 사용하여 대용량 또는 대담한 텍스트를 작성하지 마십시오 .



더 큰 표제

각 HTML 표제는 기본 크기를가집니다. 그러나 styleCSS font-size속성을 사용하여 속성으로 모든 제목의 크기를 지정할 수 있습니다 .

<h1 style="font-size:60px;">Heading 1</h1>
직접 해보기»



HTML 수평 규칙

<hr>태그는 HTML 페이지에서 주제 휴식을 정의하고, 가장 자주 수평선으로 표시됩니다.

이 <hr>요소는 HTML 페이지에서 내용을 분리하거나 변경을 정의하는 데 사용됩니다.

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
직접 해보기»



HTML <head> 요소

HTML <head>요소는 HTML 제목과 아무 관련이 없습니다.

<head>요소는 메타 데이터 용 컨테이너이다. HTML 메타 데이터는 HTML 문서에 대한 데이터입니다. 메타 데이터는 표시되지않습니다.

<head>요소는 <html>태그와 <body>태그 사이에 위치하게됩니다.



<!DOCTYPE html>
<html>

<head>
  <title>My First HTML</title>
  <meta charset="UTF-8">
</head>

<body>
.
.
.
직접 해보기»

참고 : 메타 데이터는 일반적으로 문서 제목, 문자 집합, 스타일, 링크, 스크립트 및 기타 메타 정보를 정의합니다.



HTML 소스를 보는 방법?

웹 페이지를 본 적이 있고 "이봐! 어떻게 그걸 했니?"

HTML 소스 코드보기 :

HTML 페이지를 마우스 오른쪽 버튼으로 클릭하고 "브라우저에서 페이지 소스보기"(Chrome에서) 또는 "소스보기"(IE에서) 또는 다른 브라우저에서 유사하게 선택하십시오. 그러면 페이지의 HTML 소스 코드가 포함 된 창이 열립니다.

HTML 요소 검사 :

요소 (또는 빈 영역)를 마우스 오른쪽 버튼으로 클릭하고 "Inspect"또는 "Inspect Element"를 선택하여 어떤 요소가 구성되어 있는지 확인합니다 (HTML과 CSS가 모두 표시됨). 또한 열리는 요소 또는 스타일 패널에서 HTML 또는 CSS를 직접 편집 할 수 있습니다.



HTML 제목 테스트하기!






HTML 태그 참조

W3Schools 태그 참조에는 이러한 태그 및 해당 속성에 대한 추가 정보가 들어 있습니다.

이 자습서의 다음 장에서는 HTML 태그 및 속성에 대해 자세히 설명합니다.

TagDescription
<html>

Defines the root of an HTML document  -html문서정의

<body>

Defines the document's body   --html도큐먼트 바디

<head>

A container for all the head elements (title, scripts, styles, meta information, and more)  --헤드요소들의 컨테이너(타이틀,스크립트스타일,메타정보 등등--

<h1> to <h6>

Defines HTML headings
<h1 head 요소정의>

<hr>Defines a thematic change in the content
<수평줄 맞춤>


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

HTML 스타일  (0) 2018.12.18
HTML 단락  (0) 2018.12.18
HTML 속성  (0) 2018.12.17
HTML 요소  (0) 2018.12.17
HTML 목록  (0) 2018.12.17

속성은 HTML 요소에 대한 추가 정보를 제공합니다.


HTML 속성

  • 모든 HTML 요소는 속성 을 가질 수 있습니다.
  • 속성 은 요소에 대한 추가 정보 를 제공합니다.
  • 속성은 항상 시작 태그에 지정됩니다 .
  • 속성은 일반적으로 다음과 같이 이름 / 값 쌍으로옵니다. name = "value"


href 속성

HTML 링크는 <a>태그 로 정의됩니다 링크 주소는 다음 href속성 에서 지정됩니다 .

<a href="https://www.w3schools.com">This is a link</a>
직접 해보기»




src 속성

HTML 이미지는 <img>태그 로 정의됩니다 .

이미지 원본의 파일 이름은 src특성에 지정됩니다 .

<img src="img_girl.jpg">




너비와 높이 특성

HTML 이미지에는 이미지 의 너비와 높이를 지정하는 크기 속성 집합이 있습니다 .

<img src="img_girl.jpg" width="500" height="600">

이미지 크기는 픽셀 단위로 지정됩니다. width = "500"은 500 픽셀 너비를 의미합니다.

이미지에 대한 자세한 내용은 HTML 이미지 장을 참조하십시오 .





alt 속성

이 alt속성은 이미지를 표시 할 수 없을 때 사용할 대체 텍스트를 지정합니다.

속성 값은 화면 판독기에서 읽을 수 있습니다. 이 방법으로, 웹 페이지, 예를 들어 시각 장애가있는 사람은 "듣는"누군가 요소를 "들을 수"있습니다.

<img src="img_girl.jpg" alt="Girl with a jacket">
직접 해보기»


이 alt속성은 이미지가없는 경우에도 유용합니다.

존재하지 않는 이미지를 표시하려고하면 어떤 일이 발생하는지 확인하십시오.

<img src="img_typo.jpg" alt="Girl with a jacket">
직접 해보기»

스타일 속성

style특성 등 색상, 폰트 크기와 같은 요소의 스타일을 지정하는 데 사용

<p style="color:red">I am a paragraph</p>
직접 해보기»


lang 특성

문서의 언어는 <html>태그 에서 선언 할 수 있습니다 .

언어는 lang속성으로 선언됩니다 .

접근성 응용 프로그램 (화면 판독기) 및 검색 엔진에 언어를 선언하는 것이 중요합니다.

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

처음 두 글자는 언어 (en)를 지정합니다. 방언이있는 경우 두 자 이상의 영문자를 사용하십시오 (영문).



제목 속성

여기 title에는 <p> 요소에 속성이 추가됩니다 단락 위로 마우스를 가져 가면 제목 속성의 값이 툴팁으로 표시됩니다.

<p title="I'm a tooltip">
This is a paragraph.
</p>
직접 해보기»




우리는 소문자 속성 사용을 제안한다.

HTML5 표준은 소문자 속성 이름을 요구하지 않습니다.

제목 속성은 제목 또는 제목 과 같이 대문자 또는 소문자로 작성할 수 있습니다 .

W3C 는 HTML에서 소문자를 권장 하고 XHTML과 같은 더 엄격한 문서 유형에 대해서는 소문자를 요구 합니다.

W3Schools에서는 항상 소문자 속성 이름을 사용합니다.



우리는 다음과 같이 제안합니다 : 인용 속성 값

HTML5 표준은 속성 값을 따옴표로 묶을 필요가 없습니다.

href위의 증명 속성은,  따옴표없이 쓸 수 :

나쁜

<a href=https://www.w3schools.com>
직접 해보기»

좋은

<a href="https://www.w3schools.com">
직접 해보기»

W3C는 권장 HTML에서 따옴표를, 그리고 요구 XHTML과 같은 엄격한 문서 유형에 따옴표를.

때때로는 필요에 따옴표를 사용하십시오. 이 예는 공백을 포함하기 때문에 title 속성을 올바르게 표시하지 않습니다












<p title=About W3Schools>
직접 해보기»

따옴표를 사용하는 것이 가장 일반적입니다. 따옴표를 생략하면 오류가 발생할 수 있습니다. 
W3Schools에서는 항상 속성 값을 따옴표로 묶습니다.



단일 또는 이중 따옴표?

속성 값을 둘러싼 큰 따옴표는 HTML에서 가장 일반적이지만 작은 따옴표도 사용할 수 있습니다.

경우에 따라 속성 값 자체에 큰 따옴표가 들어 있으면 작은 따옴표를 사용해야합니다.

<p title='John "ShotGun" Nelson'>

혹은 그 반대로도:

<p title="John 'ShotGun' Nelson">
직접 해보기»



단원 요약

  • 모든 HTML 요소는 속성 을 가질 수 있습니다.
  • 이 title속성은 추가 "도구 팁"정보를 제공합니다.
  • 이 href속성은 링크에 대한 주소 정보를 제공합니다.
  • width및 height속성은 이미지의 크기 정보를 제공
  • 이 alt특성은 화면 판독기에 텍스트를 제공합니다.(이미지가 제대로 출력이 안됬을 경우에)
  • W3Schools에서는 항상 소문자 속성 이름을 사용 합니다.
  • W3 스쿨에서 우리는 항상 따옴표 큰 따옴표와 속성 값을 묶어줍니다.



HTML 배운거 테스트해보기!




HTML 속성

다음은 HTML에서 자주 사용되는 일부 속성의 사전 순 목록입니다.이 자습서에서 자세히 설명합니다.

AttributeDescription
alt

Specifies an alternative text for an image, when the image cannot be displayed --특정이미지가 안보일때 대체텍스트

disabled

Specifies that an input element should be disabled --입력 속성을 사용하지않을때

hrefSpecifies the URL (web address) for a link --url링크를 사용할떄
id

Specifies a unique id for an element  --속성에 id값을 줄때

src

Specifies the URL (web address) for an image ---img url 표시할떄

styleSpecifies an inline CSS style for an element --칼라색상과 같이 요소에 css style을 줄때
titleSpecifies extra information about an element (displayed as a tool tip)-- 요소에 타이틀값을 줄때


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

HTML 단락  (0) 2018.12.18
HTML 제목  (0) 2018.12.17
HTML 요소  (0) 2018.12.17
HTML 목록  (0) 2018.12.17
HTML 버튼  (0) 2018.12.17

+ Recent posts