mynote6676 개발자 노트

=======================================================학습 목표- CSS 의 display 속성(block,inline, inline-block,none)과 visibility 속성을 이해하고 활용할 수 있다.- 각 속성의 특징과 차이점을 실습을 통해 익히고, 실제 웹 레이아웃에 적용할 수 있다.======================================================== 1.1 Display 속성이란CSS의 display 속성은 HTML 요소가 화면에 어떻게 표시될지를 결정합니다. 요소의 배치 방식과 동작을 제어하는 핵심 속성입니다.- block : 요소가 한줄을 모두 차지하며, 새로운 줄에서 시작합니다. (예 : , , )- in..

1. background 프로퍼티란?background 프로퍼티는 요소의 배경을 설정하는데 사용됩니다. 배경 색상, 이미지, 반복 방식, 위치, 크기등을 한버넹 정의할 수 있는 단축 속성(shorthand property) 입니다. 개별 속성으로도 설정 가능하며, 단축속성을 사용하면 코드를 간결하게 작성할 수 있습니다. 주요 개별 속성-backgroud - color: 배경 색상을 지정합니다.-backgroud - image: 배경 이미지를 지정합니다.-backgroud - repeat : 배경 이미지의 반복 방식을 설정합니다.backgroud - position : 배경 이미즈이 위치를 설정합니다.backgroud - size : 배경 이미지를 크기를 설정합니다. backgroud - attachmen..

CSS 박스 모델은 HTML 요소를 네모난 상자로 구분하여 표현하는 모델입니다. 위 그림 처럼 HTML 요소를 "상자"로 보는 방식이에요. 이 상자는 네 개의 층으로 이루어져 있어요.-Content(내용): 상자 안의 실제 내용물(텍스트, 이미지 등).-Padding(패딩) : 내용과 테두리 사이의 내부 공간.-Border(테두리): 패딩을 감싸는 경계선.-Margin(마진): 테두리 밖의 외부 공간. 박스 모델을 이해하면 웹페이지에서 요소의 크기와 간격을 정확히 조정할 수 있어요. 이걸 모르면 버튼이 겹치거나텍스트가 너무 붙어서 보기 불편한 문제가 생길 수 있습니다. |실습 코드 1 - 박스 모델에 개념 | 박스모델에 대한 기본적인 속성에 이해 div 태그 1 박스 모델 ..

| 바이트 기반 스트림 사용package ch04;import java.io.FileInputStream;import java.io.FileOutputStream;public class FileCopy { public static void main(String[] args) { // 파일 경로 지정 String sourceFilePath = "employees.zip"; String destination"employees_copy.zip"; // 소요 시간 측정 시작 long startTime = System.namoTime(); // 바이트 기반 스트림으로 데이터를 다둘 수 있다. try(FileInputStr..

속성 선택자란?속성 선택자는 HTML요소의 속성(Attribute)이나 그 속성의 값(value)을 기준으로 요소를 선택하는 css 선택자에요태그 이름이나 클래스,ID 대신 요소가 가진 속성(예: type,href,class)을 보고 스타일을 적용합니다. 대괄호( [ ] )를 사용하며, 속성 이름만 쓰거나 특정 값과 매칭시켜서 선택할 수 있어요.예를 들오, 처럼 type 속성이 "text"인 요소만 골라낼 수 있습니다. 속성 선택자는 마치 사람을 "특징" 으로 찾는 것과 같아요. "안경 쓴 사람" 이나 "파란 셔츠 입은 사람"을 고르는 식으로,속성을 기준으로 요소를 골라내는 거죠[href] { color: blue;}| 주요 속성 선택자 종류선택자 설명예시 코드적용 예시(HTML)결과[속성]특정 ..

가상 클래스란? 가상 클래스 선택자는 CSS에서 요소의 특정 상태나 위치를 기준으로 스타일을 적용하는 방법이에요. 일반 선택자( 태그,클래스, ID등 )가 "무엇"을 선택하느냐에 초점을 맞춘다면, 가상 클래스는 "어떤 상황"이나 "어떤 조건"에 있는 요소를 골라내는 데 사용됩니다. 이름에 "가상"이 붙은 이유는 실제 HTML에 클래스가 추가된 게 아니라. CSS가 요소의 상태나 위치를 "가상으로"판단해서 스타일을 입히기 때문이에요. 기호는 콜론(:) 으로 시작하며, 선택자 뒤에 붙습니다.(예: button:hover,li:first-child) 주요 가상 클래스:hover: 마우스가 요소 위에 있을 때 스타일 적용:focus: 요소가 키보드나 클릭으로 포커스를 받았을 때 적용(주로 입력창에 사용):fir..

결합 선택자란? 결합 선택자는 CSS에서 여러 선택자를 조합해서 HTML 요소 간의 관계를 기반으로 더 구체적으로 대상을 선택하는 방법이에요.기본 선택자(태그, 클래스, ID등) 만으로는 단순히 "무엇"을 선택할지 정할 뿐이지만, 결합 선택자는 "어떤 위치"나 "어떤 관계"에 있는 요소를 골라낼 수 있게 해줍니다.즉, 결합 선택자는 두 개 이상의 선택자를 "기호"로 연결해서 사용합니다. 이 기호가 요소 간의 관계를 정의해요,- 예 :div p는 안에 있는라는 뜻이고, div>p는 "의 직계 자식인 "라는 뜻이에요 정리하면 결합 선택자란 요소와 요소 사이의 계층 구조(부모 - 자식)나 순서 (형제 관계)를 활용해서 스타일을 적용하는 도구입니다. - 결합 선택자의 종류자손 선택자(): 부모 안의 모든 자손..

CSS 선택자란?CSS 선택자는 HTML 문서에서 스타일을 적용하고 싶은 특정 요소를 "선택"하는 도구입니다. 마치 가게에서 물건을 고를 때 " 이거 주세요!" 라고 손으로 가리키는 것처럼, 선택자는 "이 요소에 스타일을 입히고 싶어요!" 라고CSS에게 알려주는 역활을 합니다. 예를 들어,HTML에 태그가 여러 개 있을 때, "모든 문단을 파란색으로 만들자"거나 "특정 클래스가 붙은 문단만 굵게 하자" 같은 작업을 선택자가 가능하게 해줍니다. 태그를 선택해서 제목을 크게 만들기.warning 클래스를 가진 요소를 빨간색으로 강조하기#header라는 ID를 가진 부분에 배경색 추가하기. 선택자의 중요성-웹 페이지의 디자인과 레이아웃을 제어하는 첫 단계. 기본 문법-선택자 {속성: 값} 형태 기본 선택자..

참고 링크https://treasure01.tistory.com/34 픽셀(pixel), 해상도(Resolution)픽셀 (pixel) ‘Picutre(그림) Element(원소)’를 줄인 말로 ‘화소’라고 불리며, 색을 표시하는 하나의 점입니다. 디스플레이 장치 화면의 이미지를 구성하는 최소 단위입니다. PPI (Pixels per Inch) 해상treasure01.tistory.com 1. CSS 크기와 단위1. px (픽셀)정의:px는 픽셀 단위로, 해상도에 따라 상대적인 크기를 가지는 절대 단위입니다.1px는 일반적으로 화면에서 1개의 픽셀을 의미합니다.특징 :고정된 크기를 가지므로 해상도에 따라 크기가 달라질 수 있습니다.예 ; 16px는 대부분의 브라우저에서 기본 글자 크기로 사용됩니다.2. ..

1 .CSS란?더보기CSS(Cascading Style Sheets)-CSS는 웹 페이지의 스타일을 정의하는 언어입니다.-CSS3는 2005년 정의되었으면, 참고로 CSS2 sns 1998년,CSS1은 1996년에 제정되었습니다. CSS의 역활HTML로 구조화된 콘텐츠를 예쁘게 브라우저 상에 렌더링 처리합니다.-HTML 은 구조와 의미(Semantic Web)를 담당.-CSS는 이를 통해 화면에 보이는 부분의 스타일을 정의합니다.JavaScript는 사용자 인터페이스 등을 조정합니다.핵심 개념웹 페이지는 HTML, CSS, JavaScript로 표현됩니다.HTML ; 구조 CSS: 스타일JavaScript: 동적 기능 2. Selector(선택자) 더보기CSS Selector란?-HTML 문서의 특정..