View
HTML 선언 기초
html을 시작할때 선언하는 기초 문법들이다. 몰론 해당 선언문 중 몇가지는 작성하지 않아도 문제없이 구동된다. 그러나 더 정확하고 완벽한 코딩을 원한다면 기초 선언문은 당연하게 선언해야한다.
<!doctype html>
: html을 기반으로 작성되었다는것을 선언하는 Element이다. css가 올바르게 적용되기 위해서는 꼭 선언해야한다.
doctype은 대문자로 써도 상관없다.
<meta charset="UTF-8">
: 한글,중국어, 일본어를 출력하기 위해 꼭 공통적으로 사용해야하는 메타태그. 이 태그가 사용이 안된다면 문자가 깨져서 나오는 오류가 발생할 수 있다.
<head>
: 웹페이지에서는 보이지 않는다. 브라우저에게 표시되는 정보, 메타태그는 head안에 작성한다. 사이트의 이름이 되는 title도 마찬가지. 정말 당연하게도 스크립트, 스타일, 링크도 여기에 기입해야한다. 가끔 header랑 헷갈려하는 분들이 있는데 둘은 전혀 다른 태그다.
<title>
: 웹페이지의 이름. 크롬이나 파이어폭스, 익스프롤러에 뜨는 탭이름이 titile이다.
<body>
: 시각적으로 보이는 웹페이지 부분이다. 대부분의 컨텐츠는 body에 넣는것을 기본으로 시작한다.
<link rel="" href="" >
: 코딩을 진행하다보면 html자체만으로도 엄청난 길이가 되는 경우가 많다. 이때 link를 쓰면 편리하게 작성이 가능하다. 대신 파일경로들이 깔끔하게 정리가 되어있어야하는데 폴더를 css,js,html로 나누면 보기 좋다. rel은 링크된 대상과의 관계를 설정하는 약자이고, href은 경로를 표시한다. css는 rel 부분에 stylesheet등 문서의 형식을 작성한다.
<script src="">
: 스크립트를 사용하기 위한 태그. src는 href와 비슷한 맥략인데, 경로를 표시하는 역할을 한다.
HTML 태그
html에서 가장 자주 사용되는 태그 몇가지를 정리하고자 한다. 해당 태그에는 Semantic Tag도 존재하며, 컴퓨터가 언어를 이해하기 기 용이하게 제작된 태그이기때문에 상황에 맞춰 다채롭게 써주는것을 추천한다.
<header>
: 가장 위에 쌓이는 태그. '머리'라는 단어 자체로 맨위에 위치하는 머릿글이다.
<nav>
: 네이게이션역할을 한다. 메뉴를 제작할때 사용하기 용이하다.
<main>
: 메인은 본문의 주요내용을 표시한다. 한번만 사용이 가능하며, 큰 그룹을 묶는다는 의미로 section과 비슷한 의미를 가지고 있다. 다만 Maim은 dom구조에 직접적인 영향을 주지 않는다.
<section>
: 비슷한 그룹을 묶는 역할을 한다. html에서 독립실행형영역이다.
<article>
: 본문의 주요 내용을 나타낸다. 시멘트방식으로 쌓는다면 section안에 article이 들어간다. section이 대제목이라면 article은 내용이라고 이해하면 쉽다.
<footer>
: 웹의 가장 하단에 위치한다. 꼬리말을 의미한다. 홈페이지의 주소, 저작권표시, 로고, 가이드메뉴 등 홈페이지의 다양한 정보를 넣는데 쓰인다.
<h1~h6>
: heading의 약자로 제목을 작성할때 유용하게 쓸수있는 문자태그. 크기는 1~6까지 있으며 6이 가장 작은 크기다.
<p>
: 하나의 단락을 만들수있는 문자태그. 긴글을 나열할때는 용이하나 p태그는 코딩할때 작성한 줄바꿈이 반영되지 않는다.
<pre>
: p태그와 비슷한 용도이지만 다른 특징이 있다. 위에 설명한것처럼 p태그는 줄바꿈이 반영되지 않는다. 하지만 pre는 코딩에서 썻던 본문 내용이 그대로 표시된다. 줄바꿈이 그대로 반영된다는 의미다.
<br>
: 줄바꿈태그. 단락을 나눌때 사용한다.
<strong / b / em>
: 이 세가지 태그는 워낙 역할이 비슷해서 묶어서 정리하려 한다. 셋다 공통적 특징은 굵게 표시라는 것. 차이점이라고하면 <strong>,<em>은 따로 강조하고싶은부분에 표시하는 형식이지만 <b>는 그냥 굵게. 라는 뜻이란것. 개발자에 따라 취향에 따라 사용되는 코드다.
<img>
: 이미지 태그. src를 붙여 연결 링크를 표시한다.
<div>
: 정말 중요하고 많이 쓰이는 태그. div는 웹페이지에서 레이아웃을 잡을때 가장 많이 사용되는 태그이며 html문서 구조와는 상관없이 여러요소를 하나로 묶어 구분시켜줍니다. 사실 위에 시멘트태그사용 안하고도 div만 있어도 전부 작성은 가능하다. 다만 Semanticweb의 구현을 위해서는 시멘트태그를 사용하는 것이 좋다.
<ul / li /ol>
: nav를 쉽게 표현할수있기에 정말 많이 쓰인다. li은 리스트형태그로 할일목록리스트라고 생각하면 편하다. 다만 li의 불편한점은 모든 리스트가 연결되서 보이기때문에 그룹 구분이 어렵다는것! 그때 쓰는게 ul이다. ul은 그룹핑태그로 리스트들의 주제를 나타낼수있다. 리스트의 대제목이라고 보면 된다. 그래서 코딩을 하면
<ul>
<li></li>
<li></li>
<li></li>
</ul>
이러한 형태로 작성을 하게 된다. 단순리스트만 적는다면 굳이 ul를 작성하지 않아도 된다. 단 li는 리스트이기때문에 무조건 리스트스타일이 기본적으로 붙는다. 이건 나중에 스타일시트에서 수정을 해줘야한다. ol은 li와 비슷한데 숫자리스트라는것. 1,2,3,4~ 이런식으로 작성이 된다. 쓰고자하는 리스트에 따라 사용하면 편리하다.
<span>
: 문자를 담아내는 태그이다. 문자용 박스.
<id / class>
: 중요한 내용이라서 같이 다뤄본다. 얘네들은 이름표라고 생각하면된다. 예를 들어서 이사짐정리를 해서 많은 박스에 짐들을 분류해서 이동했다고 치자, 도착해서 내용물을 구분하려면 박스마다의 이름이 필요하다. 아니면 다 똑같이 생긴 박스일테니.... div랑 span도 똑같다. 많이 사용하는 태그일수록 이름을 잘붙여줘야한다.
id와 class의 가장 큰 차이는 중복사용의 여부다. id는 고유이름이다. 정말 html 문서내부에서 딱 한번만 지정하는 이름이다. 다른태그에 중복사용이 어렵다. 보통 header, nav 등 정말 딱 한번 쓸 큰이름들에 사용하면 좋다.
class는 중복사용이 가능하다. div여러개에 class 이름을 동일하게 붙여도 상관없다. 동일한 스타일이 적용되야한다면 class를 사용하는게 더 유리하다. 사실 id보단 class를 더 많이 쓰게된다.
앗 그리고 가장 중요한점!!! 코딩은 나만 보고 끝나는게 아니라서 이름정리를 정말 잘해줘야한다. 처음에 나쁘게 습관이 들면 나중엔 고치지기 힘드니 처음부터 습관을 들이는게 좋다고 생각한다. 메뉴이름도 class="menu1","menu2" 등 잘써줘야지... 막 class="ttt","ddd" 이렇게 지으면 안된다는 것이다. 이렇게 지으면 본인도 후회한다. 찾기가 너무 어렵고 복잡하기때문이다. 본인만의 룰을 만들어서 이름을 붙이면 어렵지 않다고 생각한다.
CSS 태그
CSS에서 가장 기초적으로 사용되는 태그를 정리하려 한다. CSS 태그는 정말 다양하니 모두 다 외우려 암기압박을 느끼기보다는 필요할때마다 찾아 사용하는것이 좋다. 자주 사용하는 태그는 눈에 익어 자동으로 암기가 될 것이다.
margin / padding
: 여백을 설정하는 태그들이다. margin과 padding은 여백태그라는것은 동일하지만 사용하는 방식이 다르다.
margin은 바깥여백태그로 요소간의 간격을 넓힐때 사용된다. padding은 안쪽여백태그이다. marding과 동일하게 요소간의 간격을 넓힐때도 사용할 수 있지만 안쪽여백을 줄이는 것이기 때문에 padding을 지정한 요소의 크기를 넘어서까지의 여백은 지정할수없다.
둘의 가장 큰 차이점은 요소가 이동을 할 수 잇냐, 없냐인것같다. margin은 바깥여백이 늘어나는것이기때문에 요소의 위치를 조절할때 사용할수있다. 하지만 패딩은 요소의 기본 크기를 벗어나지 않기 때문에 움직이지 않는다.
이 차이점을 이용하면 손쉽게 요소를 정리할수있다. margin과 paaidng모두 상하좌우로 위치조정이 가능하고 개별로 지정할수있다.
상황에 따라 margin-top같이 위치개별태그로 사용하기도 하지만 코딩의 최소화를 위해 한번에 적는 경우도 많다. margin: 0 0 0 0;으로 작성이 가능하며 순서는 시계방향으로 위 오른쪽 아래 왼쪽이다. 저건 네가지로 적엇을때의 순서이며, maring:0 0 으로 적었다면 상하,좌우의 순서로 적용된다.
border
: 테두리를 설정하는 태그. 테두리 선이다. border의 선언법은 border: 선굵기 선종류 선색상;
선의 종류는 solid(실선),dotted(점선),double(이중선),dashed(파선)등이 존재한다.
text-decoraition
: 문자를 꾸미는데 사용하는 태그. 밑줄, 취소선,윗선이 있어 쇼핑몰을 제작할때 사용하기 편리하다.
font-size
: 문자의 크기를 지정하는 태그.
color / background-color
: 색상태그, color는 문자열에 적용되며 배경에 적용을 원한다면 background-color로 적용해야한다.
width / height
: 요소의 가로폭 / 세로폭을 지정하는 태그.
text-align
: 문자를 정렬하는 태그. 중앙, 왼쪽, 오른쪽, 양쪽정렬등이 가능하다.
'Review' 카테고리의 다른 글
| CSS flex 속성 (1) | 2020.07.26 |
|---|---|
| 개발자 도구 (0) | 2020.07.24 |
| JavaScript 복습하기 -1 (0) | 2020.07.23 |
| JavaScript 기초2 (0) | 2020.07.22 |
| Selector + blockquote + JavaScript 기초 (0) | 2020.07.21 |
