728x90
반응형
기억해 둘 잡다구리 한 것들
- html:5을 사용하여 기본 구조를 가져올 수 있다.
- ctrl + B로 사이드 바를 열고 닫을 수 있다.
- 코드 포메터, 코드 컨벤션은 코드를 정리하는 규칙이라는 뜻이다.
- 파일을 우클릭하고 open with live server를 누르면 웹사이트를 확인할 수 있다.
- 자신의 환경에서 테스트 중이므로 5500앞을 localhost로 바꾸어도 문제없다. 바꾸기전은 아이피주소,
- open with live server로 안열릴경우 크롬에 http://localhost:5500을 쳐도 나온다. 또는 copy path
- 마우스 커서가 어디에 있던 ctrl + c, ctrl + v키를 누르면 다음 줄로 복사가 된다.
- href를 넣을 때 ./을 하면 지금 있는 파일들을 보여 준다.
- ctrl + / 주석을 넣을 수 있다.
HTML의 기본 요소 (Element)
html은 웹사이트의 뼈대이다. html은 요소의 집합인데, html의 요소는 시작태그(<>)와 종료태그(</>)로 이루어져 있다. 시작 태그와 종료 태그 사이에 콘텐츠를 정의 할수 있다.
단, 시작 태그만 있는 것도 있는 데 이런 경우는/>로 끝이나며, 이는 그 안에 다른 html요소를 담을 수 없기 때문이다.
<h1> ~<h6>
<p>에 p는 paragraph(문장)의 약자
<a>태그는 보통 화면 이동의 역할
<!DOCTYPE html> #항상 html 최신 버전을 사용한다는 뜻
<html lang="en"> #속성
<head>
#meta는 이 html의 특정 설정 정보를 설명하는 것
<meta charset="UTF-8" /> #영문이나 한문 등 여러 문자를 쓸 수 있도록 함. 한글만 쓴다면 EUC-KR을 써도 됨
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> #스마트폰 , 태블릿, 모바일관련
<title>Document</title>
</head>
<body>
<h1>HelloWorld</h1>
</body>
</html>HTML 속성(Attribute)
반드시 시작태그에만 쓸 수 있고, html요소의 추가적인 정보 관리를 위해 사용된다.
"속성명 = 속성 값" 형태로 사용 된다. (name = "telephone")
모든 태그에 쓸 수 있는 속성 = 글로벌 속성
일정 태그에만 쓸 수 있는 속성 = 로컬 속성
<a href="네이버링크">네이버</a>로 화면 이동을 위해 사용 (특정 페이지나 우리가 구현한 자바스크립트 함수 호출)
<!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>
<h1>머리말1</h1>
<h2>머리말2</h2>
<h3>머리말3</h3>
<h4>머리말4</h4>
<h5>머리말5</h5>
<h6>머리말6</h6>
<h7>머리말7</h7>
<p>첫번째 문장입니다 :></p>
<a href="https://naver.com">네이버</a>
<a href="./01_helloworld.html">01_hellworld.html</a>
<img src="" alt="" />
</body>
</html>
global 속성
- <img src="이미지경로" alt="설명(이미지가 보이지않을 때 대신 보이는 글귀가 된다. 시각장애인 분들께는 특히 중요!), ">
- <h1 draggable="true">움직일 수 있는 태그</h1> : 파일이 있고 휴지통으로 드래그 해서 가져다줄때 유용!
- <p lang = "ko">대한민국</p> #메인언어는 한국어이다. 페이지의 번역 긴능을 활성화 시키고, 검색엔진에게 메인언어를 알려줘서 더 검색엔진의 분석을 도움.
- <p hidden>이 문장은 화면에 보이지 않습니다.</p> : 글로벌
- <a href="https://google.com" id = "google" name ="google">구글</a> : id는 중복될 수 없으나 name은 중복 가능하다.
- 태그 label : 어떤 특정한 값을 표시 -> <label for="userId">사용자 아이디</label> <input type="text" name="" id="userId" /> for를 사용하여 설명 연결을 시켜줌 이때 id는 global attribute이지만 for은 아니다.
- input: text
- 태그 br은 줄바꿈
- <p spellcheck="true" contenteditable="true">This is a paraggraph</p> #spellcheck는 오타확인, contenteditable은 사용자가 수정가능한 영역
- <p style="color: violet; background-color: black">보라색 문장입니다.</p> #글과 배경에 색상을 주는 속성겂 설정, 하지만 이런 각자 설정은 좀 지향해야 한다.
<!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>
<h1 draggable="true">움직일 수 있는 속성</h1>
<p lang="ko">대한민국</p>
<p hidden="true">이 문장은 화면에 보이지 않습니다.</p>
<a href="https://google.com" id="goole" title="클릭하면 구글 사이트로 이동"
>구글</a
>
<br />
<label for="userId">사용자 아이디</label>
<input type="text" name="" id="userId" />
<br />
<p spellcheck="true" contenteditable="true">This is a paragraph</p>
<p style="color: red; background-color: beige">빨간색 문장입니다.</p>
<a href="" tabindex="1">네이버</a>
<a href="" tabindex="2">구글</a>
<a href="" tabindex="3">개발자의 품격</a>
<button title="주문 버튼을 클릭 하면 선택한 제품에 대한 주문이 진행">
주문
</button>
</body>
</html>local 속성
- <a href="" tabindex="1">네이버</a> #탭을 눌렀을때 이동방향 (입력 하지않을 시 body안의 순서대로 따라가게 됨
- <button title="주문 버튼을 클릭하면 선택한 제품에 대한 주문이 진행됩니다."> #버튼에 커서를 대면 설명이 나온다.
- <a href="https://google.com" target="_blank">구글</a> #_blank는 새 창, _self는 지금 창에 연다. 보통은 self가 defalt값이다,
- <img src="./img/face.jpg" style="width: 100px; height: auto" alt="" /> #이미지의 크기를 조정// 해상도의 차이
- <img src="./img/face.jpg" width = "100px" height = "auto" alt="" /> 이렇게도 사용이 가능하다.
<!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>
<a href="httpS://google.com" target="_blank">구글</a>
<img
src="./img/하이큐 배경.jpg"
style="width: 100px; height: auto"
alt=""
/>
<img src="./img/하이큐 배경.jpg" style="width: 50%; height: auto" alt="" />
</body>
</html>Style 속성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 코드가 아닌 설명 -->
<!-- **스타일** -->
<!-- html 요소에서 직접 style 속성을 통해 정의하는 것을 인라인 스타일 -->
<!-- <sytle>태그에 작성하는 것을 인터널 스타일</style> -->
<!-- 별도의 .css파일로 만들어서 사용하는 것을 external style -->
</head>
<body>
<p>일반 문장입니다.</p>
<p style="color: red">빨간색 문장입니다.</p>
<p style="background-color: rgb(36, 114, 36); color: blue;">초록샏 배경에 파란색 글자입니다.</p>
<p style="font-size: 30px">큰 사이즈 글자입니다.</p>
<p style="text-align: center">가운대 정렬</p>
<p style="text-align: right">오른쪽 정렬</p>
<p style="font-weight: bold">볼드체(굵은)로 보입니다.</p>
<p style="text-decoration: underline">밑줄이 생깁니다.</p>
<p style="text-decoration: line-through">취소선이 생깁니다.</p>
<p style="font-style: italic">이텔릭체로 보입니다.</p>
</body>
</html>
728x90
반응형
'HTML & CSS' 카테고리의 다른 글
| input요소의 주요 속성 (2) | 2023.10.12 |
|---|---|
| form 요소 (2) | 2023.10.12 |
| 목록 태그, 표 태그 (0) | 2023.10.03 |
| 의미에 맞는 태그 (2) | 2023.10.02 |
| 웹의 이해와 웹개발 라이프 사이클 (2) | 2023.10.02 |