숨만쉬어도 귀여운타입:D

Template literals이란 ?? 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다 `string text` `string text line 1 string text line 2` // "string text line 1 // string text line 2" // 위처럼 표시하려면 아래와 같이 입력하면 됨! console.log("string text line 1\n"+"string text line 2"); console.log(`string text line 1 string text line 2`); //아래 템플릿레터럴 표기법을 이용하면 훨신 간단하게 표현할수있다 표현식을 쓸때 ! let a = 5, b = 10;..

문자 관련 스타일 정리 13가지 정도 스타일을 정리해볼까해요 ! font-familly 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 (' ')따옴표로 감싸고 여러 개의 글꼴을 (,)쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. ex) font-family: '돋움', Arial; font-size 문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. css에서 유용하게 사용하는 단위는 다음과 같은 것들이있습니다. px 해상도에 따라 상대적으로 달라지는 기본 단위입니다. ex) font-size: 12px; % 부모 요소의 글자 크기를 100% 기준으로 계산한 %단위입니다. ex) font-size: ..

grid 요소 ? grid layout은 요소들이 포함된 큰박스에 grid 를 선언 안에 있는 요소들에게 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는것! HTML 삽입 미리보기할 수 없는 소스 위와 같이 적용할수있다~ grid 요소 grid-template-areas: "header header" "nav nav" "aside section" "footer footer" ; //구성 grid-template-columns: 30% 70% ; //columns 사이즈 grid-template-rows: 50px 50px 78px 50px ; // rows 사이즈

flex 요소 ? flex layout은 요소들이 포함된 큰박스에 flex를 선언 안에 있는 요소들에게 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는것! HTML 삽입 미리보기할 수 없는 소스 참고사항 ! flex 유형은 부모의 자식에만 사용할 수 있고 부모의 자식의 자식에는 사용할 수 없습니다. display: flex; flex-wrap: wrap; // flex 타입으로 설정하며 유연하게 레이아웃설정

01. if 문 조건절의 값에 따라 true false를 구별하여 출력함 let i 값이 0 일때와 1일때의 차이를 알아보자 { if("조건절"){ document.write("실행됨 true") }else{ document.write("실행됨 false") } } 100 == 100 실행됨 true 100 != 100 실행됨 false 02. if문 생략 if문을 줄여 보자 ! { // if("조건"){ // document.write("실행됨 true") // }else{ // document.write("실행됨 false") // } if(true) document.write("실행됨(true)"); else document.write("실행됨(false)"); } 100 == 100 실행됨 tru..

오늘은 수업교재 모던 자바스크립트 마무리 문제 1,2를 풀어보려고 해요 ! 양수, 음수 판단하여 창에 보여주기 숫자를 받아서 양수, 음수, 0을 판단하고 알림 창에 표시하는 함수를 선언합니다. parseInt( ) 함수를 사용해 프롬프트 창에 입력한 내용을 숫자로 변환합니다. 프롬프트 창에 입력한 내용이 숫자가 아니면 parseInt( ) 함수는 NaN을 변환합니다. 반환값이 숫자일경우에만 함수 실행! function chkNum(){ let inputNum = parseInt(prompt("숫자를입력해주세요")); if(inputNum == 0){ document.write("0입니다"); }else{ (inputNum>0) ? document.write("양수") : document.write("음수..

javascript 함수를 선언하는 방법을 알아보아요 ! 선언적 함수 ! function func(){ document.write("실행했어요"); } funcArrow =() => { document.write("실행했어요 ") } //선언적 함수 를 화살표 표기법으로 표현 ! 익명 함수 ! const func = function(){ document.write("익명함수"); } func(); //일반함수 호출로 익명함수 호출! const funcArrow1 =()=>{ document.write("익명함수"); } const funcArrow2 =() =>document.write("익명 줄이기"); funcArrow1(); funcArrow2(); //에로우 표기법으로 익명함수 출력! 매개변수 함..

CSS의 선택자(Selector)를 알아봐요 안에 기입해야해 ! 1. 전체 선택자 (Universal Selector) 문서 내의 모든 요소를 선택합니다. 사용 방법: * { } 2. 요소 선택자 (Type Selector) 특정 요소의 태그 이름을 사용해 선택합니다. 사용 방법: h1 { color : blue } 3. 클래스 선택자 (Class Selector) 특정 클래스 속성을 가진 요소를 선택합니다. 사용 방법: .container {color : red} 4.. 아이디 선택자 (ID Selector) 특정 아이디 속성을 가진 요소를 선택합니다. id요소는 중복불가 & 유일해 ! 사용 방법: #id {color : red} 5. 속성 선택자 (Attribute Selector) 특정 속성을 가진..

데이터 저장하기 = 데이터 선언하기 ! 변수 let 키워드를 사용하여 변수를 선언할 경우, 해당 변수는 블록 스코프를 가집니다. 블록 내에서 선언된 변수는 블록 내에서만 사용할 수 있습니다. 상수 const 키워드를 사용하여 변수를 선언할 경우, 해당 변수는 상수를 의미합니다. 상수는 초기화 이후 값이 변경될 수 없습니다. 배열 배열은 여러 데이터를 하나의 변수에 저장하기 위한 데이터 구조입니다. 안의 값을 수정 삭제 할수 있다 배열안에 배열도 obj객체도 넣을수 있다 더보기 push() 메소드를 사용하여 배열의 끝에 새로운 요소를 추가할 수 있습니다. arr.push(4); pop() 메소드를 사용하여 배열의 마지막 요소를 제거할 수도 있습니다. arr.pop(); 또한, splice() 메소드를 사용..

float요소 ? float 라는 단어는 원래 ‘뜨다’ 라는 의미이며 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것입니다. block 요소는 세로로 나열되지만 float요소를 이용하여 가로로 배치 가능 ! 하단 두 코드는 적용 &미적용 한것입니다 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 float요소들 left : 요소를 왼쪽 방향으로 부유하게 설정 right : 요소를 오른쪽 방향으로 부유하게 설정 none : 기본값(default), 요소를 띄우지 않는다. float를 쓰면 생기는 문제점 ! 플로팅한..

오늘은 수업교재 모던 자바스크립트 마무리 문제 1,2를 풀어보려고 해요 ! 10보다 큰수 찾기 배열이 주어지고 이 배열에서 10보다 큰 값을 찾아서 화면에 표시해 주는 문제입니다. 배열 요소의 개수만큼 for 문을 반복 if 문을 사용해서 요소의 값과 10을 비교 documen.write 문을 사용해 화면에 표시 // for(let i=0; i 10) 배열의 값이 10보다 큰경우에 실행되도록 조건 설정 사용자에게 입력받은 숫자를 짝수만 더하는 프로그램 사용자에게 숫자를 입력 받구 짝수만 더하는 프로그램만들기 입력한값이 not null 아니고 1보다 클 경우에만 실행 입력한 숫자까지 반복시 현재 숫자가 홀수인지, ..

여러가지 조건문을 알아보자 ! 자바스크립트에서 조건문은 조건에 따라 실행할 코드를 다르게 처리할 수 있도록 해줍니다. if문: 조건이 참일 때 실행되는 코드 블록을 지정합니다. else문: if문의 조건이 거짓일 때 실행되는 코드 블록을 지정합니다. else if문: 여러 개의 조건 중에서 첫 번째 참인 조건에 대해 실행되는 코드 블록을 지정합니다. switch문: 여러 개의 조건 중에서 하나에 해당하는 경우 실행되는 코드 블록을 지정합니다. 아래는 if문의 예시입니다. if (조건) { // 조건이 참일 때 실행되는 코드 } else { // 조건이 거짓일 때 실행되는 코드 } 추가로, 삼항 연산자도 자바스크립트에서 자주 활용됩니다. 삼항 연산자는 if-else 문을 간단하게 표현하는 방법입니다. 아래..

HTML 삽입 미리보기할 수 없는 소스 for 문 for는 동기방식이기 때문에 for문 안에 오류가 나면 에러 위치 이후의 이벤트들은 동작하지 않고 멈춰버린다. 정순 역순 접근 가능 ! forEach문 비동기 방식으로 진행되기 때문에 foreach문안에 에러가 있더라도 동작ㅁ callback 함수에서 인덱스와 값에 접근할 수 있음! foreach문안에서 값 수정을 불가함 역순으로 접근 불가 for in 문 for in 구문은 객체의 key 값에 접근할 수 있지만, value 값에 접근못함! (배열의 경우 index값 반환) 모든 객체에서 객체의 값을 반복하여 수행가능 value 값을 구하려면 간접적으론 접근가능 ( 예제 참조 ) for of 문 for of 구문을 사용하기 위해선 컬렉션 객체가 [Symb..

Semantic 태그..? 태그? 섹션과 관련된 태그(Section Related Tag)를 찾다보니 시멘틱태그인 경우가 많더라구요 일전에 포스팅한 시멘틱마크업에서는 시멘틱의 이라는 사전적인 정의를 내렸고 이번 포스팅에서는 그래서 시멘틱 태그를 정리 해보았습니다. 더보기 시멘틱태그을 해야 하는 이유? 1. SEO(Search Engine Optimize) - 검색엔진 최적화에 유리 2. 웹접근성 - 시각장애인들도 웹을 편리하게 접할 수있도록 도와줌 3. 유지보수 - 정리된 마크업은 코드 식별이 용이함 ~ 제목을 나타내며 숫자가 작을수록 크기가 커 주로 태그 안에 사용을해 ! 소개 및 탐색에 도움을 주는 콘텐츠를 나타넹 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있고 주로 상단에 위치해 ..

연산자란 ?? 프로그램에 필요한 수식을 만들때 필요한 것이 연산자 ! 연산자에는 산술 , 대입(할당 , 비교 , 논리 , 비트 , 삼항 연산자 등이 있음 ! 산술 연산자 기능 a + b , "AA"+"BB" 2개의 피연산자 값을 더함 & 문자열 끼리도 사용가능 a-b a에서 b를 빼기 a*b a, b를 곱함 a/b a를 b로 나눔 a%b a를 b로 나눈 나머지 값을 구함 a++ a값에 1을 증가시킴 a-- a값에 1을 감소시킴 할당 연산자 기능 a = a + 10 a + 10 a+= x a = a+x a-=x a = a - x a*=x a = a* x a/=x a = a/x a%=x a = a%x 비교 연산자 기능 결과 3 == "3" 연산자 값이 같니? true 3 === "3" 피연산자 값과 데이터 ..

id선택자 HTML요소로 id에 이름을 붙일때 유일한ID을 부여 해야 하며 중복 불가 XD css에서는 id 선택자 앞에 ' # ' 을 붙여야 함 ! class선택자 HTML요소로 공통점을 가진 요소들에게 class요소에 부여 할수 있다 XD 또한 하나의 요소에 여러개의 class 명을 부여 할수 있음! css에서는 class 선택자 앞에 ' . ' 을 붙여야 함 ! Etc 특이사항 id 명이나 class 명은 숫자로 시작할수 없음 ! 서로다른 효과를 줄때의 우선순위는 id > class > tag(요소명) 순으로 적용됨 ! 대소문자 구별하여야 한다 ! id와 class명은 같아도 가능 ! 선택자? 스타일 적용 영역을 선택하는 지시자 ! 선택자를 통해 스타일을 주더라도 인라인 스타일(inline styl..

HTML 삽입 미리보기할 수 없는 소스 spring 봄이 오고 있어요~ 뿌

내부 스타일 시트 css를 html 문서 안에 태그로 기재하여 html 문서안에 css가 함께 저장되도록 하는 형태 외부 스타일 시트 css를 html 문서안에 태그를 이용하여 선언 내부 스타일 스타일 & 외부 스타일 시트 유지 보수가 쉬움 ! Etc - @import url ("common.css")를 통해서 사용할수있음 인라인 스타일 시트 태그에 직접 css를 정의 해주는 기법 해당요소에 style ="" 형식으로 기술 우선순위가 절대적으로 높아야 할 경우 사용 유지보수에 어려움 ! EX) 아래와 같이 쓸수 있어요 :D HTML 삽입 미리보기할 수 없는 소스

자료형은 프로그램에서 처리할 자료의 형태를 칭함 위와 같이 원시유형(primitive type)과 객체(object)로 나뉨 원시 유형은 하나의 값만 저장 하는 자료 형으로 원시유형 외에는 모두 객체임 숫자형 모든 프로그렘에서 가장 기본인 자료형 :) javascript에서는 정수와 실수를 묶은 '숫자형'이라고 한뎅 문자형 문자열 또는 string 자료형은 작은따옴표 ' 나 큰따옴표 " 로 묶은 데이터 :) 논리형 참(true) or 거짓(false) 값을 표현하는 유형 블린(boolean)유형 이라고 함 심벌(sysbol) 심벌은 객체 프로퍼티의 키(key)로 사용할수 있는 특징 undefined 값이 할당되지 않았을때 변수의초기값이며 자료형 null 변수의 초기값이며 자료형 하지만 but 값이 없거나..

텍스트관련요소 텍스트관련요소를 알아보기

시멘틱마크업(Semantic markup) 시멘틱(semantic)의 사전적인 뜻 '의미론적인'으로 해석이 가능하며 의미에 맞는는 태그를 사용하라는뜻! ex) 헤드/푸터에 와 사용 메인 컨텐츠에 과 사용 독립적인 컨텐츠에 사용 최상위 제목으로 사용 순서가 없는 목록으로 과 사용 내비게이션에 사용 etc.. 이런식으로 태그가 가진 의미에 맞는 태그를 사용하여야해 시멘틱 마크업을 해야 하는 이유? 1. SEO(Search Engine Optimize) - 검색엔진 최적화에 유리 2. 웹접근성 - 시각장애인들도 웹을 편리하게 접할 수있도록 도와줌 3. 유지보수 - 정리된 마크업은 코드 식별이 용이함 ex 1) 1 왼쪽 처럼 작업한다면 작업할곳을 찾기 힘들지만 우측 처럼 작업한다면 자신이 작업해야할곳을 쉽게 찾..

블록 레벨요소 (Block-level Elements) 블록 요소는 하나의 박스라고 생각해 박스안에 데이터를 넣는거지 ! 그러니깐 내용물을 넣어야해 더보기 - 연락처 정보 HTML5 - (의미있는) 단락 컨텐츠 HTML5 - 부가 컨텐츠. HTML5 - 오디오 플레이어 - 긴 ("블럭") 인용구. HTML5 - 캔버스 - 정의를 설명. - 문서의 분할 - 정의된 목록 - 필드 정의 레이블 HTML5 - 그림 캡션 HTML5 - 캡션이 포함된 그룹 미디어 컨텐츠 (참고 ). HTML5 - 페이지나 섹션의 푸터 - 입력 폼 , , , , , - 제목 크기 (1~6) HTML5 - 페이지나 섹션의 헤더 HTML5 - 그룹 헤더 정보 - 수평선 (구분선). - 스크립트를 지원하지 않는 컨텐츠의 사용 - 정렬된 ..