목록분류 전체보기 (308)

다연이네

[days03] dropdown

특정 부분에 마우스를 올리면 창이 새로 뜨는 것 (ex. 실시간 검색어) Mouse over me Hello World Lorem ipsum dolor sit amet. Blanditiis natus sequi quibusdam reprehenderit? Similique vero explicabo repudiandae nam. Voluptatum voluptatem maxime corporis eveniet! Illum incidunt voluptates inventore repellat. Tenetur perspiciatis dolorum nemo nostrum? Perspiciatis commodi culpa temporibus numquam. Eaque vel iure et hic. Volupta..
Web/CSS 2020. 12. 7. 22:30
[days03] 메뉴바 여닫기

메뉴 버튼(三)을 누르면 메뉴가 스르르 열리고 화면이 어두워진다. 아무 메뉴나 누르면 버튼 색이 변하고, x 버튼을 누르면 스르르 닫힌다. 메뉴가 열릴때는 메인 쪽의 marginLeft를 줘 겹치지 않게 하고 닫힐때 다시 marginLeft를 거둔다. 자바스크립트에서는 css처럼 -(하이픈)을 사용하지 않고 대문자로 바꾼다. css margin-left : 250px -> js marginLeft="250px" × About Services Clients Contact Lorem ipsum dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem rem cupiditate distinctio adipisci quam quasi cul..
Web/CSS 2020. 12. 7. 21:45
[days03] ::의사 요소 - 요소의 지정된 부분을 스타일링 + css 카운터

::의사요소 ::before 의사요소 - 요소의 내용 이전에 일부 내용을 삽입할 수 있음 ::after 의사요소 - 요소의 내용 이후에 " ::first-letter 첫글자만 ::first-line 첫줄만 ::selection 드래그시 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta voluptatem fugit magni esse impedit pariatur inventore dolor delectus commodi temporibus tempora repellat assumenda tenetur deserunt tempore. Accusantium nemo accusamus mollitia. Lorem ipsum dolor sit...
Web/CSS 2020. 12. 7. 21:28
[days03] :의사 클래스 - 특수 상태를 정의하는 클래스

1. a:link{} a:visited {} a:hover {} a:active {} 2. :first-child :last-child :first-of-type :last-of-type 3. :checked :focus :disabled :empty :hover 예시 Hover over me Lorem ipsum dolor sit amet. 위 코딩을 JQuery를 이용하여 바꾸기 Hover over me Lorem ipsum dolor sit amet. 2. :first-child 자식요소 중에 가장 첫번째를 선택하는 가상클래스 :last-child :first-of-type 마찬가지로 자식 요소중에 가장 첫번째를 선택하는 가상클래스 :fist-child와 차이점) 첫번째 자식 요소로 특정하는 순서를..
Web/CSS 2020. 12. 7. 20:51
[days03] CSS 결합자(선택자 간의 관계)

선택자 선택자 선택자 > 선택자 선택자 + 선택자 선택자 ~ 선택자 body css 결합자 == 선택자(selector) 간의 관계 후손 선택자 Lorem ipsum dolor sit amet. lorem5 lorem5 Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing. Saepe dolorum libero incidunt delectus quaerat numquam. style p,h3{ border: 1px solid red; } 선택자 > 선택자 : 직계자식 div>p{ background-color: yellow; } 선택자 > 선택자 : 직계자식 + 후손 div p{ background: pink; } 선택자 +..
Web/CSS 2020. 12. 7. 19:40
[days03] 수평, 수직 정렬

Previous & Next 버튼 Previous & Next 버튼 « Previous Next » ‹ › 1. 가운데 정렬 - 텍스트 가운데 정렬 - div 요소 가운데 정렬 - 이미지 가운데 정렬 css 수평, 수직 정렬 hello world! 오른쪽 정렬 right 2 텍스트 수평/수직 정렬 div안의 p - 수평중앙, 수직중앙 2-1 1. height 속성과 line-height 속성을 동일하게 설정 line-height: 200px; vertical-align: middle; 수평중앙, 수직중앙 2-2 다른 방법도 존재한다. 2. positon: absolute + transform 속성 사용 position: relative; (부모에게 relative 적용) position: absolute..
Web/CSS 2020. 12. 7. 19:26
[days03] 팝업폼(Popup Form)과 반응형 폼(Responsive Form)

팝업폼(popup Form) 팝업(popup) 폼(form) Open Form Login Email Password Login Close 반응형 폼(Responsive Form) 반응형 폼(Responsive Form) First Name Last Name Country Australia Canada USA Subject
Web/CSS 2020. 12. 7. 18:49
[days03] 1) 오버플로우(overflow) 2) float / clear

1) overflow 속성 너무 커서 영역에 맞지 않는 내용을 제어하는 속성 visible: (기본값) hidden: 오버플로가 잘리고 나머지 내용은 보이지 않는다. scroll: 오버플로가 잘리고 스크롤바 생성 auto: scroll 속성과 유사하지만 필요한 경우에만 스크롤바 추가 주의: height 속성을 지정한 블럭모드 요소에 대해서만 overflow가 작동한다. css overflow 속성: 너무 커서 영역에 맞지 않는 내용을 제어하는 속성 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nemo quo voluptate voluptatibus accusantium officiis saepe repellat labore n..
Web/CSS 2020. 12. 7. 13:46
Prev 1 ··· 17 18 19 20 21 22 23 ··· 39 Next