CSS 클래스 선택자: 실무적 예제

클래스 선택자는 특정 클래스 속성을 가지는 태그들을 선택하여 속성을 바꿀 때 사용한다. 기호는 점(.)을 사용한다. 이는 웹페이지에서 공통적으로, 반복적으로 사용되어지는 특성을 태그의 클래스 속성으로 지정하고, 클래스 선택자를 이용하여 컨트롤할 때 유용하다.

【CSS】 이미지 넣는 2가지 방법

CSS 이미지 넣는 2가지 방법

웹사이트에 이미지를 넣는 방법으로는 2가지 방법이 있습니다. HTML의 img 태그를 이용하는 방법과 CSS의 background 속성을 이용하는 방법이 있습니다. 이 둘의 기본 사용 방법과 주의점들에 대해서 알아보겠습니다.

【CSS】 상속의 의미

CSS 상속의 의미

CSS에 사용되어 지는 프로퍼티들은 상속 가능한 것들과 상속 불가능한 것들로 구성됩니다. 상속의 의미를 알아보기 위해 상속 가능한 프로퍼티 color와 상속 불가능한 프로퍼티 margin을 이용한 예제를 통해 알아보겠습니다.

【CSS】 글자 세로 정렬하기 | vertical-align

CSS의 vertical-align에 대해서 알아봅니다. vertical-align은 줄 안에서 글자들의 수직방향으로 정렬을 시킬 때 사용합니다. 따라서 줄의 개념이 선행되어야 하고, 줄 안에 8가지의 정렬선에 대해서 알아봅니다.

【CSS】 SNS 아이콘을 글자로 만드는 방법

SNS 아이콘 만들기

Font Awesome을 이용하면 페이스북, 트위터, 인스타그램, 유튜브 등과 같은 SNS 아이콘을 쉽게 만들 수 있다. 직접 이미지를 다룰 필요없이, CSS파일 CDN을 다운받기만 하면, 간편하게 아이콘을 만들 수 있다.

CSS table 기본 CSS 설정값 (Default CSS setting)

테이블 기본 CSS 설정값

브라우저에 설정된 table 요소의 기본 CSS 설정값에 대해 완벽히 정리한다. 워드프레스와 같이 CSS 스타일이 설정된 곳에서, 기본 스타일의 테이블을 만들 때 사용되어 질 수 있다.

HTML 테이블(Table)의 기본 구조

HTML Table 기본 구조

HTML 테이블의 기본 구조는, table 아래에 caption과 3 가지의 행 단위(thead, tbody, tfoot)이 위치한다. 이러한 행 단위 아래에 테이블 행(tr)이 위치하고, tr 아래에 테이블 셀(th, td)가 위치할 수 있다.