gwooden_코린이

::before ::after 태그::before 해당 태그 부모 before, after -> 자식 (인라인) hello css asdasdasd h1::before { content: "★"; /* 콘텐트 필수 속성 */ color: red; } h1::after { content: "☆"; background-color: red; color: wheat; font-size: 10px; } .con { width: 400px; height: 400px; background: url('../image/bambi.jpg'); position: relative; } .con p { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -5..

첫 번째 p태그 두 번째 p태그 세 번째 p태그 네 번째 p태그 다섯 번째 p태그 여섯 번째 p태그 div p:nth-child(odd) { color: red; } /* odd는 홀수 / even는 짝수 */ div p:nth-of-type(4) { color: blue; } 다른 태그가 썪여있을 경우 type까지 설정해주면 원하는 태그만 잡을 수 있다. 상위 태그 안에 있는 하위태그는 type에서 제외되므로 같은 위치에 있는 태그인지 확인해야 된다. - hover 동적 의사 클래스 link visited hover active focus a { text-decoration: none; } a:link { color: red; } a:visited { color: green; } a:hover { ba..

div { width: 50px; height: 50px; background-color: blue; position: relative; animation-name: ani; /*animation-duration: 3s; 몇 초 동안 진행할지 */ /* animation-timing-function: ease-in; */ /* animation-delay: 3s; 이미지 시작 딜레이 */ /* animation-iteration-count: 2; 반복 횟수 (무한반복은 infinite) */ /*animation-direction: alternate; 역방향 재생 (최소 2번이상 반복 재생 필요) */ /* reverse는 시작자체를 역방향으로 시작 */ /* animation: ani 3s 1s eas..

div { width: 50px; height: 50px; background-color: blue; position: absolute; left: 100px; top: 100px; /* transform: translateX(10px)

HOME 메뉴1 메뉴2 메뉴3 메뉴4 제목 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet dolor quis elit accumsan maximus vel id ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi nec lacinia erat. Vivamus tempor libero lectus, vel pretium dolor volutpat sit amet. Aenean egestas eget est vitae cursus. Donec ut felis dapibus, aliquam arcu qu..

- css 포지션 position .rel { position: static; } 이미지 위치를 옮길 때 left right top bottom .rel { position: relative; left: 50px; } .rel { width: 500px; height: 500px; border: 1px solid black; position: relative; left: 50px; } absolute를 사용할때는 부모 포지션이 static이면 안 .rel { width: 500px; height: 500px; border: 1px solid black; position: relative; left: 50px; top : 50px } .rel img { position: absolute; right: 10..

- html + CSS 네이버 로그인 창 만들어보기 로그인 상태 유지 IP 보안 더욱 간편한 로그인 QR 코드 로그인 일회용 번호 로그인 아이디 찾기 | 비밀번호 찾기 | 회원가입 Copright @ Naver Copr. /* font-family: 'Noto Sans KR', sans-serif; */ @import url('https://fonts.googleapis.com/css2?family=Jua&family=Merienda:wght@600&family=Noto+Sans+KR&display=swap'); * { margin: 0px; padding: 0px; } body { font: 15px/1.8 'Noto Sans KR', sans-serif; } html, body { height: 10..

box1 box2 #container { border: 1px solid black; width: 500px; height: 500px; } /* * { margin: 0px; padding: 0px; box-sizing: border-box; } */ .box1 { border: 10px solid red; width: 100%; box-sizing: border-box; } .box2 { border: 25px solid blue; width: 100px; box-sizing: border-box; } div { margin: 5px; padding: 5px; } box1 box2 box3 box4 div { width: 150px; height: 100px; float: left; text-alig..