브라우저 제목

태그의 속성

태그(Tag)에는 태그의 특징을 설정하는 속성이 있다. 태그의 옵션이라고 할 수도 있다.

 

태그의 속성 문법)

<태그명 속성1="속성값" 속성2="속성값">

 

속성의 종류

title -- 툴팁을 설정할 때

예) <h1 title="html의 제목">제목</h1>

href-- 문서를 연결하여야 하는 경우에 사용

예) <a href="http://www.naver.com" >네이버</a>

alt-- 이미지 태그에서 이미지 대체 텍스트

예) <img src="http://ssejong.cafe24.com/images/coffee-back.jpg" alt="커피잔">

src--이미지의 주소나, javascript,  jquery등의 파일을 연결할 때 사용

예) <img src="http://ssejong.cafe24.com/images/coffee-back1.jpg">

width -- 너비설정(이미지, 테이블, 셀)

height -- 높이설정(이미지, 테이블, 셀)

예) <img src="http://ssejong.cafe24.com/images/coffee-back1.jpg" alt="커피잔" width="100" height="100">

id --  그룹을 설정하여 그룹의 식별자를 만들 때 사용

예) <div id="group1">그룹1</div>

style -- 태그에 직접 디자인을 설정할 때

예) <div id="group1" style="width:200px; height:200px; background:yellow">그룹1</div>

class -- 디자인을 설정하기 위한 디자인명

예) <p class="text">html의 시작</p>

disabled-- 활성과 비활성 폼에서 사용

 

제목태그(<h숫자>~</h숫자>)

<h1>태그의 속성</h1>
<h2>태그의 속성(문법)</h2>
<h3>title</h3>

 

문단태그(<p>~</p>)

<p>태그(Tag)에는 태그의 특징을 설정하는 속성이 있다.</p>

<p>&lt; 태그명 속성1="속성값" 속성2="속성값" &gt; </p>

<p>속성의 종류
title -- 툴팁을 설정할 때
href -- 문서를 연결하여야 하는 경우에 사용
alt --   이미지의 태그에서 이미지 대체 텍스트
 </p>

줄바꿈 태그( <br> )

<p>속성의 종류<br>
title -- 툴팁을 설정할 때<br>
href -- 문서를 연결하여야 하는 경우에 사용<br>
alt --   이미지의 태그에서 이미지 대체 텍스트<br>
</p>

 

들여쓰기와 자동줄바꿈이 이루면서 문단의 의미 태그( <pre>~</pre> )

<pre>
src -- 이미지의 주소나, javascript, jquery등의 파일을 연결할 때 사용
width -- 너비설정(이미지, 테이블, 셀)
height -- 높이설정(이미지, 테이블, 셀)
</pre>

이미지태그(<img>)

<img src="http://ssejong.cafe24.com/images/coffee-back1.jpg" width="300" height="200" alt="커피">

디자인(style)

<tagname style="속성:속성값; 속성2:속성값"></tagname>

<h1 style="color:orange; background:gray;">태그의 속성</h1>

 

텍스트 서식

<b> : 글자를 두껍게 만들어 줍니다. Bold

<strong> : 글자를 두껍게 만들어 줍니다. Bold의 역활이지만 <b>태그와 다른 점은 웹접근성이라는 부분에 사용되는 것으로 강조를 음성을 통해 전달하려고 할 경우에 사용됩니다.

(웹접근성이란 누구나 웹에 접근할 수 있도록 구현하는 것을 말하여 누구나에 해당하는 것은 몸이 불편한 사람들을 고려한 구현)

<i> : 글자를 기울어지게 합니다. Italic 

<em> : 글자를 기울어지게 합니다. Italic의 역활이지만 웹접근성으로 강조를 할 때 사용합니다.

<mark> : 여러 텍스트 중에 특정 텍스트를 지정되어 보이게 할 때 사용합니다. 

<small> : 글자를 작게 만들어 줍니다. ABC

<del> : 취소를 표시할 때 사용합니다.

<ins> : 삽입의 의미로 밑줄이 만들어집니다.

<sub> : 아래 첨자

<sup> : 윗 첨자

 

<span> : 특정지울 수 없는 경우에 사용하는 태그

위의 텍스트 태그나 문단, 이미지, 등 특정 지워서 작성할 수 있는 태그는 의미적으로 명확히 전달이 되지만

단순히 부분적으로 색상을 변경하거나 글자의 크기를 변경하려는 경우에는 텍스트 태그만으로 특정지워서 작성하기 어렵다. 이럴 때 작성한다.

 

 

예)

       <h1 style="color:orange; background:gray;">태그의 속성</h1>
            <p>태그(Tag)에는 태그의 특징을 설정하는 속성이 있다.</p>
        <h2>태그의 속성(문법)</h2>
            <p>&lt; 태그명 속성1="속성값" 속성2="속성값" &gt; </p>
        <h3>title</h3>
            <p>속성의 종류<br>
            <strong>title</strong> -- 툴팁을 설정할 때<br>
            <strong>href</strong> -- 문서를 연결하여야 하는 경우에 사용<br>
            <strong>alt</strong> --   이미지의 태그에서 이미지 대체 텍스트
            </p>
            <pre>
            <em><b>src</b></em> -- 이미지의 주소나, javascript, jquery등의 파일을 연결할 때 사용
            <em><b>width</b></em> -- 너비설정(이미지, 테이블, 셀)
            <em><b>height</b></em> -- 높이설정(이미지, 테이블, 셀)
            </pre>

위의 태그를 디자인하기 위해서는 CSS를 이용해야합니다.

 

제목 날짜
bxslider 썸네일 옵션 2020.02.19
bx슬라이더 bx-wrapper, bx-pager, pager 링크 css 2020.02.19
bx슬라이더 좌우 화살표 css file 2020.02.18
drop down 네비게이션 2020.02.17
회원가입 페이지 2020.02.07
로그인 페이지-3 2020.02.06
로그인 페이지-2 2020.02.05
테이블1 2020.02.04
로그인 페이지-1 2020.02.03
우리집 고양이-6 2020.02.03
우리집 고양이 페이지-5 2020.01.31
우리집 야용이 페이지-4 file 2020.01.30
우리집 고양이 태그, css 이해 연습1 file 2020.01.29
우리집 고양이-2 file 2020.01.28
우리집 야옹이 페이지-1 file 2020.01.23
세번째 HTML코드 2020.01.17
두번째 HTML 코드 2020.01.15
첫번째 태그 코드 2020.01.14
html(기초)-세번째 시간-태그의 속성, 기본 텍스트 Html 2019.12.16
html(기초)-두번째 시간-태그의 사용 및 메타 태그 file 2019.12.16
태그 목록