2022.04.14
<div class="btn--success">
<div class="btn--error"> <div class="item">
<div class="item__name"></div>
</div>| 구글 폰트, 구글 머티리얼 아이콘 적용방법 (0) | 2022.04.14 |
|---|---|
| 파비콘(favicon), 오픈그래프(Open Graph Protocol) 적용방법 (0) | 2022.04.14 |
| HTML 시멘틱태그(sementic tag) (0) | 2022.04.05 |
| HTML (0) | 2022.04.05 |
| 특수 문자 용어 (0) | 2022.04.05 |
2022.04.14
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
</head>
</html>body {
font-family: 'Roboto', sans-serif;
}<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"><span class="material-icons md-18">face</span>| HTML 클래스 속성 작명법 (0) | 2022.04.14 |
|---|---|
| 파비콘(favicon), 오픈그래프(Open Graph Protocol) 적용방법 (0) | 2022.04.14 |
| HTML 시멘틱태그(sementic tag) (0) | 2022.04.05 |
| HTML (0) | 2022.04.05 |
| 특수 문자 용어 (0) | 2022.04.05 |
2022.04.14
<link rel="icon" href="이미지이름" />네이버 파비콘을 추출하기 위해 https://www.naver.com/ 로 접속
뒤에 /favicon.ico 를 작성해준다
새로 창이 뜨는데 마우스 우클릭 후 '다른이름으로 저장' 눌러주면 끝
<meta property="og:type" content=" 웹인지 앱인지 타입 지정 " />
<meta property="og:site_name" content=" 사이트 이름 “/>
<meta property="og:title" content=" 해당 링크의 제목 " />
<meta property="og:description" content=" 설명. 너무길지않고 간략하게 " />
<meta property="og:image" content=" 썸네일 이미지 " />
<meta property="og:url" content=" 링크될 url “/> | HTML 클래스 속성 작명법 (0) | 2022.04.14 |
|---|---|
| 구글 폰트, 구글 머티리얼 아이콘 적용방법 (0) | 2022.04.14 |
| HTML 시멘틱태그(sementic tag) (0) | 2022.04.05 |
| HTML (0) | 2022.04.05 |
| 특수 문자 용어 (0) | 2022.04.05 |
2022.04.12
.container {
display: grid;
}grid-template-rows: 그리드 행 배치
grid-template-columns: 그리드 열 배치
//고정크기와 가변크기를 섞어 쓸 수 있음
grid-template-columns: 200px 2fr 1fr;
//repeat(반복횟수, 반복값)
grid-template-columns: repeat(5, 1fr);
//minmax
grid-template-row: repeat(3, minmax(100px, auto);
최소100px는 확보하며, 100px넘거나면 auto처리 gap
그리드 셀 사이의 간격을 설정
//row 간격 5px
row-gap: 5px;
//column 간격 5px
column-gap: 5px;
//row-gap:10px, column-gap:5px;
gap: 10px 5px;grid-auto-colums, grid-auto-rows:트랙의 크기를 지정하지 않고 자동으로 늘려줌
gird-column, grid-row
gird-column
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 5px;
background-color: pink;
padding: 10px;
}
.grid-container > div {
background-color: tomato;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-column: 1 / 3;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
grid-row
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 5px;
background-color: pink;
padding: 10px;
}
.grid-container > div {
background-color: tomato;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-column: 3 / 5;
grid-row: 2 / 3;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
몇 개의 셀을 차지하게 할것인지를 지정해줄수도 있음
// 1번라인에서 2칸
grid-column: 1 /span 2;
// 1번 라인에서 4칸
grid-row: 1 / span 4;<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
width: 500px;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 100px 200px 100px;
border: 4px solid;
grid-template-areas:
"header header"
"main nav"
"footer footer";
}
.item {
border: 1px solid;
}
.item:nth-child(1) {
grid-area: header;
}
.item:nth-child(2) {
grid-area: main;
}
.item:nth-child(3) {
grid-area: nav;
}
.item:nth-child(4) {
grid-area: footer;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1 header</div>
<div class="item">2 main</div>
<div class="item">3 nav</div>
<div class="item">4 footer</div>
</div>
</body>
</html>
grid-auto-flow: 아이템이 자동 배치되는 흐름을 결정하는 속성
// dense는 남은 셀의 공간을 채우게함.
grid-auto-flow:(row생략가능) dense;
// column dense로 줄 경우 수직으로 남은 셀 공간을 채우게 됨
grid-auto-flow: column dense;세로 방향 정렬
align-items: 아이템을 세로방향으로 정렬
.container {
align-items: stretch;
align-items: start;
align-items: center;
align-items: end;
}가로 방향 정렬
justify-items: 아이템을 가로방향으로 정렬
.container {
justify-items: stretch;
justify-items: start;
justify-items: center;
justify-items: end;
}place-items
align-items와 justify-itms를 같이 쓸 수 있는 단축 속성
.container {
place-items: center center;
}align-content
grid 아이템들의 높이를 모두 합한 값이 grid 컨테이너의 높이보다 작을 때 아이템들을 통째로 정렬
.container {
align-content: stretch;
align-content: start;
align-content: center;
align-content: end;
align-content: space-between;
align-content: space-evenly;
} justify-content
gird 아이템들의 너비를 모두 합한 값이 grid 컨테이너의 너비보다 작을 때 아이템들을 통째로 정렬
```
.container {
justify-content: stretch;
justify-content: start;
justify-content: center;
justify-content: end;
justify-content: space-between;
justify-content: space-evenly;}
place-content
align-content와 justify-content를 같이 쓸 수 있는 단축 속성
.container {
place-content: center center;
}gird container의 자식요소들로 grid의 규칙에 의해 배치됨 .item {
align-self: stretch;
align-self: start;
align-self: center;
align-self: end;
} .item {
justify-self: stretch;
justify-self: start;
justify-self: center;
justify-self: end;
} .item {
place-self: center center;
}| CSS ...끄적 (0) | 2022.04.15 |
|---|---|
| CSS filter속성 (0) | 2022.04.13 |
| 가상클래스(pesudo class)와 가상요소(pesudo element) (0) | 2022.04.08 |
| CSS초기화 reset.css 및 CSS 말줄임 표시방법 (0) | 2022.04.07 |
| CSS 속성 (0) | 2022.04.06 |
2022.04.12
CSS filter
| 종류 | 설명 |
|---|---|
| blur(px) | 이미지에 흐름효과. 값이 클수록 더 흐려짐 |
| brightness(%) | 이미지 밝기 조정. 0%는 완전히 검게, 100%(기본값)보다 크면 더 밝게 |
| contrast(%) | 이미지 대비 조정. 0%는 완전히 검게, 100%(기본값)보다 크면 더 많은 대비 처리 |
| drop-shadow (x y blur 색상) | 이미지에 그림자 효과 지정. x, y그림자 위치지정, blur는 흐림정도, 색상은 그림자 색상 |
| grayscale(%) | 이미지를 회색으로 변환. 0%(기본값), 100%는 이미지를 완전 회색 처리 |
| hue-rotate(deg) | 이미지 색조 회전을 적용 0deg~360deg |
| invert(%) | 이미지 색상 반전. 0%(기본값), 100%는 이미지 색상 완전 반전 |
| opacity(%) | 이미지 투명도. 0%~100%(기본값) |
| saturate(%) | 이미지 채도 지정. 0%는 채도 없애고 100%(기본값)를 초과하면 채도높임 |
| sepia(%) | 이미지를 세피아톤으로 변환(오래된사진느낌). 0%(기본값)~100% |
| backdrop-filter | 요소 범위만 blur처리 |
| filter | 다중값 지정. 값 처리는 띄어쓰기로 |
| CSS ...끄적 (0) | 2022.04.15 |
|---|---|
| CSS Grid속성 (0) | 2022.04.13 |
| 가상클래스(pesudo class)와 가상요소(pesudo element) (0) | 2022.04.08 |
| CSS초기화 reset.css 및 CSS 말줄임 표시방법 (0) | 2022.04.07 |
| CSS 속성 (0) | 2022.04.06 |
2022.04.07
가상 클래스(pesudo-class)
가상클래스는 HTML에 이미 존재하는 클래스를 특정 이벤트나 환경에 맞춰 가상으로 클래스를 줘서 css로 제어하는 것
(:)세미클론 한개 사용
* :link
방문하지 않은 링크에 스타일 적용
* :visited
방문한 링크에 스타일 적용
* :hover
특정 요소에 마우스 포인터 올려놓으면 스타일 적용
* :active
마우스를 클릭했을 때
* :focus
마우스를 클릭하고 입력하는 동안 적용
* :first-child
첫번째 자식
* :last-child
마지막 자식
* :nht-child(2n+1)
홀수 번째 자식가상 요소(pesudo-element)
HTML에 존재하지는 않지만 가상의 요소를 생성하여 스타일을 주는 것
(::)세미클론 두개 사용(세미클론이 하나며도 작동은 되지만 이중클론 권장)
content=""; 가 있어야 가상요소가 만들어지므로 필수 속성
* ::before
요소의 콘텐츠 시작 부분에 생성된 콘텐츠 추가
* ::after
요소의 콘텐츠 마지막 부분에 생성된 콘텐츠 추가위에 두 요소 사용방법은 아래 링크에서 확인해 주세요
끄적:: CSS선택자
| CSS Grid속성 (0) | 2022.04.13 |
|---|---|
| CSS filter속성 (0) | 2022.04.13 |
| CSS초기화 reset.css 및 CSS 말줄임 표시방법 (0) | 2022.04.07 |
| CSS 속성 (0) | 2022.04.06 |
| CSS 선택자 (0) | 2022.04.06 |
2022.04.07
표기법
데이터 종류(자료형)
let myName = "SUNNY"; --> 큰따옴표 사용
let email = 'email@email.com'; --> 따옴표 사용
let hello = `Hello ${myName}-->보간법!`; --> 백틱을 사용하게 되면 보간법 사용 가능
console.log(hello); --> Hello SUNNY!let number = 123;
let opacity = 1.57 --> 부동 소수점let undef; --> js는 undefined라는 하나의 값이 있는 상태로 인식함
let obj = { abc: 123 }; -->객체 데이터. abc라는 속성안에 123라는 값을 넣어줌null과 undefined : 무언가가 없다는건 같지만 의도적이냐 아니냐에 따라 구분되어진다let user = {
//key: Value,
name: 'Sunny',
age: 92,
isValid: true };
console.log(user.age); //92변수
데이터를 저장하고 참조(사용)하는 데이터의 이름
let, const, var
변수는 재사용 가능
let = 값(데이터)의 재할당 가능
const = 값(데이터)의 재할당 불가능
예약어
특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어
this, if, break ... --> SyntaxError
함수
특정 동작(기능)을 수행하는 일부 코드의 집합(부분)
function
1. // 함수 선언
function hellFunc() {
// 실행 코드
}
// 함수 호출
hellFunc();
2. // returnFunc()라는 함수가 return 123을 반환하고,
// a라는 변수가 returnFunc()함수를 호출(실행)해서 console.log를 출력함
function returnFunc() {
return 123;
}
let a = returnFunc(); //console.log(a);
3. // 함수 선언!
function sum(a, b) { //a와 b는 매개변수 (Parameters)
return a + b;
}
//재사용
let a = sum(1, 2) // 1과 2는 인수 (Arguments)
console.log(a); // 3
4. // 기명(이름이 있는)함수
//함수 선언
function hello() {
console.log(123);
}
hello(); // 123
5. //익명(이름이 없는)함수. 이름은 선언하지 않았기 때문에 호출을 할 수 없어서 변수와 함께 사용
//함수 표현
let num = function () {
console.log(456);
}
num(); // 456
6. //객체 데이터
const sunny {
name: 'Yu',
age: 92,
//메소드(method)
//객체데이더 내부의 속성에 함수가 할당되어 있는것.
//함수를 데이터 처럼 표현할 수 있다
getName: function () {
return this.name;
// this란 this가 소속되 있는 객체데이터
}
};
console.log(sunny.getName()); // Yu조건문
조건의 결과에 따라 다른 코드를 실행하는 구문
if, else
let isShow = true;
let checked = false;
//if
if(isShow) {
console.log('wow'); // wow
}
if(checked) {
console.log('yeah'); //
}
//else
if(checked) {
console.log('wow');
} else {
console.log('yeah');
} //yeahDOM API
자바스크립트에서 HTML을 제어하기위한 명령들
Document Object Model(HTML의 div, span, input ...),
Application Programming Interface(애플리캐이션이 동작하기 위한 명령)
// HTML 요소 (Element) 1개 검색/찾기
const boxEl = document.querySelector('.box');
// HTML 요소에 적용할 수 있는 메소드
boxEl.addEventListener(); --> 인수(Arguments) 추가 가능
// 핸들러(handler, 실행할 함수)
-> boxEl.addEventListener('click', function(){
console.log('wow');
})
// 요소의 클래스 정보 객체 활용
boxEl.classList.add('active');
let isContains = boxEl.classList.contains('active');
console.log(isContains); // true
boxEl.classList.remove('active');
let isContains = boxEl.classList.contains('remove');
console.log(isContains); // false
// HTML 요소(Element) 모두 검색/찾기
const boxEls = document.querySelectorAll('.box');
// forEach 찾은 요소들 반복해서 함수 실행
// 익명 함수를 인수로 추가
// boxEls --> 유사배열
// boxEl: 반복 중인 요소, index: 반복 중인 번호
boxEls.forEach(function (boxEl, index){
boxEl.classList.add(`order-${index + 1}`);
console.log(index, boxEl);
})
const boxEl = document.querySelector('.box');
// Getter, 값을 얻는 용도
console.log(boxEl.textContent);
// Setter, 값을 지정하는 용도
boxEl.textContent = 'Sunny';
console.log(boxEl.textContent);메소드 체이닝
여러 메소드를 이어서 호출하는 문법
코드가 간결해져 하나의 문장처럼 읽히게 할 수 있고, 유지보수에 도움이 됨
const a = 'hell';
const b = a.split('').reverse().join('');
// 메소드 체이닝
// split: 문자를 인수 기준으로 쪼개서 배열로 변환
// reverse: 배열을 뒤집기
// join: 배열을 인수 기준으로 문자로 병합해 반환
console.log(b) // lleh| 자바스크립트 화살표함수와 this (0) | 2022.04.22 |
|---|---|
| 자바스크립트 String(문자)데이더 (0) | 2022.04.22 |
| 변수의 유효범위와 클로저 (2) | 2022.04.20 |
| 자바스크립트 자료형 데이터타입 (0) | 2022.04.20 |
| export와 import (0) | 2022.04.20 |
2022.04.06
Reset CSS
웹 브라우저마다 다른 default 스타일이 지정되어 있기 때문에 이를 초기화 시켜주고,
모든 웹 브라우저마다 동일한 스타일이 적용될 수 있도록 하는 설정reset 하는방법
CSS 말줄임
overflow-wrap: break-word
줄바꿈 기준을 모를 때 영역에 맞게 잘라주는 속성
word-break: break-all
단어가 아닌 글자단위로 줄바꿈을 하고자 할때 쓰는 속성
이미지 크기를 제어할때는 가로든 세로든 하나만 조절해주면된다!(비율때문에)
| CSS filter속성 (0) | 2022.04.13 |
|---|---|
| 가상클래스(pesudo class)와 가상요소(pesudo element) (0) | 2022.04.08 |
| CSS 속성 (0) | 2022.04.06 |
| CSS 선택자 (0) | 2022.04.06 |
| CSS 선언방식 (0) | 2022.04.06 |