HTML
하이퍼텍스트 마크업 언어 뜻하며 요소와 속성으로 이루어 져 있으며 꺽쇠 <> 로 표현된다.
웹 브라우저를 표현하는 데 사용되며, 자바스크립트와 CSS 를 연동하여 사용한다.
즉 웹브라우저의 기본적인 뼈대라고 생각하면 된다.
마크업의 기본 구조는 다음과 같다.
<!doctype html>
<html>
<head>
<title>Hello HTML</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
마크업 요소는 다음과 같다.
<p>단락바꾸기
<div></div> 단락바꾸기
<span></span>
<ul></ul> 목록
<li></li> 순서없는 목록 만들기
<br> 줄바꾸기
<table></table> 테이블표 만들기
<button> 버튼만들기
그리고 마크업 속성으로 표현 하기 위해 = 을 붙이며 이 속성에는 id 와 class가 있다.
id는 고유식별자로 하나만 존재하며, 스타일 시트를 통해 꾸밀 수 있다.
class는 유사한 요소를 구현하기 위해 사용되며, 해당 class값을 갖는 모든 요소들을 해당 텍스트에 종속된다.
<div id="id" class="class">HTML</div>CSS
캐스케이팅 스타일 시트를 뜻하며 HTML을 꾸미는 역할을 한다.
그림자효과, 그라데이션, 변형등 다향한 부분이 표현 가능하다.
#title{
height:100px;
text-align:center;
background-color: #42DEE1;
font-size: 50px;
padding-top: 40px;
padding-bottom: 40px;
color:#3c70a4;
font-family: 'Black Han Sans', sans-serif;
}class 속성인 경우 .을 붙여 표현하고, id같은 경우 #을 붙여 표현한다.
해당 구역을 표현한 후 {} 안에 꾸미고자 하는 부분(넓이, 높이, 위치, 칼라 등등)을 넣으면 된다.
HTML과 CSS가 결합되면 우리가 흔히 생각하는 홈페이지의 형태가 되고,
자바스크립트를 통해 홈페이지가 작동될 수 있게 만들어준다고 생각하면 된다.
'FRONT-END' 카테고리의 다른 글
| [Material-ui] 시작하기 (0) | 2020.07.06 |
|---|---|
| [Redux] 리액트 - 리덕스 적용 (0) | 2020.07.02 |
| [Redux]리덕스 시작하기 (0) | 2020.05.30 |
| [React]React Core Concept (0) | 2020.05.25 |
| DOM (0) | 2020.04.24 |
