1. Image tag

아래 코드에서 사용된 이미지는 IconFinder에서 다운로드 하였다.

https://www.iconfinder.com/ -> hero 이미지 다운로드 함.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>이미지 태그</title>
  </head>
  <body>
    <!-- iconfinder -->
    <!-- <img src="파일경로" alt="이미지 설명? 이름?"> -->
    <!-- <img src="C:\Visual_Studio_Code\HTML\hero1.png" alt="영웅 이미지1" /> -->
    <!-- 단 가상실행 시에는 이미지가 보이지 않음
    왜? 해당 이미지의 소스는 내 노트북 내에 위치해있지, 서버안에 위치해있지 않기 때문에! -->

    <!-- 절대 경로 -->
    <img src="https://www.tcpschool.com/img/logo.png" alt="TCP스쿨 로고" />

    <hr />
    <!-- 상대 경로 -->
    <!-- 같은 폴더 안에 있으면 ./ 눌러서  -->
    <img src="hero2.png" alt="영웅 이미지" />
    <!-- 같은 폴더 안에 없으면 ./images 눌러서 해당 이미지 선택  -->
    <img src="./images/hero3.png" alt="영웅 이미지" />
  </body>
</html>

<!-- 속성 : 태그에 추가적인 정보를 제공하여 요소의 동작이나 표현방식을 제어하는 역할
            주로, 이름 = "값" 으로 표현된다. 띄어쓰기 때문에 큰따옴표 표시 꼭 해주기 -->

 

1.1 가상웹 실행 시 보이는 화면

 

 

2. Hyperlink tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>하이퍼링크</title>
  </head>
  <body>
    <!-- 절대 경로 -->
    <a href="https://www.naver.com">naver</a>
    <hr />
    <a href="https://www.tcpschool.com"
      ><img src="https://www.tcpschool.com/img/logo.png" alt="TCP스쿨 로고"
    /></a>
    <hr />

    <!-- 상대 경로 -->
    <a href="./test1.html">테스트1</a>
    <a href="./pages/test2.html">테스트2</a>
  </body>
</html>

 

2.1 가상웹 실행 시 보이는 화면

'Web > HTML + CSS' 카테고리의 다른 글

day02_CSS_table  (0) 2025.04.03
day02_CSS basic  (0) 2025.04.03
day03_flex & grid  (0) 2025.04.03
HTML_List tag  (0) 2025.04.01
HTML_Text tag  (0) 2025.04.01

List tag의 종류이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>리스트 태그</title>
  </head>
  <body>
    <!-- 순서가 없는 리스트 -->
    <!-- ul > li*3 = ul라는 부모태그에 > 로 자식태그 연결 후 * 리스트 개수 -->
    <ul>
      <li>김사과</li>
      <li>오렌지</li>
      <li>반하나</li>
    </ul>

    <hr />

    <!-- 순서가 있는 태그 -->
    <ol>
      <li>김사과</li>
      <li>오렌지</li>
      <li>반하나</li>
    </ol>

    <hr />
	<!--<dl> :  설명 목록 전체를 감싸는 태그 -->
    <dl>
    <!-- <dt> : 항목 이름(용어, 제목) -->
      <dt>류정원 선생님</dt>
      <!-- <dd> : 항목에 대한 설명 또는 정의 -->
      <dd>김사과 학생</dd>
      <dd>오렌지 학생</dd>
      <dd>반하나 학생</dd>
    </dl>
  </body>
</html>

 

가상 웹 실행 시 보이는 결과

'Web > HTML + CSS' 카테고리의 다른 글

day02_CSS_table  (0) 2025.04.03
day02_CSS basic  (0) 2025.04.03
day03_flex & grid  (0) 2025.04.03
HTML _Image & Hyperlink  (0) 2025.04.01
HTML_Text tag  (0) 2025.04.01

1. Basic

<!--!를 누른 후 Enter를 하면 기본적인 block tag가 생성된다.-->
<!DOCTYPE html>
<!-- HTML 속성 -->
<html lang="en">
<head>
  <!-- 한글을 포함한 다양한 문자가 깨지지 않도록 UFT-8 인코딩한다. -->
  <meta charset="UTF-8">
  <!-- 모바일 환경에서도 잘보이도록 반응형 설정 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 브라우저 탭에 표시될 제목을 지정 -->
  <title>제목삽입</title>
</head>
<!-- 실제 화면에 표시될 콘텐츠가 들어가는 부분 -->
<body>
	<!-- 주석문은 코드처럼 인식되지 않으나 실제 웹에서 
    페이지 소스로 확인할 수 있으니 민감정보는 적지 않는다. -->
</body>
</html>

<!-- alt + L + O -> live server 단축키이다.
	이때, live server는 가상 웹페이지 화면이다.
    또한 crtl + s 를 누르면 실시간 반영이 가능하니 유용하다.-->

 

2. Text tag

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text tag</title>
  </head>
  <body>
  	<!-- Heading tag -->
    <!-- 블록 태그 -->
    <h1>중요도 제일 높음</h1>
    <h2> ... </h2>
    <h3> ... </h3>
    <h4> ... </h4>
    <h5> ... </h5>
    <h6> 중요도 제일 낮음</h6>
    <!-- h1~h6까지 글자크기가 점점 작아지는데 이를 이용하여 데이터의 중요도를 설정한다.
    그 외의 폰트크기는 CSS에서 디자인하면 되니 HTML에서는 중요도로만 구분하여 짓는다.-->
    <!-- HTML에서는 띄어쓰기나 내려쓰기를 하나하나 설정해줘야한다. -->
    <!-- 띄어쓰기 : <&nbsp; -->
    <!-- 내려쓰기 : <br /> -->
    <hr /> <!-- <hr/>은 밑줄을 그어 단락을 구분한다. -->
  </body>
  </html>

 

2-1. Text tag_ 서식 태그

<p><b>굵게</b> 표현하기</p>
<p><strong>굵게</strong> 표현하기</p>
<!-- <b> <strong> 은 같은 기능을 가진 태그이다.
	왜 같은 기능인데 두가지나 있을까?
    <b>태그는 초창기부터 쓰이던 태그이다. 
    <strong>태그는 <b>태그 이후 만들어졌는데, 이는 데이터를 다루는 사람이 다양해져 
    시각 장애인도 일반 문자와 굵은 문자를 구분할 수 있게끔 리더기에서 구분해줄 수 있는 태그이다.-->
<hr />

<p><i>이탤릭체 표현하기</i> 표현하기</p>
<p><em>이탤릭체 표현하기</em> 표현하기</p>
<!-- 이탤릭체 표기하는 태그 또한 후자태그를 사용할 경우
	리더기에서 이탤릭체임을 구분해줄 수 있는 태그이다. -->

<hr />

<p><ins>밑줄</ins>표현하기</p>
<p><del>삭제</del>표현하기</p>

<hr />
<!-- <sub>는 주로 방정식과 같은 거듭제곱을 사용할 때 사용된다. -->
<sup> : 지수

<hr />
<!-- <sub>는 주로 원소표기와 같은 아래지수가 필요할 경우 사용된다.  -->
 <sub> : 아래지수

 

3. 가상 환경 실행 시 보이는 화면

'Web > HTML + CSS' 카테고리의 다른 글

day02_CSS_table  (0) 2025.04.03
day02_CSS basic  (0) 2025.04.03
day03_flex & grid  (0) 2025.04.03
HTML _Image & Hyperlink  (0) 2025.04.01
HTML_List tag  (0) 2025.04.01

+ Recent posts

티스토리툴바