728x90 SMALL css36 [CSS] 순서를 만드는 가상클래스(nth-child, nth-of-type, first-child, last-child * nth-child클래스 이름을 사용하지 않고, nth-child를 사용하여 각 div의 순서를 지정하여 css를 적용하였다. 각 div에 설정한 color가 정상적으로 적용되는 것 확인. html에 h2 태그를 추가해 보았다. 태그 요소와 상관없이 가장 첫 번째 태그인 h2를 1번째로 인식하기 때문에 첫 번째 사각형에 red가 적용된 것을 확인할 수 있다.이 문제는 nth-of-type으로 해결할 수 있다. * nth-of-typenth-of-type은 div 태그임을 확인 및 반영하기 때문에 h2가 아닌 div에 색상이 적용되었다. * first-child, last-childfirst-child는 첫 번째 태그에만 적용, last-child는 마지막 태그에만 적용하고 싶을 때 사용한다. 첫 .. 2024. 7. 28. [CSS] 가상클래스 - 마우스 오버 효과(hover, transition) 마우스를 올리면 :hover로 디자인이 변경되고, transition으로 애니메이션 효과가 들어간다. 실습 1a 태그의 href를 비워놓으면 나중에 제이쿼리가 작동하지 않기에, #none을 작성해 두는 게 좋다. transition 속성은 :hover가 아닌 곳에 작성해야 한다.(a 태그는 body 태그의 color를 따르지 않는다.) 마우스를 올린 곳에 효과가 적용되는 것을 확인. 실습 2 마우스를 올리면 0.5s 동안 서서히 검은색으로 바뀌고 마우스를 빼면 0.5s동안 원래대로 돌아간다. 2024. 7. 27. [CSS] 포지션 속성(부모요소, 자식요소) * CSS 포지션 속성부모 요소 Relativerelative는 absolute로 배치된 자식 요소의 기준점을 설정하기 위해 사용된다.자식 요소가 absolute로 설정된 경우, relative로 설정된 부모 요소를 기준으로 위치가 결정된다. 자식 요소 Absoluteabsolute는 특정 위치에 요소를 배치해야 할 때 유용하다. 예를 들어, 팝업 메뉴, 툴팁, 모달 창 등을 화면의 특정 위치에 고정할 때 사용된다.absolute로 설정되면 top, right, bottom, left 속성을 사용해 지정된 조상 요소를 기준으로 이동한다. * 코드 예시 position: relative;를 제거. 부모 요소가 브라우저로 적용되어 출력. * 포지션 속성을 통해 자식요소 위치시키기top: 0; left: 0.. 2024. 7. 25. [HTML5] 시맨틱 태그 * 시맨틱 태그가장 상위 컨테이너: .container, .wrapper주요 내용: main주제별 컨텐츠 영역: section헤더: header제작 및 저작권 정보: footer컨텐트 내용: article문서 링크 탐색: nav세부 사항: summary추가 세부 정보: details .container > header, section, footer > article > div * 시맨틱 태그로 CSS 레이아웃 설계하기/* 컨테이너 스타일 */.container { border: 1px solid red; /* 빨간색 테두리 */ width: 1200px; /* 너비 1200px */ margin: auto; /* 가운데 정렬 */}/* 헤더 스타일 */header { backgrou.. 2024. 7. 25. 이전 1 2 다음 728x90 LIST
