CSS 기초
1. 스타일과 스타일 시트
스타일과 스타일 시트
- 스타일(style) : HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용들
- 스타일 시트(style sheet) : 스타일을 관리하기 쉽도록 한 군데 모아놓은 것
왜 스타일을 사용할까?
- 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.
- 내용과 디자인의 분리 - 웹 표준의 시작
- 디자인에 영향 없이 내용 수정하거나 내용은 건드리지 않고 디자인만 바꾸는게 가능
- 다양한 기기에 맞춰 탄력적으로 바뀌는 문서를 만들 수 있다.
- 내용은 그대로 두고, 프린터나 스마트폰 브라우저 등 다양한 기기에 맞는 레이아웃을 만들 수 있다.
스타일 형식
- 선택자 : { 와 } 사이에 정의한 스타일 규칙이 적용될 대상.
- 속성과 속성 값 : ‘속성 : 속성 값’과 같은 형식으로 함께 표시하며, 속성/속성 값 쌍이 여럿일 경우에 세미콜론(;)으로 구분
스타일을 표기하는 방법
스타일 주석
- /*와 */ 사이에 주석 내용 입력
- 한 줄 또는 여러 줄을 입력 가능
내부 스타일 시트
- 사용할 스타일을 문서 안에 정리한 것
- 모든 스타일 정보는 <head> 태그와 </head> 태그 안에서 정의
- <style> 태그와 </style> 태그 사이에 작성
더보기
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- html 주석은 화살괄호+느낌표+마이너스 -->
<!-- css의 style 태그를 사용해서 스타일을 준다. -->
<!-- 내부스타일 css -->
<style>
/* css 주석은 슬래시+별표 */
/* h2 태그는 글자크기를 20px 적용 */
/* h2 태그는 글자색을 오렌지색 적용 */
h2{
font-size: 20px;
color: orange;
}
p{
color: blue;
}
</style>
</head>
<body>
<h1>CSS</h1>
<h2>웹 문서의 디자인과 내용을 분리합니다.</h2>
<p>웹 표준에 의한 웹 문서는 디자인과 내용이 분리되어 있습니다.</p>
<p>내용은 HTML을 이용해 구성하고, 디자인은 CSS를 이용해 꾸미는 것입니다.</p>
</body>외부 스타일 시트
- 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용
- <style> 태그 없이 <link> 태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일 연결
더보기
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 외부 스타일 적용 -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2>Who am I?</h2>
<p>
프런트엔드 웹 기술에 관심이 많습니다.<br>
현재 제주의 한 시골 마을에서 코딩 중입니다.
</p>
</body>h2{
color: blue;
}
p{/*글자 크기에서 em은 대준자 M 기준이 1*/
font-size: 0.9em; /*글자 크기*/
/* 줄간격으로 숫자가 커질수록 줄이 넓어진다. */
line-height: 2.0; /* 줄간격 */
}인라인 스타일
- 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시
- 스타일을 적용하고 싶은 태그에 style 속성을 사용해 style=“속성: 속성 값;” 형태로 스타일 적용
더보기
<body>
<h1>블루베리</h1>
<!-- 인라인 스타일 : 특정영역 지정해서 스타일 적용 -->
<p style="color: blue;">블루베리는 항산화제인 안토시아닌과 폴리페놀을 다량 포함하고 있습니다.</p>
<p>블루베리는 항산화제인 안토시아닌과 폴리페놀을 다량 포함하고 있습니다.</p>
</body>2. 주요 선택자
전체 선택자
- 페이지에 있는 모든 요소를 대상으로 스타일을 적용할 때 사용
- 다른 선택자와 함께 모든 하위 요소에 한꺼번에 스타일을 적용하려고 할 때 주로 사용
- *{속성 : 속성 값; 속성 : 속성 값; ...}
*{
margin:0;
padding:0;
}💡 웹 브라우저마다 기본적으로 설정해 놓은 ‘패딩’과 ‘마진’ 의 기본 값이 있습니다. 브라우저마다 그 값이 똑같지 않기 때문에 일반적으로 전체 선택자(*)를 사용해서 패딩과 마진 값을 0으로 리셋합니다.
태그 선택자
- 문서에서 특정 태그를 사용한 모든 요소에 스타일이 적용됨
- 태그{ 스타일 }
클래스(class) 선택자
- 문서 안에서 여러 번 반복할 스타일이라면 클래스 선택자로 정의.
- 마침표(.) 다음에 클래스 이름 지정
id 선택자
- 문서 안에서 한번만 사용한다면 id 선택자로 정의. (2번 써도 되긴함)
- 파운드(#) 다음에 id 이름 지정
그룹 선택자
- 같은 스타일을 사용하는 선택자를 한꺼번에 정의
- 쉼표(,)로 구분해 여러 선택자를 나열
더보기
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 전체 여백이 20px */
*{
/* 테두리 바깥쪽 여백이 20px */
/* 테두리 안쪽은 padding */
margin: 20px;
}
#cont{
/* 테두리가 1px 두께, 점선, 회색 */
border: 1px dotted gray;
width: 600px; /* 너비 */
/* 테두리 안쪽 여백이 15px */
padding: 15px;
}
.bluetext{
color: yellow;
}
p{
font-size: 0.9em;
line-height: 2.0;
}
/* h2 태그이면서 accent 클래스에 적용 */
h2.accent{
background-color: #222;
color: #fff;
/* 배경색 안쪽에 여백이 5px */
padding: 5px;
}
.browntext{
color: brown;
}
.boldtext{
font-weight: bold;
}
h3,h4{
color: aqua;
background-color: #222;
}
#container{
color: orange;
}
#container2{
color: blue;
}
</style>
</head>
<body>
<!-- id가 웹표준은 한번 사용인데 2번사용해도 적용됨 -->
<div id="cont">
<h1 id="container2">회사 소개</h1>
<!-- <h2 id="container">사람을 구체적으로 도와주는 책</h2> -->
<!-- <h2>사람을 구체적으로 도와주는 책</h2> -->
<h2 class="accent">사람을 구체적으로 도와주는 책</h2>
<p id="container2">
이지스퍼블리싱의 책에는 <span class="browntext boldtext">사람들에게 구체적으로 도움이 되는
책을 만든다는 출판 가치가 담겨 있습니다.</span>
</p>
<p class="bluetext">
이지스퍼블리싱의 책에는 사람들에게 구체적으로 도움이 되는
책을 만든다는 출판 가치가 담겨 있습니다.
</p>
<!-- <h2 id="container">이지스퍼블리싱의 미션</h2> -->
<h2>이지스퍼블리싱의 미션</h2>
<p class="bluetext">
이지스퍼블리싱의 책에는 사람들에게 구체적으로 도움이 되는
책을 만든다는 출판 가치가 담겨 있습니다.
</p>
<p>
이지스퍼블리싱의 책에는 사람들에게 구체적으로 <span class="bluetext">도움</span>이 되는
책을 만든다는 출판 가치가 담겨 있습니다.
</p>
<h3>정보의 지름길을 만든다.</h3>
<h4>도움이 되는 책을 만든다.</h4>
</div>
</body>3. 캐스캐이딩 스타일 시트(CSS)
캐스캐이딩의 의미
- 캐스캐이딩(Cascading) : ‘위에서 아래로 흐른다’는 뜻
- 선택자에 여러 스타일이 적용될 때 스타일 충돌을 막기 위해 ‘위에서 아래로 흐르며 적용되는’ 방법을 선택
캐스캐이딩의 원칙
- 스타일 우선순위 - 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 우선순위에 따라 위에서 아래로 스타일 적용
- 스타일 상속 - 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달
💡 스타일 시트에서 ‘캐스캐이딩’은 가장 기본적인 개념이기 때문에 일반적으로 ‘스타일 시트’는 ‘캐스캐이딩 스타일 시트(CSS)’와 같은 의미로 사용됨
스타일 우선 순위
- 얼마나 중요한가에 따라
시스템에서 만든 스타일. 사용자가 제어할 수 없음
⇒ 브라우저의 기본 스타일
⇒ 웹 사이트를 만들 때 제작자가 만든 스타일 - 얼마나 한정지을 수 있는가에 따라
- 소스 순서에 따라
- 중요도가 같다면 소스 순서에 따라 결정
- 소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어씀
더보기
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 20px;
}
body{
color: blue;
}
#container{
border: 1px dotted gray;
width: 600px;
padding: 15px;
}
/* h2태그스타일이 body태그보다 우선순위가 높다. */
h2{
/* !important가 최우선 적용 */
color: yellow !important;
}
</style>
</head>
<body>
<div id="container">
<!-- 인라인 스타일이 h2 태그스타일보다 우선순위가 높다 -->
<h2 style="color: green;">이지스퍼블리싱의 미션</h2>
<p>사람에게 구체적으로 도움을 주는 책</p>
<p>사람에게 구체적으로 도움을 주는 책</p>
<p>사람에게 구체적으로 도움을 주는 책</p>
<!-- 인라인 스타일이 body 태그스타일보다 우선순위가 높다 -->
<p style="color: red; font-style: italic;">사람에게 구체적으로 도움을 주는 책</p>
</div>
</body>4. CSS3와 CSS 모듈
CSS3란
- CSS1 → CSS2 → CSS3
- CSS3부터는 배경이나 글꼴, 박스 모델 등 수십 개 기능을 주제별로 규약을 따로 만듦 ⇒ “CSS 모듈“
- CSS3는 한번에 표준 규약이 결정되지 않음.
CSS3와 브라우저 접두사
- 표준 규약이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원됨 → 속성 이름 앞에 접두사(prefix)
- 표준 규약이 완성된 속성도 옛날 버전의 모던 브라우저 사용자를 고려하기 위해 브라우저 접두사를 붙여 사용하기도 함
더보기
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
/* 테두리 두께 : 2px, 실선, 녹색 */
border: 2px solid green;
width: 100px;
/* 텍스트 정렬 : 가운데 */
text-align: center;
}
/* hover 이벤트는 마우스 올렸을때 처리 */
.box:hover{
/* transform 의 rotate 속성값으로 15도 기운다. */
/* transform: rotate(15deg); */
/* moz 접두사는 모질라.파이어폭스 적용 */
/* -moz-transform: rotate(15deg); */
/* o 접두사는 오페라 적용 */
/* -o-transform: rotate(15deg); */
/* ms 접두사는 익스플로러 적용 */
/* -ms-transform: rotate(15deg); */
/* webkit 접두사는 사파리, 크롬 적용 */
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
</style>
</head>
<body>
<div class="box">Mouse Over</div>
</body>
'HTML CSS > CSS' 카테고리의 다른 글
| HTML5와 시맨틱 태그 (0) | 2024.04.09 |
|---|---|
| CSS 레이아웃 (0) | 2024.04.09 |
| CSS 박스 모델 (0) | 2024.04.09 |
| 색상과 배경을 위한 스타일 (0) | 2024.04.09 |
| 텍스트 관련 스타일 (0) | 2024.04.09 |