[CSS] CSS 기본

SHIN JAE MIN·2023년 10월 24일

CSS

목록 보기

1/2

📌오늘의 KEY POINT !

CSS / 스타일 / 선택자 / 캐스캐이딩

CSS
▪ Cascading Style Sheets의 약자
▪ 텍스트의 색상, 크기, 이미지의 크기, 위치, 표의 색상, 배치 등 웹 문서의 디자인 요소 담당

스타일
▪ 미리 약속한 스타일 속성을 입력해 웹을 디자인하는 것
▪ 스타일들을 모아 놓은 것을 '스타일 시트'라고 부름

선택자
▪ 스타일 속성을 적용하는 요소
▪ 전체, 태그, 클래스, id, 그룹 선택자 등

캐스캐이딩
▪ CSS의 'C'인 캐스캐이딩(Cascading)은 선택자에 적용된 많은 스타일 중 어떤 스타일을 나타낼지 결정함을 뜻함
▪ 중복된 스타일은 스타일 우선순위 - 스타일 상속의 두 가지 원칙에 따라 적용

📖 스타일(style)

▪ HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용
→ 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.
→ 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다.

1) 스타일 형식, 표기법, 주석
▪ 중괄호 안에 들어가는 속성과 속성값은 콜론(:), 속성과 속성값 쌍 다음은 세미콜론(;)으로 구분한다.
▪ 공백은 영향을 주지 않기에 상황에 맞게 활용하는 것이 좋다.
▪ 주석은 /과 / 사이에 내용을 입력하여 나타낸다.

<기본형>
선택자 {스타일 속성: 속성 값;}
<예시>
h2 { font-size: 20px; color: orange; }	/* 2단계 제목의 글자 크기 20px, 글자 주황색 */
p { 
 	color: blue;	
} 			/* 텍스트 단락의 글자 색 파란색 */

2) 스타일 & 스타일 시트

▪ 내부 스타일 시트
→ 문서 안에서 사용할 스타일 규칙들을 정의
→ <head> 태그와 </head>`` 태그 안에서 ```태그를 생성해 그 사이에 작성한다.

내부 스타일 시트 예시

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section {
            width: 400px;   /*너비*/
            padding: 15px;  /* 테두리와 내용 사이의 여백 */
            border: 5px solid gray;     /*테두리 스타일*/
        }
    </style>
</head>
<body>
    <div id="container">
        <!-- 자기소개 -->
        <section>
            <h2>Who am I?</h2>
            <p>백엔드 및 프런트엔드 웹 기술에 관심이 많습니다.<br>
            현재 서울의 한 호랑이 마을에서 코딩중입니다.
            </p>
        </section>
    </div>
</body>

※ 웹 브라우저 출력 결과

▪ 외부 스타일 시트
→ 별도의 스타일 파일을 만들어 연결해서 사용
→ '.css' 파일 확장자를 사용하며 <style> 태그 없이 <link> 태그만 사용해 연결한다.

<기본형>
<link rel="stylesheet" href="외부 스타일 파일 경로">

외부 스타일 시트 예시

1) style.css 외부 스타일 시트 파일

section {
    width: 400px;
    padding: 15px;
    border: 5px cadetblue dashed; /* 점선 */
}
h2 {
    color: seagreen; /* 글자색 */
}
p {
    font-size: 0.9em;   /* 글자 크기 */
    line-height: 2.0;   /* 줄간격 */
}

2) external.html 파일에 외부 스타일 시트 적용(style.css)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="container">
        <!-- 자기소개 -->
        <section>
            <h2>Who am I?</h2>
            <p>백엔드 및 프런트엔드 웹 기술에 관심이 많습니다.<br>
            현재 서울의 한 호랑이 마을에서 코딩중입니다.
            </p>
        </section>
    </div>
</body>

※ 웹 브라우저 출력 결과

📖 선택자

1) 전체 선택자
▪ 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용하며, *(별표)를 사용한다.
→ 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용한다.

<기본형>
* {속성: 속성 값; 속성: 속성 값; ... }

2) 태그 선택자
▪ 특정 태그를 사용한 요소에 스타일 적용

<기본형>
태그 { 스타일 }
<예시>
p {
	font-size: 12px;
	font-family: 돋움;
}

3) 클래스 선택자
▪ 특정 부분에 스타일 적용
→ 같은 태그라도 다른 스타일을 적용하고 싶을 때 사용한다.
→ 클래스 이름 앞에는 반드시 마침표(.)를 붙여야 한다.

<기본형>
.클래스명 { 스타일 }

<예시 1 - 클래스 스타일 적용>

<style>
	.bluetext {
		color: blue;
	}
</style>
///
<h2 class="bluetext">클래스 선택자</h2>

<예시 2 - 텍스트 일부에만 적용>
▪ <span> 태그 사용

<style>
	.bluetext {
		color: blue;
	}
</style>
///
<p>전체 텍스트 중 <span class="bluetext">일부</span>에만 적용</p>

<예시 3 - 선택자 적용 범위 제한>

<style>
	h2.bluetext {
		color: blue;
	}
</style>
///
<h2 class="accent">클래스 선택자 앞에 태그 이름을 함께 써서</h2>
<h2 class="blutext">특정 태그에만 클래스 선택자를 적용</h2>		/*해당 태그에만 스타일 적용*/

<예시 4 - 둘 이상의 스타일 동시 적용>
▪ 공백으로 구분

<style>
	.bluetext {
		color: blue;
	}
	.boldtext {
		font-weight: bold;
	}
</style>
///
<p>둘 이상의 스타일 <span class="bluetext boldtext">동시</span> 적용</p>

4) id 선택자
▪ 웹 문서 안의 특정 부분에 스타일을 지정할 때 사용한다.
→ 마침표(.) 대신 # 기호를 사용하는 점을 제외하고 클래스 선택자와 사용법은 같다.
→ 그러나, id 선택자는 문서 안에서 중복없이 한 번만 적용할 수 있기 때문에 주로 문서의 레이아웃과 관련된 스타일을 지정할 때 사용한다.

<기본형>
#아이디명 { 스타일 }
<예시>
<style>
	#container {
		width:600px;	/*너비*/
		padding:15px;	/*테두리와 내용 사이의 여백*/
		border:1px dotted gray;	/*테두리 스타일*/
	}	/*문서를 중앙에 배치하고 점선 테두리를 그리도록 스타일 정의*/
</style>
///
<div id="container">
	<h1>회사 소개</h1>
	...

5) 그룹 선택자
▪ 둘 이상 요소에 같은 스타일 적용
→ 선택자를 쉼표(,)로 구분하여 나열한 후 스타일은 한번만 정의한다.

<예시>
h1, h2 {
	text-align:center;
}

📖 캐스캐이딩

▪ 스타일이 동시에 적용될 경우 스타일 간의 충돌을 막기 위한 원칙
→ 위에서 아래로 흐르며 적용

1) 스타일 우선순위
▪ 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되며 그 우선순위에 따라 위에서 아래로 적용된다.

<중요도 - Importance> - !importance를 붙여 중요도 표시
① 사용자 스타일 시트의 중요 스타일
② 제작자 스타일 시트의 중요 스타일
③ 제작자 스타일 시트의 일반 스타일
④ 기본적인 브라우저 스타일 시트

<적용 범위 - Specificity>
① 인라인 스타일
② id 스타일
③ 클래스 스타일
④ 태그 스타일

→ 스타일 시트에서 중요도와 적용 범위가 같다면 스타일 우선순위를 정하는 것은 소스의 순서이다.
즉, 소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어쓴다.

스타일 우선순위 순서 예시

<style>
    body {
        color: skyblue;     /*문서 전체 글자 색*/
    }
    h2 {
        color:brown !important; /*글자 색, 중요 스타일 지정*/
    }
</style>
///
<body>
    <h2 style="color: green;">삶은...</h2> /*중요 스타일 적용*/
    <p>달걀이다...</p>
    <p>맛있게 감사히 먹겠습니다</p>
    <p style="color: red; font-style: italic;">냠냠</p>	/*인라인 스타일 적용*/
</body>

※ 웹 브라우저 출력 결과

2) 스타일 상속
▪ 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다.
→ 스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.
❗단, 부모 요소의 배경 이미지나 배경색은 자식 요소에 상속되지 않는다.❗
(기본값인 '투명'으로 지정되어 상속된 것처럼 배경이 보인다.)

스타일 상속 예시

<style>
    body {
        color: skyblue;
        background-color: gray;
    }
    h2 {
        font-size: 20px;
        color: greenyellow;
    }
</style>
///
<body>
    <h1>CSS</h1>
    <h2>웹 문서의 디자인과 내용을 분리한다.</h2>
    <p>웹 표준에 의한 웹 문서는 디자인과 내용이 분리된다.</p>
    <p>내용은 HTML을 이용해 구성하고, 디자인은 CSS를 이용해 꾸민다.</p>
</body>