⭐HTML
하이퍼텍스트랭귀지
Hyper Text Markup Language
Hyper 초월하다, 뛰어넘다, 넘나들다
Text 정보를 순차적으로 접근하는 습득방식
Markup 표시하다
Language 언어
ex)
html이란 하이퍼텍스트랭퀴지의 약자다. 웹&앱 개발과정을 A강의실 2시에 진행한다.
-제목: HTML이란
-내용: 하이퍼텍스트랭귀지
-위치: A강의실
-시간: 2시
확장자 html, htm
현재버전 html5
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 브라우저 화면에 안 보이는 영역 -->
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 브라우저에 보이는 영역 -->
<h1>Hello Html</h1>
<h2>Hello Html</h2>
</body>
</html>
⭐ CSS
Cascading Style Steets Language
종속형 캐스케이딩 스타일 시트
마크업언어가 표시되는방법을 기술하는 언어
레이아웃과 스타일의 정의한다.
xhtml에 주로 쓰인다.
확장자 .css
인라인 태그 안에 쓰는 방식
내부스타일 헤드 안에
외부스타일 다른 파일에 정의
셋이 다르면 인라인이 최종적으로 적용된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html 실습</title>
<!-- 외부 스타일 시트 -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- 내부 스타일 시트 -->
<style>
h1{
color: red;
text-align: center;
}
p{
font-size: 30px;
}
</style>
</head>
<body>
<!-- CSS 인라인 스타일로 적용 -->
<h1 style="margin-top: 200px;">Tenco Online에 오신 것을 환영합니다!</h1>
<img src = "img/sample.png" alt = "샘플 이미지" id = "sample-img">
<p>버튼을 눌러 메시지를 변경하시오</p>
<button onclick="changeMessage()">메세지 변경</button>
<!-- 자바스크립트 외부 파일 링크 -->아무말
<script src="js/script.js"></script>
</body>
</html>
⭐ 자바스크립트
javascript
html이 뼈대 css가 근육이라면
java스크립트는 두뇌역할을 한다.
동적으로 움직이도록 할때 js가 필요하다.
⭐ html 속성
attribute
속성은 태그의 동작 스타일 데이터 등을 정의하거나 제어한다
속성은 시작태그에 작성한다.
주요속성
id
class
crc
alt
data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML의 속성에 대해 알아본다</title>
<!-- 내부 스타일 시트 선언 -->
<style>
/*css 주석*/
.info-text{
color: blueviolet;
}
</style>
</head>
<body>
<!-- 각 태그에 속성이란 것을 설정할 수 있다 -->
<!-- 1.id 속성: 요소를 고유하게 식별하는 속성이다 -->
<h1 id="main-title" style="color: red;">HTML 속성 배우기</h1>
<h2 id="main_title2">렌더링되는 페이지에 같은 id를 할당하면 안된다</h2>
<!-- 2.class 속성: 여러 요소에 공통된 값을 지정한다 -->
<p class="info-text">이것은 첫 번째 문단이다</p>
<p class="info-text">이것은 두 번째 문단이다</p>
<!-- 3.src 와 alt 속성
이미지파일 경로를 의미하며 alt는 대체속성 -->
<img src="../ch02/img/sample.png" alt="배경이미지">
<!-- 4.href 속성: 링크 연결 -->
<a href="https://www.naver.com/" target="_blank">네이버로 이동</a>
<!-- 5.style 속성: 인라인 형식으로 css 스타일 적용 -->
<div style="color: blue; font-size: 22px;">스타일 속성 테스트</div>
<!-- 6.data- 속성: 사용자 정의 데이터 저장 -->
<button data-my="asd1234" ondblclick="alert('클릭됨')">버튼</button>
</body>
</html>
'HTML CSS' 카테고리의 다른 글
| html/css) css 선택자 selector (0) | 2025.05.28 |
|---|---|
| html/css) 시멘틱 태그 semantic tag (0) | 2025.05.28 |
| html/css) table 태그로 표 만들기 (0) | 2025.05.28 |
| html/css) 속성 Attribute 활용 (0) | 2025.05.28 |
| html/css) 태그 tag 활용 (0) | 2025.05.28 |
