본문 바로가기

개발자노트/웹

웹 프로젝트 기본예제1 + 이미지 삽입

<title>블록요소</title> <!-- 태그 == 요소(element) -->
<h1> 제목</h1>
<h2>부제</h2>
<p> 내용</p>
<!-- 줄바꿈이 제공된다.
 	 헤딩(h)는 6까지 존재한다.-->

<strong> 인라인요소 </strong>
<span> 인라인요소 </span>

<!-- 줄바꿈x
	 strong 태그는 굵은글씨 
	 문단속성인데 중요한거면 strong을 사용 -->
     
     
<a href="#banana">바나나</a> <!-- #이동할 id로 내부에 있는 정보로 이동도 가능하다 -->
<a href="https://www.naver.com/" target ="_blank"> 네이버</a> <br>   <!-- href == 하이퍼래퍼런스 / <br> == 줄바꿈 -->
<a href="https://www.daum.net/">다음</a> <hr>     <!-- <hr> == 가로선 제공줄바꿈 -->
<a href="https://www.google.co.kr/">구글</a> <!-- a는 대부분 단독으로 안쓰이고 href같은 것들과 같이 쓰인다. -->
<h2 id="banana">banana</h2>
<!-- .class 여러개의 요소들에게 부여되는 공통별명이기 때문에
 a태그 뒤에쓰면 어디로 가야할지 햇갈려서 a태그에는 잘 사용되지 않는다. -->



<!-- 속성이 자동으로 완성 == 필수속성 -->
<!--  alt 는 화면에 나오지 않는다. 그럼에도 쓰는 이유? = 웹 접근성을 준수하기 위해(스크린 리더) -->
<!-- webapp -> 우클릭 -> 폴더생성 -> images -->
<a href="http://www.cgv.co.kr/movies/detail-view/?midx=85999" target ="_blank"><img alt="포스터" src="images/2.png"> </a>
<a href="http://www.cgv.co.kr/movies/detail-view/?midx=83127" target ="_blank"><img alt="포스터2" src="images/5.png"> </a>
<!-- a href를 사용해 앞뒤로 가두면 사진 클릭시 링크로 이동하게도 가능! -->
<a href="http://www.cgv.co.kr/movies/detail-view/?midx=86008" target ="_blank"><img alt="포스터3" src="images/6.png"> </a>

webapp 하위에 다른요소들과 같은 레벨의 imagaes 폴더를 만들어서 그 안에 파일들을 넣어줘야한다!!

'개발자노트 > ' 카테고리의 다른 글

내부 스타일시트와 선택자  (0) 2022.07.22
외부 스타일시트 (스타일시트 / stylesheet )  (0) 2022.07.22
웹 프로젝트 생성법  (0) 2022.07.18
이클립스에서 톰캣연동  (0) 2022.07.18
웹 페이지 기본용어  (0) 2022.07.18