Notice
Recent Posts
Recent Comments
Link
Tags
more
«   2024/11   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archives
Today
Total
관리 메뉴

JongDDA의 한걸음 한걸음씩

[HTML] 문자 꾸미기 및 리스트, 테이블 본문

개발/프론트엔드

[HTML] 문자 꾸미기 및 리스트, 테이블

종따 2021. 2. 24. 22:15
728x90

문자 꾸미기 태그

 

-굵게 만들기(bold) : <strong>, <b>
두 태그는 볼드 효과라는 면에서는 동일한 결과를 보인다.
두 테그는 모두 인라인 태그이다.

<strong> 경우에는 텍스트 강조를 의미하는 시맨틱(의미를 전달한다.)을  포함하고 있어 시각장애인을 위한 웹문서에 주로 사용된다. 

 

<b> 경우는 텍스트를 굵게 하는 기능 외에 특별한 시맨틱은 없다.

-이탤릭체 효과 주기 : <em>, <i>
글자를 기울이으로써 강조 효과를 주는 태그들 둘 다 가시적인 결과는 동일하다.
em은 시맨틱적인 태그이고, i는 단순히 가시적인 결과만.

 

-형광펜 효과 주기 <mark>

 

-인용구 표시하기 : <q>
큰따옴표가 생긴다!

-아무 효과도 안 주면서 묶기만 하기 : <span>
-인라인 태그이며 ,어떠한 효과도 없다. 하지만 유용한 태그 

 

 

 

목록 표시하기 태그

- 목록의 두 가지 종류 : <ul>, <ol>

ordered list : 순서를 매기지 않는 목록
unordered list : 순서를 매기는 목록

두 목록은 모두 내부 아이템으로 <li> 태그를 포함한다.

-<ol> 태그에 속성 추가하기

type 속성 : 순서를 나타내는 기호를 바꿀 수 있다!
=> 1, a, A ,i, I

start 속성 : 시작할 때 몇번부터 시작할지 정할 수 있다!
=> 원하는 숫자를 써주면 된다.

 

 

ex) 연습문제

 

 

표(테이블) 만들기

 

-표란?

행과 열로 구성되어 있는 텍스트 표시 양식
행과 열이 만나는 부분을 '셀(cell)' 이라고 부른다.

- 표를 구성하는 태그들 : <table> , <tr>, <td>

table : 표 전체를 묶어주는 블록
tr : 하나의 행
td : 행 안에 들어 있는 각각의 열(셀)

 

 

 

 

 

ex) 연습문제

 

 

 

01_txt_deco.html
0.00MB
02_list.html
0.00MB
03_practice01.html
0.00MB
04_table.html
0.00MB
05_practice02.html
0.00MB

728x90
반응형

'개발 > 프론트엔드' 카테고리의 다른 글

[HTML] 전역속성  (0) 2021.02.25
[HTML] 입력  (0) 2021.02.24
[HTML] 링크 이동(하이퍼링크)  (0) 2021.02.24
[HTML] 표 및 이미지 표시하기  (0) 2021.02.24
[HTML] HTML 소개 및 기초문법  (0) 2021.02.11
Comments