mynote6676 개발자 노트

(HTML/CSS/JavaScript)CSS 선택자(기본 선택자) - 9

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

(HTML/CSS/JavaScript)CSS 크기와 단위, 색상 - 8

참고 링크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. ..

(HTML/CSS/JavaScript) CSS(Cascading Style Sheets)란 뭘까? - 7

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 문서의 특정..

(HTML/CSS/JavaScript)시멘틱 태그란 - 6

시멘틱 웹 (Semantic Web)-시멘틱 웹은 월드 와이드 웹 컨소시엄(W3C)이 주도한 개념으로, 웹 데이터를 단순히 표시하는 것을 넘어 데이터가 의미를가지도록 만드는 기술과 철학을 의미합니다. - 기존 웹은 사람이 읽고 이해하기 쉽게 설계되었지만. 기계(컴퓨터,검색 엔진 등)는 데이터의 의미를 이해하기 어려웠습니다.시멘틱 웹은 데이터를 구조화하고 메타데이터를 추가해 기계가 데이터를 이해하고 처리할 수 있게 합니다. 시멘틱 태그 (Semantic Tag)- HTML5에 도입된 태그로, 콘텐츠의 의미와 구조를 명확히 정의하는 태그.- 기존태그는 단순히 레이아웃을 나누는 용도였지만, 시멘틱 태그는 콘텐츠의 역할과 의미를 부여해코드의 가독성과 접근성을 높임 주요 특징의미 전달; 태그 이름 자체가 콘텐츠의..

(HTML/CSS/JavaScript)HTML 주요 body 내의 태그 - 5

개념적 정리 : 사용자에게 보이는 콘텐츠 영역.주요 태그~ : 제목. : 문단. : 링크 : 블록 나누기.,, 목록:버튼: 표 형식 데이터 표시. : 사용자 입력 수집. : 입력 필드 생성 | 실습예제 큰 제목 중간 제목 작은 제목 이것은 하나의 문단입니다. 텍스트를 묶어줍니다. 여기를 클릭하세요! 이 문단은 div 안에 있습니다. 레이아웃을 나눌 때 유용합니다. li : 순서가 없는 목록을 표시할 때 --> 항목 1 항목 2 항목 2 li: 순서가 있는 목록을 표시할 때 --> 첫 번째 단계 ..

(HTML/CSS/JavaScript) HTML 속성이란? - 4

개념 정리 - HTML 속성(Attribute): HTML 태그에 추가적인 정보를 제공하는 key-value 쌍(예 : 속성명="값")-역할 : 태그의 동작 ,스타일 데이터 등을 정의하거나 제어-작성 규칙:-속성은 시작 태그 안에 작성-속성명은 소문자 권장. 값은 따옴표로 감쌈("또는") 주요 속성 예시: -id :요소의 고유 식별자class : 스타일링이나 스크립트를 위한 그룹 식별자src: 이미지 ,비디오 등의 소스 경로alt : 대체 텍스트 (접근성 중요)href: 링크 URL----------------------------------------------------- HTML 속성 배우기 id 속성 확인(렌더되는 페이지에 같은 id 값을 할당 해서는 안된다.) ..

(HTML/CSS/JavaScript) HTML 기본 템플릿에 이해 - 3

여기서 템플릿이란 말은 웹 페이지를 만들기 위한 기본적인 구조 또는 뼈대라고 생각하면 좋습니다.즉 , HTML 문서를 작성할 때 공통적으로 사용되는 필수 요소들을 미리 정의해 놓은 형태를 의미합니다. HTML 기본 개념 확인하기더보기1. HTML문서의 기본 구조HTML 문서는 크게, 코드 작성 1.DOCTYPE선언역활 : 브라우저에게 "이 문서는 HTML5로 작성됨"을 알려줍니다.중요 포인트 : HTML 문서의 첫 줄에 반드시 작성해야 하며, 대소문자 구분없이 사용 가능합니다. 2.html 태그와 언어 설정 역활 : HTML 문서의 시작과 끝을 나타내며, 모든 컨텐츠를 감쌉니다.속성 lang="ko":문서의 주 언어가 한국어(ko)임을 설정합니다.-주요값 -ko: 한국en: 영어jp:..

<HTML/CSS/JavaScript>HTML, CSS, JavaScript 가 뭐야? - 2

학습 목표1.간단 개념 정리 HTML이란 -복습 HTML, 즉 HyperText Markup Language는 웹페이지를 작성하기 위한 표준 마크업 언어입니다. "HyperText"는 페이지 간에 링크를 생성할 수 있음을 의미하고, "Markup Language"는 텍스트에 태그를 적용하여 그것이 어떤 역할을 하는지 정의할 수 있음을 의미합니다. CSS란?Cascading Styke Sheets Language종속형 캐스케이딩 스타일 시트는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어로, HTML과 XHTML에주로 쓰이며, W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. 기본 파일명은 style.css이다. 종속형 - HTML과 함께 쓰이는 언어이다. 스타일 지정하는 3가..

(HTML/CSS/JavaScript) HTML이란 뭘까? -1

학습 목표 1. 웹 문서에 확장자는 무엇일까?2. 웹 표준이라는 의미?3. 그래서 HTML에 의미가 뭘까?========================================================================컴퓨터에서 사용하는 모든 파일에는 각각 고유의 형식이 있다.웹에서는 웹에 맞는형식인 *.html(또는 *.htm)로 문서를 저장해야 한다. HTML5? HTML 대부분의 웹 브라우저에서 HTML5 지원하게 되면서 현재 HTML5의 공식 명칭은 'HTML'이다 사용 중이 웹브라우저가 HTML5를 얼마나 지원하는지 확인하려면(작동하지 않는듯하다.)https://html5test.com/ HTML에 의미를 좀 더 자세히 알아 봅시다. HTML Hyper Text Mark..

(JAVA) 성능 최적화(HikariCP)와 커넥션 풀이란? - 7

라이브러리 추가해보기 https://mvnrepository.com/artifact/com.zaxxer/HikariCP/5.1.0 // https://mvnrepository.com/artifact/com.zaxxer/HikariCP implementation group: 'com.zaxxer', name: 'HikariCP', version: '5.1.0' | 의존성 관계 발생 확인 implementation("org.slf4j:slf4j-api:2.0.0-alpha5")implementation("org.slf4j:slf4j-simple:2.0.0") testImplementation("org.slf4j:slf4j-simple:2.0.0") https://mvnrepository.com/art..