inline 속성
이전의 block 속성을 가진 태그들은 작성 시 한 줄을 강제적으로 차지하게 됩니다.
반면에, inline 속성 태그들은 자신의 크기만큼만 공간을 차지합니다.
따라서, inline 속성 태그들은 여러개를 붙여서 사용할 수 있습니다.
<span> 태그
span 태그는 공간을 의미하며, 자체적으로는 특별한 의미가 없는 태그입니다.
단, 글에 스타일 또는 자바스크립트를 적용하고 싶을때 사용합니다.
예시코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium
obcaecati ratione magni incidunt ipsa voluptatum cupiditate, tempore
hic necessitatibus porro, vitae quia iusto reprehenderit numquam
perferendis distinctio aliquid maxime aut.
</p>
<hr/>
윗 글과 아랫글(span 추가)은 차이가 없습니다.
<hr/>
<p>
<span>Lorem ipsum</span>
dolor sit, amet consectetur adipisicing elit. Laudantium
obcaecati ratione magni incidunt ipsa voluptatum cupiditate, tempore
hic necessitatibus porro, vitae quia iusto reprehenderit numquam
perferendis distinctio aliquid maxime aut.
</p>
<hr/>
하지만, span 태그에 스타일을 적용할 수 있습니다.
<hr/>
<p>
<span style="font-size: 24px; color: red;">Lorem ipsum</span>
dolor sit, amet consectetur adipisicing elit. Laudantium
obcaecati ratione magni incidunt ipsa voluptatum cupiditate, tempore
hic necessitatibus porro, vitae quia iusto reprehenderit numquam
perferendis distinctio aliquid maxime aut.
</p>
</body>
</html>
실행 결과
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium obcaecati ratione magni incidunt ipsa voluptatum cupiditate, tempore hic necessitatibus porro, vitae quia iusto reprehenderit numquam perferendis distinctio aliquid maxime aut.
윗 글과 아랫글(span 추가)은 차이가 없습니다.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium obcaecati ratione magni incidunt ipsa voluptatum cupiditate, tempore hic necessitatibus porro, vitae quia iusto reprehenderit numquam perferendis distinctio aliquid maxime aut.
하지만, span 태그에 스타일을 적용할 수 있습니다.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium obcaecati ratione magni incidunt ipsa voluptatum cupiditate, tempore hic necessitatibus porro, vitae quia iusto reprehenderit numquam perferendis distinctio aliquid maxime aut.
<a> 태그
a 태그는 다른 페이지로 연결되는 하이퍼 링크를 정의할 때 사용합니다.
href 속성을 추가하여 링크를 연결 할 수 있습니다.
href 에 적용할 수 있는 범위는 일반 url부터, 원하는 html 파일, 전화번호나 메일까지 다양합니다.
전화번호나 이메일은 장치 내 기본 통화/메일 프로그램을 사용하여 연락할 수 있습니다.
target 속성
- _self : 현재 창을 이동시키며, 기본값입니다.
- _blank : 해당 경로로 향하는 새로운 창을 띄웁니다.
예시 코드 (이메일과 전화번호는 자신의 것을 입력해보세요)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<a href = 'https://www.naver.com'>네이버</a>
<a href = 'https://www.naver.com' target='_blank'>네이버(새창)</a>
<a href = '123-4567-8910'>전화번호</a>
<a href = '++++++@----.com'> 이메일 </a>
</body>
</html>
실행결과
네이버 네이버(새창) 전화번호 이메일
위의 2가지 태그 외에도 다양한 inline 태그가 존재합니다.
글꼴
<b> </b> : 볼드체
<i> </i> : 이탤릭체
강조
<del> </del> : 취소선
<ins> </ins> : 밑줄 표시
<mark> </mark> : 하이라이트 표시 ( 형광펜을 사용한 것과 같이 강조표시됩니다.)
첨자
<sup> </sup> : 윗첨자
<sub> </sub> : 아랫첨자
예시 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<pre style="font-size: 1rem">
b 태그는 <b> 볼드체를 </b>
i 태그는 <i> italic 체 처럼 </i> 기울어진 글씨를
sup 태그는 윗<sup>첨자요소</sup>로 사용하고
sub 태그는 아랫<sub>첨자요소</sub>로 사용합니다
del 태그는 <del> 취소선 </del>을
ins 태그는 <ins> 밑줄을 </ins> 적용할 때 사용하며,
mark 태그는 <mark> 하이라이트 표시를 </mark>나타냅니다.
</pre>
</body>
</html>
실행 결과
b 태그는 볼드체를 i 태그는 italic 체 처럼 기울어진 글씨를 sup 태그는 윗첨자요소로 사용하고 sub 태그는 아랫첨자요소로 사용합니다 del 태그는취소선을 ins 태그는 밑줄을 적용할 때 사용하며, mark 태그는 하이라이트 표시를 나타냅니다.
'웹 프론트 엔드 정리본' 카테고리의 다른 글
| css 알아보기 - 선택자 : 전체선택자 * 와 타입선택자, class와 id (0) | 2024.09.30 |
|---|---|
| css 알아보기 - 스타일과 css (0) | 2024.09.30 |
| html 알아보기 - 시멘틱 웹과 div 태그 (1) | 2024.09.26 |
| html 알아보기 : 글 태그 - 제목과 문단, preformat 태그 (0) | 2024.09.23 |
| html 알아보기 : html이란? (0) | 2024.09.23 |
