분류 전체보기 (107) 썸네일형 리스트형 CSS 05_BoxModel [ Box Model 이란? ] 모든 HTML 요소는 웹 페이지에서 일정 공간을 차지하는데 이러한 공간을 CSS에서는 box model로 정의하고 있다. Box Model 은 Content, Padding, Border, Margin으로 구성되어 있다. [ Content ] Content : 텍스트나 이미지가 들어있는 Html 요소의 실질적인 내용을 뜻한다. width나 height로 content의 너비를 지정할 수 있고 이 때 단위는 px, %, vw, vh 등이 올 수 있다. width: 200px; height: 200px; ★ 주의할 점 : div (block level element)와 달리, span과 같은 inline level element는 width와 height가 적용되지 않는다. .. CSS 04_table [기본적인 table 관련 태그] : 표를 만드는 태그로, 표 전체를 감싸는 데 사용한다. : 표의 제목이나 설명을 작성하는 태그 : 표의 행을 의미하는 태그. 자식 태그로 태그나 태그가 반드시 있어야 한다. : 표의 제목 열을 의미하는 태그. 부모 태그인 태그 안에 있어야 한다. (글씨체가 진해짐) : 표의 일반 열을 의미하는 태그. 부모인 태그안에 있어야 한다. : 표의 제목 열들을 묶는 그룹 태그 : 표의 일반적인 데이터들을 묶는 그룹태그. 기본적으로 행그룹태그를 사용하지 않으면 크롬브라우저가 자동으로 tbody 태그로 묶어준다. : 표의 하단 영역을 묶는 그룹태그 => , , 태그는 style을 적용할 때 편리하게 사용하기 위해 쓰는 듯 하다..? [table에 style 적용하기] table {.. CSS 03_font [기본적인 글꼴 관련 속성] font-family : 글꼴 종류를 지정한다. 기본값은 웹브라우저 기본 글꼴 ex) font-family : 'Noto Serif KR', serif; #Noto Serif KR 글꼴로 바꾸되, 만약 브라우저에 없는 글꼴이라면 serif 글꼴을 적용한다. : 사용자의 컴퓨터에 설치된 폰트와 상관없이 온라인의 특정 서버에 위치한 폰트파일을 다운로드하여 화면에 보여주는 폰트를 웹 폰트라고 한다. Google Fonts 사이트에 방문하여 또는 @import 문을 사용하여 웹 폰트를 적용할 수 있다. font-size : 글자 크기를 지정한다. font-style : 글자를 이탤릭체로 표시할지 지정한다. font-weight : 글자 굵기를 지정한다. font-variant : 소.. HTML 02 _ HTML의 구조 [HTML이란 무엇인가?] - html은 hyper text markup language 로, 태그로 이루어진 마크업 언어라고 생각하면 된다. - vscode에서 새 창을 만들고 '!' + 'tab' or 'enter' 을 누르면 기본적인 코드들은 자동으로 작성이 된다. - 와 태그가 보일텐데, 태그는 웹 브라우저에 표시되지 않는 태그이고 태그는 실제로 웹 브라우저에 표시되는 태그이다. - 내가 작성한 웹 브라우저는 파일 우클릭 -> open with live server 으로 창을 열 수 있다. - 태그 안에 태그를 설정하고 태그의 contents를 작성하면 그 contents는 새로 생성한 웹 브라우저의 이름이 된다. ex) hello - 실제로 웹 페이지 상에 표시되는 내용들은 태그에 작성한다. [.. HTML 01 _ 웹 개발의 기초 [웹 개발의 기초] HTML은 자동차의 툴, CSS는 자동차의 외관, Java Script는 자동차를 움직이는 동력이라고 생각하면 된다. HTML과 CSS는 visual studio code를 설치해 실행할 수 있다. vscode를 설치했다면 앞으로 html css 코드를 짤 때, 좀 더 편리하게 짤 수 있도록 하는 확장 프로그램을 설치하는 것이 좋다. vscode 맨 왼쪽 탭에서 블록처럼 보이는 5번째 '확장' 아이콘을 선택하면 위와 같이 검색 탭이 뜬다. 아래의 확장 프로그램을 하나씩 검색해서 설치해주면 끝이다. [vs code의 확장 프로그램] Korean language pack : 한국어로 볼 수 있게 해주는 패키지 bracket pair colorize : 여러 개의 괄호가 겹쳐있을 때 색을 .. [JAVA] 백준_1269 [문제] 1269번: 대칭 차집합 (acmicpc.net) 1269번: 대칭 차집합 첫째 줄에 집합 A의 원소의 개수와 집합 B의 원소의 개수가 빈 칸을 사이에 두고 주어진다. 둘째 줄에는 집합 A의 모든 원소가, 셋째 줄에는 집합 B의 모든 원소가 빈 칸을 사이에 두고 각각 주어 www.acmicpc.net [풀이] 처음에는 A의 원소의 개수 + B의 원소의 개수 - 2 * (A의 원소와 B의 원소 중 겹치는 원소) 를 출력하면 되는 문제라고 생각하여 ArrayList를 이용해 A와 B의 원소들을 하나씩 다 추가하고 중첩 반복문을 이용해 겹치는 원소가 몇 개인지 세었다. 그런데 이렇게 푸니까 시간초과가 나와서 다른 방법을 찾아야만 했다. 다른 방법은 그냥 겹치지 않는 남은 원소를 하나씩 세는 것이다. .. [JAVA] 백준_1764 [문제] 1764번: 듣보잡 (acmicpc.net) 1764번: 듣보잡 첫째 줄에 듣도 못한 사람의 수 N, 보도 못한 사람의 수 M이 주어진다. 이어서 둘째 줄부터 N개의 줄에 걸쳐 듣도 못한 사람의 이름과, N+2째 줄부터 보도 못한 사람의 이름이 순서대로 주어진다. www.acmicpc.net [풀이] 우선 HashMap을 생성하여 N개의 엘리먼트를 만든다. 각각의 key와 value는 ('입력한 이름' , 1) 으로 놓는다. 그 다음 M개의 이름을 입력받는데, getOrDefault 메소드를 이용하여 값을 2로 만든다. getOrDefault(Object key, Object DefaultValue) 찾는 키가 존재한다면 찾는 키의 값을 반환하고 없다면 기본 값을 반환하는 메소드 key : 값을.. [JAVA] 백준_10816 [문제] 10816번: 숫자 카드 2 (acmicpc.net) 10816번: 숫자 카드 2 첫째 줄에 상근이가 가지고 있는 숫자 카드의 개수 N(1 ≤ N ≤ 500,000)이 주어진다. 둘째 줄에는 숫자 카드에 적혀있는 정수가 주어진다. 숫자 카드에 적혀있는 수는 -10,000,000보다 크거나 같고, 10,0 www.acmicpc.net [풀이] 문제 의도는 이분정렬이나 HashMap 알고리즘을 쓰는 것이었다. 그래서 이분정렬을 이용한 풀이와 HashMap을 이용한 풀이 둘 다 해보았다. 개인적으로는 HashMap을 이용하는 것이 더 쉬웠다. (시간도 더 빨랐다.) 이분정렬 풀이에서는 상한과 하한을 잡는 것이 중요했다. 따라서 하한을 구하는 lower 메소드와 상한을 구하는 upper 메소드를 따로 .. 이전 1 ··· 9 10 11 12 13 14 다음
