HTML이란?
하이퍼 텍스트 마크업 언어(Hyper Text Markup Language, HTML)
짧게 설명하자면, <태그> 형식을 이용하여 제목, 단락, 목록 등 구조적 문서를 만들 수 있는 방법을 제공하는 마크업 언어입니다.
아래는 HTML의 기본적인 템플릿 입니다.
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body></body>
</html>
HTML 기본태그 사용하기
앞서 HTML은 <태그> 형식을 사용하여 여러 구조적인 요소를 사용한다고 하였습니다.
HTML의 기본 태그 목록들 입니다.
1
2
3
4
5
6
7
8
9
10
11
<h1>글 제목</h1>
<p>글 본문</p>
<img src="이미지 경로" />
<a href="링크 경로">링크</a>
<button>버튼</button>
<ol>
<li>순서가 있는 리스트</li>
</ol>
<ol>
<li>순서가 없는 리스트</li>
</ol>
태그들은 각자 역할이 있으며, 이러한 역할에 올바르게 작성해야합니다.
기본 CSS 사용하기
대부분의 태그는 style이라는 속성을 이용하여 꾸며줄 수 있습니다.
예를 들어, 아래와 같은 코드를 이용해 글 본문 내용의 색상과 글자 크기, 글자 굵기를 바꾸어 줄 수 있습니다.
1
<p style="color: blue; font-size: 16px; font-weight: bold"></p>
글자에서 자주 사용되는 속성들은 다음과 같습니다.
1
2
3
4
5
6
7
p {
color: #333; /* 글자 색상 */
font-size: 16px; /* 글자 크기 */
font-weight: 400; /* 글자 굵기 */
font-family: "Nanum Gothic", sans-serif; /* 글자 폰트 */
text-align: center; /* 글자 가운데 정렬 */
}
전체 속성들은 해당 사이트에서 확인 할 수 있습니다.
속성들은 암기할 필요는 없습니다. 어떤 속성이 있는지만 기억하고 필요할 때 검색하여 찾아 써도 괜찮습니다.
특정 글자만 스타일 적용하기
아래와 같이 특정 글자만 스타일을 적용 할 수 있습니다.
1
<p>안녕하세요 저는 <span style="color:red">HTML</span>을 배우고 있습니다.</p>
외부 CSS 파일 이용하기
외부 CSS 파일을 이용해서 좀 더 효율적으로 웹 문서를 작성 할 수 있습니다.
이를 위해서 아래와 같이 HTML 파일의 <head>
부분에 <link>
태그를 이용하여 CSS파일 경로를 지정해야 됩니다.
1
<link href="css파일 경로" rel="stylesheet" />
css 파일 경로는 “./css/main.css”와 같은 형식으로, “./” 는 현재 경로를 의미하고 “css/main.css”는 css 폴더 안에 있는 main.css 파일을 뜻합니다.
즉, 위와 같은 경로를 해석하자면 현재 HTML 위치에 있는 css폴더 안의 main.css파일을 불러오겠다는 의미입니다.
이제, 기본 CSS 사용하기에서 사용했던 스타일을 CSS 파일에서 작성해보겠습니다.
1
2
3
4
5
p {
color: blue;
font-size: 16px;
font-weight: bold;
}
위의 css 코드는 모든 p태그에 color, font-size, font-weight 속성을 적용하는 코드 입니다.
이외에도 CSS Selector(선택자)을 이용하여 특정 태그만을 선택 할 수도 있습니다.
클래스 선택자는 .class, ID 선택자는 #id, 태그 선택자는 tag으로 작성 할 수 있고, 선택자는 띄어쓰기나 꺽쇠(>)로 구분처리 합니다.
이외에 가상 클래스 선택자(:), 인접 형제 선택자(-) 등이 있지만 생략하였습니다.
아래처럼 class와 id 속성을 p태그에 적용 시킨 뒤, CSS 파일에서 선택자를 이용하면 해당 태그를 찾을 수 있습니다.
1
2
3
4
5
6
<div class="container">
<p class="content"></p>
<p id="title">
<span> test </span>
</p>
</div>
1
2
3
4
5
6
.container .content {
color: blue;
}
#title span {
color: red;
}
.container .content선택자는 클래스 이름이 container인 코드의 자식 중 클래스 이름이 content인 코드를 찾는 선택자 입니다.
#title span 선택자는 ID가 title인 코드의 자식 중 태그 이름이 span인 요소를 찾는 선택자 입니다.
이를 응용하면, 좀 더 복잡한 코드 내에서 원하는 css를 찾을 수 있습니다.
잘 작성된 CSS 코드는 이러한 선택자를 잘 이용하여 재사용이 가능하도록 설계한 코드입니다.
아래는 html에서 클래스를 다중 부여하여 스타일링 코드입니다.
1
2
3
4
<div>
<button class="btn">버튼</button>
<button class="btn clicked">버튼</button>
</div>
1
2
3
4
5
6
7
8
9
.btn {
width: 100px;
height: 100px;
background-color: black;
color: white;
}
.clicked {
background-color: gray;
}
셀렉터(선택자)의 우선순위
그렇다면 class와 style 등 여러 요소가 겹치는 경우에는 어떻게 적용될까요?
이런 경우에는 셀렉터의 우선순위를 비교해서 우선순위가 높은 순서대로 적용이 됩니다.
우선순위는 아래와 같습니다.
인라인 스타일 -> style="" (1000점) ID 선택자 -> #id (100점) Class 선택자 -> .class (10점) 유형 선택자 -> p (1점)
이외에도 !important, 의사요소(:before)등 여러 요소가 있지만, 간단하게 배운 내용만 기입하였습니다.
이러한 선택자들은 합연산으로 적용이되며, 계산 방식은 아래와 같습니다.
1
2
3
4
5
6
7
.content p.item {
}
/* 클래스 + 태그 + 클래스 = 10 + 1 + 10 = 21점 */
#title p {
}
/* id + 태그 = 100 + 1 = 101 점; */
만약 점수가 같을 시, 나중에 해석된(작성된) 스타일을 적용합니다.
웹 레이아웃
<div>
태그를 이용하여 웹 레이아웃을 작성 할 수 있습니다.
해당 태그는 박스와 같은 역할을 수행합니다. 이러한 태그들을 여러번 사용하여 복잡한 구조의 웹 페이지 레이아웃을 제작 할 수 있습니다.
1
2
3
4
5
6
div {
margin: 20px; /* div 요소 밖의 여백 */
padding: 30px; /* div 요소 내부의 여백 */
border: 1px solid black; /* 테두리 굵기 */
border-radius: 5px; /* 테두리 둥글게 */
}
padding과 margin은 쉽게 비교하면 풍선으로 예를 들 수 있습니다.
Padding은 풍선 내부의 부피가 커지는 것이고, maring은 풍선 밖에 거리가 늘어나는 것 입니다.
Padding을 부여하게 되면 안에서 부피값이 증가하기에, 기존에 설정한 크기보다 좀 더 커지게 됩니다.
border 속성도 마찬가지로 안에서 늘어나는 형식이기에 요소의 크기가 커집니다.
이를 아래와 같은 코드를 이용하여 해결 할 수 있습니다.
1
2
3
4
.box {
box-sizing: border-box; /* 박스의 폭은 border까지 포함 = 테두리 기준 */
box-sizing: content-box; /* 박스의 폭은 padding 안쪽 = 콘텐트 영역 */
}
<margin>
<padding>
태그 같은 경우에는 상(top) 하(bottom) 좌(left) 우(right) 여백을 지정 할 수 있습니다.
속성 값은 시계화면으로 돌아가며 순서대로 상단, 우측, 하단, 좌측 순이며 3가지 값만 지정한 경우에는 상단, 우측과 좌측, 하단 순입니다.
2가지 값을 지정한 경우에는 상단과 하단, 좌측과 우측 그리고 1가지 값만 지정하면 모든 방향에 적용됩니다.
1
2
3
4
5
6
7
div {
margin: 10px 5px 15px 20px; /* 상 10px 우 5px 하 15px 좌 20px */
margin: 10px 15px 5px; /* 상 10px 좌, 우 15px 하 5px */
margin: 10px 5px; /* 상, 하 10px 좌, 우 5px */
margin: 10px; /* 상, 하, 좌, 우 10px */
margin-top: 10px; /* 특정 방향만 지정도 가능 */
}
알아두면 좋은 내용
margin collapse
박스끼리 만나게 되면 margin이 합쳐지는 현상을 margin collapse라고 합니다.
외부에서 만나든 내부에서 만나든 서로 맞닿게 된다면 둘 중 더 큰 마진값으로 적용되게 됩니다.
이를 방지하기 위해서 padding 값을 주어 해결할 수 있습니다.
display: block
div, p, h1 등의 태그들은 기본적으로 박스 형태입니다(display: block;). 따라서, 별다른 설정없이 작성하게 된다면, 가로로 최대한 긴 형태의 박스 형태로 표현됩니다.
display: inline, inline-block, flex 등의 특성을 부여하면 해당 문제를 해결 할 수 있습니다.
부모 요소로부터의 상속(inherit)
아래와 같은 상황에서 parent의 속성들은 상속되어 child에서 사용 할 수 있습니다.
모든 속성이 상속되는 것은 아니고 글자 관련된 속성들은 대부분 상속 됩니다.
1
2
3
4
5
<div class="parent">
<div class="child">
<p>Hello World!</p>
</div>
</div>