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" );