개발자교육

2024_06_20 오늘의 수업내용

regnator 2024. 6. 20. 10:42
728x90
반응형

오늘의 수업내용 요약 - button태그 & (어제배운) html 활용하기 & CSS맛보기

 

1. button 태그

- 사용자와 상호작용할 수 있는 버튼을 생성하는 데 사용되며, 버튼을 클릭하거나 탭하면 정의된 동작이 실행

  • submit : form태그 내에서 동작, 클릭 시 데이터 전송
  • reset : form태그 내에서 동작, 클릭 시 데이터 초기화

See the Pen Untitled by 커피우유 (@lfmmgbtn-the-encoder) on CodePen.



 

2. CSS (Cascading Style Sheet)

1)CSS의 정의

1. 정보전달을 위한 html(구조를 담당)을 꾸며주는 디자이너의 역활을 담당한다.
2. 실제  화면에 표시되는 "색상, 크기, 폰트, 레이아웃"등을 지정해 꾸미는 시각적인 표현을 담당한다

 

2) CSS를 적용하는 방식

(1). 외부 CSS(External CSS)

  • 외부 파일로 관리하여 여러 HTML 파일에서 같은 스타일을 공유하고 유지 보수를 쉽게 합니다.
  • 브라우저는 CSS 파일을 한번 다운로드하고 캐시에 저장합니다.
  • 사용 예:
<link rel="stylesheet" type="text/css" href="../css/common.css">

 

(2). 내부 CSS(Internal CSS)

  • <style> 태그를 사용해 HTML 파일 내부에 스타일을 작성합니다.
  • 사용 예
<style type="text/css"> div { border: 1px solid red; } p { border: 1px solid blue; } </style>

 

(3). 인라인 CSS(Inline CSS)

  • 태그의 style 속성에 직접 스타일을 작성합니다.
  • 사용 예:
<div style="border: 1px solid red;"></div>

 

3) CSS 적용 우선순위

  • CSS는 인라인 > 내부 > 외부 순서대로 적용 우선순위를 가집니다.

4) CSS파일 & 적용 예시

 (1) css파일 예시

@charset "UTF-8";

div {
	border: 1px solid red;
}

p {
	border: 1px solid blue;
}

 

 (2) 적용예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css예제파일</title>
<!-- 외부문서(여기서는 css파일)을 본 문서와 링크하기위한 방법 -->
<!-- 외부 css연결 -->
<!-- 	<link rel="stylesheet" type="text/css" href="../css/common.css"> -->

<!-- 내부 css연결 -->
<style type="text/css">
div {
	border: 1px solid red;
}

p {
	border: 1px solid blue;
}
</style>
</head>
<body>
	<div>안녕하세요?</div>
	<p>너도 되니?</p>
    <-- 인라인CSS -->
	<div style="border: 1px solid green;">두번째</div>
</body>
</html>

 

 

3. 선택자 종류

  • 기본 선택자
  • 복합 선택자
  • 가상 클래스 선택자
  • 가상 요소 선택자
  • 속성 선택자
728x90
반응형