선택자 : CSS에서 스타일을 적용할 대상을 선택할 때 사용한다 1. 전체 선택자 HTML 문서 내부의 모든 요소 선택 2. HTML 요소 선택자 3. 아이디(id) 선택자 특정 아이디 이름을 가지는 요소만을 선택 ※ 여러 요소에 중복된 아이디를 사용하면 HTML, CSS에는 문제가 없지만, 자바스크립트 작업에서 오류가 발생한다 → 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름을 사용하거나 클래스 사용 이 부분에 스타일을 적용합니다. 4. 클래스(class) 선택자 특정 집단의 여러 요소를 한 번에 선택할 때 사용 ... 이 부분에 스타일을 적용합니다. 이 부분에도 같은 스타일을 적용합니다. 5. 그룹선택자 여러 선택자를 같이 사용하고자 할 때 사용 결합 선택자 : 하나 이상의 선택자가 포함되었을..

디스플레이 ˙ 웹 페이지의 레이아웃을 결정하는 속성 ˙ 해당 HTML 요소가 웹 부라우저에 언제, 어떻게 보이는가를 결정 ˙ 대부분의 HTML 요소는 블록(block) / 인라인(inline) 두 가지 값 중 하나의 값을 가진다 블록 (block) : 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지 인라인 (inline) : 새로운 라인에서 시작하지 않고, 요소는 해당 HTML 요소의 content 만큼만 너비를 차지 인라인-블록 (inline-block) : 요소 자체는 인라인처럼 동작, 해당 요소 내부에서는 블록처럼 동작 visibility - 해당 요소가 웹 페이지에 표현될지 아닐지 - visible / hidden / collapse HTML 요소 숨기는 방법 1. di..

크기 단위 다양한 크기 단위가 존재하지만 가장 많이 쓰이는 크기 단위는 다음과 같다 1. 백분율 단위(%) 2. 배수 단위(em) 3. 픽셀 단위(px) 크기 크기 조절을 위해 사용할 수 있는 속성 1. height / width 2. max-width / min-width : 해당 HTML요소가 가질 수 있는 최대 / 최소 너비 3. max-height / min-height 박스 모델 (Box model) 모든 HTML 요소는 박스 모양으로 구성 박스 모델은 HTML 요소를 다음과 같이 구분한다 1. 패딩(padding) : 내용과 테두리 사이 간격 - padding, padding-top, padding-right, padding-bottom, padding-left 2. 테두리(border) : ..

CSS에서 색을 표현하는 방법 1. 색상 이름으로 표현 2. RGB 색상값으로 표현 3. 16진수 색상값으로 표현 CSS 배경 속성 1. background-color 2. background-image 3. background-repeat : 배경 이미지의 반복에 대한 설정 4. background-position : 배경 이미지의 상대 위치 5. background-attachment : 스크롤과 무관하게 배경 이미지를 화면의 위치에서 고정시킬 수 있다. CSS text 속성 속성 설명 color 텍스트 색상 direction 텍스트가 쓰이는 방향 letter-spacing 문자 간격 word-spacing 단어 간격 text-indent 단락 첫줄 들여쓰기 설정 text-align 텍스트 수평방향 ..

CSS Cascading Style Sheets HTML 요소들이 어떻게 보이는가를 정의하는데 사용되는 스타일 시트 언어 오늘날 대부분의 웹 브라우저들은 CSS를 지원한다 HTML4부터는 모든 서식 설정을 HTML 문서로부터 분리하는 것이 가능해졌다! CSS를 사용하는 이유 HTML만으로 웹 페이지를 제작하면 세부 디테일을 일일이 지정해주어야 한다. 이는 작업하기에도 어렵지만, 스타일의 변경이나 유지보수 시에도 힘들어집니다! 이러한 문제를 해소하기 위한 언어가 CSS CSS는 웹 페이지의 스타일을 별도의 파일로 저장하여 사이트의 전체 스타일을 일관성있게 제어할 수 있다. CSS 문법 선택자(selector)와 선언부(declaratives)로 구성 선택자 : 스타일을 적용하고자 하는 HTML 요소 선언부..

주로 윈도우 환경에서 소스트리로 쉽고 간단하게 작업하지만 우분투에서는 따로 git 관련 툴을 설치하지 않고 커맨드 창으로만 git을 사용하고 있습니다 그래서 자주 사용하는 명령어들만 따로 정리해두려고 합니다 😎 Git 명령어 ㆍ Git clone $ git clone [REPOSITORY_URL] ㆍ 현재 Git 상태 확인 $ git status ㆍ 해당 파일을 Staging Area로 이동 (Tracking) / 폴더 파일 전체 이동 $ git add 파일명 $ git add . ㆍ 저장소에 commit $ git commit $ git commit -m "커밋 메시지" ㆍ push $ git push $ git push -u 원격저장소명 로컬브랜치명 ㆍ pull $ git pull ㆍ fetch (원..

글씨체에 대한 설정이 없어서 윈도우에서 크롬으로 TIL 블로그에 들어가면 한글 글꼴이 깨진듯 이상하더라구요 😢 해결하기 위해 간단한 방법으로 웹폰트를 적용했습니다! 구글 폰트에서 원하는 폰트 가져오기 저는 이 폰트로! 폰트를 골라 Select this stlye을 누르고 @import를 눌러 나오는 url 주소를 복사해둡니다 CSS 파일에 다음과 같은 코드를 붙여넣습니다 제 앞선 글들과 동일한 사이트를 생성하셨다면, css > main.scss 파일에 넣으시면 됩니다! @font-face { font-family: 'Noto Sans KR'; src: url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap'); fo..

단계별로 풀어보기 - 정렬 단계 - [2단계] 2751번 문제 문제 링크 : https://www.acmicpc.net/problem/2751 2751번: 수 정렬하기 2 첫째 줄에 수의 개수 N(1 ≤ N ≤ 1,000,000)이 주어진다. 둘째 줄부터 N개의 줄에는 숫자가 주어진다. 이 수는 절댓값이 1,000,000보다 작거나 같은 정수이다. 수는 중복되지 않는다. www.acmicpc.net 입력 복사 : 5 5 4 3 2 1 CODE #include #include using namespace std; int main() { ios::sync_with_stdio(false); cin.tie(NULL); cout.tie(NULL); int arr[1000001]; int n; cin >> n; f..

그래프 (Graph) 네트워크를 표현하는 자료 구조로, 정점(vertex)라 부르는 노드와 정점 사이를 연결하는 간선(edge)의 집합으로 구성되는 자료 구조 - 간선(edge)는 두 노드 간 연결이고, 방향성이 있을 수도 없을 수도 있으며, 비용이 발생할 수 있다 * 깊이 우선 탐색 (DFS, Depth-First Search), 너비 우선 탐색(BFS, Breadth-First Search) 알고리즘으로 그래프 탐색 가능 * 깊이 우선 탐색 (DFS, Depth-First Search), 너비 우선 탐색(BFS, Breadth-First Search) 알고리즘으로 그래프 탐색 가능 💡 자료 구조 : codesyun.tistory.com/106 [Algorithm] 자료 구조(Data Structure..

해시 테이블 (Hash table) 키(key)에 값(value)을 매핑하는 자료 구조 - 해시 테이블의 각 위치는 슬롯(slot)이라고 한다 - 해시 함수(hash function)로 배열의 인덱스를 계산한다 - 실제 저장된 키의 개수가 가능한 키의 개수보다 적을 때 해시 테이블을 사용 - 해시 테이블은 배열의 개념을 일반화한다 - 딕셔너리를 구현하는 데 유용한 자료 구조 해시 함수로 데이터를 저장하는 과정 1. 데이터를 저장할 크기 M인 배열을 생성, 이 배열을 해시 테이블이라 한다 2. 해시 함수로 키의 해시 코드를 찾는다 3. 해시 코드를 해시 테이블의 크기로 나눈 나머지를 구해 데이터를 저장할 인덱스로 사용 4. 데이터를 지정된 인덱스에 저장 해시 테이블에서 해시 함수로 데이터를 찾는 과정 1...