우리는 우리가 생각하는 것이 됩니다

* 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는 마지막 태그에만 적용하고 싶을 때 사용한다. 첫 ..

마우스를 올리면 :hover로 디자인이 변경되고, transition으로 애니메이션 효과가 들어간다. 실습 1a 태그의 href를 비워놓으면 나중에 제이쿼리가 작동하지 않기에, #none을 작성해 두는 게 좋다. transition 속성은 :hover가 아닌 곳에 작성해야 한다.(a 태그는 body 태그의 color를 따르지 않는다.)  마우스를 올린 곳에 효과가 적용되는 것을 확인. 실습 2 마우스를 올리면 0.5s 동안 서서히 검은색으로 바뀌고 마우스를 빼면 0.5s동안 원래대로 돌아간다.

* CSS 포지션 속성부모 요소 Relativerelative는 absolute로 배치된 자식 요소의 기준점을 설정하기 위해 사용된다.자식 요소가 absolute로 설정된 경우, relative로 설정된 부모 요소를 기준으로 위치가 결정된다. 자식 요소  Absoluteabsolute는 특정 위치에 요소를 배치해야 할 때 유용하다. 예를 들어, 팝업 메뉴, 툴팁, 모달 창 등을 화면의 특정 위치에 고정할 때 사용된다.absolute로 설정되면 top, right, bottom, left 속성을 사용해 지정된 조상 요소를 기준으로 이동한다. * 코드 예시 position: relative;를 제거. 부모 요소가 브라우저로 적용되어 출력. * 포지션 속성을 통해 자식요소 위치시키기top: 0; left: 0..

* 시맨틱 태그가장 상위 컨테이너: .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..

* floatnone(default): float 속성 적용 안 함left: 컨테이너의 왼쪽에 배치right: 컨테이너의 오른쪽에 배치margin: auto 요소를 중앙에 배치 코드 예시 자식 요소에 float 적용 자식 요소에 float 속성이 사용되면 부모요소는 자식요소가 없다고 판단하여 높잇값(height)을 잃는다. * 높잇값 찾기 overflow: hidden;부모요소에 overflow: hidden;을 추가하였더니 높이값이 없어지지 않는 것을 알 수 있다.  float: right; 로 오른쪽 배치  span 태그는 인라인요소이기 때문에 크기값을 갖지 못하기에, 인라인블록요소로 변경하여서 width와 height 적용하였다.margin: auto; 는 블록요소에만 적용되기에 중앙배치가 되지 않..

* 정리 * 인라인(inline) 요소 인라인 요소는 기본적으로 가로 배치.크기값을 가질 수 없기에 width와 height 적용 안됨.좌우 마진은 갖지만 상하 마진은 가질 수 없음. * 블록(block) 요소블록 요소는 기본적으로 세로 배치.width와 height 적용 가능.상하좌우 모두 마진을 가질 수 있음. * 인라인 블록(inline block) 요소css 코드의 주석을 보면, 인라인 요소와 블록 요소 성질을 모두 가지고 있는 것을 확인할 수 있다. * 요소 변경: display 속성값: block, inline-block, inline, none, flex  display: inline-block으로 인라인 요소를 인라인블록요소로 변경.상하좌우 마진 모두 적용됨.width 적용됨.

* box-shadowinset: 안쪽 그림자offset-x: 수평 그림자의 offset 값offset-y : 수직 그림자의 offset 값blur: 그림자 가장자리를 부드럽게 처리color: 색상 지정 코드 예시 * text-shadow코드 예시 코드 예시 2

* border: 테두리 설정border-style: 테두리 스타일 지정value: solid, dashed, dotted, double, groove, inset, outset border-width: 테두리 두께 지정value: px, %, thin, medium, thick border-color: 테두리 색상 지정value: color 코드 예시 1오른쪽 코드처럼 border 속성을 한 줄에 한 번에 쓸 수도 있다.   코드 예시 2 코드 예시 3상하좌우 속성을 따로 지정할 수 있다. * border-radius: 엘리먼트 코너 둥글게 하기  * padding, margin크기 값을 2개 사용하는 경우: 상하, 좌우ex) margin 30px, 50px; 크기의 값을 4가지 사용할 경우: 상, 우..

* 코드 예시자식 선택자 .box > divbox 클래스 바로 아래에 있는 직계 자식인 div에 스타일을 적용.'>' 기호는 직계 자식 관계를 나타낸다. 자손 선택자 .box > div divbox 클래스 바로 아래에 있는 직계 자식인 div 안에 있는 자손 div에 스타일 적용.'>' 기호 없이 스페이스바로 후손 관계를 나타낸다.

* 텍스트 행간 높이 설정 line-height line-height를 px단위로 설정행 간의 높이가 설정된 것을 확인할 수 있다.하지만 line-height를 px로 설정하면 폰트사이즈에 맞게 커지거나 줄어들지 않고 px 크기만큼 고정되기 때문에, em 단위를 사용하는 것이 좋다.  line-height를 em 단위로 설정 * font-style  * 선으로 텍스트 꾸미기 text-decoration밑줄 underline 윗줄 overline 취소선 line-through * text-transform첫 글자를 대문자로 변환 capitalize  대문자로 변환 uppercase 소문자로 변환 lowercase * 목록 스타일 list-style