본문 바로가기

전체 글376

[CSS] 전체 선택자(*) 와 box-sizing CSS 전체 선택자 - 전체 선택자(the Universal Selector)는 HTML의 모든 요소를 선택하는 기능 - 태그, 속성명, 속성값, 클래스, 아이디 등 모든 요소를 선택 - 아래는 전체 선택자를 통해 효과를 적용했고, 추가로 body 선택자를 통해 효과를 적용한 예 *{ margin:0; padding: 0; box-sizing: border-box; } body{ font-family: 'Silkscreen'; display: flex; justify-content: center; align-items: center; height: 100vh; background: url("login_image.jpg") no-repeat center; background-size: cover; } bo.. 2022. 8. 25.
[BaekJoon] 백준 알고리즘 1000번 1. 문제 두 정수 A와 B를 입력받은 다음, A+B를 출력하는 프로그램을 작성하시오. 2. 입력 첫째 줄에 A와 B가 주어진다. (0 < A, B < 10) 3. 출력 첫째 줄에 A+B를 출력한다. 4. 제출 import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner scan = new Scanner(System.in); int A = scan.nextInt(); int B = scan.nextInt(); System.out.println(A+B); scan.close(); } } 5. 풀이 방법 자바의 입력기능인 Scanner를 이용해서 문제를 푼다. * 자바에서 데이터를 출력하는 명령은 S.. 2022. 8. 24.
[HTML5+CSS] 겨울을 주제로 구현한 WinterSeason_01 1. HTML 코드 Snowulf Home Gallery Reservation Around FAQ winter season READ MORE Author: Bk 2. CSS 코드 /* nav var 꽉채우기, 폰트 전체 적용 */ body{ margin:0; font-family: 'Silkscreen'; } /* a 전체 태그 밑줄 제거, 색상 적용 */ a{ text-decoration: none; color:white; } /* nav bar 나란히, 빈 공간 적용, 중앙 정렬 등 적용 */ .nav_bar{ display: flex; justify-content: space-between; align-items: center; background: gray; padding: 10px; } .nav.. 2022. 8. 23.
[CSS] 미디어 쿼리(Media Query) 1. 기본 문법 - CSS에서 어떤 스타일을 선택적으로 적용할 때 사용. @media (조건) { 스타일 } - 스타일 부분에는 일반적인 CSS 코드가 기재, 조건이 만족이 될 때는 스타일이 적용, 만족되지 않을 때는 스타일이 무시 2. 미디어 쿼리 예시 - 핸드폰과 같이 비교적 좁은 화면에서 특정한 스타일을 적용할 때는 화면의 최대 너비 조건으로 사용 *ex) 800px 이하의 좁은 화면는 박스를 없애고 싶다. See the Pen CSS - media by hbkuk (@hbkuk) on CodePen. *ex) 800px 이상의 넓은 화면는 박스가 있어야 한다. See the Pen CSS - media (2) by hbkuk (@hbkuk) on CodePen. * 별첨. 알고가기 - 코드의 재활.. 2022. 8. 19.
[CSS] BOX MODEL, <div>, <gird> 1. BOX MODEL - Block Level Element: 화면 전체를 사용하는 태그 * ex tag) , etc.. ** display 속성을 통해 Inline Element로 변경 가능 - Inline Element: 적용된 컨텐츠 영역만 사용하는 태그 * ex tag) tag, etc.. ** display 속성을 통해 Block Level Element로 변경 가능 See the Pen CSS - block, lnline by hbkuk (@hbkuk) on CodePen. 2. CSS 속성 정리 - 중복되는 속성을 간략하게 정리 See the Pen CSS - 중복 정리 by hbkuk (@hbkuk) on CodePen. 3. CSS 적용을 위한 무색/무취인 태그 - division의 줄.. 2022. 8. 18.
[CSS] - 선택자 1. CSS를 통한 일괄 적용 - Selector(선택자)에 css를 적용 - 문장 구조 설명 a{ color: blueviolet; text-decoration:none; } * a → selector(선택자) ** color: blueviolet → declaration(선언 및 효과) text-decoration:none → declaration(선언 및 효과) *** color, text-decoration:none → property(속성) **** blueviolet, none → value(속성 값 또는 값) See the Pen CSS - a by hbkuk (@hbkuk) on CodePen. 2. CSS 적용을 위한 선택자 class - class 적용 예 * CSS 적용을 위해 이름 .. 2022. 8. 18.
[HTML] 문서의 구조(1) 1. 태그 - 제목을 지정하는 태그이며, 검색엔진이 웹페이지를 분석할 때 가장 중요하게 생각하는 태그 2. 태그 - 이 웹페이지가 어떤 방식으로 저장되는지 알려주며, 어떤 방식으로 열어야하는지 알려주는 태그 - 웹페이지가 저장된 방식과 여는 방식이 일치하지 않을 때 웹브라우저는 이상한 문자를 표시 3. 태그 - 문서의 본문을 정의하는 태그이며 제목, 단락, 이미지, 하이퍼링크 등과 같은 HTML 문서의 모든 내용이 포함 See the Pen Untitled by hbkuk (@hbkuk) on CodePen. 4. * 별첨 - : 이 웹페이지가 HTML(HyperText Markup Language)로서 만들어졌다는 것을 표현하기 위한 코드 2022. 8. 17.
[HTML] 기본 문법 - 태그(1) 1. 태그 - 굵게 표시되며, 매우 중요한 텍스트를 정의하는데 사용. See the Pen Untitled by hbkuk (@hbkuk) on CodePen. 2. 태그 - underline 약자, 중요하다고 생각되는 부분에 표시 See the Pen tag by hbkuk (@hbkuk) on CodePen. 3. ~ 태그 - HTML 제목을 정의하고, 태그의 중요도 및 크기가 가장 크고, 가 가장 작음. See the Pen ~ 태그 by hbkuk (@hbkuk) on CodePen. 4. 태그 - 줄바꿈을 통해 단락을 표현하는 태그이며, 닫히는 태그가 없음. See the Pen by hbkuk (@hbkuk) on CodePen. 5. 태그 - 와 동일한 줄바꿈 태그이나, 태그는 단락을 표현하.. 2022. 8. 17.
[JAVA] 상수의 데이터 타입 1. 상수 - 상수(常數, constant)란 변하지 않는 값을 의미 - int a = 1; * a는 변수, 1은 상수 2. 상수의 표현 - float a = 2.2; → 오류 * 데이터 타입 불일치 - double a = 2.2; → 오류 없음 * 데이터 타입 일치 - float a = 2.2F → 오류 없음. * 명시적 형변환을 통해 데이터 타입을 일치시킴. => 자바는 기본적으로 double형으로 설정 3. 정수형 - int a = 2147483648; → 오류 * 표현 가능 범위 외 - long a = 2147483648; → 오류 * 데이터 타입 불일치 - long a = 2147483648L; → 오류 없움. * 명시적 형변환을 통해 데이터 타입을 일치시킴. => 자바는 기본적으로 int형으로.. 2022. 8. 11.

티스토리툴바