Jam's story

+ p: i => 모든 p태그의 자식 i p:first-child i =>어떤 요소의 첫번째 자식태그가 p인 i태그 p i:first-child =>모든 p태그의 첫번째 자식이 i 태그 인것 1 Lorem. 2 Maxime.icon 3 Veritatis! 4 Nisi. 5 Dicta. 6 Laboriosam. 7 Eius. 1Lorem. 2Doloremque? 3Ea!

[의사클래스] 링크태그의 각각의 상태를 나타낼 때 의사클래스 ? 요소의 특수상태를 정의하는데 사용된다. : 으로 나타낸다 . 간단한 툴팁(풍선 도움말 ) -div에 마우스를 올렸을때, p태그의 첫번째 자식만 보이게 하겠다. div:hover > p:first-child{ border: 1px solid gray; display: block; }

[선택자] 선택자 간의 관계설명 CSS 결합자 4가지 공백 : 모든 자식 > : 직계 자식 ~ : 뒤의 모든 태그 ,div 요소에서 인접하지 않아도 되는 뒤에 따라오는 모든 형제 레벨 p 요소 + : 바로 뒤 태그 , [바로 뒤에 + 형제]

글씨가 수직/수평정렬하게 1번째방법: height 지우고 padding 속성사용 padding: 70px 0;

/* div요소를 가운데 정렬 */ margin:0 auto; /* 텍스트를 가운데 정렬 */ text-align: center; img를 margin: 0 auto;만 하면 가운데에 정렬되지 않는다. 인라인모드이기때문에 display: block 으로 바꿔준 후에 사용한다. 텍스트를 오른쪽에 정렬 1번째방법 absolute : 일반 흐름에서 제거되고, 요소 겹칠 수 가 있다. position: absolute; right: 0; 2번째 방법 float:right; hello world! HTML 삽입 미리보기할 수 없는 소스 이미지를 가운데정렬 position: 왼쪽 오른쪽 정렬 1번째 방법 ) absolute는 일반 흐름에서 제거되고 , 요소가 겹칠 수 있다 . position:absolute; ri..

한 행이 끝나면, 개행하는 코딩 .row::after{ content: ""; clear: both; display: table; } 반응형 웹 코딩 전체코딩 반응형 폼( Responsive Form ) First Name Last Name Country Australia Canada USA Subject HTML 삽입 미리보기할 수 없는 소스

HTML 삽입 미리보기할 수 없는 소스 팝업 폼 Open Form Login Email Password Login Close

float: 콘텐츠의 위치 지정, 형식지정 요소가 어떻게 떠야하는 지를 지정하는 속성 left, right, none(기본값),inherit clear:both를 나중에 반드시 처리해야한다. div는 블럭모드, 너비 100% clear 속성 float:요소 옆에 있는 요소에 어떤 일이 발생해야 하는지 지정하는 속성 none:기본값 왼쪽 또는 오른쪽 float 요소의 아래로 출력되지 않는다. left :요소가 왼쪽 float요소의 아래로 출력 right: 요소가 오른쪽 float ,요소의 아래로 출력 both :요소가 왼쪽+오른쪽 요소의 아래로 출력 inherit : 부모꺼 물려받는 상속 p영역보다img 크기가 커서 , img 를 p안에 모두 출력하기 위해 1번째 방법 .clearfix{ p영역보다img ..