👾

flexbox란? 기존의 display나 positon 등을 이용한 웹의 레이아웃 개발은 생각할 부분이 많고 어느 정도 한계가 존재해서 개발하기가 어려웠습니다. 이런 점을 극복하기 위해서 flexbox 개념이 도입되었습니다. flexbox를 이용하면 특별한 계산 없이 쉽게 정렬을 할 수 있고, 이를 통해 레이아웃을 편리하게 구성할 수 있습니다. flexbox 구성 flex box는 flex container(부모 요소)와 flex item(자식 요소)로 구성됩니다. flexbox를 사용하려면 부모 요소에 display: flex;를 추가하면됩니다. flex 속성을 추가한 요소가 flex container가 되고, 그 자식 요소들이 flex item이 됩니다. .flex_container { display..

문제 링크: programmers.co.kr/learn/courses/30/lessons/17679코딩테스트 연습 - [1차] 프렌즈4블록프렌즈4블록 블라인드 공채를 통과한 신입 사원 라이언은 신규 게임 개발 업무를 맡게 되었다. 이번에 출시할 게임 제목은 "프렌즈4블록". 같은 모양의 카카오프렌즈 블록이 2×2 형태로 4개가 붙programmers.co.kr 문제 설명board 문자열 배열 입력을 리스트로 바꿔서 처리했습니다. 이 뒤에 블록이 더 이상 지워지지 않을 때까지 while문을 돌면서 블록을 지웠습니다. while문에서 한 번의 반복마다 다음을 실행합니다. mxn 크기의 remove 배열을 0으로 초기화합니다. (0, 0) 블록부터 (m-1, n-1) 블록까지 같은 모양의 2x2 블록을 찾으..

문제 링크: programmers.co.kr/learn/courses/30/lessons/17677 코딩테스트 연습 - [1차] 뉴스 클러스터링 뉴스 클러스터링 여러 언론사에서 쏟아지는 뉴스, 특히 속보성 뉴스를 보면 비슷비슷한 제목의 기사가 많아 정작 필요한 기사를 찾기가 어렵다. Daum 뉴스의 개발 업무를 맡게 된 신입사원 튜브 programmers.co.kr 문제 설명 두 집합 A, B 사이의 자카드 유사도 J(A, B)는 두 집합의 교집합 크기를 두 집합의 합집합 크기로 나눈 값으로 정의된다. (합집합의 크기) = (A의 크기 + B의 크기 - 교집합의 크기) 식이 만족하기 때문에 결국 자카드 유사도는 다음과 같이 정의할 수 있다. J(A, B) = (교집합의 크기) / (A의 크기 + B의 크..

멀티미디어와 관련된 태그 ✔ 이미지(image) 넣기 html 문서에 이미지를 넣으려면 태그를 사용하면 됩니다. 태그는 이미지를 정의할 때 사용하는 태그입니다. 이 태그를 사용해서 이미지를 넣으면, 이미지가 html 문서에 직접 삽입되는 것이 아니라 이미지 주소가 링크되는 형태입니다. 따라서 태그에는 src와 alt 속성을 반드시 명시해 주어야 합니다. src: source, 속성 값으로 이미지의 URL을 받습니다. alt: alternative text, 속성 값으로 사진 설명을 받고, 이 설명은 불러올 이미지가 없거나 이미지를 불러오는데 실패했을 경우 대신 나타납니다. ✔ 영상(video) 넣기 1. 태그 이용 영상은 태그를 이용하여 넣을 수 있습니다. 태그는 무비 클립(movie clip)이나 비디..

태그 ✔ a 태그 정의 contents 태그는 anchor(닻)의 약어로, 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용합니다. 따라서 태그에는 링크(link)의 목적지를 가리키는 href 속성이 필요합니다. ✔ 속성(attributes) 정의 및 형식 속성(attributes)이란 태그에 대해 추가적인 정보를 제공할 때 사용하는 것입니다. 키(key) = "속성 값(value)" 형식으로 속성을 명시할 수 있습니다. 또한 하나의 태그에 속성이 여러 개일 경우, 각 속성은 공백 한 칸으로 구분합니다. 네이버 ✔ URL 정의와 종류 다시 href 속성으로 돌아와서, href의 속성 값으로는 URL이 들어갈 수 있습니다. URL에 대해 간단히 설명하자면,..

문제 링크: programmers.co.kr/learn/courses/30/lessons/17678코딩테스트 연습 - [1차] 셔틀버스10 60 45 ["23:59","23:59", "23:59", "23:59", "23:59", "23:59", "23:59", "23:59", "23:59", "23:59", "23:59", "23:59", "23:59", "23:59", "23:59", "23:59"] "18:00"programmers.co.kr 문제 설명시간 계산을 쉽게 하기 위해서 "HH:MM" 형식의 시간을 모두 분으로 변환해서 생각했습니다. 예를 들어 "09:10"인 경우 9*60 + 10 = 550(분)으로 변환합니다. 이런 식으로 변환하면 정수 비교 연산을 통해 누가 먼저 왔는지를 판단할 수..

문제 링크: programmers.co.kr/learn/courses/30/lessons/17680

목차 제목 태그(h1~h6) 본문 태그(p, br, pre) 글자와 관련된 태그(strong, em, b, sub, sup, ins, del) 태그 사용 예시 제목 태그 제목 제목을 나타내는 태그 중요도에 따라 h1~h6으로 나눠서 사용 h1이 제일 중요한 제목, h6가 제일 덜 중요한 제목 본문 태그 본문 내용 본문과 관련된 태그 단락(paragraph)를 나누기 위한 태그 break, 줄바꿈을 할 때 사용하는 태그 컨텐츠가 없기 때문에 종료 태그가 없음 preformatted(형식화된), 태그 내에 작성한 내용을 그대로 브라우저가 인식하도록 하는 태그 의 경우 내용에 줄 바꿈을 여러 번해도 브라우저는 공백 한 칸으로 인식하지만 는 내용에 작성한 것을 그대로 인식함(글 아래에 예시에서 확인) 글자와 관..

시맨틱 태그(Semantic Tag) 의미를 가지고 있는 태그 컴퓨터가 정보를 이해하고, 논리적인 추론까지 할 수 있는 구조를 만들기 위해 추가됨 기본적인 시맨틱 태그 웹페이지나 섹션의 소개 또는 제목을 담는 태그 페이지 이동을 위한 메뉴를 담아서 네비게이션 역할을 하는 태그 웹페이지의 내용에 따라 기준에 맡게 구획을 나누는 태그 주내용(본문)을 담는 태그 사이드에 광고 또는 부내용을 담는 태그 웹페이지의 가장 아래 부분에 위치하고, 사이트 정보에 대한 추가 정보를 담는 태그

목차 HTML이란? HTML 요소 HTML 구조 HTML이란? HyperText Markup Language의 약자 HyperText - 하이퍼링크를 통해 사용자가 원하는 순서로 한 문서에서 다른 문서로 접근할 수 있는 텍스트 - 예시) 아래의 캡처에서 목차의 링크를 누르면 해당 내용으로 이동 Markup Language - 태그(마크, 표시)를 이용하여 문서나 데이터의 구조를 명시하는 언어 - 사용자가 보기 좋게 문서를 구조화 HyperText Markup Language - 웹 페이지의 구조 혹은 데이터 작성을 위한 마크업 언어 HTML 요소(element) 웹 프로그래밍 강좌 요소는 시작 태그(Start Tag), 내용(Contents), 종료 태그(End Tag)로 이루어짐 위의 예시에서 시작 태..