FRONT-END110

• 

  [HTML] Block태그와 Inline 태그 종류와 차이점 Block태그와 Inline 태그 종류와 차이점 모든 HTML 요소에는 요소 유형에 따라 기본 표시 값이 있습니다. 표시 값에는 블록과 인라인의 두 가지가 있습니다. Block 태그 항상 새 줄에서 시작하고 브라우저는 자동으로 요소 앞뒤에 약간의 공백(여백)을 추가합니다. 항상 사용 가능한 전체 너비를 차지합니다. 부모 태그의 너비를 가져옵니다. 높이는 자신의 태그의 자식태그의 높이를 가져옵니다. 일반적으로 사용되는 Block 태그는 와 입니다. Block 태그 종류 - Inline 태그 Inline 태그는 필요한 만큼만 너비를 차지합니다. 대표적으로 태그가 많이 쓰입니다. Iinline 태그 종류 읽어주셔서 감사합니다🤟 참고 문헌 REFERENCE HTML Block and Inline Elements.. FRONT-END/HTML 3년 전

• 

  [CSS] 적용 우선 순위 CSS 적용 우선순위 CSS에는 태그에 속성이 중복되어 설정될 수 있습니다. 이럴 때 어떤 속성이 우선되어 적용되는지 우선순위를 보면 다음과 같습니다. 우선순위는 아래와 같습니다. !important inline style (HTML내부에 사용된 style 속성) #id .class tag 상위 객체에 의해 상속된 속성 같은 우선순위에 있는 경우에는 부모 클래스가 우선 적용되며, 모든 설정이 같은 경우 CSS 스타일 시트에서 나중에 선언한 것이 우선되어 적용됩니다. !important 만약 우선순위를 무시하고 적용해야 하는 속성이 존재한다면, 속성 값 뒤에 !important 를 붙여서 적용시켜 줄 수 있습니다. .normal { color: blue } .compulsion{ color: black !.. FRONT-END/CSS 3년 전

• 

  [HTML] 폰트 미리 로드하여 레이아웃 개선하기 웹 폰트를 페이지가 로딩되었을때 먼저 로드 될 수 있도록 하는 방법에 대해 알아보겠습니다. 글꼴 미리 로드 웹사이트에서 웹 폰트 로딩 여부에 관계없이 텍스트가 항상 보이게 되는데 글꼴, 자간, 높이 등의 서식에 따라 웹 폰트 적용 전과 후의 레이아웃이 변경되게 됩니다. 즉 폰트를 넣었지만, 로딩 시에는 그 폰트가 먼저 로딩이 되지 않기 때문에 레이아웃이 변경되어 UI에 부정적인 경험을 주게 되는 것이죠. FOUT을 방지하기 위해 필요한 글꼴을 미리 로드할 수 있습니다. Html as="font" type="font/woff2" 속성은 브라우저에 이 리소스를 글꼴로 다운로드하도록 지시하고 리소스 대기열의 우선순위를 지정하는 데 도움이 됩니다. crossorigin 속성은 글꼴이 다른 도메인(웹 폰트)에서 .. FRONT-END/HTML 3년 전

• 

  (JS) 이미지의 src를 변경하는 방법 자바스크립트로 src 주소 변경 HTML에서 Img 태그에 src로 지정된 이미지 주소를 자바스크립트를 사용하여 바꾸는 방법에 대해 알아보도록 하겠습니다. Html html의 img 태그 src 주소는 example.svg 입니다. 이제 자바스크립트로 다른 주소를 할당해주도록 하겠습니다. Javascript $img = document.querySelector(".img-container > img"); $img.src = `./imgaes/another.svg`; JQuery JQuery를 사용해 위에 코드를 한 줄로 작성할 수 있습니다. $(".img-container > img").attr({ src: "./images/blog-logo.svg" }); 클래스를 추가하려면 아래와 같이 코드를 작성해.. FRONT-END/JAVASCRIPT 3년 전

• 

  [JQuery] 원하는 위치에 요소 삽입 - insertBefore(), insertAfter(), prependTo(), appendTo() JQuery 요소 이동 원하는 위치에 어떠한 태그를 삽입해야 하는경우가 종종 있는데 오늘은 JQuery를 사용하여 위치 이동을 시켜보도록 하겠습니다. 이동시킬 요소 위 코드에서 onerror는 src의 이미지가 오류가 났을 때, 대체해주는 태그입니다. 삽입될 요소 이동시킬 요소를 만들었으니, 이제 이동이 이뤄질 위치 태그를 만들어 줍니다. 자바스크립트 div나 특정한 요소 안에 id를 만들고 자바스크립트를 이용해 이 div안에 방금 만든 img 태그를 넣어주기만 하면 됩니다. $(".target").insertBefore("source"); 그럼 아래와 같이 사용하면 되겠네요! $(".img").insertBefore("#comment-blog-img"); 여기서 .insertBefore은 요소의 삽입 .. FRONT-END/JAVASCRIPT 3년 전

• 

  GitHub - git commit log 잔디밭 날짜 변경 하는 방법 자세하게 설명! GitHub 커밋 날짜 수정 GitHub에 Commit해야할 날짜를 지나쳐 잔디를 채우지 못했을때, 날짜를 조작하여 빈 잔디를 심을수 있는 방법에 대해 초보자도 쉽게 할 수 있을 만큼 자세하게 알아보도록 하겠습니다. 새로운 Repository 더보기 Solution Repository 생성 GitHub의 우측 상단에 + 버튼을 클릭하고 new repository를 눌러 새로운 Repository를 생성해 줍니다. Repository를 생성할 때 사용자가 원하는 Repository name을 입력 후, Add a README file을 체크해 주고 Create repository버튼을 클릭해 생성해줍니다. 생성된 Repository의 Code 부분을 클릭해 주소를 복사해줍니다. 터미널 실행 이제 Comma.. FRONT-END/VS & GITHUB 3년 전

• 

  (JS) 카운트 후, 특정 요소 나타나는 스크립트 Button을 누르면 카운터가 진행 된 후, 숨겨놓은 요소가 나타나게 해주는 방법에 대해 알아보도록 하겠습니다. 카운트 후, 특정 요소 나타나는 스크립트 html container요소는 display: none으로 처리 하고, click-link를 누르면 li-title의 text가 지정한 문구로 바뀌며 카운트 다운 후, container 요소가 나타나게 됩니다. 버튼을 클릭하면 링크가 나타납니다. 버튼 보여질 div 요소 JS 이제 javascript로 해당 이벤트를 구현하면 됩니다. button에 onclick 이벤트 대신에 자바스크립트 안에 직접 넣어주고 id만 사용하여 구현될 수 있도록 해줬습니다. 그리고 countDownDate 변수 10초 후 container의 display가 flex로 바뀌.. FRONT-END/JAVASCRIPT 3년 전

• 

  [JS] Lottie Animation 사용 방법 Lottie Animation을 Json 형태로 가져와 벡터 이미지를 Web에 뿌려줄 수 있습니다. 오늘은 Lottie Animation 사용하는 방법에 대해 알아 보도록 하겠습니다. Lottie Animation LottieA Animation은 에어비앤비에서 개발한 라이브러리입니다. After Effects로 추출한 애니메이션 데이터(json)를 Bodymovin(오픈소스)를 이용하여 html, webflow, android, iOS 환경에서 이용할 수 있습니다. Lottie Animation은 벡터 기반의 애니메이션인데 즉, SVG로 저장됩니다. TIP 벡터 이미지란? 벡터 이미지는 png, jpg등과 다르게 용량이 적고 해상도 저하가 일어나지 않는다는 장점이 있습니다. Lottie 사용 방법 lo.. FRONT-END/JAVASCRIPT 3년 전

• 

  (JAVASCRIPT) 타입 Typeof Javascript의 타입에 대해 알아보고 typeof를 통해 어떤식으로 타입이 결정되는지 알아보도록 하겠습니다. Type 자바스크립트는 동적으로 실행할 때 할당된 값에 따라 타입이 변경되는 동적(Dynamically Typed)인 타입입니다. 또, 변수에 어떤 값이 들어가냐에 따라 변하는 약한 타입(Weakly Typed)입니다. JAVASCRIPT - 동적인 타입(Dynamically Typed) - 약한 타입(Weakly Typed) typeof typeof를 통해 타입을 확인할 수 도 있습니다. let someVariable console.log(typeof someVariable); //undefined someVariable = ""; console.log(typeof someVariable).. FRONT-END/JAVASCRIPT 3년 전

• 

  (JAVASCRIPT) 상수와 변수 Const - SNAKE_CASE 재할당이 불가능한 상수와 변수 const에 대해 알아보도록 하겠습니다. 상수와 변수 const const는 선언은 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다. 재할당이 가능한 let과 재할당이 불가능한 const의 차이를 아래에서 확인할 수 있습니다. // let 재할당 가능한 let name = "서근"; console.log(name); name = "미진"; console.log(name); // const 재할당이 불가능한 // 1. 상수 // 2. 상수변수 혹은 변수 const seogun = "서근"; console.log('seogun:', seogun); seogun = "미진"; // console.log(seogun); //TypeErro.. FRONT-END/JAVASCRIPT 3년 전

• 

  (JAVASCRIPT) 원시 타입과 객체 타입 차이 정리 데이터 타입 객체는 Object라고 불립니다. 이번에는 데이터 타입인 단일 데이터와 복합 데이터의 차이에 대해 알아보도록 하겠습니다. 단일 데이터 원시 타입 단일한 값을 하나씩 담을 수 있는 단일 데이터인 원시(primitive) 타입. 단일 데이터는 원시 타입인 숫자 타입, 문자열 타입, 불리언 타입, null 타입, undefined 타입, symbol 타입이 있습니다. let Alphabet = ['A', 'B', 'C']; 단일 데이터인 원시 타입이 메모리에 어떻게 보관이 되냐 하면, 변수에 값을 할당하게 되면 메모리 셀에 값이 들어가게 되고, 변수는 값이 들어있는 메모리셀의 주소를 가리키게 됩니다. 복합 데이터 객체 타입 연관된 데이터를 함께 묶어서 보관할 수 있는 복합 데이터인 객체(objec.. FRONT-END/JAVASCRIPT 3년 전

• 

  (JAVASCRIPT) 단일 데이터 타입 - null과 undefined 타입 빈 데이터 타입 데이터 타입에는 빈 데이터 타입이 있는데 바로 null과 undefiend 타입 입니다. 오늘은 이 빈 데이터 타입에 대해 알아보도록 하겠습니다. null / undefined 비교 undefined: 값이 있는지 없는지 확정이 되지 않은 상태 value: 값이 있는 상태 null: 값이 확실히 없는 상태 예를 들어 다음과 같은 값이 들어 있지 않은 코드가 있을 때를 가정해서 콘솔 로그를 찍어보면 undefined가 출력되는 것을 확인할 수 있습니다. 값이 아직 있는지 없는지 모르기 때문이죠. let someIdCard console.log(someIdCard) //undefined 반대로 null을 넣어주면 값은 undefined를 출력하는 것이 아닌 null을 출력하게 됩니다. let.. FRONT-END/JAVASCRIPT 3년 전

• 

  (JAVASCRIPT) 단일 데이터 타입 - 불리언 타입 (Boolean) 데이터 타입 중에 하나인 불리언 타입에 대해 알아보도록 하겠습니다. 불리언 타입 불리언(Boolean)은 참/거짓을 의미하는 true와 false 두 개의 값을 가지고 있는 데이터 타입입니다. 숫자 0은 false로 변환되고 0 이외의 모든 숫자는 true로 변환 됩니다. 문자열은 False 이다! 불리언 값을 변수의 값으로 할당하여 사용할 때 큰따옴표 및 작은 따옴표 안에 값을 넣지 않도록 주의해야 합니다. let isTrue = true; let isFalse = false; console.log('isTrue is', isTrue); console.log('isFalse is', isFalse); /* isTrue is true isFalse is false */ Truthy & Falsy 불리언에.. FRONT-END/JAVASCRIPT 3년 전

• 

  (JAVASCRIPT) 단일 데이터 타입 - 문자열 타입 (String) 데이터 타입 중에 하나인 문자열 타입에 대해 알아보도록 하겠습니다. 문자열 타입 Javascript 에서 문자열을 사용하는 방법은 여러 가지가 있습니다. "" 큰따옴표 '' 작은따옴표 `` back-quote let string = '서근 개발 노트'; let string2 = "서근 개발 노트" string = `서근 개발 노트 입니다.` console.log(string); console.log(string2); /* 서근 개발 노트 입니다. 서근 개발 노트 */ 특수문자 출력 문자열 안에 작은 또는 큰따옴표를 사용하고 싶다면 밖에 오는 기호를 반전시켜주면 됩니다. let name = '"서근 입니다."' console.log(name) name = "'미진 입니다.'" console.log(name.. FRONT-END/JAVASCRIPT 3년 전

• 

  Visual Studio 깃 활용 - 커밋 하는 방법: 2022 Ver Visual Studio Visual Studio를 사용해서 Github에 쉽게 소스를 커밋할 수 있습니다. 오늘은 새 폴더를 만들고 깃 환경을 구성 후, 커밋하는 방법까지 알아보도록 하겠습니다. 깃 환경 구성 새 폴더를 작업 폴더로 추가했을 때, Visual Studio에서 바로 초기화하고 깃허브에 연결하는 방법은 다음과 같습니다. 1. 파일 탐색기 또는 Finder에서 소스를 저장할 새 폴더를 생성합니다. 2. Visual Studio 를 실행 후 맥북 기준 Command ⌘ + O 를 눌러 생성한 폴더를 선택해줍니다. 3.Visual Studio 의 왼쪽 사이드바에 생성한 폴더 (필자는 GITTEST 폴더)가 나와있는 것을 확인하고, 아래 화살표로 표시한 아이콘을 눌러 줍니다. 4. 아직 깃을 사용.. FRONT-END/VS & GITHUB 3년 전