HTML / CSS / JS로 내가 좋아하는 애니나 영화의 덕질을 해보자.
목차
이 상태에서 일일이 <! doctype> 태그 쓰고 <html> 태그 쓰고 이러지 말고 그냥 !(느낌표) 눌러주고 tab 버튼 눌러라
title 태그는 우리가 브라우저를 쓸 때 탭에 표시되는 이름을 표현할 때 쓴다.
<title>The Simpson</title>
자 title 태그도 채웠고 이제는 제목을 나타내 보자.
보통 제목은 <h1> ~ <h6>태그로 나타낸다. (숫자가 커질수록 글의 크기가 더 작아진다. h1 > h4 > h6)
나는 큼지막한게 좋으니까 h1태그를 사용하겠다.
<h1>The Simpson<h1>
근데 뭔가 빠진 거 같다.
예를 들어 내가 네이버에 접속해서 막 이리저리 보고 있다가 네이버 메일을 확인하고 싶으면 어떻게 하면 될까?
제일 빠른 방법은 오른쪽 상단에 위치한 내 계정 이메일 아이콘을 누르면 되고 또는 다시 네이버 메인으로 가면 된다.
자 그러면 제목을 입력했을 때 메인으로 다시 돌아오는 기능을 <a> 태그로 구현해 주자. (a는 anchor의 약자)
<h1><a href="index.html">The Simpson</a></h1>
a href 뒤에 작성한 index.html이 맨 앞 페이지이다.
이번에는 style속성을 이용해 컬러를 변경해보자
심슨하면 떠오르는 색은? 노란색 yellow
<h1 style="color: yellow;"><a href="index.html">The Simpson</a></h1>
스타일 속성 값에 컬러: yellow; 적어주면 완료
그다음에는 이미지를 삽입해보자.
이미지를 넣기 위해서는 img태그를 사용하자
<img src="https://w.namu.la/s/a60874eddb91d70cb5d03f3d8236520d993035a7465207df6afa6709084a992ecf2acb204bdd01bf5b32b634410f33bf9cacd2d1000291925df391b040c01642fb75ad2636c615721f71fa21d3f108eb751c5360bc2774b652c3fddca90b9f66">
나는 이미지를 로컬 저장소에서 가져오지 않고 나무 위키의 심슨 항목에서 가져와보았다.
다음은 본문이다. 심슨 홈페이지를 만들었으면 왜 만들었는지 설명해야 하지 않겠나.
본문은 body태그 안에 <p>태그를 넣어서 만들어준다.
<p>심슨 가족을 소개하겠습니다!</p>
다음은 심슨 가족의 구성원을 목록으로 표현해보자.
우선 목록을 표현하는 방법은 대표적으로 ol과 ul이 있다.
ol = ordered list
ul = unordered list
ol로 표기하면 리스 옆에 1, 2, 3 등등 숫자로 표시된다.
ul은 그냥 옆에 점이 생길거다.
나는 ul로 만들어보겠다.
<ul>
<li>호머 심슨</li>
<li>마지 심슨</li>
<li>리사 심슨</li>
<li>바트 심슨</li>
<li>매기 심슨</li>
</ul>
'Programming > front-end' 카테고리의 다른 글
| html/css/js로 덕질하기(2편) (0) | 2021.07.10 |
|---|
