IT공부 70

[J의 웹개발공부] CSS 선택자 결합 방법

CSS 선택자 결합 1. 후손 선택자(공백): 특정 요소의 모든 후손 요소를 선택합니다. div 안에 있는 모든 p 요소를 선택합니다  2. 자식 선택자(> 기호): 특정 요소의 직계 자식 요소만 선택합니다. div의 직계 자식 p 요소만 선택합니다.  3. 형제 선택자(~, + 기호):일반 형제 선택자(~): 특정 요소 이후의 모든 형제 요소를 선택합니다.  h1 이후의 모든 p 요소를 선택합니다.인접 형제 선택자(+): 특정 요소 바로 다음에 오는 형제 요소를 선택합니다.h1 바로 다음에 오는 p 요소를 선택합니다.h1 바로 다음에 오는 p 요소를 선택합니다. 4. 그룹 선택자(쉼표): 여러 요소를 한꺼번에 선택합니다.h1, h2, h3 요소를 모두 선택합니다.h1, h2, h3 요소를 모두 선택합니..

IT공부 2024.08.05

[직일구의 웹개발] CSS의 cascading 성격 - 특정성, 중요도, 순서

CSS의 적용 우선순위는 특정성, 중요성 및 출처에 따라 결정됩니다. 다음은 CSS 규칙의 적용 우선순위 순서입니다:1. 중요도(!important)!important 플래그를 사용한 스타일 규칙이 가장 높은 우선순위를 갖습니다. 이는 특정성과 출처에 관계없이 항상 우선 적용됩니다.2. 인라인 스타일HTML 요소에 직접 적용된 인라인 스타일은 매우 높은 우선순위를 가집니다.3. ID 선택자ID 선택자는 매우 높은 특정성을 가지며, 클래스나 요소 선택자보다 우선 적용됩니다.4. 클래스, 속성 및 가상 클래스 선택자클래스, 속성 및 가상 클래스 선택자는 요소 선택자보다 높은 특정성을 가집니다.5. 요소 및 가상 요소 선택자요소 및 가상 요소 선택자는 가장 낮은 특정성을 가지며, 동일한 요소에 대해 다른 선택..

IT공부 2024.07.29

구글 폰트로 폰트 무료로 사용하는 법

구글 폰트는 무료로 사용할 수 있는 다양한 웹 폰트를 제공하는 서비스입니다. 다음은 구글 폰트를 무료로 사용하는 방법에 대한 단계별 가이드입니다:1. 구글 폰트 웹사이트 방문먼저 구글 폰트 웹사이트에 접속합니다.2. 폰트 선택원하는 폰트를 선택합니다. 웹사이트 상단의 검색 바를 이용하여 특정 폰트를 검색하거나, 카테고리, 언어, 속성 등을 기준으로 폰트를 필터링할 수 있습니다.3. 폰트 스타일 선택폰트를 클릭하면 해당 폰트의 다양한 스타일(Regular, Bold, Italic 등)을 볼 수 있습니다. 원하는 스타일을 선택합니다. 선택한 스타일은 페이지 우측 하단에 'Selected family'에 추가됩니다.4. 임베드 코드 복사'Selected family' 섹션에서 'Embed' 버튼을 클릭합니다...

IT공부 2024.07.23

html 폰트 사이즈 (font size) - 1px, 1pt, 1em, 1rem 차이와 중요성

폰트 사이즈를 지정할 때 다양한 단위를 사용할 수 있습니다. 각 단위는 다른 특성과 용도를 가지며, 상황에 따라 적합한 단위를 선택하는 것이 중요합니다.  1px, 1pt, 1em, 1rem의 차이와 각각의 중요성은 다음과 같습니다. 1px (픽셀)정의: 화면에서 가장 작은 단위로, 하나의 픽셀을 의미합니다.특징: 절대 단위이며, 고정된 크기입니다.사용 용도: 픽셀 단위는 특정 크기를 정확하게 지정해야 할 때 유용합니다. 그러나 다양한 화면 해상도와 디바이스 크기에서는 상대적인 크기 조절이 어려울 수 있습니다.1pt (포인트)정의: 인쇄물에서 주로 사용되는 단위로, 1pt는 1/72 인치입니다.특징: 물리적인 인치 단위를 기준으로 하므로, 주로 인쇄 작업에서 사용됩니다.사용 용도: 웹 디자인보다는 인쇄 ..

IT공부 2024.07.23

아이폰에서 앱스토어가 보이지 않을 때 해결할 수 있는 몇 가지 방법

아이폰에서 앱스토어가 보이지 않을 때 해결할 수 있는 몇 가지 방법을 소개합니다. 다음 단계를 차례로 시도해 보세요.1. 검색을 통해 앱스토어 찾기먼저, 앱스토어가 단순히 홈 화면에서 숨겨져 있는지 확인합니다.홈 화면에서 아래로 스와이프하여 검색 창을 엽니다."App Store"를 검색하여 아이콘이 나타나는지 확인합니다.2. 스크린 타임 설정 확인앱스토어가 스크린 타임 설정에 의해 제한되었을 수 있습니다.설정 앱을 엽니다.스크린 타임 > 콘텐츠 및 개인 정보 보호 제한으로 이동합니다.iTunes 및 App Store 구입 항목을 선택합니다.앱 설치가 허용으로 설정되어 있는지 확인합니다. 허용으로 설정되어 있지 않으면 변경합니다.3. 홈 화면 레이아웃 재설정앱스토어 아이콘이 실수로 이동되었거나 숨겨졌을 수..

IT공부 2024.07.01

[직일구의 웹개발 공부] HTML의 기본 구조

HTML(하이퍼텍스트 마크업 언어, HyperText Markup Language)은 웹 페이지 및 웹 애플리케이션을 구성하는 데 사용되는 마크업 언어입니다. HTML은 웹의 기본 구성 요소 중 하나로, 웹 브라우저가 웹 페이지를 표시할 수 있도록 합니다. HTML 문서는 태그를 사용하여 구조를 정의합니다. 이 태그들은 텍스트를 제목, 단락, 목록, 링크, 이미지 등 다양한 요소로 구분하고 형식을 지정하는 데 사용됩니다.HTML의 기본 구조HTML 문서는 일반적으로 다음과 같은 기본 구조를 가집니다: 주요 태그 설명: 문서가 HTML5로 작성되었음을 선언합니다.: HTML 문서의 루트 요소로, 전체 내용을 감쌉니다.: 메타데이터를 포함하며, 문서 제목(title), 문자 인코딩(meta), 스타일(sty..

IT공부 2024.06.30

자바스크립트에서의 splice() 사용법

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.시도해보기구문JSCopy to Clipboard array.splice(start[, deleteCount[, item1[, item2[, ...]]]])매개변수start배열의 변경을 시작할 인덱스입니다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정됩니다. 음수인 경우 배열의 끝에서부터 요소를 세어나갑니다(원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 array.length - n번째 인덱스와 같음). 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정됩니다.deleteCount Optional배열에서 제거할 요소의 수입니다. deleteCount를 생..

IT공부 2024.06.09

[직일구의 IT공부] vscode 에서 prettier 설치 및 설정방법

prettier 는 자동들여쓰기 등을 해주는 정말 편리한 툴입니다. vscode  로 코딩 작성 시에 정말 필수템이라고 생각합니다.  그런데 정작 prettier 가 적용안될 때가 있습니다.  설치방법과 설정법까지 한번에 쉽게 알아보겠습니다.  1. vscode 실행 후, 좌측 메뉴바의 맨 아래 확장메뉴를 클릭 2. 확장화면 검색창에 prettier를 입력하여 검색3. 설치 버튼 클릭  4. 설치가 완료되면, 좌측 맨 하단의 관리버튼 클릭 > 설정 클릭 5. 설정에서 나오는 검색창에 formatter 입력 후, 나오는 검색결과들 중, Default Formatter 에서 '없음' 을 'Prettier - Code formatter' 로 선택 변경 6. 상단의 검색창에 이번엔 format 으로 검색 후, ..

IT공부 2024.06.09

간단한 리눅스쉘 명령어 익히기

AWS에서 사용하는 EC2 서버의 운영체제는 리눅스이다.  리눅스는 유닉스라는 운영체제에서 파생되어 나온 운영체제로, 명령어가 유닉스와 거의 대동소이하다.  그러면 여기서 유닉스 쉘 (Unix Sehll) 이라는 용어를 접하게 될텐데, 유닉스 쉘은 유닉스 운영체제와 유닉스 계통 시스템을 위한 사용자 인터페이스를 제공하는 기능이다.  유닉스는 문자열 입력으로 쉘을 실행하여 컴퓨터를 컨트롤 할 수 있다.  유닉스의 기본 명령어를 다음과 같다.  1. ls (list)디렉토리의 파일과 디렉토리를 나열한다.기본적으로는 현재 위치에 있는 파일과 디렉토리를 보여주나, 숨김 폴더나, 숨김파일은 보여주지 않는다. 따라서, 이를 위해서는 명령어 뒤에 옵션을 주어야 한다.  예: -l : 자세한 정보를 포함하여 목록을 보..

IT공부 2024.06.08