div개념 - 상자의 개념,
#
div , ul, li 와의 관계
div과ul은 부모자식관계
div li은 조상과후손관계
#
에밋
<!-- ul>li*3{메뉴} >> 에밋 -->
#
하이퍼링크개념
#
블록레벨태그 : 줄을 알아서 바꿔주는 태그 ex) ul
★test2.html
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
★img.html
ㅡㅡㅡ
<!DOCTYPE html> <!-- html5로 작성된 문서 -->
<html lang="ko"> <!-- <>된것을 태그라한다.ex) html태그,head태그--> <!-- 태그명 속성 = "값"-->
<!-- 이후에 (lang)속성나오고 (ko)값이 나온다.-->
<!-- html태그에서 속성이 많이 사라졌다. html은 구조를 잡아주는 것이라 그렇습니다.-->
<head><!-- head는 정보제공, 외부 파일연동, 스타일, 자바스크립트 를 넣어줍니다. -->
<meta charset="UTF-8"> <!-- mate는 정보를 줍니다. caarset :문자를 UTF-8바이트 방식으로 처리--> <!-- 영문숫자1byte 한글3byte-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 반응형 만들떄사용-->
<title>웹페이지 연습</title>
<!-- div는 상자개념이고, 상자가 쌓이는 개념입니다.-->
</head>
<body>
<div>
<h1>경로 설정</h1>
<h3>절대경로</h3>
<h5>상대설정</h5>
/(슬래쉬) - (루트 경로) <br> <!-- br : 줄바꿈-->
.(점) - 현재 위치 <br> <!-- 스페이스바로 많이띄워도 한칸만 띄어진다.-->
..(점점) - 현재 있는 위치 위의 위치(부모쪽으로) <br>
</div>
<div>
<!--ul :순서가없다.-->
<!--ol : 순서가있다.-->
<!-- li : 항목 -->
<ul> <!-- ul>li*3 처음위치클릭 > ctrl + alt-->
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
<!-- ★ -->
<!--
블록레벨태그 : 줄을 알아서 바꿔주는 태그 ex) ul,li
인라인레벨태그 : 줄을 스스로 바꿔주지 못하는 태그 ex) a태그
-->
<ul> <!-- ul>li*3{메뉴} >> 에밋 --> <!-- ul : 순서없는 목록-->
<li>메뉴</li> <!-- 리스트-->
<li>메뉴</li>
<li>메뉴</li>
</ul>
<!-- ul > li*3 -->
<!-- 자식 : 한칸 ???-->
<!-- 후손 : 꺽쇠 ???-->
</div>
<!-- ★ -->
<div>
<a href="https://www.naver.com">네이버</a>
<a href="../images/background01.jpg" target="_blank">그림1</a>
<!-- tartget : '에다가 띄어줘라'(새창) 그림이라는 글씨를 누르면
-->
</div>
</body>
</html>
ㅡㅡㅡ
<!DOCTYPE html> <!-- !를 쓰고 Engter -->
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 연습</title>
<!-- html, css는 에러를 안보여준다.-->
<!-- 에러자체를 안보여준다.-->
<style> /* 꾸밈 */
img{ /* 이미지의 크기를 가로 : 200px, 세로 : 200px로 쓰겠다. */
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
<h1>이미지 부분</h1>
<img src="../images/cloud01.jpg" >
<img src="../images/statue01.jpg" >
<!-- src : 소스라는 것-->
<!-- .(점1개 내가있는 곳) , ..(점 2개외부)-->
</div>
<div> <!-- a>img : a태그에다가 img태그 넣을게 (에밋)-->
<a href="test2.html" target="_blank"><img src="../images/big_Tree02.jpg" alt="큰 이미지"></a> <!-- alt : 그림에 대한 설명,-->
<!-- test2와 img는 같은 곳에 있어서 점으로 안해도된다.-->
<!-- 만약, 내 방문앞에 폴더가있다면, .(점)1개로 접근한다.-->
<a href="../images/background01.jpg" target="_blank">
<img src="../images/background01.jpg" alt="작은 이미지">
</a>
</div>
<div> <!-- div>ul>li*3>a Ctrl + Alt + 방향키 : #-->
<ul>
<li>고학년
<ul>
<li>6학년</li>
<li>5학년</li>
</ul>
</li>
<li>중학년</li>
<li>저학년</li>
</ul>
</body>
</html>
'4.VisualStudioCode > 2).VisualStudioCode_개념 및 실습' 카테고리의 다른 글
| VisualStudioCode_Day_06 (1) | 2024.02.23 |
|---|---|
| VisualStudioCode_Day_05 (0) | 2024.02.23 |
| VisualStudioCode_Day_04 (0) | 2024.02.21 |
| VisualStudioCode_Day_03 (1) | 2024.02.21 |
| VisualStudioCode_Day_01 (0) | 2024.02.21 |