▶ px - px(픽셀) 단위를 사용해서 각 사이즈를 정의함. - px 단위는 엄밀히 말하면 해상도에 따른 상대 단위를 의미. - 해상도에 따라 px 단위가 달라질 수 있음. - 그러나 화면상에 정확한 px 단위를 통해 절대적으로 고정하는 개념이라고 이해해도 사용상에는 무방. ▶ % - % 단위는 기본적으로 부모 요소의 가로 너비에 영향을 받음. - 위와 같이 % 단위로 입력해도 결과 화면상으로는 사이즈에 변화가 없음.

▶ CSS Reset - 브라우저가 가지고 있는 기본적인 CSS 스타일을 초기화하는 방법 ※ 초기화를 해야 하는 이유 1. - 위의 예시에서는 각각 의미를 가지고 있는 태그 사용. - 각 요소들은 브라우저 화면에서 특정한 스타일을 가지고 있는 형태로 출력됨. - 이때 사용자들은 특정 브라우저만 사용하는 것이 아니기 때문에 다양한 사용자와 브라우저를 고려해야 함. - 브라우저에서 제공하는 스타일들은 표준화되어 있지 않기 때문에 각 브라우저마다 출력되는 모양이 달라질 수 있음. - 만들고자 하는 모양을 브라우저마다 모두 동일하게 출력해야 하기 때문에 초기화 후 사용해야 할 필요가 있음. 2. - 결과 화면에서는 위쪽과 왼쪽에 각각 원하지 않은 여백이 생김. - 이는 가 기본적으로 가지고 있는 여백으로, 브라..

▶ 상속(inheritance) - HTML, CSS에서도 조상(상위) 요소로부터 자손(하위) 요소로 CSS의 명령 또는 속성들이 상속될 수 있음. - 실제로 위의 예에서 .ecosystem에 해당하는 생태계 텍스트뿐만 아니라 그 하위의 동물, 식물, 호랑이 등의 요소들까지도 빨간색 텍스트로 변경됨. - 생태계(.ecosystem)에 적용된 색상이 하위 요소들에도 적용된 것. - 특정 CSS 속성들은 조상 요소에 지정하는 것만으로도 하위 요소에 영향을 미칠 수 있음. - 상속되는 속성들은 대부분 글자를 다루는 속성. ※ 상속되는 속성들(properties) - font - font-size - font-weight - font-style - line-height - font-family - color -..

▶ 속성 선택자(Attribute Selectors) - HTML의 속성은 attribute, CSS에서의 속성은 property로 구분됨. - 속성 선택자는 HTML의 속성을 선택하는 것. 1. attr - 특정한 속성 attr을 포함한 요소 선택. - 사용법: [attr] ex) [class] - HTML 요소가 해당 속성을 가지고 있는 것만으로도 그 요소를 선택할 수 있음. 2. attr=value - 속성 attr을 포함하며, 그 속성의 값이 value인 요소 선택. - 사용법: [attr=value] - [type="password"]에서 큰 따옴표 ""는 생략할 수 있음. [type=password]와 같이 사용 가능. 3. attr^=value - 속성 attr을 포함하며, 그 속성의 값이 ..

▶ 가상 요소 선택자(Pseudo-Elements Selectors)- CSS를 통해 HTML에 가상 요소를 생성해서 제공. - 가상 요소 선택자의 기호는 :: 1. before - E 요소 내부의 앞에 내용, contents를 삽입. - 사용 방법 E::before - 가상 요소를 삽입하는 것. - 가상 요소 선택자 사용 시에는 content 속성을 반드시 작성해야 함. - 작성하지 않을 경우 위의 예시와 같이 아무것도 적용되지 않음. - 내용을 적지 않더라도 필수로 사용해야 함. - 별도의 내용을 적지 않을 경우 content: "";와 같이 작성. 2. after - E 요소 내부 뒤에 내용, contents를 삽입 - 사용법 E::after ※ before/after의 경우 앞뒤에 가상의 요소를 ..

▶ 가상 클래스 선택자(Pseudo-classes Selectors) - Pseudo는 가상, 가짜를 의미함. 가상/가짜 클래스를 제공하는 개념. - 기본 선택자에 붙여 사용. - 가상 클래스 선택자 기호는 : - 가상 요소 선택자 기호 ::와 혼동하지 않도록 주의. 1. hover - 요소 E에 마우스 포인터가 올라가 있는 동안에만 E 선택. 마우스 오버 시에만 동작함. - 사용법 E:hover - E 자리에는 기본 선택자 4가지(전체 선택자, 태그 선택자, 아이디 선택자, 클래스 선택자) 중 하나를 사용. 2. active - 요소 E를 마우스로 클릭하고 있는 동안에만 E 선택. 클릭하고 있는 동안에만 동작. - 사용법 E:active 3. focus - E가 포커스된 동안에만 E를 선택. - 사용법..