HTML, CSS, JS 6

CSS : 그레디언트 속성

linear-gradient() 함수 색상이 한 방향에서 다른 방향으로 변화하는 선형 그레디언트 적용 linear-gradient(각도, 색상 위치, 색상 위치) linear-gradient(45deg, #f85032 0%, #e73827 100%) Box 1 Box 2 radial-gradient() 함수 linear-gradient() 함수에서 각도부분만 제거하고 나머지는 같다 Circle 에쁜 그레디언트 적용 참고사이트 https://webgradients.com/ Free Gradients Collection by itmeo.com Free collection of 180 background gradients that you can use as content backdrops in any part..

HTML, CSS, JS 2022.08.30

구글 웹폰트 적용 하기

구글 웹폰트 사이트 접속 언어를 "Korean"으로 설정해주고 원하는 폰트를 찾는다. Styles 탭에서 내가 원하는 폰트를 추가시켜 주고, 오른쪽 상단에 "View Selected Families"를 선택 html 태그안에서 사용을 원하면 를 선택하고 아래에 코드를 복사해서 html 파일의 Lorem, ipsum dolor. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 화면구현

HTML, CSS, JS 2022.08.30

CSS3 속성

크기단위 % : 백분율 단위 em: 배수단위 px : 픽셀 색상단위 #000000 : HEX코드단위 rgb(red, green, blue) RGB 색상단위 rgba(red, green, blue, alpha) RGBA 색상단위 hsl(hue, situration, lightness) HSL 색상단위 hsla(hue, situration, lightness, alpha) HSLA 색상단위 URL단위 파일을 지정할때는 URL단위를 사용 background-image: url("desrt.jpg") width속성과 height속성 박스의 가로 세로 크기의 지정 margin속성과 padding 속성 박스 바깥쪽 및 안쪽 여백 지정 box-sizing 속성 box1 box2 box3 display 속성 displ..

HTML, CSS, JS 2022.08.30

공간분할태그 및 CSS 선택자

태그 레이아웃을 생성할때 사용되는 태그로 div는 블록 형식으로 분할 태그 인라인 형식으로 레이아웃을 생성할 때 사용 공간1 공간2 공간3 공간4 공간6 공간1 공간2 공간3 공간4 공간5 출력화면 시멘틱태그(Semantic Tag) 레이아웃을 생성할 때 사용하는 의미론적 태그로 시멘틱 웹 태그 공간분할방법 공간1 공간2 공간3 공간4 공간6 상태선택자 입력양식의 상태를 선택할 때 사용하는 선택자 :checked - 체크상태의 input 태그 :focus - 초점이 맞추어진 input 태그를 선택 :enabled - 사용 가능한 input :disabled - 사용 불가능한 input 구조선택자 CSS3부터 지원하는 선택자 :first-child - 형제관계중에서 첫번째 위치하는 태그 선택 :last-c..

HTML, CSS, JS 2022.08.29

자바스크립트 기초 문법 - 연산자

1. 연산자(Operator)의 정의 변수나 값의 연산을 위해 사용되는 부호 연산의 대상이 되는 것을 피연산자라 함 2. 연산자(Operator)의 유형 항이란 해당 연산을 실행하기 위해 필요한 값이나 변수를 의미 단항연산자 : 피연산자가 1개 a++, a-, ++a, --b, -a 이항연산자: 피연산자가 2개 a+b, a=b, a==b, a>3 삼항연산자: 피연산자가 3개 condition ? valA : valB 2.1 산술연산자(arithmetic operator) 사칙연산을 다루는 가장 기본적이면서 많이 사용하는 연산자 모두 두 개의 피연산자를 가지는 이항 연산자이며, 왼쪽에서 오른쪽으로 결합 // 산술연산자 let x = 11, y = 3; // 변수 선언 및 값 대입 document.write..

HTML, CSS, JS 2022.08.25

자바스크립트 기초 문법 - 변수

변수와 상수의 선언 var, let, const의 호이스팅(Hoisting) var로 선언한 변수는 호이스팅(Hoisting)이 가능 let로 선언한 변수 및 const로 선언한 상수는 호이스팅(Hoisting)이 불가능 ⁕ 호이스팅 코드를 실행하기 전 변수 및 함수선언이 스코프 최상단으로 끌어올려지는 현상 일반적인 언어에서는 함수, 변수를 선언한 후 해당함수와 변수를 실행할 수 있음 자바스크립트에서는 함수 또는 변수 선언 전, 해당 함수 또는 변수를 실행해도 에러가 발생하지 않음 자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하는 과정을 거치면서 선언된 변수를 스코프에 등록하기 때문 x = 5; // 변수대입 var x; // 변수선언 console.log(x) // 정상적으로 출력 ..

HTML, CSS, JS 2022.08.25