CSS (59) 썸네일형 리스트형 [CSS] 단위(1) - px, % ▶ px - px(픽셀) 단위를 사용해서 각 사이즈를 정의함. - px 단위는 엄밀히 말하면 해상도에 따른 상대 단위를 의미. - 해상도에 따라 px 단위가 달라질 수 있음. - 그러나 화면상에 정확한 px 단위를 통해 절대적으로 고정하는 개념이라고 이해해도 사용상에는 무방. ▶ % - % 단위는 기본적으로 부모 요소의 가로 너비에 영향을 받음. - 위와 같이 % 단위로 입력해도 결과 화면상으로는 사이즈에 변화가 없음. [CSS] Reset ▶ CSS Reset - 브라우저가 가지고 있는 기본적인 CSS 스타일을 초기화하는 방법 ※ 초기화를 해야 하는 이유 1. - 위의 예시에서는 각각 의미를 가지고 있는 태그 사용. - 각 요소들은 브라우저 화면에서 특정한 스타일을 가지고 있는 형태로 출력됨. - 이때 사용자들은 특정 브라우저만 사용하는 것이 아니기 때문에 다양한 사용자와 브라우저를 고려해야 함. - 브라우저에서 제공하는 스타일들은 표준화되어 있지 않기 때문에 각 브라우저마다 출력되는 모양이 달라질 수 있음. - 만들고자 하는 모양을 브라우저마다 모두 동일하게 출력해야 하기 때문에 초기화 후 사용해야 할 필요가 있음. 2. - 결과 화면에서는 위쪽과 왼쪽에 각각 원하지 않은 여백이 생김. - 이는 가 기본적으로 가지고 있는 여백으로, 브라.. [CSS] 상속 ▶ 상속(inheritance) - HTML, CSS에서도 조상(상위) 요소로부터 자손(하위) 요소로 CSS의 명령 또는 속성들이 상속될 수 있음. - 실제로 위의 예에서 .ecosystem에 해당하는 생태계 텍스트뿐만 아니라 그 하위의 동물, 식물, 호랑이 등의 요소들까지도 빨간색 텍스트로 변경됨. - 생태계(.ecosystem)에 적용된 색상이 하위 요소들에도 적용된 것. - 특정 CSS 속성들은 조상 요소에 지정하는 것만으로도 하위 요소에 영향을 미칠 수 있음. - 상속되는 속성들은 대부분 글자를 다루는 속성. ※ 상속되는 속성들(properties) - font - font-size - font-weight - font-style - line-height - font-family - color -.. [CSS] 속성 선택자(Attribute Selectors) ▶ 속성 선택자(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을 포함하며, 그 속성의 값이 .. [CSS] 가상 요소 선택자(Pseudo-Elements Selectors) ▶ 가상 요소 선택자(Pseudo-Elements Selectors)- CSS를 통해 HTML에 가상 요소를 생성해서 제공. - 가상 요소 선택자의 기호는 :: 1. before - E 요소 내부의 앞에 내용, contents를 삽입. - 사용 방법 E::before - 가상 요소를 삽입하는 것. - 가상 요소 선택자 사용 시에는 content 속성을 반드시 작성해야 함. - 작성하지 않을 경우 위의 예시와 같이 아무것도 적용되지 않음. - 내용을 적지 않더라도 필수로 사용해야 함. - 별도의 내용을 적지 않을 경우 content: "";와 같이 작성. 2. after - E 요소 내부 뒤에 내용, contents를 삽입 - 사용법 E::after ※ before/after의 경우 앞뒤에 가상의 요소를 .. [CSS] 가상 클래스 선택자(Pseudo-classes Selectors) ▶ 가상 클래스 선택자(Pseudo-classes Selectors) - Pseudo는 가상, 가짜를 의미함. 가상/가짜 클래스를 제공하는 개념. - 기본 선택자에 붙여 사용. - 가상 클래스 선택자 기호는 : - 가상 요소 선택자 기호 ::와 혼동하지 않도록 주의. 1. hover - 요소 E에 마우스 포인터가 올라가 있는 동안에만 E 선택. 마우스 오버 시에만 동작함. - 사용법 E:hover - E 자리에는 기본 선택자 4가지(전체 선택자, 태그 선택자, 아이디 선택자, 클래스 선택자) 중 하나를 사용. 2. active - 요소 E를 마우스로 클릭하고 있는 동안에만 E 선택. 클릭하고 있는 동안에만 동작. - 사용법 E:active 3. focus - E가 포커스된 동안에만 E를 선택. - 사용법.. [CSS] 복합 선택자(Combinators) ▶ 복합 선택자(Combinators) 1. 일치 선택자(Basic Combinator) - 조건 E와 F를 동시에 만족하는 요소 선택 시 EF - 일치 선택자는 기본 선택자 4개 중 둘 이상을 붙여서 작성함. - 두 조건을 동시에 만족하는 요소를 찾음. 2. 자식선택자(Child Combinator) - HTML에는 부모 요소와 자식 요소라는 개념이 있고 이들은 상대적임. - E의 자식 요소 F를 선택 시 E>F - 실질적으로는 마지막 부분에 있는 선택자만 찾는 것이고 앞 부분의 선택자는 일종의 조건에 해당함. - 위의 예시에서 결과적으로는 .color-red라는 요소를 찾는 것인데 그 조건이 ul 태그의 자식이어야 한다는 것. 3. 후손(하위, 자손) 선택자(Descendant Combinator) .. [CSS] 기본 선택자(Basic selectors) ※ 선택자(Selectors)? html과 css를 연결. ▶ 기본 선택자(Basic Selectors) 1. 전체 선택자(Universal Selector) - 요소 내부의 모든 요소를 선택. - 전체 선택자를 의미하는 기호는 * - 전체를 선택하기 때문에 활용도가 떨어질 수 있음. 2. 태그 선택자(Type Selector) - 태그 이름으로 검색하는 것. - 태그 이름이 E인 요소 선택하려는 시 태그 선택자로는 E 사용. - 태그 이름을 그대로 사용. - 앞뒤로 기호가 없는 경우 태그 선택자로 해석됨. - 태그 선택자는 이 HTML 문서에서 사용한 모든 태그들을 전부 선택하기 때문에 활용도가 떨어질 수 있음. 3. 클래스 선택자(Class Selector) - HTML의 전역 속성 class, 즉 .. 이전 1 ··· 4 5 6 7 8 다음
