HiDevelop

가상 클래스( pseudo class) 가상 클래스는 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스이다. 직접 요소에 클래스를 선언하는 것이 아니라, 약속된 상황이 만족되면 브라우저 스스로 클래스를 적용해준다. 문서 구조와 관련된 가상 클래스 :first-child : 첫 번째 자식 요소 선택 :last-child : 마지막 자식 요소 선택 HTML CSS JS 첫 번째 와 마지막 에 가상 클래스가 적용됩니다. 실제 요소에는 class 속성이 없지만 가상 클래스가 적용되어 아래의 코드처럼 실행됩니다. HTML CSS JS 앵커 요소와 관련된 가상 클래스 :link : 하이퍼 링크이면서 아직 방문하지 않은 앵커 :visited : 이미 방문한 하이퍼링크를 의미 (하이퍼 링크는 앵커 요소에 h..

문서 구조 관련 선택자 HTML : Hyper Text Markup Language CSS는 문서를 꾸며줍니다. JavaScript는 문서를 동적으로 제어할 수 있습니다. HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다 부모 - 자식 관계 부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 하나 자식 요소는 상위 요소에 포함되어 있는 가장 가까운 하위 요소로 여러 개일 수 도 있습니다. 의 부모 요소: ↔ 의 자식 요소: 의 부모 요소: ↔ 의 자식 요소: , 의 부모 요소: ↔ 의 자식 요소: 의 부모 요소: ↔ 의 자식 요소: 의 부모 요소: ↔ 의 자식 요소: , 조상과 자손 부모와 자식의 관계를 포함한 확장관계 조상 요소는 그 ..

Selector(선택자) 복잡하고 다양한 요소들 사이에서 내가 원하는 요소만 선택할 수 있도록 도와줌 요소 선택자 선택자 중에 가장 기본이 되는 선택자이며, 태그 선택자라고도 함 선택자 부분에 태그 이름이 들어감 문서 내 선택자에 해당하는 모든 요소에 스타일 규칙이 적용 쉼표를 통해 그룹화 가능 "*"기호를 통해 전체 선택도 가능 class 선택자 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법 HTML을 수정해 class 속성을 추가해야함 class는 글로벌 속성이기 때문에 어느 태그에서도 사용가능 class속성에 값을 넣게 되면, class 선택자를 이용해서 해당 요소에 스타일 규칙 적용 가능 다중 클래스 선택도 가능 .(마침표)calssname { style } 형식으로 표현..

CSS(Cascading style sheet) HTML(마크업 언어)를 꾸며주는 언어 html이 웹페이지의 정보를 표현한다면, CSS는 html을 보기 좋게 디자인하는 역할 CSS를 참고하기 좋은 사이트 CSS Zen Garden: The Beauty of CSS Designhttp://www.csszengarden.com CSS Zen Garden: The Beauty of CSS Design So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the ex..

콘텐츠 모델 HTML5 버전에서 HTML요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙들을 그룹화 시켜놓은 것 Flow 문서에서 사용되는 대부분의 요소 문서 내에 자연스러운 흐름에 의해 배치되는 요소들 일부 Metadata 태그들만을 제외하고 대부분의 태그들이 Flow에서 속함 Sectioning 문서의 구조와 관련된 요소들이 들어감 heading, footer 범위를 결정하는 요소, 아웃라인이 있음 , , , .... 등 Heading 섹션의 헤더를 정의하는 요소 ,,,,, Rharasing 문서의 텍스트이며 문단 내부레벨로 마크업 하는 요소 , , , , , , ...등 Interaetive 사용자와 상호작용하는 요소 Form 요소 관련 태그들 (, , ...등) Metadata 콘텐츠..

사는 지역 : 서울 경기 충청 제주 강원 전라 선택 목록 상자 또는 콤보 박스라고 불림 몇 개의 선택지를 리스트 형태로 노출하고 그중 하나를 선택할 수 있게 하는 태그 multiple 속성 : select의 경우 한 개만 선택할 수 있지만, multiple 속성을 사용할 경우 다중 선택이 가능해짐 태그 내부에 를 사용해 각 항목을 나타냄 selected : 태그 내에 사용하는 속성으로 radio, checkbox 의 checked 처럼 초기 값으로 설정되는 값 결과 HTML 삽입 미리보기할 수 없는 소스 자기소개 : 한 줄만을 입력할 수 있는 와 달리 여러 줄의 텍스트를 입력할 때 사용 cols : 가로 크기를 조절하는 속성(한 줄에 들어가는 글자의 수, 수치의 의미는 평균적인 글자의 너비로 정확히 글자..

File 컴퓨터에 있는 파일들을 올릴 때 사용하는 타입 결과

폼 관련 요소들 서버에 데이터를 전달하기 위한 요소들 예시 : 회원가입, 이벤트 프로모션 INPUT 요소 대표적인 폼요소로, 다양한 Type 속성으로 여러 종류의 입력 양식을 나타냄 사용되는 Type : text, password, radio, title, image, submit, reset, button Text 주로 아이디, 주소, 전화번호 등 단순한 텍스트를 입력할 때 사용 placeholder 속성 : 사용자가 입력하기전 미리 화면에 노출하는 값으로, 입력하는 값의 양식을 표현할 수 있습니다.(사용자가 값을 입력하면 사라집니다.) ID : 결과 HTML 삽입 미리보기할 수 없는 소스 Password Password : 암호와 같이 공개할 수 없는 내용을 입력할 때 사용 화면에는 text와 같이 ..

표 : 데이터 표를 나타내는 태그 : 표 : 제목 행 그룹 : 표 본문 행을 그룹 : 바닥 행을 그룹 : 데이터 셀( 표에 있는 한 칸) : 제목 행 셀 : 행 ( table-row) : 표 제목 사용법 태그는 표를 나타내는 태그로 자식 태그로 위에 있는 thead, tbody...caption 태그 등이 들어갈 수 있습니다. 내용 태그 표의 제목을 나타냅니다. 태그는 표에서 하나의 행을 표현합니다. 안의 내용(자식태그)로 td와 th가 들어갑니다. 내용 태그는 하나의 셀을(표에서 한칸)을 나타냅니다. 내용 태그는 제목 행(가장위에 있는 줄 해당 태그 안에 있으면 굵은 글씨로 표현됩니다.)에서 하나의 셀을 나타냅니다. Monthly Saving Month Savings January $100 Februa..

제목(heading) Tag 문서 내 제목을 표현할 때 사용 ...( 숫자값이 높아질수록 작은 값을 나타내는 소제목을 나타낼 때 사용) Heading 단락, 개행 태그 i have... 이란 대한민국 미국 태그는 글의 단락을 나타낼 때 사용 태그는 개행을 나타내는데 사용 역사 개발 팀 버너스리 1980년, 유럽 입자 물리 연구소... 두었다. 결과값 : HTML 삽입 미리보기할 수 없는 소스 , ... 태그 : 글자를 이탤릭체로 표현 : 글자를 굵게 표현 : 글자에 밑줄을 표현 : 글자에 중간선을 표현 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet HTML 삽입 미리보기할 수 없는 소스 그 외에도 다양한 태그 참고 링크!! https://developer..