프론트엔드의 기본 구성
1. HTML (HyperText Markup Language)
- web page의 영역을 구조화하고 내용의 정의, 콘텐츠(이미지, 링크, 영상 등)를 삽입할 수 있게 해주는 요소로 구성된 언어
- 태그(tag: 요소의 종류)와 속성(attribute: 요소의 특성)로 구성
- 요소(element) : 데이터의 항목, 텍스트 한 묶음, 이미지 등 또는 nothing
<여는 태그> 내용 </닫는 태그>
<html>
<head>
<title> *제목 입력* </title>
</head>
<body>
<h1> *여기에 H1 입력* </h1>
<p> *여기에 단락 입력* </p>
</body>
</html>2. CSS (Cascading Style Sheets)
-
웹페이지의 스타일을 지정하는데 사용
-
파일명.css파일을 별도로 생성 하여 관리 -
p =
<p>, 셀렉터로 요소 선택 중괄호로 묶어{} 내부에속성: 값을 가진 스타일 시트를 만듦.셀렉터 {
속성: 값;
}p {
color : #000000;
}
-
css 적용 전>
css 적용 후>
3. JavaScript
-
넷스케이프에서 개발한 웹 전용 스크립트 언어, Java+Script는 웹페이지에 사용자의 행동에 반응하는 상호작용을 추가하는 역할을 함.
- 스크립트 언어는 특정 소프트웨어를 제어하는 언어를 뜻함. 자바 언어와는 연관성 없음.
- 상호작용 예시>> 웹페이지의 애니메이션, 폼 구성
-
<head>태그 사이 또는<body>태그 사이에<script>~</script>태그를 삽입하고 그 사이에 작성<script> 자바스크립트 코드; </script> -
외부 파일 import
html문서, css파일, js파일을 별도로 생성 후 임포트하여 불러오는 방식<script src='자바스크립트 파일 경로'></script>이 경우 태그 사이의 코드는 무시됨.
one setp