[04] 웹 문서에 다향한 내용 입력하기

제목을 나타내는 <hn> 태그

<hn> ~ </hn>
n의 자리에는 1~6의 숫자가 들어감
텍스트를 크기별로 표시할 수 있음(<h1>이 가장 큰 제목)

텍스트 단락을 만드는 태그

~ : 하나의 단락(하나의 덩어리)을 만듦

<body>  
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br> 알맹이가 굵고 통통해 식감이 좋으며<br> 비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
  <hr>
  <h2>레드향 샐러드 레시피</h2>
  <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
  <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>  

  <hr>
  <h2>상품 구성</h2>

</body>

: 강조, 이텔릭체
: break, 줄바꿈 (태그가 들어가는 위치에서 줄 바꾸기 때문에 닫는 태그 없음)
: 강조, 진하게 표시
<hr> : 가로줄 넣어줌 (닫는 태그 없음)
: bold, 굵게, 진하게 표시 (strong은 강조, b는 단지 진하게 표시) (→ 단순히 굵게 표시할 목적이면 태그보단 CSS 사용하는 것이 좋음)

<body>
  <h2>레드향 샐러드 레시피</h2>
  <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
  <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>  
  <ol>
    <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
    <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
    <li>드레싱 재료를 믹서에 갈아줍니다.</li>
    <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
  </ol>
</body>

<ol> : orederd list, 순서가 있는 목록 (1, 2, 3, 4... 순서)
→ 만약 숫자가 아닌 알파벳 순서로 하고 싶다면, <ol type="a">로 작성
<ul> : unoreder list, 순서가 없는 목록, 숫자 자리에 점으로 표시됨
<li> : ol의 1번 항목, 2번 항목,,,

표 만들기

이미지 삽입하기

<img> 태그 사용
같은 경로, 같은 폴더 안에 있던지 그것보 다 하위 images폴더에 있는지에 따라 작성법이 달라짐

<!--ex) images 하위 폴더 안 tangeringes라는 이미지 삽입
이미지는 ★대체 텍스트★를 넣어주어야함(어떤 이미지인지 읽어줌)-->
<img src="images/tangerines.jpg" alt="레드향">

오디오 삽입하기

<audio> 태그 사용

<audio src="medias/spring.mp3" controls></audio>
<!--controls: 재생막대 표시-->

비디오 삽입하기

<video> 태그 사용

<video src="medias/salad.mp4" controls, width="450"></video>
<!--width: 비디오 크기 조절-->

하이퍼링크 만들기

<a> 태그 사용
텍스트에도 이미지에도 링크 만들 수 있음
href 라는 속성으로 연결

<!--멀티미디어 삽입하기 라는 텍스트에 embed.html 링크 연결하기
텍스트 링크 색을 바꿀 때는 CSS 사용-->
<p><a href="embed.html">멀티미디어 삽입하기</a></p>

<!--target="_blank" : 링크를 새 탭에서 열기-->
<p><a href="embed.html" target="_blank">멀티미디어 삽입하기</a></p>

Do it! HTML+CSS+자바스크립트 웹 표준의 정석

소스파일: http://www.easyspub.co.kr/30_Menu/DataList/PUB#2

저작자표시 비영리 변경금지

'Study > HTML | CSS' 카테고리의 다른 글

[05] 입력 양식 작성하기 (0)	2023.02.23
[03] HTML 기본 문서 만들기 (0)	2023.01.16
[01/02] 웹 개발 시작 전 (0)	2023.01.16

빵먹는중_ITing_🍞

[04] 웹 문서에 다향한 내용 입력하기

'Study > HTML | CSS' 카테고리의 다른 글

티스토리툴바

[04] 웹 문서에 다향한 내용 입력하기

'Study > HTML | CSS' 카테고리의 다른 글

'Study/HTML | CSS' Related Articles

티스토리툴바