10분 안에 배울 수 있는 10가지 간단한 CSS 코드 예제

HTML을 다루기 시작했다면 웹 페이지에 시각적 효과를 더하는 데 관심이 있을 것입니다. CSS는 이를 수행하는 가장 좋은 방법입니다. CSS를 사용하면 인라인 스타일에 의존하지 않고 전체 페이지에 변경 사항을 적용할 수 있습니다.

다음은 웹 페이지에서 몇 가지 기본적인 스타일 변경을 수행하는 방법을 보여주는 몇 가지 간단한 CSS 예제입니다.

1. 손쉬운 단락 서식 지정을 위한 기본 CSS 코드

CSS로 스타일을 지정하면 요소를 만들 때마다 스타일을 지정할 필요가 없습니다. '모든 단락에는 이 특정 스타일이 지정되어야 합니다'라고 말하면 됩니다.

모든 단락(

, 모두가 알아야 할 HTML 태그 중 하나)가 평소보다 약간 더 큽니다. 그리고 검은색 대신 짙은 회색 텍스트로.

2. 대소문자를 바꾸는 CSS 예제

작은 대문자여야 하는 단락에 대한 지정을 만들고 싶습니까? 이에 대한 CSS 샘플은 다음과 같습니다.

p.smallcaps { font-variant: small-caps; }

완전히 작은 대문자로 된 단락을 만들려면 약간 다른 HTML 태그를 사용하십시오. 다음과 같이 보입니다.

Your paragraph here.

요소에 점과 클래스 이름을 추가하면 클래스에 의해 정의된 해당 요소의 하위 유형이 지정됩니다. 텍스트, 이미지, 링크 및 기타 거의 모든 것으로 이 작업을 수행할 수 있습니다.

텍스트 세트를 특정 케이스로 변경하려면 다음 CSS 코드 예제를 사용하십시오.

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

마지막 문자는 모든 문장의 첫 글자를 대문자로 표시합니다.

3. 링크 색상을 변경하는 쉬운 CSS

스타일 변경은 단락에만 국한되지 않습니다. 링크에는 표준 색상, 방문한 색상, 호버 색상, 활성 색상(클릭하는 동안 표시됨)의 네 가지 색상이 있습니다. 다음 샘플 CSS 코드를 사용하세요.

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

링크에서 각 'a' 뒤에는 점이 아니라 콜론이 옵니다.

이러한 각 선언은 특정 컨텍스트에서 링크의 색상을 변경합니다. 색상을 변경하기 위해 링크의 클래스를 변경할 필요가 없습니다.

4. 이 샘플 CSS로 링크 밑줄 제거

밑줄이 그어진 텍스트는 링크를 명확하게 나타내지만 때로는 해당 밑줄을 스크랩하는 것이 더 보기 좋습니다. 이것은 'text-decoration' 속성으로 수행됩니다. 이 CSS 예제는 링크에서 밑줄을 제거하는 방법을 보여줍니다.

a { text-decoration: none; }

링크('a') 태그가 있는 모든 항목에는 밑줄이 표시되지 않습니다. 사용자가 마우스를 가져가면 밑줄을 긋고 싶습니까? 다음을 추가하기만 하면 됩니다.

a:hover { text-decoration: underline; }

링크를 클릭할 때 밑줄이 사라지지 않도록 활성 링크에 이 텍스트 장식을 추가할 수도 있습니다.

5. CSS 코드로 링크 버튼 만들기

귀하의 링크에 더 많은 관심을 끌고 싶으십니까? 링크 버튼은 이에 대한 좋은 방법입니다. 여기에는 몇 줄이 더 필요합니다.

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

이 CSS 샘플 코드를 설명하겠습니다.

네 가지 링크 상태를 모두 포함하면 사용자가 버튼을 가리키거나 클릭할 때 버튼이 사라지지 않습니다. 예를 들어 버튼이나 텍스트 색상을 변경하는 것과 같이 호버 및 활성 링크에 대해 다른 매개변수를 설정할 수도 있습니다.

배경색은 background-color로, 글자색은 color로 설정합니다. 패딩은 상자의 크기를 정의합니다. 텍스트는 세로로 10픽셀, 가로로 25픽셀씩 채워집니다.

텍스트 정렬은 텍스트가 한쪽으로 치우치지 않고 버튼 중앙에 표시되도록 합니다. 텍스트 장식은 마지막 예와 같이 밑줄을 제거합니다.

pdf는 크롬에서 열리지 않습니다

CSS 코드 'display: inline-block'은 조금 더 복잡합니다. 간단히 말해서 개체의 높이와 너비를 설정할 수 있습니다. 또한 삽입될 때 새 줄을 시작하도록 합니다.

6. 텍스트 상자 생성을 위한 CSS 예제 코드

평범한 단락은 그다지 흥미롭지 않습니다. 페이지의 요소를 강조 표시하려면 테두리를 추가할 수 있습니다. 간단한 CSS 코드 문자열로 이를 수행하는 방법은 다음과 같습니다.

p.important { border-style: solid; border-width: 5px; border-color: purple; }

이것은 간단합니다. 중요한 클래스 단락 주위에 5픽셀 너비의 단색 보라색 테두리를 만듭니다. 단락이 이러한 속성을 상속하도록 하려면 다음과 같이 선언하면 됩니다.

Your important paragraph here.

이것은 단락의 크기에 관계없이 작동합니다.

적용할 수 있는 다양한 테두리 스타일이 있습니다. 'solid' 대신 'dotted' 또는 'double'을 사용해 보세요. 한편, 너비는 '얇음', '중간' 또는 '두꺼움'이 될 수 있습니다. CSS 코드는 다음과 같이 각 테두리의 두께를 개별적으로 정의할 수도 있습니다.

border-width: 5px 8px 3px 9px;

그 결과 위쪽 테두리는 5픽셀, 오른쪽 테두리는 8픽셀, 아래쪽 테두리는 3픽셀, 왼쪽 테두리 크기는 9픽셀이 됩니다.

7. 기본 CSS 코드로 요소 가운데 정렬

일반적인 작업의 경우 CSS 코드로 요소를 중앙에 배치하는 것은 놀라울 정도로 직관적이지 않습니다. 그래도 몇 번 해보면 훨씬 쉬워집니다. 몇 가지 다른 방법으로 사물을 중심에 둘 수 있습니다.

블록 요소(일반적으로 이미지)의 경우 margin 속성을 사용하세요.

.center { display: block; margin: auto; }

이렇게 하면 요소가 블록으로 표시되고 각 측면의 여백이 자동으로 설정됩니다. 지정된 페이지의 모든 이미지를 중앙에 배치하려면 img 태그에 'margin: auto'를 추가할 수도 있습니다.

img { margin: auto; }

왜 이런 식으로 작동하는지 알아보려면 다음을 확인하십시오. W3C의 CSS 상자 모델 설명 .

하지만 CSS로 텍스트를 가운데에 맞추려면 어떻게 해야 할까요? 이 샘플 CSS를 사용하십시오.

.centertext { text-align: center; }

'centertext' 클래스를 사용하여 단락의 텍스트를 가운데에 맞추고 싶습니까? 해당 클래스를 추가하기만 하면

꼬리표:

This text will be centered.

8. 패딩 조정을 위한 CSS 예제

요소의 패딩은 양쪽에 얼마나 많은 공간이 있어야 하는지를 지정합니다. 예를 들어 이미지 하단에 25픽셀의 패딩을 추가하면 다음 텍스트가 25픽셀 아래로 밀려납니다. 이미지뿐만 아니라 많은 요소에 패딩이 있을 수 있습니다.

모든 이미지가 왼쪽과 오른쪽에 20픽셀, 위쪽과 아래쪽에 40픽셀의 패딩을 갖기를 원한다고 가정해 보겠습니다. 이를 위한 가장 기본적인 CSS 코드 실행은 다음과 같습니다.

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

그러나 이 모든 정보를 한 줄에 표시하는 더 짧은 CSS 명령이 있습니다.

img { padding: 40px 25px 40px 25px; }

이렇게 하면 위쪽, 오른쪽, 아래쪽 및 왼쪽 패딩이 오른쪽 숫자로 설정됩니다. 두 개의 값(40 및 25)만 사용하기 때문에 더 짧게 만들 수 있습니다.

img { padding: 40px 25px }

두 개의 값만 사용하는 경우 첫 번째 값은 위쪽과 아래쪽에 설정되고 두 번째 값은 왼쪽과 오른쪽에 설정됩니다.

9. CSS 코딩으로 테이블 행 강조 표시

CSS 코드는 테이블을 기본 그리드보다 훨씬 멋지게 만듭니다. 색상을 추가하고, 테두리를 조정하고, 테이블을 모바일 화면에 반응하도록 만드는 것은 모두 쉽습니다. 이 간단한 CSS 예제는 테이블 행 위로 마우스를 가져갈 때 테이블 행을 강조 표시하는 방법을 보여줍니다.

tr:hover { background-color: #ddd; }

이제 테이블 셀 위로 마우스를 가져갈 때마다 해당 행의 색상이 변경됩니다. 할 수 있는 다른 멋진 작업을 보려면 다음을 확인하세요. 멋진 CSS 테이블의 W3C 페이지 .

10. 투명과 불투명 사이에서 이미지를 이동하기 위한 예제 CSS

CSS 코드는 이미지로 멋진 일을 하는 데도 도움이 됩니다. 다음은 이미지를 전체 불투명도 미만으로 표시하여 약간 '하얗게' 보이게 하는 CSS 예제입니다. 이미지 위로 마우스를 가져가면 이미지가 완전히 불투명해집니다.

img { opacity: 0.5; filter: alpha(opacity=50); }

'filter' 속성은 'opacity'와 같은 역할을 하지만 Internet Explorer 8 및 이전 버전은 불투명도 측정을 인식하지 못합니다. 이전 브라우저의 경우 포함하는 것이 좋습니다.

이미지가 약간 투명해졌으므로 마우스 오버 시 이미지를 완전히 불투명하게 만들 수 있습니다.

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

소스 코드가 포함된 10가지 CSS 예제

이러한 CSS 코드 예제를 사용하면 CSS가 어떻게 작동하는지 훨씬 더 잘 알 수 있습니다. CSS 템플릿 도움이 될 수 있지만 원시 요소를 이해하는 것이 중요합니다.

10가지 쉬운 CSS 코드 예제를 요약하면 다음과 같습니다.

쉬운 단락 서식
대소문자 변경
링크 색상 변경
링크 밑줄 제거
링크 버튼 만들기
텍스트 상자 만들기
중앙 정렬 요소
패딩 조정
테이블 행 강조 표시
이미지를 불투명하게 만들기

그것들을 다시 검토하면 향후 코드에 적용할 수 있는 몇 가지 패턴을 알 수 있습니다. 그리고 그 때야 비로소 CSS 마스터가 되기 시작했다는 것을 알게 됩니다. 그러나 그것을 기억하는 것은 어려울 수 있습니다. 나중에 참조할 수 있도록 이 페이지를 북마크에 추가할 수 있습니다.

공유하다 공유하다 트위터 이메일 필수 CSS3 속성 치트 시트

CSS3 속성 치트 시트로 필수 CSS 구문을 마스터하세요.

다음 읽기 관련 항목

프로그램 작성
웹 디자인
CSS
스크립팅

저자 소개 크리스찬 카울리(1510개 기사 출판)

보안, Linux, DIY, 프로그래밍 및 기술 설명을 위한 편집자이자 데스크탑 및 소프트웨어 지원에 대한 광범위한 경험을 가진 정말 유용한 팟캐스트 프로듀서입니다. Linux Format 매거진의 기고가인 Christian은 Raspberry Pi 땜장이이자 레고 애호가이자 복고풍 게임 팬입니다.

크리스찬 카울리가 참여한 작품 더보기

뉴스레터 구독

뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!

구독하려면 여기를 클릭하세요.