html head의 중요성 카카오클론 #2.6
각 tag 따른 attribute
ID = #
class = .
부모한테 display : flex를 하면 block 이던 것들이 inline으로 되게 된다.
flex-direction : column을 하면 주축이 수직, 교차축이 수평이 된다 (서로바뀜)
justify content : 수평(main axis)
align items : 수직 (cross axis)
position: fixed; : 화면상에 고정할 수 있음 (ex 페북 광고, 상단바의 메뉴들)
position: relative; : 요소가 위치한 기준점을 기준을 하는것(top bottom 등을 통해 움직임)
position: absolute; : 가장 가까이 관련된(relative가 적용된) 부모 기준으로 이동시킴 : 부모가 relative 해야한다! 매우중요!
semetic tag 의 중요성 (header, footer, etc...)
pseudo selcetor : last-child, first child, nth-child(3), nth-child(even), nth-child(3n+1), etc... ex) div:first-child { background-clolor: teal; }
combinator: ex) div 안에 p안에 span 인걸 바꾸려면? - div p span { }
pseudo element :
div > span : div 뒤의 바로 밑자식의 span 인것만 적용
p + span : p 바로 다음에오는 span 에 적용
p ~ span : p 다음에오는 span 에 적용 (꼭 바로 뒤에 올 필요 x)
ex) input[placeholder~="name"] { } : input의 placeholder중에 name을 포함하는 것에 모두 적용
a[href$=".org"] { } : 링크중에 arg로 끝나는 것에 모두 적용.
state : active, focus, hover,visited (ex. button:hover { color: tomato}
p::first-letter { }
p::selected { }
color 시스템 :
1. F999
2. tomato
3. RGB값(222, 200, 4) or rgba( a= 투명도)
Value값 저장 방법. :root { --main-color: F999 }
이후 var(--main-color); 를 적용하면 저장된 색을 끌어올 수 있음

JavaScript Part 1

JS 추가방법 :html 파일 맨 아래에 적어 넣으면 된다.

-JS 변수(Variables) :

변수생성하기
초기화하기
사용하기

-변수 만들기 >> let a = 64;

const = 상수 var = 변수

// or / ... / : 주석달기
console.log() : 프린트
변수에 넣을 수 있는 Data :
1. string ex) const name = "KYH";
2. 이모티콘
3. Boolean ex) const wat = true/false;
4. Number ex) const num = 666;
5. Float ex) const fat = 55.1;

-데이터를 정렬하는 2가지방법

Organizing Data(Array, 배열) : 대괄호 변수 지정법 : daysOfWeek (space를 쓰고싶을땐 대문자) ex) const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; console.log(daysOfWeek[2]); ==> Wed
Organizing Data(Object) : 중괄호 ex) const Info = { name: "KMH", age : "21", gender:"Male" Movie: ["신과함께","너의이름은","어벤져스:엔드게임"] } console.log(Info.gender); ==> Male

Object 로 선언된 변수들은 변경될 수 있다.
Object 안에서 array를 만들 수 있다.
Js 내장함수 ex) log, alert
Js 함수선언 function sayHello() { console.log('Hello!'); }

sayHello();

C언어와 비슷한 형식. : 인자(argument) 를 갖고 있음 ex) function sayHello(name, age) { console.log('Hello!', name, "Your age is", age); } sayHello("KYH",21);

` : ""와 ''와 다른 것 ex) function sayHello(name, age) { console.log(Hello ${name} you are &{age} years old`); } const greeting = sayHello("KYH", 21) ==> 여기서 greeting은 sayHello함수의 return값

console.log(greeting)

-객체 안에 함수만들기 ex) const calculator = { plus: function(a, b){ return a + b; } } const plus = calculator.plus(5, 5) console.log(plus)

-Js에서 HTML의 id 가져오기 const IdName = document.getElementById("IdName");

console.log(IdName);

-매우중요!- const title = document.querySelector("#IdName"); ==> css처럼 선택함

==> DOM (Document Object Module) : html으로부터 js로 object 형으로 가져옴 = Js에서 HTML파일을 변경할 수 있음. 객체표기법 확인하기 : console.dir(IdName)

ex) IdName.style.color = "red"; -> 색을 빨간색으로 변경 ex) document.title = "Your doc";

dudgns2947 / HTML-CSS-JS

HTML,CSS,JS 개인공부 #1

html head의 중요성 카카오클론 #2.6

F999

JavaScript Part 1