[html]_7(문자콘텐츠)

3 minute read

HTML 배우기

문자콘텐츠

<ol> <ul> <li>

ol - 순서가 있는 리스트 블록요소
점으로 표시
ul - 순서가 없는 리스트 블록요소
숫자로 표시
ol,ul태그는 li태그를 포함한다
li태그는 단독으로 사용 불가능
블록요소의 list-item

<ol> 태그

<ol type="1"> 1,2,3 순서 <ol type="i"> i,ii,iii순서    
<ol type="a"> a,b,c 순서 <ol type="I"> I,II,III 순서
<ol reversed="reversed">-> <ol reversed> 3,2,1 역순  
<ol start="4"> 4부터 순차적인 리스트로 변한다  

<li> 태그

value 의 속성값을 정해주면 순서대로 리스트 작성한다.
안정해주면 그전에 정해진 속성값의 순서를 따른다.

<dl> <dt> <dd> 태그

key - value 형태를 표시할때 유용하다. 블록요소

<dl>
  <dt>a</dt><dd>aaaa</dd>
  <dt>b</dt><dd>bbbb</dd>
</dl>

dl태그 아래에는 dt,dd만이 올수 있기때문에
dt,dd를 묶어줄 수 없다. 그렇기 때문에 리스트 태그인 ul과 definition을 활용한다.

<ul>
    <li>
        <dfn> a</dfn>
        <p> aaaa</p>
    </li>

    <li>
        <dfn> b </dfn>
        <p>bbbb</p>
    </li>
</ul>

dt :용어
dd :정의
dl :묶음 dl과 dd만을 포함

태그

하나의 문장, 문단을 만들때 사용한다.블록요소
웹접근성을 위해 다음문단 넘어갈때 태그를 활용한다.
 태그로 줄바꿈을 해줄 수 있다.

<hr /> 태그

문단의 분리를 위해 설정한다. 수평선을 만든다블록요소

hr태그의 수평선css

hr {
    border: none; 수평선 없애기  
    border: 2px; dashed red; 2px두께의 빨간색 점선
    padding: 20px;  ->border가 수평선이 아니라
    사각형인 것을 알 수 있다.
}

<pre> 태그

서식(작성한 그대로)이 미리 지정된 텍스트
텍스트의 공백과 줄바꿈을 유지한다. 블록요소
monospace 글꼴 계열로 문자의 크기가 다 같다.
코드작성시의 tab같은 공백마저도 같이 나온다.
문장의 끝과 시작에 <pre></pre>작성하는 것이 좋다.

<blockquote>

일반적인 인용문을 설정한다.
cite의 속성에는 인용된 url을 작성해준다.

<blockquote cite="사이트의주소">
인용된 내용
</blockquote>

Inline 텍스트

a 태그

같은 페이지 또는 다른 URL로 연결할 수 있는 하이퍼링크

<a href="주소">링크이름

속성

download : 다운로드로 사용되는 링크이다.
href : 넘어갈 페이지의 주소 생략가능하나 링크를 못함
hreflang : 넘어갈 페이지의 언어
rel :넘어갈 페이지와의 관계 license , prev ,next
target : 링크를 누를시 어떤 탭에 띄울지 설정 _self(default값) , _blank
type : 링크 페이지의 MIME 타입 자동으로 된다.

 <a href="https://google.com" target="_blank">Google</a>

 a {
    display: block;    <a>태그는 Inline요소이기때문에 block요소로 변경해준다
    font-weight: bold;
    width: 100px;
    line-height: 40px;
    height: 40px;
    border: 1px solid black;
     border-radius: 6px;
     text-align: center;

}

a:hover {

    background: red;
    
}

같은 페이지 내에서의 이동

    <ul>
        <li><a href="#title1">제목1</a></li>
        <li><a href="#title2">제목2</a></li>
    </ul>
    <h2 id="title1">제목1</h2>
    <h2 id="title2">제목2</h2>
    <h2 id="title3">제목3</h2 >

해시태그를 a태그 제목1을 투르면
title2인 제목2의 위치로 이동한다.

abbr 태그

약어를 지정한다.
title전역속성(global)을 이용한다.

Using <abbr title="hyper text markup language">HTML</abbr> is fun and easy

b,i 태그

b 태그

특별한 의미를 가지지 않는다. 범위설정
다른 태그가 적합하지 않은 경우 마지막 수단으로 사용
글자가 두껍게 표시된다.

mark 태그

글자 배경이 노란색으로 표시되며
관심을 끌기 위해 하이라이팅할때 사용

em 태그

의미를 강조할때 사용. 중첩 가능하지만
시각적인 효과는 없다.

strong 태그

의미의 중요성을 나타낸다.
b태그처럼 두껍게 표시된다.

i 태그

em, strong, mark, cite, dfn태그등에서 적합한 의미가 아닌 경우
아이콘 특수기호에 사용된다.

dfn 태그

용어를 정의할 때 사용.dl dt dd태그에서
dt,dd태그를 묶어줄 때 사용하였다. (용어 - 용어 설명)

cite 태그

창작물에 대한 참조를 설정한다.

<cite>The Scream</cite>by Edward Munch

q 태그

짧은 길이의 인용문을 설정할 때 사용한다.
cite라는 속성을 사용하여 인용문의 URL을 명시할 수 있다.

u 태그

밑줄이 있는 글자를 설정한다.CSS를 사용하는 것이 좋다.

<span style="text-decoration: underline">a</span>을  사용할 수 없을때  
u태그를 활용하는 것이 좋다.

code 태그

컴퓨터 코드 범위를 설정할 때 사용한다.
<code>printf("hello world");</code>is print "hello world"
printf("hello world");is print “hello world”

kbd 태그

monospace 계열로 작성되게 한다. CSS를 입혀준다.

sup , sub 태그

X4+ Y 2
X⁴ + Y ₂

time 태그

시간을 나타내기 위한 목적
datetime속성에 날짜를 기입한다.
IE에서는 지원을 하지 않는다.
<time datetime="2018-07-08">7 July</time>

7 July

span 태그

div태그와 비슷한 의미를 갖는다 . 의미없는 영역 나누기에 사용
단 div는 블록요소이고 span태그는 인라인요소이다.
텍스트 중간에 css 또는 javascript를 적용 할때 좋다.

br 빈태그

줄바꿀때 사용하는  태그이다

<body>
    <p>
    동해물과 백두산이 마르고 닳도록<br/>
    <br/>
    <br/>       br태그롤 활용하여 공간을 확보하는 행위는
                좋지 못한 행동이다.
    하느님이 보우하사 우리나라 만세
    </p>        p태그의 css 통해 공간을 확보하는 것이 좋다
</body>

p {
    line-height: 50px; 한 라인의 높이

}

ins 태그

추가된 텍스트위 범위를 지정
cite-변경을 설명하는 주소
datetime- 변경이 일어난 날짜.

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

My favorite color is ~~blue~~ red!

del 태그

삭제된 텍스트의 범위를 지정
cite - 변경을 설명하는 주소
datetime- 변경이 일어난 날짜

Twitter Facebook LinkedIn

Duckey Kim