https://gomcine.tistory.com/entry/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C-%EC%8B%9C-%EC%9C%A0%EC%9A%A9%ED%95%9C-VS-Code-Extensions-5%EA%B0%80%EC%A7%80
https://www.youtube.com/watch?v=bS9yTI2fC0w&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9by%EC%97%98%EB%A6%AC
https://gomcine.tistory.com/entry/VS-Code-Extension-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%9C%A0%EC%9A%A9%ED%95%9C-Extension-%EC%86%8C%EA%B0%9C

HTML

태그끼리 겹쳐있을때 밖에 있는 태그를 부모 태그, 안에 있는 태그를 자식 태그라고 부른다.(자식의 자식은 부모의 자식이라고 하지 않는다.) 자식 태그는 부모 태그보다 한단계 더 들여서 써주어야 한다. 그리고 서로 대등한 위치에 있는 태그를 형제 태그라고 부른다.
들여쓰기는 보안을 위해서 안하기도 한다.

가급적 class를 사용하고 id는 최대한 안쓰는게 좋음. 그렇다고 class도 많이 쓰지 않는것도 좋음

그래서

1. 기본

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <!-- -->
    <u></u>
    <strong></strong>
  
  </body>
</html>

2. 속성

div : block 속성

3. 태그

a

<a href="연결위치"></a>
href = "링크"
target = "문서를 어떻게 열지"

_self : 링크를 클릭한 해당 창에서 연다.
_blank : 링크를 새창으로 연다.
_parent : 부모 창에서 연다. (부모 창이 없으면 _self 속성으로 처리)
_top : 전체 브라우저 창에서 가장 상위의 창에서 연다. (부모 창이 없으면 _self 속성으로 처리)
href="www.naver.com"
href="javascript:함수명(this);" this를 그냥 넘기면 Windows 객체 전체가 넘어간다.

title : 문서에 마우스를 올리면 정보가 뜬다.

div

<div></div> : 단락을 나타내기 위한 태그
div는 block 속성이다. 한줄을 점유한다.

class : div class 명
id : css 적용 아이디

style들
style="color:red;"

font-size: 2em; (2em은 기본 크기의 2배)
text-align:center,right,left;
width 가로 크기
height 세로 크기
border 테두리 굵기
background-color 배경 색상
float 정렬
margin: 1px 2px 3px 4px (위 오 아 왼 바깥쪽으로 띄울때)
margin-top, margin-left, margin-botton, margin-right
padding: 1px 2px 3px 4px (안쪽에서 띄울때)
vertical-align: top; (어떤 문자를 기준으로 세로 정렬할지)

display
display="inline;"

inline
inline-block

span

<span></span> : 글자를 나타내기 위한 태그
span은 inline속성이다. 그래서 한줄에 여러개가 올 수 있다.

보통 div를 먼저 쓰고 그 안에 span을 사용 - 즉 글자의 일부분 바꿀 때 사용

속성

onclick="함수();"

pre

pre 태그

입력한 것을 그대로 보여줌
code : Defines a piece of computer code
samp : Defines sample output from a computer program
kbd : Defines keyboard input
var : Defines a variable

img

<img src="이미지주소">

width : 이미지 너비 px, %
height : 이미지 높이 px, %
title : 마우스를 올렸을 때 나오는 설명

table

<table> : 표를 만드는 태그
  <tr> : 가로줄을 만드는 태그
    <td></td> : 가로줄 안에 칸을 만드는 태그
  </tr>
</table>

table 속성

border=1 : 표의 경계선의 굵기
cellspacing=0 : 경계선 사이의 여백의 크기를 조절
cellpadding=0 : 경계선과 칸 안의 여백의 크기를 조절
colspan=2 : 왼쪽 포함 두개 합
rowspan=2 : 아래쪽 포함 두개 합

button

<button type="button" onclick="query()">버튼</button>

button 속성

onclick : 클릭했을 때 동작할 내용을 기술

input

<input type="text" placeholder="사전에 보이는 글자">

기타

<br> : 한줄 띄어쓰기
#123456 : html색상표로 정의된 색상

기타개념

확장자 : 파일의 형식을 나타내주는 것
태그의 속성 : 태그 안에 써서 특정한 기능을 하도록 하는 것
픽셀 : 이미지를 구성하는 네모 모양의 작은 점

CSS

세미콜론 필수
주석 : / * * /

class 명을 따로 설정 '.클래스명'{} 로 설정 (태그는 div class="클래스명" 로 설정) 모든 태그에 부여 가능
클래스명은 여러개 지정 가능 div class="클래스명1 클래스명2"
속성들은 쇼부를 볼 수 있다( = 캐스캐이드)

id도 모든 태그에 부여 가능 '#id명'{} 로 설정
id는 그 문서내에서 하나의 태그에만 주어야 한다. 한 곳에서만 사용가능하고 다시쓰기도 불가능하다. 하지만 class는 무한정 사용가능

자식 : 클래스 내부의 1탭의 클래스들
후손 : 클래스 내부의 모든 클래스들

태그들

background-color: transparent | color | initial | inherit

transparent : 배경색 없음
color : 배경색 설정(red)
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.
#ffffff : 색상

width : px, %;
height : px, %;
margin: px, %; 바깥쪽 여백
padding: px, %; 안쪽 여백
color : 글자속성 지정
코딩스킬 코드 중복을 줄이기 위해
div에 공통된 속성 부여하고
.클래스명으로 세부 속성 부여

기타

!important : 이 속성을 우선적으로 적용하라

스크롤 없애기

<style>
body{
	overflow-y:hidden
}
</style>

javascript

호출할때 숫자면 그냥 입력하면 되지만 문자면 "문자" 형태로 입력

<body>
	<script>
      	alert("알림내용");
		function 함수이름1(a,b){
          alert(a);
          alert(b);
          alert(함수이름2(a));
      	}
		function 함수이름2(a){
          return a;
     	}
		var a=1,b="2";
		alert(a+b);
	</script>
	<a href="javascript:함수이름("신기하다!","우와");"></a>
</body>

alert(알림내용) 내장함수

다음 기능 가능

사칙연산 가능(+,-,*,/)
지 알아서 문자와 숫자 연산함 -> 에러가 나더라도 일단 화면에 보여야 하기 때문

this : 자기자신을 의미, 태그전체를 의미

jQuery

jQuery는 HTML 속에 존재하는 Js 라이브러리
jQuery는 사용자가 html 파일에서 알려주어야 할 수 있다.

<html>
  <head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script>
		function submitjquery(){
			$("#div1").html("잘지내세요.");
			$( "#div1" ).css( "border", "3px dotted blue" );
		}
	</script>
	</head>
</html>

기본
$("#클래스이름, .아이디이름, 태그")

부모의 자식
$("div>div, div div, div>span>div, #yes>div")

클래스 삽입/삭제/탐색
$("#yes").addClass("myclass");
$("#yes").removeClass("myclass");
$("#yes").hasClass("myclass");

내용 삽입/삭제
$("div").append("내용"); 뒤에 삽입
$("div").prepend("내용"); 앞에 삽입

요소 변경 html/css
$("#div1").html("잘지내세요.");
$( "#div1" ).css( "border", "3px dotted blue" );

Author And Source

이 문제에 관하여(html, css, Js, jQuery 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tonyhan18/htmlcss-태그-속성

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

html, css, Js, jQuery 정리