python 에서 자주쓰이는 while문과 continue문, 그리고 break문을 알아보겠습니다

 

먼저 while문을 이용해서 반복문을 만들수 있는데요

test.py라는 파일로 만드신후

python test.py를 터미널에서 실행합니다.

 

count=0                       #count변수에 0을대입

while count < 5:             # count 값이 5보다 작을때까지 반복

    print(count)               #count변수값을 출력해라

    count += 1                #count= count + 1 을 실행

이렇게 실행할경우

0

1

2

3

4

로 추력됩니다.

 

이번에는 if문과 continue문을 섞어서 진행해보겠습니다.

count = 0                    #count = 0인값을 대입

while True:                   #while True 무한반복진행

     if count >=5:           # count >= 5 count변수값이 5이상이 될때 (조건문)

          break                # while문 나가라

 

     if count == 2:           #만약 count가 2일경우

          count += 1         #count = count + 1을실행 > count=3

          continue             #그대로 진행 이때의 count =3 인상태에서 그대로진행

 

     print(count)              #count값을출력

     count += 1              #count= count+1을 실행 

     

결과흐름도

count=0

count=1

count=3

count=4

 

 

   

'언어 > 파이썬' 카테고리의 다른 글

[03] 파이썬 자료구조와 알고리즘-공부정리(컬렉션 자료구조)  (0) 2022.01.08
[02] 파이썬 자료구조와 알고리즘-공부정리(내장시퀸스 타입)  (0) 2022.01.08
[01] 파이썬 자료구조와 알고리즘-공부정리(숫자)  (0) 2022.01.08
파이썬이만든 개꿀함수 bin() 정수를 이진수로 만들어주는 함수만들기  (0) 2020.04.28
파이썬 반복문 while,if과 continue문  (0) 2020.04.04

Styling HTML with CSS

html을 스타일링하는 css

CSS stands for Cascading Style Sheets.

Cascading Style Sheet의 줄임말 CSS


CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

CSS 묘사한다 html이 어떻게 스크린,종이,미디어에 표현되는지를


CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS 는 많은 작업을 저장합니다 . 한 번에 여러 웹 페이지의 레이아웃을 제어 할 수 있습니다.


CSS can be added to HTML elements in 3 ways:

CSS는 다음 세 가지 방법으로 HTML 요소에 추가 할 수 있습니다.

  • Inline - by using the style attribute in HTML elements
  • 인라인 - HTML 요소의 style 속성을 사용해서

  • Internal - by using a <style> element in the <head> section
  • 내부적 head섹션안에서 style요소를 사용해서

  • External - by using an external CSS file
  • 외부의 CSS파일을 사용해서

The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.

CSS를 추가하는 가장 일반적인 방법은 별도의 CSS 파일에 스타일을 유지하는 것입니다. 그러나 여기에서는 인라인 및 내부 스타일링을 사용합니다. 이는 시연하기 쉽고 직접 시도하기가 쉽기 때문입니다.

Tip: You can learn much more about CSS in our CSS Tutorial.

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

This example sets the text color of the <h1> element to blue:


인라인 CSS

인라인 CSS는 단일 HTML 요소에 고유 한 스타일을 적용하는 데 사용됩니다.

인라인 CSS는 HTML 요소의 style 속성을 사용합니다.

이 예제에서는 <h1>요소 의 텍스트 색 을 파란색으로 설정합니다.

Example

<h1 style="color:blue;">This is a Blue Heading</h1>
Try it Yourself »

내부 CSS

내부 CSS는 단일 HTML 페이지의 스타일을 정의하는 데 사용됩니다.

내부 CSS는 요소 <head>내의 HTML 페이지 섹션에 정의됩니다 <style>.

예

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

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

</body>
</html>
직접 해보기»




외부 CSS

외부 스타일 시트는 많은 HTML 페이지의 스타일을 정의하는 데 사용됩니다.

외부 스타일 시트를 사용하면 하나의 파일을 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다!

외부 스타일 시트를 사용하려면 <head>HTML 페이지 의 섹션에 링크를 추가 하십시오.

예

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

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

</body>
</html>
직접 해보기»





외부 스타일 시트는 텍스트 편집기로 작성할 수 있습니다. 파일에는 HTML 코드가 없어야하며 .css 확장자로 저장해야합니다.

다음은 "styles.css"의 모양입니다.

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

CSS 글꼴

CSS color속성은 사용할 텍스트 색상을 정의합니다.

CSS font-family속성은 사용할 글꼴을 정의합니다.

CSS font-size 속성은 사용할 텍스트 크기를 정의합니다.

예

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p  {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

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

</body>
</html>
직접 해보기»





CSS 테두리(border)

CSS border속성은 HTML 요소 주위에 테두리를 정의합니다.

예

p {
  border: 1px solid powderblue;
}
직접 해보기»






CSS 패딩(여백)

CSS padding속성은 텍스트와 테두리 사이의 여백 (공백)을 정의합니다.

예

p {
  border: 1px solid powderblue;
  padding: 30px;
}
직접 해보기»




CSS 여백

CSS margin속성은 경계 밖의 여백 (공백)을 정의합니다.

예

p {
  border: 1px solid powderblue;
  margin: 50px;
}
직접 해보기»




id 속성

특정 특수 요소에 대한 특정 스타일을 정의하려면 요소에 id특성을 추가하십시오 .

<p id="p01">I am different</p>

다음 특정 ID로 요소의 스타일을 정의하십시오.

예

#p01 {
  color: blue;
}
직접 해보기»

참고 : 요소의 id는 페이지 내에서 고유해야하므로 id selector가 하나의 고유 한 요소를 선택하는 데 사용됩니다!






Attribute 클래스

특수 유형의 요소에 대한 스타일을 정의하려면 요소에 class속성을 추가하십시오 .

<p class="error">I am different</p>

다음 특정 클래스를 사용하여 요소의 스타일을 정의합니다.

예

p.error {
  color: red;
}
직접 해보기»




외부 참조

외부 스타일 시트는 전체 URL 또는 현재 웹 페이지와 관련된 경로로 참조 할 수 있습니다.

이 예제에서는 전체 URL을 사용하여 스타일 시트에 연결합니다.

예

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

직접 해보기»

이 예제는 현재 웹 사이트의 html 폴더에있는 스타일 시트에 연결됩니다.

예

<link rel="stylesheet" href="/html/styles.css">

직접 해보기»

이 예제는 현재 페이지와 같은 폴더에있는 스타일 시트에 연결됩니다.

예

<link rel="stylesheet" href="styles.css">

직접 해보기»

파일 경로에 대한 자세한 내용은 HTML 파일 경로 장을 참조하십시오 .

단원 요약

  • style인라인 스타일에 HTML 속성 사용
  • HTML <style>요소를 사용하여 내부 CSS 정의
  • HTML <link>요소를 사용하여 외부 CSS 파일을 참조하십시오.
  • HTML <head>요소를 사용하여 <style> 및 <link> 요소 저장
  • color텍스트 색상에 CSS 속성 사용
  • font-family텍스트 글꼴에 CSS 속성 사용
  • font-size텍스트 크기에 CSS 속성 사용
  • border테두리에 CSS 속성 사용
  • padding테두리 안의 공간에 CSS 속성 사용
  • margin경계 외부 공간에 CSS 속성 사용







HTML 스타일 태그

TagDescription
<style>Defines style information for an HTML document
<link>Defines a link between a document and an external resource


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

HTML 색상  (0) 2018.12.18
HTML 주석  (0) 2018.12.18
HTML 인용문 및 인용문 요소  (0) 2018.12.18
HTML FORMATING 텍스트 서식지정  (0) 2018.12.18
HTML 스타일  (0) 2018.12.18
const yonginfo ={
name:"yongyong",
age:33,
gender:"Male",
isHandsome:true,
favMovies:["Along the gods","Lotr","Oldboy"],
favFood:[
{
name:"kimchi",
fatty:false
},
{
name:"cheese burger",
fatty:true
}
]

}
console.log(yonginfo);
console.log(yonginfo.favFood[0]);
console.log(yonginfo.favFood[0].name);

//데이터정렬하는데 2가지방법 array와 object

//오브젝트 만들기 {}컬리브라켓을 써주면된다다


//오브젝트에는 이렇게 데이터 타입을 저장할수도있고 array도 포함이 가능하다




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

바닐라 자바스크립트 배열  (0) 2018.12.19
바닐라 자바스크립트 정수,실수,문자,boolean 값  (0) 2018.12.19
바닐라 자바스크립트 let,var,const  (0) 2018.12.19
/*변수사용 케이스는

camel case 항상변수시작은 소문자로시작하고 다음단어는 스페이스는
적용이 안되니 단어로 시작할때 대문자로 시작해야한다 .또는/는 변수명 사용이
안된다.

constOfWeek와 같이

*/

const monday ="Mon";
const tue ="tue";
const wed ="wed";
const thu ="thu";
const fri ="fri";

console.log(monday,tue,wed,thu,fri);

const dayOfWeek =[];

const info =[monday,tue,wed,thu,fri,true];

배열을 정의할때 이런식으로 정의가 가능하고

console.log(info[0]);

출력하면 컴퓨터는 0부터 시작하기 때문에 monday를 출력한다.

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

바닐라자바스크립트 오브젝트  (0) 2018.12.19
바닐라 자바스크립트 정수,실수,문자,boolean 값  (0) 2018.12.19
바닐라 자바스크립트 let,var,const  (0) 2018.12.19
/*String
const what ="Nicolas";
console.log(what);

*/

/*
const wat =false;
const wat1= true;

NUmber
const wat =234;

FLoat
const wat =23.324;

*/

이런식으로 쓰면되네요~



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

바닐라자바스크립트 오브젝트  (0) 2018.12.19
바닐라 자바스크립트 배열  (0) 2018.12.19
바닐라 자바스크립트 let,var,const  (0) 2018.12.19
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로 초기정의를 했기때문이다.

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

바닐라자바스크립트 오브젝트  (0) 2018.12.19
바닐라 자바스크립트 배열  (0) 2018.12.19
바닐라 자바스크립트 정수,실수,문자,boolean 값  (0) 2018.12.19


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>
직접 해보기»




Test Yourself with Exercises!

Exercise 1 »Exercise 2 »Exercise 3 »Exercise 4 »

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>
직접 해보기»



Test Yourself with Exercises!

Exercise 1 »Exercise 2 »Exercise 3 »Exercise 4 »Exercise 5 »




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

+ Recent posts

티스토리툴바