분류 전체보기
-
JS 맛보기 (주석, 데이터 종류)JavaScript/JavaScript 2021. 5. 2. 00:30
주석 알아보기 // 한 줄 메모 /* 한 줄 메모 */ /* 여러 줄 내용1 내용2 */ 데이터 종류(자료형) // String(문자 데이터) // '', "", `` 를 사용 let myName = "ITBLUE"; let email = 'itblue@naver.com'; let jsWorld = `Hello ${myName}!`; console.log(myName); // 출력 결과: ITBLUE console.log(email); // 출력 결과: itblue@naver.com console.log(jsWorld); // 출력 결과: Hello ITBLUE! String(문자 데이터)형 // Number(숫자 데이터) // 정수 및 부동소수점 숫자를 나타냄 let number1 = 456; let ..
-
표기법기본 지식 2021. 5. 2. 00:25
dash-case(kebab-case) HTML/CSS - 각 공백을 dash(-)로 대체하여 1개의 단어로 인식 the-quick-blue-apple-cat snake_case HTML/CSS - 각 공백을 밑줄(_)로 대체하여 1개의 단어로 인식 the_quick_blue_apple_cat camelCase JS - 첫 번째 단어 다음의 모든 단어를 대문자로 작성하고 공백을 제거하여 1개의 단어로 인식 theQuickBlueAppleCat PascalCase JS - 모든 단어를 대문자로 작성하고 공백을 제거하여 1개의 단어로 인식 TheQuickBlueAppleCat Zero-based Numbering 0 기반 번호 매기기, 특수한 경우를 제외하고 0부터 시작
-
CSS 속성 알아보기 (변환)CSS/CSS 2021. 4. 29. 14:58
transform transform: 변환함수1 변환함수2 변환함수3 .....; transform: 원근법 이동 크기 회전 기울임; 요소의 변환 효과를 지정하는 속성 2D 변환 함수 /* 단위 px */ translate(x, y) /* 이동(x축, y축) */ translateX(x) /* 이동(x축) */ translateY(y) /* 이동(y축) */ /* 단위 없음(배수) */ scale(x, y) /* 크기(x축, y축) */ scale(배수) /* 크기(x축, y축) */ /* 단위 deg */ rotate(degree) /* 회전(각도) */ skewX(x) /* 기울임(x축) */ skewY(y) /* 기울임(y축 */ 3D 변환 함수 /* 단위 deg */ rotateX(x) /* 회전..
-
CSS 속성 알아보기 (전환)CSS/CSS 2021. 4. 28. 17:18
transition transition: 속성명 지속시간 타이밍함수 대기시간; transition: width .5s; /* 속성명 지속시간 */ transition: width .5s, background-color 2s; /* 속성명 지속시간 2개 */ transition: 1s .5s; /* 지속시간 대기시간 */ 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성 속성명(transition-property) 지속시간(transition-duration) - 단축형으로 작성할 때 필수 포함 속성! 타이밍함수(transition-timing-function) 대기시간(transition-delay) transition-property 전환 효과를 사용할 속성 이름을 지정 기본값(all) - 모든 속성..
-
CSS 속성 알아보기 (정렬)CSS/CSS 2021. 4. 28. 10:00
Flex Container 와 Flex Items 개념 Flex Container - display: flex가 들어있는 요소 Flex Items - Flex Container의 자식 요소 Flex Container - 부모 요소에 작성 display: flex; display: flex; display: inline-flex; /* display: 값 - 요소의 화면 출력(보여짐) 특성을 지정하는 속성 */ Flex Container의 화면 출력 특성을 지정하는 속성 flex - 블록 요소와 같이 Flex Container 정의 inline-flex - 인라인 요소와 같이 Flex Container 정의 flex-direction flex-direction: 값; flex-direction: row; ..
-
CSS 속성 알아보기 (배치)CSS/CSS 2021. 4. 28. 01:07
position position: 값; position: static; position: relative; position: absolute; position: fixed; position: sticky; /* 스크롤 영역 기준 */ 요소의 위치 지정 기준을 지정하는 속성 기본값(static) - 기준 없음 relative - 요소 자신을 기준 absolute - 위치 상 부모 요소를 기준 fixed - 뷰포트(브라우저)를 기준 position 속성의 값으로 absolute, fixed 가 지정된 요소는, display 속성이 block으로 변경됨 top, bottom, left, right /* position과 같이 사용하는 CSS 속성, 음수도 사용 가능하다 */ top: 값; bottom: 값; ..
-
CSS 속성 알아보기 (배경)CSS/CSS 2021. 4. 26. 10:06
background-color background-color: 값; background-color: red; background-color: blue; 요소의 배경 색상을 지정하는 속성 기본값(transparent) - 투명함 색상 - 지정 가능한 색상 (red, blue 등) background-image background-image: url("경로"); background-image: url("./image/blue.png"); /* 기본적으로 바둑판식 반복 출력 */ /* background-repeat 속성의 값이 기본값이기 때문 */ 요소의 배경 이미지를 삽입하는 속성 기본값(none) - 이미지 없음 url("경로") - 이미지 경로 background-repeat background-rep..
-
CSS 속성 알아보기 (글자와 문자)CSS/CSS 2021. 4. 25. 23:52
font-style font-style: 값; font-style: italic; font-style: oblique; /* 기울어진 글자 */ 글자의 기울기를 지정하는 속성 기본값(normal) - 기울기 없음 italic - 이텔릭체 font-weight font-weight: 값; font-weight: normal; /* 기본 두께 normal값은 400을 의미 */ font-weight: bold; /* 두껍게 bold값은 700을 의미 */ font-weight: bolder; /* 상위(부모) 요소보다 더 두껍게 */ font-weight: lighter; /* 상위(부모) 요소보다 더 얇게 */ font-weight: 100~900; /* 100 단위의 숫자 9개를 값으로 지정 */ 글자의..