본문 바로가기

전체 글

 (265)
font 적용하는 방법 온라인 폰트) CSS - import 설정 /*css*/ @import url('https://fonts.googleapis.com/css2?family=Macondo&display=swap'); h1:nth-of-type(4){font-family: 'Macondo',serif;} 온라인 폰트) html에 적용할 때 /*css*/ #fonftext {font-family: 'Jeju Gothic', sans-serif;} 다운받은 font 적용할 때 ) CSS - file 설정 @font-face { font-family: 'hala'; src: url(06day-main/font/Hallasan.woff) format('woff'); } h1:nth-of-type(3){font-family: 'hal..
[JS] 템플릿 리터럴: 백틱(``) 템플릿 리터럴 (Template Literal) : 백틱 (``) - 내장된 표현식을 허용하는 문자열 리터럴(소스코드의 고정된 값)이다. → ES6 부터 도입 - 이중 따옴표 나 작은 따옴표 대신 백틱(` `)을 이용 기능 1. 줄바꿈 가능 - 줄바꿈 그대로 표현됨 var say = ` Hi my name is nana! Bye~`; console.log(say); ▼ 실행결과 2. 표현식 삽입 - $와 중괄호( $ {expression} ) 로 표기 var name = `망고`; var price = 1000; var num = 2; console.log(`${name}의 가격은 ${price * num}원`); //${}안에 변수나 연산 등 삽입 ▼ 기존 방식 console.log(name + '가격..
Grid Layout- 그리드2 (grid-template-areas) grid-template-areas 영역이름을 참조(grid-area)해 템플릿 생성 - .마침표를 사용하거나 임의로 준 이름을 입력해 빈 영역을 설정할 수 있음 -> Grid Container에게 적용 grid-area 그리드 영역 이름 지정 -> Grid item에게 적용 ▼ 적용 예제 1 1 2 3 4 5 6 7 HTML 삽입 미리보기할 수 없는 소스 ▼ 적용 예제 2 header mainbanner content footer HTML 삽입 미리보기할 수 없는 소스 ▼ 적용 예제 3 ( repeat(반복횟수,비율), minmax(최소값,최대값), min-content, auto-fill, auto-fit 참고) 2 3 5 6 *grid-template-columns: repeat(auto-fill,..
JavaScript 기본 용어 생성자 constructor 비슷한 객체들을 여러개 생성하기 위해 키밸류 값을 일일이 입력해서 만드는 것이 아니라, 하나의 생성자를 만들어놓으면 그 생성자를 이용해 간편하게 해당 객체(인스턴스)를 생성할 수 있게 해준다. -이름 처음은 대문자로 시작해야 한다. -this. 으로 접근하여 키값을 할당해줌. function Student(name, age) { this.name = name; this.age = age; this.say = function () { console.log( `안녕하세요 제 이름은 ${name}이고 나이는 ${age}입니다.` ); }; }//Student 생성자 인스턴스 : inheritance(상속) ex) var user1 = new user('kim'); ->user1이라..
javascript의 기본 문법 document.getElementById('hi').innerHTML = 'hello; 해석 =>웹문서의 hi라는 아이디의 내부html에 'hello'문자를 넣어라 document → 문서(html) . → ~의 getElementById('~') → 아이디가 '~'인 html요소를 찾아라 innerHTML → HTML 내부 = → 등호: 오른쪽에 있는 것을 왼쪽에 대입하라는 것 'hello' → hello문자(' ', " "안에 있는 것은 문자라는 뜻) getElementById('hi') → 셀렉터 / html요소 찾기 위해 사용 .innerHTML → 메소드(함수) / html요소의 어떤 속성을 변경할지 결정하는데 사용
Grid Layout- 그리드1 Grid -flex처럼 레이아웃에 유용하게 쓰임. -flex는 1차원(가로 or 세로)적인 것에 반면, grid는 2차원 두방향(가로, 세로)이 가능하다. -때문에 복잡한 레이아웃 표현이 가능하다. Container (부모요소) 속성 display : grid || inline-grid grid-template-columns :세로줄나누기 grid-template-rows :가로줄나누기 grid grid-column-gap(column-gap) :세로 간격 설정 grid-row-gap(row-gap) :가로 간격 설정 grid-gap :세로 가로 간격 축약 justify-items :가로정렬 align-items :세로정렬 justify-content :아이템 그룹 가로 정렬 align-content :..
미디어쿼리 반응형 적용 *max-width와 min-width -max-width: 최대값, 이하/큰 값부터 내려오게 적기 -min-width: 최소값, 이상/작은 값부터 올라가게 적기 @media screen and (max-width:1200px){ body{background-color: red;} }/* screen :기기/ 최대넓이가 1200px /1200이하까지적용/ and양 옆 꼭 띄어주기*/ @media screen and (max-width:980px) { body{background-color: green;} } @media screen and (max-width:600px) { body{background-color: green;} } @media screen and (min-width:600px){ }/*..
절대값과 상대값 절대값:고정된 값 -px 상대값: 고정되지 않고 유동적으로 바뀌는 값 : %, em, rem, vw, vh, vmin, vmax 1. px px(픽셀)단위는 화소 1개의 크기를 의미. 고정된 단위에 사용 2. % -백분율 단위의 상대단위 ex)14px *200%(2)=28px -해상도에 따른 %크기 구하기 >1920안에 1280이너로 있으면 해상도가 1280인거나 마찬가지로 봄 >만약네모width가 221px이면 221/1280= 0.17265625 0.17265625*100=17.265625 3. em -배수 단위의 상대 단위 -상위요소(상속이나 기본값)에 따라 1em이 지정 -M사이즈랑 같은 사이즈/ equal to M약자 -font-size가 30이면 30em -상위요소 폰트사이즈를 따라 1em됨 ..

티스토리툴바