html 기초에 대해 알아보자
html 구조
<!DOCTYPE>
<html>
<head>
</head>
<body>
</body>
</html>1. <!DOCTYPE>
html 문서라면 제일 처음에 위치해야 하는 선언문
어떤 버전의 html 을 사용했는지 알려준다.
가장 최신이자 많이 쓰는 버전은 hmtl5버전이다.
html태그 다음에는 항상 head태그가 위치합니다.
제목, 설명, 부가 정보, 기술적 내용 등,,,
예시
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> </head> <meta charset="utf-8"> : 한글, 일본어, 중국어가 포함된 페이지라면 utf-8 이라는 값으로 문자 인코딩을 추가해줘야 함. <meta name="viewport" content="width=device-width"> : 디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미입니다. <title>repl.it</title> : 브라우저 탭에 보이는 페이지 이름입니다.
2. span vs p 차이
<span></span>태그에는 주로 텍스트를 넣어준다. 그러다 문장이 각각의 줄로 나타나지 않고 한 줄로 이어서 나타나는데, 이를 inline-element 라고 한다.
<p>태그는 주로 문단에서 사용 > 줄바꿈 일어남 !
3. div
웹사이트에서 섹션을 나눌 때 사용한다.
왜 div를 쓰지?!
비슷한 부분끼리 그룹지어주고
디자인에 맞게 레이아웃을 분리해주고,
각 div에 class나 id라는 attribute를 부여하여 css 스타일을 입혀줄 수 있기 때문!
4. link, href,, 등
<link href="index.css" rel="stylesheet" type="text/css" />- link : 사용할 css파일을 링크해준다.
- href : href 속성에 css 파일 경로를 작성한다.
- type : link태그로 연결되는 파일이 어떤 것인지 알려준다.
위의 경우 css file을 연결하므로 type값은 항상 "text/css"이다. - rel : HTML file과 CSS file과의 관계를 설명하는 속성이다.
css파일을 링크할 때는 항상 "stylesheet"값을 대입해줍니다.
back-end 개발자