오늘은 <span> 태그에 대해 알아보려고 한다.
CSS: HTML 문서에 스타일(글자색이나 크기, 문단 정렬 등)을 입힐 때 사용
HTML에 CSS를 적용하는 방식 3가지
1. 각 태그에 style 속성 하나하나 지정하는 인라인(inline) 방식
2. <head> 태그 안에 <style> 태그를 쓰고 그 안에 스타일 관련 코드를 모두 넣는 내부 스타일시트(Internal CSS)
3. 독립된 별도의 파일에 스타일 지정하는 외부 스타일시트(External CSS)
적용- 1번 인라인 방식으로 글자 크기 변경
인라인 방식으로 스타일 속성 지정하는 방법
| <HTML태그명 style="속성명 : 값 ;"> |
<span> 태그
<p> 태그 전체가 아니라 <p> 태그 안에서 일부 글자만 크기 변경
예)<p> 태그 안의 '여기만 type size 크게 ' 부분만 글자 크기 3배로 하려면?
1. <span> 태그
<p> 태그 안에는 글자 크기를 그대로 두고 싶은 부분과 바꾸고 싶은 부분이 같이 존재함
그런데 브라우저 엔진은 내용의 의미를 읽는 것이 아니라 태그만 해석함
따라서 글자 크기를 바꾸려는 부분 태그를 사용해 구분해 주어야 함
2. <h1><p> 태그 & <span> 태그
이때 사용하는 태그는 <h1>, <p> 태그와 달리 문서의 구조를 나타내는 태그가 아니라, 단지 일부 내용/요소를 구분하기 위한 목적의 태그!!-이런 경우 사용하는 태그가 <span> 태그
구분하고자 하는 텍스트를 <span>~</span>으로 감싸주기-<span> 태그는 주로 특정 부분에 스타일 적용 시 사용
3. 문서 만들기
① VS Code 또는 메모장 열기
② 코드 입력
③ [파일 > 다른 이름으로 저장]
④ 파일을 저장할 위치를 선택하고 파일 이름 'test.html' 입력
. html로 확장자명 입력 /파일 형식 모든 파일/ 인코딩은 UTF-8 선택 후 [저장]
⑤ 바탕화면에 저장한 파일 더블 클릭
⑥ 웹 브라우저에서 제목과 본문, 특히 글자 size 확인
4. <p> 태그에 스타일 코드 추가 font-size 바꾸기
① 앞서 바탕화면에 저장해 놓은 test.html 파일에 마우스를 놓고 마우스 오른쪽 버튼 클릭/연결 프로그램/메모장으로 열기
② 아래와 같이 <p> 시작 태그에 style="font-size:300%;"라는 코드 추가
<p> 태그 안의 글자 크기를 300%(=3배) 입력
③ 문서 저장/ 웹 브라우저에서 글자 크기 확인
<p> 태그의 모든 글자에 크기 3배 확대 적용
5. <span> 적용-일부 글자만 size 바꾸기
① <p> 태그 안의 style 속성은 삭제 후"여기만 큰 글자"를 <span>~</span> 태그로 감싼 후 스타일 속성 추가
② <span> 태그로 감싼 부분만 글자 크기 300%(=3배) 크게.
③ 문서를 저장하고 웹 브라우저에서 글자 크기 확인
"여기만 큰 글자"만 크기가 3배 size로 커짐
④ 문서 저장/ 웹 브라우저에서 글자 크기 확인
"여기만 큰 글자" 크기 3배로 확대
올바른 순간에 잘못된 행동을 하는 것이 삶의 모순 중 하나라고 생각한다
-찰리 채플린-
'일과공부' 카테고리의 다른 글
| [드론 기초] ③ DJI MAVIC MINI (0) | 2021.08.15 |
|---|---|
| [HTML/CSS 기초 강의] ⑮ <display> 태그 (0) | 2021.08.13 |
| [프리미어 기초] ① 프리미어초보 10분만에 편집하기(#영상컷편집#프리미어편집) (0) | 2021.08.11 |
| [드론 기초] ➁ 드론의 역할 (0) | 2021.08.07 |
| [드론 기초] ① 드론(UAVs)이란? (0) | 2021.08.06 |
