태그(Tag), 내용(Content), 속성(Attribute), 요소(Element) ?
- 전체 문장 : 요소(Element)
- a : 태그(Tag)
- 네이버로 이동 : 내용(Content)
- href : 속성(Attribute)
<a href = "https://naver.com">네이버로 이동</a><설명>
위 코드는 HTML에서 흔하게 볼수 있는 코드이다. 일반적으로 태그로 시작해서 태그로 끝나는 이러한 구조를 요소라고 한다. 특히 태그는 시작과 끝을 반드시 넣어주어야 하는데, 이를 구별해주는 부분이 슬러시(/) 이다. 단, 예외적으로 img, br 태그는 종료태그가 존재하지 않는다. href는 속성이라고 한다. 시작 태그 뒤에 위치하며, 한 태그에 여러 속성을 지정할 수 있다. class, src, alt등이 있다. "네이버로 이동"은 웹페이지에 드러나는 부분으로써, 내용이라 불린다.
태그(Tag) 의 종류
<!DOCTYPE>
<html>
<head>
</head>
<body>
<h1></h1>
<h5></h5>
</body>
</html><설명>
html에서 가장 기본이 되는 부분이다. !DOCTYPE은 무슨 버전의 html을 사용하는지를 알려주는 코드이며 html은 내가 html을 하고 있다라고 알려주는 역할이라고 생각하면 된다. head는 사이트의 제목, 설명, 부가정보 등이 들어가는 부분이며, body는 화면의 보여질 각종 태그들을 작성하는 곳이다. h1~h5는 제목을 나타내는 태그이며, 참고로 숫자가 커질 수록 글씨가 점점 작아진다.
- span : 주로 텍스트를 넣어주며, line break가 되지 않는다. 이렇게 다음 문단으로 넘어가지 않고, 한줄에 이어서 나오는 요소를 line-element라고 한다.
<span>이름 : 김개발</span>- p : 문단을 통으로 넣을 때, 많이 사용하고, 줄바꿈이 일어납니다.
- a : 화면을 이동하며, href 속성과 자주 사용된다. target="_blank" 는 새창을 띄우는 값이다.
css 활용 방법
- 인라인 스타일 : 태그 속성에 직접 작성해서 사용하는 방법
<h1 style = "color: red;">FRONTEND 101</h1> - style 태그 : html 파일 내에서 CSS를 작성할 수 있는 방법
<style> h2 { color : #408090; } </style> - css 파일에 작성 : link태그를 사용해서 css파일을 링크합니다. href속성에는 경로를 지정하고, type에는 어떠한 파일이 연결되는 알려줍니다.
<link href="index.css" rel="stylesheet" type="text/css" />
css 작성법
- 선택자(selector) 지정
- 속성(property) 입력
- 콜론(:) 입력
- 속성값 입력
p { color: red; }
css 태그 표기 방법
-
class : .(dot)로 표시
.className {} -
id : #으로 표시
#idName{}
font 스타일
-
font family : 폰트 스타일을 지정하는 속성을 의미한다. Gergia라는 폰트를 브라우저가 지원을 하겠다는 의미이다. 지원을 하지 않으면, 차례대로, 적용을 하고, 마지막으로 serif를 적용한다. 참고로 띄어쓴 글자로 하나로 취급하기 위해서는""를 사용해야 한다.
#title { font-family: Gergia, "Times New Roman", Times, serif; } -
font size : 폰트 크기를 지정
h1 { font-size: 30px; } -
font weight : 폰트의 두께를 조절
.bold-font { font-weight: bold; } -
font style : 글씨 스타일을 바꿀 때 사용
a { font-style: italic; } -
color : 글씨 색상을 변경할 때 사용 (hex색상코드, rgb 값, hsl 등으로 표현이 가능하다. color picker에서 원하는 색상을 검색할 수 있다.
h1{ color : #eb4639; }
텍스트 정렬
- text-align : left, center, right 왼쪽, 가운데, 오른쪽 정렬을 할 수 있습니다. (기본 정렬은 왼쪽)
.left{ text-align : left; } - text-indent : 들여쓰기
js-description{ text-indent: 50px; } - 스페이스 : 문장사이에 띄워쓰기를 사용할 때 사용한다.
<p>스페이스     를 사용할 때</p>blockquote 태그는 인용구문을 넣을 때 사용한다.
