복습을 하시는 모든 이들에게 축복이 있기를..!!
오늘의 작업은 이때까지 배웠던 모든 태그들을 총동원하여 모양은 좀 떨어지지만 간단한 원리를 사용하여 웹페이지를 만들어 보겠습니다.
우선 우리들의 홈이 되는 페이지를 index.html 파일로 하나 만들어줍니다. 그리고 header 안에 클릭 했을 때 이동을 도와주는 navigation역할을 할 수 있도록 a태그를 사용해서 texts.html, lists.html, table.html으로 이동할 계획입니다. 이제 파일들을 만들어 줍니다.
HTML 파일을 작업하실 때 미리 설치하여 둔 extension들의 도움을 받아 빠르게 작성할 수 있습니다.
! 입력후 탭탭 (탭 2번 누르기)작성 후 Tab 버튼을 2번 누르시면 다른 설정들을 지나 제목을 입력할 수 있습니다. 빠르게 index.html 은 홈페이지, texts.html 은 텍스트, lists.html 에는 리스트, table.html에는 테이블 이라고 적어주시면 되겠습니다.
> index.html
<title>홈페이지</title>
> lists.html
<title>리스트</title>
> texts.html
<title>텍스트</title>
> table.html
<title>테이블</title>모든 페이지는 header, main, footer로 나누어 body 태그 안에 작업하도록 하겠습니다.
<body>
<header>헤더 내용</header>
<main>메인 내용</main>
<footer>푸터 내용</footer>
</body>헤더 작업하기
정확한 웹표준을 지향하기 위함보다 태그들에 익숙해지는 과정을 담고 싶었습니다. a태그와 href 속성을 사용해서 이동하는 페이지를 만들어 보겠습니다. 중간중간 유용한 단축키들과 함께 설명드릴게요.
index.html 을 열어주시고 나머지는 닫아주세요. 그리고 윈도우 환경에서 윈도우키 + 화살표를 누르셔서 화면을 분할해주세요. (개인적으로 왼쪽에 vscode를 두고 작업하는 편입니다.)
저희들이 작업해야할 간단한 모습입니다.빨간 영역들처럼 레이아웃을 나누는 연습을 해주시면 되겠습니다. 사진 아래에 정답이 바로 공개되니 최대한 스스로 코딩을 해보신 뒤 내려가는 것을 추천드립니다.
<header>
<a href="index.html">홈</a>
<ul>
<li><a href="texts.html">TEXTS</a></li>
<li><a href="lists.html">LISTS</a></li>
<li><a href="table.html">TABLE</a></li>
</ul>
</header>이렇게 작업하시면 됩니다.
메인에는 자신에 대한 소개를 간단하게 한 뒤 다시 한번 본문에서도 text, list, table a 태그를 추가해주도록 할게요.
위 ul 태그 안의 내용이 동일하므로 복사 후 붙여넣기 해도 됩니다. 이때 alt + shift + 방향키 후 alt 누른채로 방향키를 내려 이동시켜주시거나 ctrl + c 복사 후 ctrl + v 하시면 됩니다. 편하신 방법을 사용하세요.
<main>
<h1>안녕하세요, 저는 Dexter Yoon입니다</h1>
<ul>
<li><a href="texts.html">TEXTS</a></li>
<li><a href="lists.html">LISTS</a></li>
<li><a href="table.html">TABLE</a></li>
</ul>
</main>footer 영역에는 정말 간단하게 본인의 깃허브 주소만 입력하시면 되겠습니다.
<footer>
<a href="본인의 깃허브 URL 주소 복붙">My Github URL</a>
</footer>index.html 페이지가 마무리 되었습니다. 이제 슬랙에 공유된 style.css 파일을 link 작업으로 연결해주시면 되는데요. index.html가 위치한 폴더에서 style.css 파일을 만들어줍니다. 그리고 스타일을 긁어와 저장해주시면 됩니다.
<html>
<head>
--- 여기에 추가 ---
lin 까지만 입력하면 자동으로 보여줌 그때 link:css 에서 Tab
<link rel="stylesheet" href="style.css" />
</head>
</html>또는 여기서 복사하기
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: whitesmoke;
}
header > ul {
display: flex;
list-style-type: none;
column-gap: 10px;
}
footer {
height: 200px;
background-color: whitesmoke;
display: flex;
justify-content: center;
align-items: center;
}
a {
color: indianred;
text-decoration: none;
}
a:visited {
color: inherit;
}
a:hover {
color: royalblue;
}
table,
tr,
td,
th {
border: 1px solid;
border-collapse: collapse;
}이제부터 모든 스타일들을 에 써서 이곳저곳 복붙하지 않고 style.css 파일에 저장해둔 뒤 불러오기 할 수 있습니다!
head 태그 안에 link 태그 넣는 것을 lists.html, texts.html, table.html 에 작업해주세요.
a 태그에 대해 간단하게 짚고 넘어가기
a 태그를 이용해 이곳저것으로 옮겨다닐 수 있습니다. href 라는 속성안에는 파일, id 그리고 web url 등을 넣을 수 있습니다.
그중에서 id값을 넣을 때는 id 라는 뜻으로 #을 함께 사용해서 적어줍니다.
<a href="#보내버리고싶은ID">보내버리고 싶은 곳</a>
...
<div id="보내보리고싶은곳ID>...</div>저희가 사용할 것은 href 안에 파일명을 넣어주는 것입니다.
심화 과정으로 target 속성안에 _blank를 넣어 새로운 창에서 열 수 도 있습니다만 그건 하지 않겠습니다.
<a href="파일명.html" target="_blank">가즈아</a>
