조충희의 개발 블로그

css 선택자란 (5.28)https://notion6780.tistory.com/92 html/css) css 선택자 selector⭐css 선택자는 html 문서에서 스타일을 적용하고 싶은 특정 요소를 선택하는 도구다. css로 html 문서를 렌더링하려면 각 부분을 선택할 수 있어야 한다. 선택자는 html에 "이 요소에 스타일을 입히notion6780.tistory.com 앞서 css선택자의 개념을 짚었다.여기에 가상클래스 선택자의 사용법을 적어본다. ⭐가상클래스 선택자요소의 특정상태나 위치 기준으로 스타일 정의 어떤 상황이나 조건에 있는 요소를 구분한다 문법선택자 뒤에 콜론(:)을 붙인 뒤 다음과 같은 가상클래스를 붙인다.✨ hover 마우스오버 ✨ focus 입력창선택 ✨ first-child..

css선택자란 (5.28)https://notion6780.tistory.com/92 html/css) css 선택자 selector⭐css 선택자는 html 문서에서 스타일을 적용하고 싶은 특정 요소를 선택하는 도구다. css로 html 문서를 렌더링하려면 각 부분을 선택할 수 있어야 한다. 선택자는 html에 "이 요소에 스타일을 입히notion6780.tistory.com 앞서 css선택자의 개념을 짚었다.여기에 결합선택자의 사용법을 적어본다. 결합선택자 여러 선택자를 조합해서 더 구체적으로 대상을 선택 위치와 관계까지 고려한 개념 how 두개 이상의 선택자를 기호로 연결해 사용한다. ✨ 하위선택자 (공백)✨ 자식선택자 (>)✨ 인접형제선택자 (+)✨ 일반형제선택자 (~)하위 선택자(자손선택자) ..

css 선택자란 (5.28)https://notion6780.tistory.com/92 html/css) css 선택자 selector⭐css 선택자는 html 문서에서 스타일을 적용하고 싶은 특정 요소를 선택하는 도구다. css로 html 문서를 렌더링하려면 각 부분을 선택할 수 있어야 한다. 선택자는 html에 "이 요소에 스타일을 입히notion6780.tistory.com 앞서 css선택자의 개념을 짚었다.여기에 주요 기본선택자의 종류와 사용법을 적어본다. ✨전체선택자 (*)✨ 태그선택자 (tag)✨ 클래스선택자 (.class)✨ 아이디선택자 (#id) 1.전체선택자모든 요소를 한꺼번에 선택주로 초기화 작업에 사용된다.* { margin: 0; padding: 0;} 2.태그선택자htm..

자바 IO, 스트림의 개념https://notion6780.tistory.com/94 java) java 입출력 I/O, 키보드 입력스트림⭐자바 입출력 I/Oinput/output데이터를 읽고 쓰는 기능을 제공한다파일, 네트워크, 콘솔 등 다양한 소스와 대상 간 데이터를 주고받는다. 먼저 I/O 시스템은 크게 네 가지 주요 구성 요소로 나눈다notion6780.tistory.com개념설명에 이어 예제를 통해 배워봤다. 예제)txt 파일로부터 입력스트림을 받아봤다.public class MyFileInputStream { public static void main(String[] args) { //파일을 바이트 단위로 읽어들이는 방법 FileInputStream in = n..

⭐자바 입출력 I/Oinput/output데이터를 읽고 쓰는 기능을 제공한다파일, 네트워크, 콘솔 등 다양한 소스와 대상 간 데이터를 주고받는다. 먼저 I/O 시스템은 크게 네 가지 주요 구성 요소로 나눈다 ✨ 바이트 기반 스트림 ✨ 문자 기반 스트림 ✨ 버퍼링 스트림 ✨ 필터 스트림 ⭐ 스트림이란? stream 데이터를 순차 처리하는 연속된 데이터 요소의 흐름이다 추상적인 매개체로서 입출력 작업을 수행한다 스트림을 통해 키보드로 데이터를 받을 수 있고 파일을 통해서도 데이터를 받을 수 있다. 예제) 자바에서 표준입출력은 프로그램과 사용자 사이에서 기본적 데이터 교환 방법을 제공한다public class MySystemIn { public static void main(String[] args) {..

px 픽셀 ppi 픽셀퍼인치 % 퍼센트html 구성요소의 크기를웹페이지 높이와 너비를 기준으로 결정할 수 있도로 한다.em 부모요소의 폰트사이즈를 기준으로 상대크기 계산.. 중첩된다.rem root 폰트사이즈를 기준으로 상대크기 계산 hex 16진수 색상표 #rrggbb ex) #8a2be2: 보라색 rgb(rrr, ggg, bbb) ex) rgb(138, 43, 266)style> html { background-color: green; } .box1 { text-align: center; font-weight: 800; font-size: 4em; background-color: red; /* 현재..

⭐css 선택자는 html 문서에서 스타일을 적용하고 싶은 특정 요소를 선택하는 도구다. css로 html 문서를 렌더링하려면 각 부분을 선택할 수 있어야 한다. 선택자는 html에 "이 요소에 스타일을 입히고 싶어요"라고 알려준다. 👍css선택자는 웹 페이지의 디자인과 레이아웃을 제어하는 첫 단계라고 할 수 있다. ✨ 기본선택자 https://notion6780.tistory.com/97✨ 결합선택자 https://notion6780.tistory.com/98✨ 가상클래스 선택자 https://notion6780.tistory.com/99✨ 속성선택자 등이 있다. https://notion6780.tistory.com/100 문법 a { background-color: yellow; }head> ..

⭐시맨틱 태그semantic tag시맨틱 웹 단순표시를 넘어 데이터가 의미를 가지도록 만드는 철학 기존 논시멘틱 웹구조는 기계가 이해할 수 없다. 시멘틱웹운 메타데이터를 추가해 기계도 이해하고 처리할 수 있게 돕는다. 비시멘틱의 div, span 등은 아무 의미가 없는 단순 구조적 용도를 가진다. 하지만 시멘틱의 article, section은 의미를 가진다. 로고, 제목 등을 포함 --> header style="background-color: bisque;"> h1>나의 블로그h1> p>여러분 환영한다p> header> nav> ul> li>a href="홈">a>li> li>a href="소개">a>li> ..

table태그로 표를 생성할 수 있다.table 태그의 여는태그에 속성을 부여할 수 있다.border 속성은 표의 선굵기를 정의한다.table border="1"> thead> tr> th>이름th> th>국어th> th>영어th> th>수학th> tr> thead> tbody> tr> td>김민수td> td>92td> td>82td> td>72td> tr> tr> td>이영희td> td>83td> td>84td> td>85t..

⭐ 속성attribute속성은 HTML 구성 요소 유형의 수정자 modifier태그에 추가적인 정보를 제공하는 key-value태그 안에 삽입된다.속성값은 따옴표 "" ''로 둘러싸여 있다.주요 속성id 요소의 고유 식별자class 스타일링이나 스크립트를 위한 그룹 식별자src 이미지, 비디오 등의 소스 경로alt 대체 텍스트href 링크 URLhead> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>HTML의 속성에 대해 알아본다title> style> /*css 주석*/ .info-text{ color..