CSS 기본 선언 방식과 기본 선택자 사용 방법
CSS 선언 방식
CSS를 이용해서 스타일을 HTML 문서에 적용하는 방법에는 태그 안에 직접 작성하는 인라인 스타일 방식과 HTML 문서의 head 태그 안에 선언하는 내부 스타일 방식 그리고 외부 css 파일을 HTML 문서에 연결하여 사용하는 방식으로 총 3가지가 있습니다.
인라인 스타일 방식
HTML 태그 안에 속성 형식으로 style="속성 : 값;" 형태로 선언하여 스타일을 적용할 수 있습니다. 간단하게 해당되는 태그에만 스타일이 적용됩니다.
인라인 스타일 예제
<p style="font-size : large;">CSS 인라인 스타일을 사용하여 폰트 크기를 변경</p>
내부 스타일 방식
스타일을 head 태그 안에 정의해서 사용하는 방법을 내부 스타일 방식이라고 하는데요. head 태그 안에 style 태그를 선언하고 그 안에 적용할 스타일들을 정의하면 됩니다.
내부 스타일 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST</title>
<style>
* {
padding : 0;
margin : 0;
box-sizing: border-box;
}
body {
font-family : Roboto;
}
header {
display : flex;
justify-content : space-between;
margin : var(--margin);
}
header img {
width : 25%;
/* max-width : 100px; */
}
</style>
</head>
<body>
<!-- 본문 내용 -->
</body>
</html>
css 파일 연결 방식
가장 많이 사용하는 방식으로 별도의 css 파일에 스타일을 작성하고, 해당 css 파일을 HTML header 태그 안에 link 태그에 선언하여 사용하는 방식입니다. link 태그의 href 속성값으로 css 파일이 위치한 경로를 작성해 주면 됩니다.
css 파일 연결 방식 예제
<link rel="stylesheet" href="style.css">
CSS 기본 선택자
스타일을 적용할 때는 적용할 범위를 지정하여 즉 선택자를 사용하고 그 안에 적용할 스타일을 작성해 주어야 합니다.
전체 선택자 *
HTML 문서 전체에 스타일을 적용할 대는 * 문자를 사용하고 대괄호 안에 스타일 속성들을 작성하면 됩니다.
전체 선택자 사용 예제
* {
padding : 0;
margin : 0;
box-sizing: border-box;
}
태그 선택자
특정 태그를 사용한 모든 태그에 스타일을 적용할 때, 태그 명을 적고 대괄호 안에 스타일 속성들을 작성하면 됩니다.
태그 선택자 사용 예제
/*헤더 태그에 스타일 적용 */
header {
display : flex;
justify-content : space-between;
margin : 10px;
}
/*헤더 태그 하위에 선언된 img 태그 스타일 적용 */
header img {
width : 25%;
}
class 선택자
HTML 문서에 정의되 태그에 중에 여러 태그를 그룹화해서 묶고, 그 태그들에만 스타일을 적용하고 싶을 때 class 선택자로 스타일 적용하면 되고, 선언 방식은 class 명 앞에 '.'을 붙여 선언하면 됩니다.
class 선택자 사용 예제
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST</title>
<style>
.portal {
font-size: x-large;
color: blue;
}
</style>
</head>
<body>
<!-- 본문 내용 -->
<ul>
<li class="portal">다음</li>
<li class="portal">네이버</li>
<li class="portal">구글</li>
<li>11번가</li>
<li>쿠팡</li>
</ul>
</body>
class 선택자 사용 결과
id 선택자
웹문서의 특정 태그에 스타일을 적용하는 것은 class 선택자와 비슷하지만, HTML 문서에서 id는 중복성이 없고, 유일성만 있기 때문에 특정 태그 하나에 스타일을 적용하는 효과를 얻을 수 있습니다. id값 앞에 # 문자를 넣어 스타일을 정의해 주면 됩니다.
id 선택자 사용 예제
/* HTML 태그 */
<input class="inputBox" type = "text" id = "userName" name = "user" required autofocus>
/* CSS id 선택자 스타일 적용*/
#userName {
display : inline-block;
width : 110px;
height : 100%;
}
다중 선택자
위에 나열한 태그 선택자 및 id, class 선택자 등 여러 개의 선택자를 동시에 선언해서 사용할 경우에는 쉼표(,)로 각 선택자를 구분해서 선언하면 동시에 여러 요소에 스타일을 적용할 수 있습니다.