목록WEB (171)
Jam's story
[선택자] 선택자 간의 관계설명 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
[CSS] float과 clear 속성
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 ..
[CSS] 웹페이지 구현
부모태그에 display : table을 선언해 주고 자식태그에 display : table-cell을 선언해주면 갯수가 몇개가 되든 동일한 간격으로 영역 가지게 됩니다 My Website Lorem ipsum dolor sit amet. Link Link Link Link About Me Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae. Popular Post Image Image Image Follow Me Some Test... TITLE HEADING Title description 2020.12.04 Image Some Text... Lorem ipsum dolor sit amet, consectetur..
버튼에 마우스를 올렸을 때 천천히 늘어나는 효과 버튼 HTML 삽입 미리보기할 수 없는 소스