2023/10/18

의사 요소 해당 HTML 요소의 특정 부분만을 선택 하나의 HTML 요소에 여러 개의 의사 요소를 동시에 적용 가능 선택자::의사요소이름 {속성: 속성값;} ::first-letter 텍스트의 첫 글자만을 선택 블록(block) 타입의 요소에만 사용 font 속성 color 속성 background 속성 margin 속성 padding 속성 border 속성 text-decoration 속성 text-transform 속성 line-height 속성 float 속성 clear 속성 vertical-align 속성 (단, float 속성값이 none일 경우에만) ::before 특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입 ::after 특정 요소의 내용(content) 부분 바로 뒤..

선택자 CSS를 적용할 위치의 HTML 요소 전체 선택자 * { margin: 0; padding: 0; } HTML 문서 내부의 모든 요소에 같은 CSS 속성을 적용 보통 margin이나 padding 등 브라우저 기본 스타일들을 초기화 할 때 사용 하지만 문서 내의 모든 요소를 읽어야 하기에 페이지 로딩 속도가 느려질 수 있으므로 최소한으로 사용하는 것이 좋음 #wrapper * { border: 1px solid #000; } 전체 선택자는 위의 경우처럼 자식 선택자에도 사용 가능 태그 선택자 태그 선택자는 HTML 요소를 직접 지칭 해당 선택자와 같은 이름을 가진 태그 전부에 속성 적용 태그이름 { 속성1: 속성값1; 속성2: 속성값2; } div { background-color: #000; c..

CSS란? 사용자에게 문서를 표시하는 방법을 지정하는 언어 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어 웹 사이트에서 화면에 표시되는 정보들을 꾸며주는 역할 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어 웹 사이트의 스타일을 일관성 있게 유지할 수 있게 해주며, 그에 따른 유지 보수 편리 HTML - 문장 구조 CSS - 문장 디자인 CSS 사용 방법 인라인 스타일 HTML 요소 안에서 Style 속성 이용 해당 요소에만 스타일 적용 내부스타일 HTML 문서의 태그 내에 태그를 사용하여 스타일을 지정 해당 HTML 문서에만 스타일을 적용 외부스타일 별도의 CSS 파일을 분리하여 HTML 문서에 연결 웹 사이트..

브라우저 지원 여부에 따라 날짜를 선택하기 위한 캘린더 input input 요소를 사용하여 사용자로부터 입력을 받음 input 요소 텍스트 입력(text) 한 줄의 텍스트 입력 받음 검색할 내용을 입력하세요 : 비밀번호 입력(password) 화면에는 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시 사용자 : 비밀번호 : 라디오 버튼(radio) 사용자로부터 여러 개의 옵션 중에서 단 하나의 옵션만을 입력받을 수 있음 이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성 동일 HTML CSS JAVA C++ 체크박스(checkbox) 용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있음 이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 in..

From form 요소를 사용하여 사용자로부터 입력 받고 사용자가 입력한 데이터를 서버로 전송 텍스트 필드에 글자를 입력, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달 action 속성 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시 method 속성 입력받은 데이터를 서버에 전달할 방식을 명시 GET 방식 주소에 데이터(data)를 추가하여 전달 데이터가 주소 입력창에 그대로 나타남 전송할 수 있는 데이터의 크기 제한적 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용 POST 방식 데이터(da..

HTML 요소의 display 속성값 블록 새로운 라인에서 시작 해당 라인의 모든 너비를 차지 다른 HTML 요소들을 하나로 묶는 블록 요소 주로 여러 요소들의 스타일을 한 번에 적용 가상의 레이아웃을 설계 주로 CSS와 연동하여 쓰임 인라인 새로운 라인에서 시작하지 않음 해당 HTML 요소의 내용만큼 너비 차지 텍스트(text)의 특정 부분을 묶는 인라인 요소 텍스트의 특정 부분에 따로 스타일을 적용 CSS와 함께 쓰임 iframe 요소 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입 iframe 요소는 명시된 크기로 삽입되는 창의 크기가 고정 iframe 요소의 테두리 변경 기본값 - 검정색 테두리 iframe 요소의 페이지 변경하기 PHP 수업 확인하러 가기 => 태그의 t..

표 생성 , 등의 태그와 함께 작성 레이아웃 구성시 와 CSS 사용 태그 표의 행 태그 각 열의 제목, 자동으로 굵은 글씨&가운데 정렬 태그 표의 열, 태그 하위 colspan 속성 테이블의 열 합치기 rowspan 속성 테이블의 행 합치기 태그 주석, 테이블 상단에 제목이나 짧은 설명 CSS의 border 속성 border 속성 값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리 두 줄로 표현되는 테두리를 한 줄로 설정 -> border-collapse 속성값을 collapse로 설정 태그 헤더 콘텐츠(header content)들을 하나의 그룹으로 묶을 때 사용 표의 제목 영역, 하위, 상위 반드시 하나 이상의 요소를 포함 태그 표의 본문 영역, 와 같은 위치 태그 표의 아래 영역, 와 같은..