Java 62

CSS ■ 레이아웃 (1)

◈ 블록 레벨 요소 vs 인라인 레벨 요소 ◈  • 블록 레벨 요소가능한 최대 가로 너비를 차지하여 한 줄 전체를 차지하는 요소 - 종류1. div2. p3. h1 ~ h64. ul5. li6. hr7. footer8. 등등... • 블록 레벨 요소 예시-1h3로 이루어져 있어 한 줄 전체를 차지하는 블록 레벨 요소 • 블록 레벨 요소 예시 - 2                                                                                                 필요하지 않은 영역까지 공간을 차지함 (블록 레벨 요소)   • 인라인 레벨 요소필요한 만큼만 공간을 차지하며 텍스트와 함께 표시되는 요소 - 종류1. span2. a3. strong4. e..

Front-End/CSS 2024.06.13

CSS ■ 기본 스타일 속성

◈ 텍스트 색상 속성 개요 ◈  • 색상 속성 개요 텍스트의 색상을 지정하며 색상 이름이나 RGB값, HEX코드 등을 사용하여 지정 가능 • 사용 방법 ◈ 텍스트 색상 속성 방식 ◈ • 색상 이름red, blue, green과 같이 색상의 이름을 영어로 직접 작성하여 사용하는 방식 • RGB 값0부터 255까지의 숫자로 각 성분의 강도를 나타내며, 투명도 또한 설정 가능 • HEX 코드16진수의 값으로 색상을 표현하는 방식이며 # 기호로 시작함 ◈ 배경 색상 속성 ◈ • 배경 색상 속성 개요 배경의 색상을 지정하며 색상 이름이나 RGB값, HEX코드 등을 사용하여 지정 가능 • 사용 방법기본적인 사용 방법은 텍스트 색상 속성과 동일하다   ◈ 글꼴 속성 ◈ • font-family폰트의 글꼴을 설정해주는..

Front-End/CSS 2024.06.12

CSS ■ CSS 기초

◈ CSS ◈  • CSS(Cascading Style Sheets)HTML을 꾸며주기 위해 사용되는 마크업 언어 • 기본 구문  ◈ CSS 작성 방식 ◈ • inline 스타일HTML 요소의 style 속성을 사용하여 직접 CSS 스타일을 지정하는 방식 • 내부 스타일 시트HTML 문서의 head 태그 내에  • 외부 스타일 시트 (사용 권장)CSS 스타일을 별도의 외부 파일로 만들고, HTML에서 link 태그를 사용하여 파일을 연결하여 사용하는 방식 ◈ CSS 선택자 종류◈    • 참고고유성 충돌 방지를 위해 적절한 선택자를 사용해야 함 * 고유성 충돌 : 동일한 스타일을 적용하는 여러 선택자가 있을 때 발생하며, 이를 해결하기 위해서는 선택자를 고유하게 만들거나 우선 순위를 조절해야 함  ◈ C..

Front-End/CSS 2024.06.12

HTML ■ 양식 요소 활용

◈ input 태그 ◈  • input 태그사용자로부터 입력을 받을 때 사용 • type 속성입력 필드의 유형을 지정하는 속성으로써 텍스트 입력 필드, 체크박스, 라디오 버튼 등을 지정할 수 있음 • type 속성의 유형1. text  2. password  3. checkbox  4. radio  5. email  6. number  7. hidden  8. …  ◈ input 태그 속성 ◈   ◈ button 태그 ◈   • button 태그사용자와 상호작용을 할 수 있는 버튼을 생성 • type 속성버튼의 유형을 지정하는 속성으로써 일반 버튼, 제출 버튼, 리셋 버튼 등을 지정 • type 속성의 유형1. button  2. submit  3. reset ◈ button 태그 속성 ◈  ◈ form..

Front-End/HTML 2024.05.16

HTML ■ 이미지,하이퍼링크 태그 활용하기

◈ 이미지 태그 ◈   • img 태그웹 페이지에 이미지를 삽입할 때 사용되는 태그로써, src 속성을 통해 이미지 파 일의 경로를 지정하여 사용 가능 ex)  ◈ 이미지 태그 속성 ◈  • alt이미지 파일이 로드되지 않았을 경우 대체 텍스트를 제공하는 속성ex)  • width이미지의 가로 크기를 지정하여 기본값은 픽셀(px) 단위로 되어있음 • height이미지의 세로 크기를 지정하여 기본값은 픽셀(px) 단위로 되어있음 ex)  • 픽셀(px)과 퍼센테이지(%)의 차이픽셀(px)은 이미지의 크기를 고정시키며, 퍼센테이지(%)를 사용할 경우브라우저 창의 크기에 따라 유연하게 조절되어 반응형 웹 디자인을 구현하는데 유용함단, 이미지의 원본 크기가 작음에도 %를 사용하여 이미지 크기가 강제로 늘어질 경..

Front-End/HTML 2024.05.09

HTML ■ 텍스트 태그 활용하기

◈ 개행과 가로선 ◈  • br 태그문장을 개행(줄바꿈)할 때 사용 • hr 태그가로로 밑줄을 그어 상/하단을 구분하기 위한 용도로 사용  ◈ 제목 ◈ • h 태그제목을 입력할때 주로 사용되는 태그로써, 뒤에 붙는 숫자에 따라 폰트의 크기가 달라짐h6 -> h5 -> h4 -> h3 -> h2 -> h1 : 숫자가 작아질수록 폰트가 커짐   ◈ 문자 강조 ◈ • strong, b 태그문자를 굵게 표시하여 강조할 경우 사용 • 차이점b 태그는 시각적으로 효과를 나타내기 위해 사용하며, strong 태그는 중요한 부분이나 강조되어야 하는 내용을 나타내거나 스크린 리더 등의 사용자에게 중요한 내용임을 알려주기 위한 태그. 즉, 둘의 차이점은 용도에 의한 차이이다. • 예시  ◈ 작은 글씨 ◈  • small ..

Front-End/HTML 2024.05.01

HTML ■ HTML(HyperText Markup Language)

◈  HTML ◈ 웹 페이지를 작성하기 위해 사용되는 마크업 언어  ◈ 웹에서의 통신 흐름 ◈ • 서버들의 종류DNS: 도메인 주소의 IP를 사용자에게 알려주는 서버WEB : 사용자로부터 HTTP 요청을 받아 정적인 컨텐츠(HTML, CSS, …)를 응답해주는 서버WAS : DB와 통신하여 동적인 컨텐츠를 처리하기 위한 서버DB : 데이터를 관리하기 위한 서버 • WEB vs WAS의 언어WEB : HTML, CSS, JavaScript, …WAS : JAVA, PHP, Python, …    ◈ HTML5 ◈ • HTML5 요소의 종류1. 제목 요소 : h1, h2, h3, h4, h5, h62. 단락 요소 : p3. 링크 요소 : a4. 이미지 요소 : img5. 목록 요소 : ul, ol, li6...

Front-End/HTML 2024.04.30

Java ■ 제네릭과 컬렉션

◈ 제네릭(Generic) ◈ 데이터 타입을 외부에서 지정함  미리 데이터 타입을 지정해두지 않고 외부에서 사용할 때 지정하는 데이터 타입으로 유동적으로 변경하여 지정해줌 • 사용 방법1. 클래스에 와 같이 제네릭을 설정한 후, 필드의 데이터 타입을 T로 지정2. 객체를 생성할 때 클래스명을 지정3. 설정한 데이터 타입으로 사용이 가능한지 확인 * 즉, 외부에서 어떠한 데이터 타입으로 만들어 사용할 지 모르는 필드 또는 매개변수 등에 주로 사용됨  • int 대신 Integer를 사용하는 이유Person 위치에 있는 데이터 타입은 참조형만 올 수 있음 기본형 타입은 올 수 없기 때문에 int의 wrapper class인 Integer를 사용해야 함 * 제네릭은 참조형 변수, 즉 객체를 필요로 하며 기본형..

Java ■ 예외

◈ 예외처리(Exception) ◈ 특정 오류가 발생했을 때 무시하고 싶거나, 오류에 따라 적당한 작업을 처리할 수 있도록 해주는 것 • 예외처리를 하는 이유프로그램의 비정상적인 동작으로 인해 발생하는 예외를 미리 대비하고, 프로그램을 정상적 으로동작할 수 있도록 사전에 방지하고자 사용함 • 에러 종류  • 예외 종류  • 예외 구조  • try-catch문자바에서의 예외처리는 try-catch문을 사용하며 try에서는 예외를 감지할 코드그리고 catch에서는 특정 예외가 발생 시 실행할 코드를 작성함* try에 있는 코드를 실행할 때 예외가 발생한다면 이후의 코드는 실행되지 않음    • 실습배열의 범위를 벗어나게 하여 OutOfBounds를 발생시켜 확인하기  • try-catch-finally문fi..

Java ■ 추상화

◈ 추상화 (abstract) ◈ 구체적인 사실들을 일반화시켜 기술하는 개념으로써 필요한 공통점을 추출하고 불필요한 공통점을 제거하는 과정1. 복잡한 시스템을 단순화하고 모델링이 가능  • 추상 클래스 (1) - 추상 클래스(abstract class)미완성된 클래스로써, 구현부 {} 가 없는(미완성인) 메소드를 가지고 있음 - 추상 클래스와 메소드 예시  • 추상 클래스 (2) - 추상 클래스(abstract class)미완성된 클래스 - 추상 메소드(abstract method)구현부 {} 가 없는(미완성인) 메소드 - 추상 클래스와 메소드 예시 • 추상 클래스 (3) - 추상 클래스를 사용하는 이유똑같은 부모 클래스(추상 클래스)를 상속 받지만, 자식 클래스들의 메소드가모두 다른 기능을 수행할 것으..