HTML이란?
HTML은 HyperText Markup Language의 약자로, 웹페이지를 만들고 디자인하고 싶을 때 사용하는 마크업 언어이다. 세상에 존재하는 모든 웹페이지는 html 언어로 작성한다.
- 마크업 언어 : 자료의 구조를 표현하기 위한 언어
CSS란?
CSS는 Cascading Style Sheet의 약자로, 스타일을 보관하는 파일이다.
HTML 파일의 기본 템플릿
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>모든 HTML 문서는 위의 코드를 가지고 있어야 HTML 파일로 인식한다.
- Visual Studio Code에서
! + Enter를 누르면 자동으로 작성된다.
<!DOCTYPE html>
문서 타입 지정
<head>
사이트 생성에 필요한 인코딩 형식, 사이트 제목, CSS나 JS 파일이 들어간다.
<meta charset="UTF-8"> : 인코딩 형식
<title> : 사이트 제목
<body>
실제 웹사이트에서 보여줄 글, 그림 등이 들어간다
HTML 기본 태그
HTML은 태그로 작성한다.
<h1>글 제목</h1>
<p>글 본문<p>
<img src="이미지 경로">
<a href="">링크</a>
<button>버튼</button>
<ul>
<li>리스트</li>
</ul>
<ol>
<li>리스트</li>
</ol>용도에 맞는 태그 사용하기
HTML은 마크업 언어이기 때문에 자료의 구조를 쉽게 파악 할 수 있어야 하는데, 그럴 때 용도에 맞는 태그를 사용하는 게 도움이 되고, 용도에 맞는 태그를 사용하면 더욱 웹표준에 맞는 웹을 만들어 낼 수 있다.
<h1> ~ <h6>
heading의 약자로, 제목, 부제목을 정의하는 태그이다.
<p>
paragraph의 약자로, 하나의 문단을 정의하는 태그이다.
<img>
image의 약자로, 이미지를 정의하는 태그이다.
속성으로 src=""를 사용해 파일 경로를 지정한다.
<a>
anchor의 약자로, 다른 페이지를 연결할 때 사용하는 하이퍼링크를 정의하는 태그이다.
<button>
클릭할 수 있는 버튼을 정의하는 태그이다.
<ul>, <ol>, <li>
<ul> 태그는 unordered list(정렬되지 않은 목록)의 약자로, 순서가 지정되지 않는 항목의 목록을 정의하는 태그이다.
<ol> 태그는 ordered list(정렬된 목록)의 약자로, 순서가 지정되는 항목의 목록을 정의하는 태그이다.
<li> 태그는 list의 약자로, <ul> 또는 <ol> 내부에 들어가 목록을 만드는 태그이다.
실습1
Q. 글자 일부를 누르면 네이버로 이동하게 만들어보자!
A.
<p>네이버로 <a href="https://naver.com">이동하기</p>네이버로 이동하기
인라인 스타일시트
거의 모든 태그는 style="" 속성을 작성할 수 있다.
이 속성 안에 스타일이름: 스타일값; 형식으로 스타일을 넣으면 된다.
자주 사용하는 글자 스타일링
font-size : 20px;
font-family : 'gulim';
color : black;
letter-spacing : -1px;
text-align : center;
font-weight : 600;font-size
글자의 크기를 정의하는 속성이다.
font-family
글자의 글씨체를 정의하는 속성이다.
color
글자의 색상을 정의하는 속성이다.
letter-spacing
글자의 자간을 정의하는 속성이다.
단어의 간격을 정의하려면 word-spacing을 사용하자.
line-height
글자의 행간을 정의하는 속성이다.
text-align
글자의 수평정렬을 정의하는 속성이다.
- 속성값 :
left: 왼쪽 정렬
center: 가운데 정렬
right: 오른쪽 정렬
font-weight
글자의 굵기를 정의하는 속성이다.
100부터 900까지 100단위로 사용한다.(?)
<strong> 과 <b>
<strong>과 <b> 모두 글자를 굵게 만드는 태그이다.
하지만 <strong>은 중요성을 가진 내용을 의미하고, <b>는 별 의미 없이 텍스트에 주목을 끄는 데 사용된다.
<span>
span은 범위라는 뜻으로, 단순 텍스트나 인라인 콘텐츠 등에 스타일이나 속성, 스크립트를 위한 범위를 위해 감싸주는 특별한 의미가 없는 태그이다.
이미지 정렬과 크기 조정 스타일링
/* 이미지를 가운데 정렬할 때 자주 사용한다 */
display : block;
margin-left : auto;
margin-right : auto;
width : 150px;
height : 50px;width를 작성하면 이미지의 크기가 자동으로 조절된다. px 혹은 % 단위로 폭을 조정할 수 있다. %를 사용하면 부모요소 크기값에 맞춰 조정된다.
display
요소가 화면에 어떻게 보여질지 레이아웃을 정의하는 속성이다.
- 속성값:
none: 화면에서 사라진다
block: 요소를 블록요소로 만들어 width가 100%가 되게 한다.<div>의 기본값이다.
inline: 요소를 인라인요소로 만들어 컨텐츠를 딱 감쌀정도의 크기로 만든다. width값이 바뀌지 않는다.
inline-block: 인라인요소와 블록요소의 특성을 합쳐놓은 속성이다. 기본적으로 inline의 속성을 지니고 있지만, 임의로 크기를 바꿔줄 수 있다.
margin, padding
margin은 테두리(border)와 이웃하는 요소 사이의 간격을 정의하는 속성이다.
padding은 테두리(border)와 내용(content) 사이의 간격을 정의하는 속성이다.
width, height
width는 요소의 넓이를 정의하는 속성이다.
height는 요소의 높이를 정의하는 속성이다.
실습 2
Q. 글자 일부를 꾸며보자!
A.
<p style="text-align: center">
<span style="color: pink; font-weight: 600;">프론트엔드 개발자</span> 강하영입니다
</p>프론트엔드 개발자 강하영입니다
외부 스타일시트
style이 너무 길어지면 .css 파일로 분리할 수 있다. 분리한 css파일은 <header> 안에 아래와 같은 코드를 작성해 첨부할 수 있다.
<link href="CSS파일경로.css" rel="stylesheet">CSS selector
<p class="class" id="id">asdf</p>.class { font-size : 20px } /*클래스*/
#id { font-size : 30px } /*아이디*/
p { font-size : 16px } /*태그*/클래스 selector : 모든 class="클래스명"을 가진 요소에 스타일이 적용된다. 가장 권장하는 방법이다.
아이디 selector : id="아이디명" 속성을 가진 요소에 스타일이 적용된다.
태그 selector : 모든 <태그>에 스타일이 적용된다.
셀렉터의 우선순위
class, id를 동시에 가지는 html 요소라면 스타일이 겹칠 수 있는데, 그럴 경우 우선순위가 존재한다.
점수가 높을수록 우선적으로 적용되며, 혼합해 사용이 가능하다. 혼합될 경우 합산한다.
1. style="" (1000점)
2. #id (100점)
3. .class (10점)
4. tag (1점)
