<14:30 5교시>
javascript : 웹페이지에서 나타나는 수많은 상호작용 동작과 반응들
■ 버킷 리스트에 버킷 리스트를 추가할 수 있는 버튼 만들기
- 변수를 사용하지 않는 방법
<body>
<h1>나의 버킷리스트</h1>
<ul>
<li>번지점프</li>
<li>스카이 다이빙</li>
<li>책 10,000권 읽기</li>
<li>유럽여행</li>
</ul>
<button >버킷 추가</button>
<p>죽기 전에 한번은 해봐야겠지? <br> 근데 자신은 없네 ㅠㅠ</p>
<script>//javascript 영역
/*prompt("버킷리스트에 추가할 내용을 입력하세요");*/
//이 위치면 페이지 로딩 시점에 동작이 일어남.
document.querySelector("button").addEventListener("click", function(){
//prompt("버킷리스트에 추가할 내용을 입력하세요");
//버튼이 클릭되는 이벤트가 일어나는 시점에 동작이 일어나게 됨
//1. 새로운 li 요소를 만들어서(document.creatElement해야 함)
let box = document.createElement("li"); //함수의 리턴값
//-> 이 줄의 함수는 그 값을 리턴했는데 이값을 어느 공간에 임시 보관하고 2,3에서도 쓴다
//변수를 선언한다
//2. li 요소안에 입력한 문자열을 출력하고
box.innerText= prompt("버킷리스트에 추가할 내용을 입력하세요");
//3. li 요소를 ul의 자식 요소로 추가하기
//(이미 있는 요소에 추가하기는 document.querySelector)
document.querySelector("ul").append(box);
});
</script>
</body>
</html>- 변수를 사용하는 방법
<body>
<script>//javascript 영역
document.querySelector("button").addEventListener("click", function(){
let input = prompt("버킷리스트에 추가할 내용을 입력하세요");
//버튼이 클릭되는 이벤트가 일어나는 시점에 동작이 일어나게 됨
//1. 새로운 li 요소를 만들어서(document.creatElement해야 함)
let box = document.createElement("li"); //함수의 리턴값
//-> 이 줄의 함수는 그 값을 리턴했는데 이값을 어느 공간에 임시 보관하고 2,3에서도 쓴다
//변수를 선언한다
//2. li 요소안에 입력한 문자열을 출력하고
box.innerText= input;
//3. li 요소를 ul의 자식 요소로 추가하기//(이미 있는 요소에 추가하기는 document.querySelector)
document.querySelector("ul").append(box);
});
</script>
</body>
</html>
<15:30 6교시> 블록요소와 인라인요소
대차게 졸았다. 어쨋든 졸면서 필기한거랑 블로그에 있는거 보면서 채워 넣어본다.
■ 블록요소(Block Element)
페이지에서 새로운 줄부터 시작하여 기본적으로 전체 너비를 차지하는 덩어리진 영역들로, 한 줄에 하나씩 배치되며, 다음 요소는 블록 요소 아래에 배치되고, 부모 요소의 하위 요소로 포함시킬 때는 부모 요소의 가로 너비 영역을 모두 사용하려는 성질이 있기 때문에 가로 크기를 지정하지 않으면 기본적으로 부모요소의 너비를 가득 채운다.
영역을 차지하는 녀석들이기 때문에 기본적으로 width, height, margin, padding 등의 스타일 속성을 지정할 수 있다.
사용되는 태그 : <div>, <p>, <h1>~<h6>, <ul>, <ol>, <li>, <table>, <form>, <header>, <footer>, <section>, <article> 등
■ 인라인요소(Inline Element)
현재 입력 중인 줄에 함께 배치되며, 새로운 줄을 차지하지 않고 기존의 인라인 요소와 나란히 배치되며, 입력된 만큼의 영역너비만 차지하고, 기본적으로 줄을 넘어서는 크기를 차지하지 않는다.
사용되는 태그 : <span>, <a>, <img>, <strong>, <em>, <label>, <input>, <button> 등
기본적으로 width, height, margin, padding 같은 스타일 속성이 적용되지 않지만, 특정 조건에서는 인라인요소임에도 일부 스타일 속성을 적용할 수도 있다.
예외) margin, padding 의 경우는 수평 방향으로만 제한적으로 적용 가능
예외) <img> 태그에서 예외를 적용할 수 있는 경우
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step02_InlineBlockElement.html</title>
</head>
<body>
<h1 style="color:blue;">인라인 요소이지만 width 와 height 를 지정할수 있는 요소</h1>
<div>
하나
<img src="https://picsum.photos/100" style="width:50px;height:50px;">
<img src="https://picsum.photos/100">
<img src="https://picsum.photos/100" style="width:80px;height:80px;">
두울
세엣
</div>
</body>
</html>
+11/29 추가)
블럭요소와 인라인요소는 서로 상호전환이 불가능한게 아니라 디폴트값이 블럭이고 디폴트값이 인라인인 것 뿐이다.
<16:30 7교시>
■ 영역과 CLASS
CLASS라는 속성은 동일 요소를 같은 그룹으로 묶고 싶을 때 사용하게 된다. 그렇게되면 CLASS 그룹에만 적용할 CSS를 따로 정할 수 있기 때문이다.
CLASS 속성은 <aaaa class="groupname" > 으로 표현되고, 이 CLASS에 관련된 VALUE를 찾을 때는
.XXXXX로 표현하고, '클래스 속성의 VALUE가 XXXXX인걸 쓰겠다'는 의미이다.
바깥 영역 안에 DIV가 여럿 있고 그 각각 안에 또 DIV가 들어가고 그 아래에 또 DIV가 들어가고...
■ CSS, JAVASCRIPT, HTML마다 속성을 설명하는 방식
CSS와 같은 경우는 케밥 케이스(kebob case)로 속성을 설명할 때 -꼬챙이를 끼워 넣어 설명한다.
border-bottom-width처럼 쓴다.
border_bottom_width와 같은 경우는 _언더바를 끼워넣어 스네이크 케이스(snake case)라고 한다.
(참고로 이거 그대로 정의된 속성은 없다고 하셨던 거 같다. 설명의 편의를 위해 그냥 같은 단어를 쓰신거라구..)
borderBottomWidth같이 낙타의 등처럼 소문자와 대문자가 울룩불룩한 모양을 한 캐멀 케이스(camel case)다.
(이또한 이거 그대로 정의된 속성은 없다고 하셨던 거 같다. 설명의 편의를 위해 그냥 같은 단어를 쓰신거라구..)
■ margin에서 각 위치에서 여백 폭을 정의하는 방법
margin을 줄 때는 사각형의 위를 top으로 하여 시작해서 시계 방향으로 오른쪽은 right, 아래 쪽은 bottom, 왼쪽은 left라고 하여 top → right → bottom → left를 기억하라고 하셨는데, 이걸 활용해서 margin 폭을 정의할 수 있기 때문이다.
margin의 변의 길이를 정의하는 방식은 가지이다.
| 정의 방식 | 의미 |
| margin 0; | 모든 변에서의 margin 폭이 0이다. |
| margin 10px, 10px, 10px, 10px; | 모든 변에서의 margin 폭이 top → right → bottom → left에 해당되게 10px 씩 정의됨 |
| margin 10px, 20px | top → right 순으로 해당되게 margin 폭이 10px, 20px씩 정의되었고, 마주보는 변들인 bottom과 left의 margin 폭은 당연하게 각각 10px, 20px 씩 부여하겠다는 정의 |
| margin 20px, 10px, 30px | top → right → bottom 순으로 margin 폭을 20px, 10px, 30px을 각각 부여하고 right과 마주보는 left의 변에도 margin 폭을 10px에 정의한다는 의미. |
<17:30 8교시>
html 기본 태그 : div 요소, p요소, h*요소(제목), ul요소, ol 요소, table요소, a요소, span요소, b와 strong요소, i와 em요소, code요소, dl요소
직접 입력해보기
div 요소
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 80%;
margin: 0 auto;
background-color: #f3f3f3;
padding: 20px;
}
.header, .content, .footer {
padding: 10px;
margin: 10px 0;
}
.header {
background-color: #4CAF50;
color: white;
}
.content {
background-color: #ffffff;
}
.footer {
background-color: #ddd;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="header">헤더 영역</div>
<div class="content">콘텐츠 영역</div>
<div class="footer">푸터 영역</div>
</div>
</body>
</html>p요소
<!DOCTYPE html>
<html>
<head>
<title>p 요소 예제</title>
</head>
<body>
<p>이것은 첫 번째 문단입니다. 문단 태그를 사용하여 텍스트를 문단 단위로 나눌 수 있습니다.</p>
<p>이것은 두 번째 문단입니다. 문단 태그는 텍스트를 그룹화하여 읽기 쉽고 정돈된 형태로 표시해 줍니다.</p>
</body>
</html>
h*요소(제목)
<!DOCTYPE html>
<html>
<head>
<title>제목 요소 예시</title>
</head>
<body>
<h1>이것은 페이지의 주요 제목입니다 (h1)</h1>
<p>여기에는 페이지의 주요 내용을 소개하는 문장이 올 수 있습니다.</p>
<h2>이것은 첫 번째 섹션의 제목입니다 (h2)</h2>
<p>첫 번째 섹션의 내용을 설명하는 문단입니다.</p>
<h3>첫 번째 소제목입니다 (h3)</h3>
<p>소제목에 대한 상세한 설명이 들어갈 수 있습니다.</p>
<h2>이것은 두 번째 섹션의 제목입니다 (h2)</h2>
<p>두 번째 섹션의 내용을 설명하는 문단입니다.</p>
</body>
</html>
ul요소
<!DOCTYPE html>
<html>
<head>
<title>ul 요소 예제</title>
</head>
<body>
<h2>과일 목록</h2>
<ul>
<li>사과</li>
<li>바나나</li>
<li>체리</li>
<li>포도</li>
</ul>
</body>
</html>
ol 요소
<!DOCTYPE html>
<html>
<head>
<title>ol 요소 예제</title>
</head>
<body>
<h2>순서 있는 목록</h2>
<ol>
<li>HTML 배우기</li>
<li>CSS 배우기</li>
<li>JavaScript 배우기</li>
<li>프론트엔드 개발 완성</li>
</ol>
</body>
</html>
table요소
<!DOCTYPE html>
<html>
<head>
<title>table 요소 예제</title>
</head>
<body>
<h2>학생 성적표</h2>
<table>
<tr>
<th>이름</th>
<th>과목</th>
<th>점수</th>
</tr>
<tr>
<td>홍길동</td>
<td>수학</td>
<td>90</td>
</tr>
<tr>
<td>이몽룡</td>
<td>영어</td>
<td>85</td>
</tr>
</table>
</body>
</html> <table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>직업</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>25</td>
<td>개발자</td>
</tr>
</tbody>
</table><table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>직업</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>25</td>
<td>개발자</td>
</tr>
<tr>
<td>김영희</td>
<td>30</td>
<td>디자이너</td>
</tr>
</tbody>
</table>a요소
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>책갈피 예제</title>
</head>
<body>
<h1>HTML 책갈피 기능 예제</h1>
<!-- 책갈피 링크 -->
<a href="#section1">섹션 1로 이동</a>
<a href="#section2">섹션 2로 이동</a>
<!-- 책갈피 목적지 -->
<h2 id="section1">섹션 1</h2>
<p>여기는 섹션 1의 내용입니다.</p>
<h2 id="section2">섹션 2</h2>
<p>여기는 섹션 2의 내용입니다.</p>
</body>
</html>
span요소
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>span 요소 예제</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>이 문장에는 <span class="highlight">강조된 부분</span>이 포함되어 있습니다.</p>
</body>
</html>
b와 strong요소
<p>이 문장은 <strong>매우 중요한 내용</strong>을 포함하고 있습니다.</p>
i와 em요소
<p>이 문장은 <em>매우 중요한 내용</em>을 포함하고 있습니다.</p>
code요소
<p>사용자 이름을 입력하려면 <code>username</code> 속성을 사용하세요.</p>
dl요소
<dl>
<dt>HTML</dt>
<dd>웹 페이지의 구조를 정의하는 마크업 언어입니다.</dd>
<dt>CSS</dt>
<dd>HTML 요소의 스타일을 지정하는 스타일 시트 언어입니다.</dd>
<dt>JavaScript</dt>
<dd>웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어입니다.</dd>
</dl>
'공부의 기록 > 자바 풀 스택 : 수업내용정리' 카테고리의 다른 글
| 자바 풀 스택 11/29 오후 기록 007-2 (1) | 2024.11.29 |
|---|---|
| 자바 풀 스택 11/29 오전 기록 007-1 (3) | 2024.11.29 |
| 자바 풀 스택 11/28 오전 기록 006-1 (2) | 2024.11.28 |
| 자바 풀 스택 11/27 오후 기록 005-2 (1) | 2024.11.27 |
| 자바 풀 스택 11/27 오전 기록 005-1 (1) | 2024.11.27 |
