HTML공부를 해보자2

다시 돌아온 HTML을 공부해보자 시간입니다

저번에 올린걸 못보셨다면

startagainbornagain.tistory.com/59

HTML공부를 해보자

위 링크 글을 읽고 실습을 해보신 후 오시는 편이 더 알기 쉽습니다.

우선 기본적인걸 알려드리면

<title>: html의 제목 또는 브라우저에 뜨는 이름을 말합니다.

<h(숫자)>: 제목이나 글을 강조할 때 사용합니다 숫자(1,2,3,4)마다 크기가 각각 달라지죠

<p>: 문단을 쓸 때 사용합니다.

 

참고로 위에 있는 것들은 사용하실 때 끝에</사용하신거>(예를 들면<p>를 사용하셨다면 끝에</p>)이렇게

써 주셔야 합니다.

 

태그에 따라 시작 태그만 있고 종료 태그가 없는 태그도 존재합니다.

<img> : 이미지 넣기

<br>: 보드체

<hr>:수평선 그리기

 

종료 태그 없이 시작 태그만을 가지는 태그를 빈 태그(empty tag)라고 합니다.

 

이런 것들이 있습니다.

 

오늘은 속성에 대해서 배워보도록 하겠습니다.

 모든 HTML요소는 속성을 포함 할 수 있습니다.  속성(attributes)는 요소에 대한 추가 정보같은 것을 제공합니다. 

한번 사용해볼까요?

 

자 그럼 그 전에 했던 메모장을 켜주세요(만약 html으로 돼 있어 메모장으로 안켜진다면 마우스 우클릭 후 연결프로그램을 메모장으로 바꿔주세요 그리고 다시 웹페이지로 보고 싶다면 익스플로어나 엣지, 크롬 등으로 바꾸시면 됩니다.)

 

href속성

 

href는 다른 웹페이지로 이동시켜주는 URL을 지정합니다. 한번 사용해보도록 하죠

네 여기서 <a>태그는 하이퍼 링크를 정의 할 때 사용합니다.

실행 시키시면

이게 뜨고요 네이버 들어가기를 누르시면

이렇게 네이버가 뜹니다.

 

src속성

 

화상의 경로를 지정해주는 역할을 합니다.

 

이걸 하시려면 메모장으로 만든 html파일을 폴더를 하나 지정해 주셔야합니다

이렇게 폴더 하나를 정해주시고 먼저 사진을 찾아볼까요?

저는 인터넷에서 이 고양이 사진으로 할려고 합니다.(다른 사진을 사용하셔도 좋아요)

이렇게 사진을 저장해 주시고

이렇게 만들어 주세요.

여기서 <img>테그는 이미지를 불러올 때 사용합니다.

네 실행 시키면 이런 식으로 됩니다.

 

오늘은 여기까지고요 좀 더 길게 하고 싶지만 다음 내용이 중요한 내용이라 다음에 적도록 하겠습니다