본문 바로가기

WEB

 (33)
의사 요소 HTML에서 접근할 수 없는 정보와 소스 문서에 존재하지않는 콘텐츠에 대한 참조가 가능한 수단 ‣ 사용방법 - '기본선택자::의사요소' 의사요소 설명 ::first-line 특정 요소를 사용하는 문단의 첫 번째 줄의 텍스트를 선택 ::first-letter 첫 번째 줄의 텍스트에서 첫 번째 글자를 선택 ::before 요소 내용의 맨 앞에 추가되는 내용과 스타일 지정 ::after 요소 내용의 맨 뒤에 추가되는 내용과 스타일 지정 Love is patient, love is kind. It does not envy, it does not boast, it is not proud. It is not rude, it is not self-seeking, it is not easily angered, it k..
의사클래스 , 결합자, 의사요소 1. 의사 클래스 : 해당 요소에는 실제로 존재하지 않지만 해당요소에 클래스가 선언된 것처럼 간주하여 만든 선택자 - 사용방법 : '기본선택자:의사클래스' 구분 의사클래스 설명 링크 의사 클래스 :link 아직 방문한 적이 없는 링크를 선택 :visited 사용자에 의해 방문한 적이 있는 링크를 선택 사용자 동작 의사 클래스 :hover 사용자가 포인팅 장치로 특정 요소를 지정하는 동안에 적용 :active 사용자에 의해 요소가 활성화되는 동안에 적용 :focus 요소가 포커스를 가지고 있는 동안에 적용 이름을 입력하세요: 구글 네이버 다음 : 선택자를 문맥이나 요소의 구조를 기반으로 결합하는 방법 종류 • 자손 결합자 -> '선택자1 · 선택자2' • 자식 결합자 -> '선택자1 > 선택자2' • 인접..
Selector(선택자) 선택자 이름 선택자 형태 설명 전체 선택자 * 모든 요소에 스타일 적용 타입 선택자 요소명 지정한 요소에만 스타일 적용 클래스 선택자 요소명.클래스명 . 클래스명 지정한 클래스명을 사용한 요소에만 적용 아이디 선택자 요소명#아이디명 #아이디명 지정한 아이디명을 사용한 요소에만 적용 속성 선택자 요소명[속성] 지정한 속성에 해당하는 요소에만 적용 전체 선택자, 타입 선택자 • 전체(universal) 선택자 '*' 기호 사용 -> 문서의 문서 요소에 스타잉을 적용하는 경우 *{ color: red; } • 타입 선택자 스타일을 적용할 HTML요소의 이름을 직접 사용 table{color:blue} ul{ color:red; font-style: italic;} • 클래스 선택자 몇 개의 요소를 하나의 클래..
CSS 개요 CSS (Cascading Style Sheet) : 웹 문서에 글꼴, 색상, 여백과 같은 스타일을 적용하기 위한 간단한 메커니즘 장점 • 기능의 확장 및 다양한 스타일 제공 - HTML의 단순한 기능에 대해 CSS 를 통해 기능의 추가/변경 • 통일성 있는 웹 페이지 디자린 가능 - 한 번의 속성 정의 로 여러 요소/문서에 적용 가능 • 웹 문서의 내용과 스타일 정보의 분리 - 개별적 수정이 가능 = 문서의 가독성 향상, 용이한 수정 • 웹브라우저의 로딩 시간 단축 - 통일된 문서 양식이 사용을 통해 처리할 데이터의 양의 감소 CSS 정의 형식 선택자{속성: 값;} Seletor (선택자) : 스타일을 적용하려는 HTML의 요소 Declaration{선언부} : 각 선언은 세미콜론으로 구분 Proper..
<textarea>태그 태그 : 여러 줄에 해당하는 텍스트를 입력받을 때 사용 -> 한 줄에 해당하는 짧은 텍스트 입력 주요 속성 name="이름" -> 텍스트 영역의 이름 rows="숫자" -> 텍스트 영역의 높이(라인 수) cols="숫자" -> 텍스트 영역의 너비(한 줄에 입력할 수 있는 글자 수) wrap="속성 값" -> 폼으로 전송될 때 줄바꿈 포함 여부 • soft -> (기본값) 자동으로 줄바꿈이 포함되지 않음 • hard -> 자동으로 줄바꿈이 포함되어 전송(cols 속성 지정이 필요) readonly -> 텍스트 영역 읽기 전용(내용출력)으로만 사용 • autofocus, disabled, form, maxlength, placeholder, required 등도 사용 가능 textarea 태그 태그 드롭다운..
HTML - input 태그 태그 : 사용자가 데이터를 입력할 수 있는 입력 타입을 지정 - type 속성의 값에 따라 다양한 형태의 입력 타입을 가짐 - 종료 태그 없이 사용 속성 ( type 속성의 값에 따라 사용 가능한 속성이 달라짐) accept, alt, height, width, src, autocomplete, autofocus, checked, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, list, min, max, step, minlength, maxlength, multiple, name, pattern, placeholder, readonly, required, size, type, value type 의 속성 값..
HTML - <form> 태그 태그 : 사용자로부터 다양한 형태의 데이터를 입력받기 위해 필요한 입력 요소들을 담는 컨테이너 ° 입력요소는 태그 내에서 사용해야 함 - 입력 요소 -> , , 등 ° 결과 화면에서는 아무것도 표시되지 않음 ( , , 등> 주요 속성 1. action="URL" - 데이터를 전달받아 처리할 페이지의 URL 지정 2. method="전송방식" - 데이터 전송에 사용하는 HTTP 방법을 지정 method="get" 또는 method"post" 3. 그 외 - name(폼이름), accept-charset(문자 인코딩 방식), autocomplete(자동완성기능), enctype(method="post"일 때 데이터 인코딩 방식), novalidate(데이터의 유효성 검사하지 않음), target(처리결과를 ..
css 활용 My Home Page My Home Page My Home Page Use CSS to make a yellow, 1 pixel thick, border around all paragraphs. This is a paragraph This is a paragraph This is a paragraph Use the correct HTML to make the text below into a link to "default.html" Visit our HTML tutorial. Use CSS to remove the underline from the link. Images Use the correct HTML attribute to make the link open in a new window. HTML ..

티스토리툴바