HTML CSS

html 개념 되집기. 이미지를 클릭하면 설정한 링크로 이동하기.

GABOJOK 2023. 6. 12. 05:16

 

 

 

웹페이지 만들때 쓰는 언어. html. (하이퍼 택스트 마크업 랭귀지 약자)

mark up  언어. --->>>  자료들이 어떻게 생겼나. 구조를 표현하기 위한 언어.

 

 

 

메인페이지의 경우 보통 index라고 작성함. 

 

 

img 태그

<img src = " "> 

끝나는 태그 없음. 이미지 태그 안에 src라는 속성 기입.

주소로 가져올게 아니라면, 이미지파일 작업 폴더 안에 넣어야 함.

그래야 왼쪽 파일트리에 해당 파일이 뜨고, 그걸로 인해 따옴표 안에 이미지 이름(혹은 경로) 만 넣어서 가져올 수 있음. 

 

<a>

링크로 갈수 있게 하지만. href = " " 속성을 같이 사용하여야 링크로 갈수 있음. 따옴표 안에는 링크 걸 주소. 

 

 

<ul>,< li> 이러면 같이 쓰임. 만약 번호를 집어넣어서 리스트화 하고 싶다면, <ul>대신에  <ol>로.

 

<span></span>

글자를 감쌀수 있는 태그. 글자 일부만 뭔가를 하고 싶을때 그 글자주변에 span태그를 쓴다. 

 

 

이미지를 클릭하면 설정한 링크로 이동하도록!!

<a href = " 링크의 주소를 입력하세요 ">

     <img src = " 이미지 주소 혹은 경로를 입력하세요">

</a>

 

 

본문에 내용들중 특정 글자를 클릭하면 설정한 링크로 이동하도록

<p>아인슈타인은 상대성 이론을 말한 사람입니다. </p>

이런 코드가 있다고 했을때

"아인슈타인은" 이라는 글자를 누르면 아인슈타인에 대한 정보를 볼수 있는 곳으로 넘어가는 링크를 걸어두고 싶다면?

 

<p>

     <a href = " 아인슈타인에 대한 정보가 담겨있는 페이지 주소" >아인슈타인은 </a>

     상대성 이론을 말한 사람입니다.

</p>

 

 

 

 

'HTML CSS' 카테고리의 다른 글

간단한 UI 만들기 (CSS 활용)  (0) 2023.06.26
css 기초 다잡기.  (0) 2023.06.12