기본 문법들을 정리하고 어떤 실습을 했는지 적어보고자
강의를 들을 때 적어놨던 글과 실습 캡처본을 올려봅니다.
사이트 이름 설정하기
페이지 이름은 시작태그 <title>과 종료태그 </title> 사이에 들어간 말로 설정할 수 있다.
<title>과 같은 페이지에 대한 정보랑 내용을 작성하기 위해서
<head>라는 태그와 <body>라는 태그를 사용할 수 있다.
위 사진을 보면 사이트의 이름이 NEWSLETTER이고, 내용은 안녕 HTML!인 것을 확인 할 수 있다.
이는 <title> 태그로 NEWSLETTER을 작성하고,
<body> 태그로 안녕 HTML!을 작성했음을 알 수 있다.
제목 만들기
큰 제목과 작은 제목들을 <h1>, <h2>, <h3> ... 등의 태그를 사용하여 작성할 수 있다.
큰 제목은 <h1>, 작은 제목은 <h2>, 그보다 작은 제목들에는 <h3>, <h4>.. 태그를 사용하면 된다.
아래 사진처럼 나타내기 위해서는 가장 큰 제목은 <h1> </h1> 태그 사이에 작성하면 되고,
본문은 <h2> </h2>코드에 작성하면 된다.
본문 만들기
<p> </p> 태그를 이용해서 단락을 만들고
<br>을 사용하여 줄 바꿈을 만들어 낼 수 있다.
링크 추가하기
<a> 태그를 사용하여 href라는 속성으로 이동할 주소를 지정해줄 수 있다.
<a href="주소"> 문구 </a> 와 같이 사용할 수 있다.
<a> 태그 사이에 있는 문구는 해당 링크 주소로 넘어가기 위해 눌러야 할 곳에 나타나는 문구이다.
이미지 추가하기
<img>태그를 사용하여 이미지를 추가할 수 있다.
<img>태그는 다른 태그들과 다르게 종료태그가 존재하지 않는다.
src 속성을 이용해서 경로를 적어 사용하면 된다.
예를 들어 getfeelingsfrom.png를 삽입하고 싶으면
<img src="getfeelingsfrom.png"> 라고 작성할 수 있다.
위에서 배운 문법 개념들로 나만의 위키페이지를 만드는 실습을 진행하였다.
데이식스 영케이 군의 간단한 위키페이지를 만들 수 있게 됐다!
무사히 원하는 사진과 이름 그리고 인스타그램 연결까지 완료 !!
내가 처음으로 처음부터 끝까지 작성한 HTML 코드라 캡처까지 해두었다..
역시 배우기만 하는 것이 아니라 무언가 결과물이 있는게 더 뿌듯하고 좋은 것 같다!
'html • css' 카테고리의 다른 글
| HTML 핵심개념 뽀개기! (3) 테이블, 멀티미디어 (0) | 2024.07.22 |
|---|---|
| HTML 핵심개념 뽀개기! (2) 텍스트, 리스트 (2) | 2024.07.20 |
| CSS 핵심개념 시작하기 끝! (0) | 2024.07.19 |
| HTML 핵심 개념 뽀개기 (1) 코멘트, 링크 (0) | 2024.07.18 |
| HTML/CSS 시작하기 (0) | 2024.07.16 |