2021. 4. 26. 13:31ㆍHTML/Basic
<html>
<head>
</head>
<body>
</body>
</html>
html문서는 이런 구조를 가지고있습니다
우선 head에서 짚고 넘어가야 될 부분이 CSS를 가져오는 부분입니다
<link href="fileName.css" rel="stylesheet" type="text/css">
위에 link 태그에 속성들 중 href는 파일을 가지고와주는 속성이고,
rel 속성은 현재 문서와 외부 리소스 사이의 연관 관계를 명시합니다
type은 가지고 오는 파일의 타입을 나타내는 속성입니다
우선은 위에 알려드린 부분을 외우시고 href에 들어갈 css파일명만 적절하게 수정해서 사용하시면 되겠습니다
css를 잘 삽입했다고 가정하고 진행하겠습니다
<body>
</body>
다음 설명 드릴 부분은 body 태그입니다
일반적으로 웹에 보여지는 부분이고 저희가 코딩을 할때 비중이 어느정도 있는 부분입니다
또, HTML을 잘 만들어둬야지 나중에 CSS,JavaScript 등 후에 사용될때 좀더 편하게 작업이 가능합니다
HTML은 다양한 태그들이 존재하고 있습니다
<html>자체를 나타낼때도 태그로 나타내고 있죠
body에서 사용하는 태그들은 header, nav, main, section, article, aside, figure, img, footer, div, span 등등 다양하게 존재합니다
지금 적어드린 위 태그들이 주로 사용되며, 외에 몇가지가 추가로 더 사용이 되지만 추후에 이야기 하도록 하겠습니다
HTML 태그에는 속성이 존재합니다
이미 head에서 css를 가져올때 사용 되었던 href, rel, type이 속성입니다
body에서는 id, class, value, name, href 등 다양하게 존재하고있습니다
(어떤 속성들이 존재하는지 알고 싶으시면 아래 링크를 참고하시면 될거같습니다
developer.mozilla.org/ko/docs/Web/HTML/Attributes
이어서 속성들 중에서 먼저 짚고 넘어가야 할 부분이 id와 class입니다
id는 body내 에서 한 태그에 한번 사용할수있으며, 같은 이름으로 추가로 생성을 하면 안되는 속성입니다
id값이 동일하여도 CSS는 적용이 되지만 나중에 웹표준 검사에서 에러가 나오게 됩니다
class는 body내 에서 여러 태그에 중복으로 사용할수있으며 한 태그에 복수의 클래스명을 주는것 또한 가능합니다
그러면 전부 class를 쓰면 되고 id는 안쓰면 되는거 아닌가요??라는 질문과
id는 어떤때에 사용을 하는거죠?? 라는 질문을 하시게 될거같습니다
id는 처음부터 하나밖에 사용이 안되는 태그에 사용하게 됩니다
간단한 예시로 보여드리겠습니다
<body>
<header id="header">
<div id="logo"></div>
<nav id="nav">navigation
<ul>
<li class="list">list</li>
<li class="list">list</li>
<li class="list">list</li>
<li class="list">list</li>
</ul>
</nav>
</header>
</body>
우선 간단하게 태그부터 설명 드리겠습니다
header는 웹페이지를 만들때 상반 부분을 만들때 사용하는 태그입니다
nav는 navigationBar를 나타내는 태그이며 주로 상단 메뉴를 만들때 사용합니다
보통 html 코드작성시 logo를 상단에 navigationBar를 하단에 배치하는게 기본적입니다
이때 header와 logo,nav는 왜 id속성을 사용하였을까요??
네 html문서 내에 상단부분과 로고,상단 메뉴는 최초 한개밖에 없습니다
중단이나 하단에서 사용하지 않는 태그이기 때문에 중복이 생길 일이 없기 때문에 id 속성을 사용한것입니다
반면 list는 여러개가 존재하면서 웹페이지 내에 추가적으로 더 있을수도 있기때문에 class를 사용한것입니다
이제 어느정도 감이 오시나요??
오늘은 html의 태그와 id,class속성에 대해서 알아봤는데요
다음 시간에는 다양한 태그들에 대해서 알려드리는 시간을 가져보겠습니다
'HTML > Basic' 카테고리의 다른 글
| [초급] 초급 #3 (0) | 2021.05.24 |
|---|---|
| [HTML] 초급 #1 (0) | 2021.04.23 |
| [HTML]div,span(code) (0) | 2021.04.22 |