작성 : 2024. 4. 16.
오늘은 Html + css + 자바스크립트에 들어간다.
웹 구성 접근할 때 3대 요소
1. 웹 접근성
2. 웹 표준
3. 웹 호환성
HTML 기본문법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>네이버</title> <!--파비콘과 함께 페이지 상단의 제목-->
</head>
<body>
<!--로 감싸면 주석 처리가 됩니다.-->
<!-- commend + / 하면 주석처리 -->
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
<p> 문단 1 </p>
<p> 문단 2 </p>
<!-- p 태그는 한줄로 나오는 것이 속성 -->
문단1 <br>
문단2 <br />
문단3 <br />
문단4 <br />
<!-- br 태그는 이런 식으로 사용할 수 있습니다. 줄을 바꿔주고 p 태그처럼 행간격이 생기지는 않습니다 -->
<!--태그를 사용하면 줄이 자동으로 바뀌는 경우 (h 태그들 ) 가 있고 아닌 경우가 있습니다-->
<!--css 는 디자인 뿐 아니라 코드를 뽑아 올때도 쓰입니다-->
<strong> 글자 굵게 </strong>
<b> 글자 굵게 </b>
<!-- 글자를 굵게 하는 역할은 같다 -->
<br>
<em> 글 강조 </em>
<i> 글 강조 </i>
<!-- 날리는 글씨 표현 -->
<!-- 목록태그들에 대해 알아봅니다 -->
<ul>
<li>JAVA</li>
<li>HTML</li>
<li>CSS</li>
<!-- li 태그가 늘어날 수록 목록이 늘어난다 -->
</ul>
<!-- 기호로 목록 구분 -->
<ol type = 'A' reversed>
<li>서울</li>
<li>김천</li>
<li>부산</li>
</ol>
<ol>
<li>제주도</li>
<li>부안</li>
<li>강릉</li>
</ol>
<!-- 번호, 알파벳으로 목록 구분 -->
<dl>
<dt> - Hello</dt>
<dd>안녕하세요</dd>
</dl>
<!-- 한 구성을 이루고 있습니다. -->
<!-- 뜻을 풀이할 때 사용 -->
<!-- 라이브 서버열 때 commend + fn + l + o -->
</body>
</html>
- 테이블 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border='1' width='350' height='350'>
<!-- 웹 구성 접근할 때 3대 요소 1. 웹접근성 2. 웹표준 3. 웹호환성 -->
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>주소</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tfoot>
</table>
<!-- table의 병합 -->
html 크기단위 : px(생략시 절대크기), % (브라우저 화면 대비)
<table border="1" width = "50%" height = "50%">
<caption>월별 매출현황</caption>
<tr>
<td>01</td>
<td colspan="2">02</td>
<!-- colspan 가로 셀 합치기 -->
<td rowspan="3">04</td>
</tr>
<tr>
<td>05</td>
<td colspan="2" rowspan="2">06</td>
</tr>
<tr>
<td>09</td>
</tr>
</table>
</tfoot>
</table>
</body>
</html>
- 테이블 만들기 연습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border='1' width='80%' height='50%'>
<thead>
<tr>
<th rowspan="5">학력사항</th>
<th>졸업일</th>
<th colspan="2">학교명</th>
<th >전공</th>
<th>졸업여부</th>
<th>소재지</th>
<th>성적</th>
</tr>
<tr>
<th>
년 월</th>
<th align="right" colspan="2">고등학교</th>
<th></th>
<th></th>
<th></th>
<th>
/
</th>
</tr>
<tr>
<th>
년 월</th>
<th align="right" colspan="2">대 학</th>
<th></th>
<th></th>
<th></th>
<th>
/
</th>
</tr>
<tr>
<th>
년 월</th>
<th align="right" colspan="2">대학교</th>
<th></th>
<th></th>
<th></th>
<th>
/
</th>
</tr>
<tr>
<th>
년 월</th>
<th align="right" colspan="2">대학원</th>
<th></th>
<th></th>
<th></th>
<th>
/
</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="4">경력사항</th>
<th colspan="2" width="20%">근무기간</th>
<th width="20%">회사명</th>
<th>직위</th>
<th>담당업무</th>
<th colspan="2">퇴사사유</th>
</tr>
<tr>
<th colspan="2">
-
</th>
<th></th>
<th></th>
<th></th>
<th colspan="2"></th>
</tr>
<tr>
<th colspan="2">
-
</th>
<th></th>
<th></th>
<th></th>
<th colspan="2"></th>
</tr>
<tr>
<th colspan="2">
-
</th>
<th></th>
<th></th>
<th></th>
<th colspan="2"></th>
</tr>
</tbody>
<tfoot>
<tr>
<th rowspan="2">병역사항</th>
<th>군필여부</th>
<th colspan="4">군필 ( ), 미필 ( ), 면제 ( ), 기타 ( )</th>
<th>군 별</th>
<th></th>
</tr>
<tr>
<th>복무기간</th>
<th colspan="4" align="right">( 년 월)</th>
<th>계 급</th>
<th></th>
</tr>
</tfoot>
</table>
</body>
</html>
- 이미지 넣는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 이미지 넣어보기 -->
<!-- 상대경로와 절대경로 방식을 사용 -->
<img
src="file:///Users/yunakang/Desktop/code/codeonlap/animal.jpg"
/
alt="동물의 숲 고리대금업자">
<!-- alt = "동물의 숲 고리대금업자" <- 이미지가 깨질 때나 시각장애인을 위해 음성지원을 제공할때 -->
<!-- 위는 절대경로 -->
<br>
<img src="img/animal.jpg" width="50" height="30"/>
<!-- 위는 상대경로 -->
<br>
<img src="./animal.jpg"/>
<!-- 나와 동일한 위치를 표현 , ./ 를 붙여도 되고 생략도 가능하다-->
<br>
<img src="../animal.jpg"/>
<!-- 상위 위치를 표현할 때 이렇게 씀 -->
<!-- html 이미지 절대경로 상대경로 좀 잘 알아놓기 -->
</body>
</html>- 태그 넣는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>a태그에 대하여</title>
</head>
<body>
<!-- <a href="이동할 페이지의 경로(html) or url or 특정파일">회원가입</a> -->
<a href="http://www.naver.com">네이버</a>
<br>
<!-- <a href="절대 경로 아니면 상대경로가 들어간다">로그인</a> -->
<a href="./index-pixelArt_다시하기.html">픽셀아트의 세계로</a>
<br>
<a href="//127.0.0.1:5500/index-pixelArt_%EB%8B%A4%EC%8B%9C%ED%95%98%EA%B8%B0.html" target="_blank">초대합니다</a>
<!-- target="_blank" 를 쓰면 새로운 페이지가 나옴 -->
<br>
<a href="img/animal.jpg">동물의 숲</a>
<br>
<a href="http://www.naver.com"><img src="./animal.jpg"/></a>
</body>
</html>
- 미디어 넣는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <object></object> 는 미디어를 넣을 때 쓴다 -->
<object width="900" height="800" data="media/product.pdf"></object>
<!-- <embed> 태그는 음원이나 동영상을 넣을 때 사용한다 -->
<br>
<embed src="media/spring.mp3">
<br>
<!-- <audio src=""></audio> 태그는 음원을 넣을 때 사용 -->
<audio src="media/spring.mp3" controls="controls"></audio>
<!-- video는 영상을 넣을 때 사용 -->
<br>
<video src="media/KakaoTalk_Video_2024-04-16-16-29-08.mp4" controls width= "500"></video>
<iframe width="801" height="451" src="https://www.youtube.com/embed/hGrIgIfCxP0" title="도서관에서 공부할 때 최대 집중력이 필요하다 | 3 hour lofi hip hop mix / lofi music for studying , work" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</body>
</html><iframe> 의 경우 유튜브에서 원하는 영상에 마우스 오른쪽 키를 누르면 소스코드 복사 항목이 뜬다!
그 소스코드를 복붙하면 저렇게 HTML화면에서 원하는 영상을 유튜브에서 가지고 올 수 있음!
- form 태그의 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 폼태그의 역할 : 사용자로 부터 입력받는다 1.직접 문자를 입력받는 방식 (문자) 2.선택을 통해 입력받는 방식 -->
<form>
<p>
<label>아이디 :
</label>
<input type="text" name="id"/>
</p>
<p>
<label>비밀번호 :
</label>
<input type="password" name="pwd"/>
</p>
</form>
</body>
</html>- 이미지 태그의 경로설정, 원하는 모양으로 테이블 만들기를 연습하고 좀 더 알아볼 것!
- 5월 19일 산업기사 시험, 산업기사 자격요건 졸업증명서 첨부하기
- 배운 것만으로 만들어보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제01</title>
</head>
<body>
<!-- 페이지를 구성하는 가장 큰 제목은 h1 태그를 씀. -->
<!-- 페이지를 구성하기 위헤 보통 h3까지 사용 -->
<h1>수습 국원 모집</h1>
<h2>방송에 관심있는 새내기 여러분 환영합니다</h2>
<p>교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부나 전공에 상관없습니다.
<br>
평소 방송에 관심있었던 여러 학우들의 지원바랍니다.</p>
<ul>
<li>
<strong>모집 기간 :
</strong>
3월 2일 ~ 3월 11일</li>
<li>
<strong>모집 분야 :
</strong>
아나운서, PD, 엔지니어</li>
<li>
<strong>지원 방법 :
</strong>
양식 작성 후 이메일 접수</li>
<i>
지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다.</i>
</ul>
<h3>혜택</h3>
<ol type="a">
<li>수습기자 활동 준 소정의 활동비 지급</li>
<li>정기자로 진급하면 장학금 지급</li>
</ol>
<img src="./animal.jpg" width="500"/>
</html>'2024_UIUX 국비 TIL' 카테고리의 다른 글
| UIUX _국비과정 0418 [HTML + CSS] (0) | 2024.05.30 |
|---|---|
| UIUX _국비과정 0417 [HTML + CSS] (0) | 2024.05.29 |
| UIUX _국비과정 0415 (0) | 2024.05.29 |
| UIUX _국비과정 0412 [학생성적관리 시스템 및 첫 조별과제] (0) | 2024.05.29 |
| UIUX _국비과정 0411 (0) | 2024.05.29 |