https://developer.mozilla.org/ko/docs/Learn/CSS/First_steps/How_CSS_is_structured
css의 구조 ,작동방식까지 알아보려고한다
css 스타일 시트는 외부와 내부로 구분 지을 수 있다
외부에 경로가 있으면 link를 사용해서 다음과 같이 연결한다
내부에 스타일 시트가 있다면
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>나의 CSS 실험</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>헬로우 월드</h1>
<p>이것은 나의 첫 번째 CSS 예제입니다</p>
</body>
</html>다음과 같이 작성할 수 있다
인라인 스타일이라는 css 작성법도 있지만 정말로 필요하지 않는한 추천하지 않는다고 한다
인라인 스타일의 예시이다
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">
헬로우 월드!
</h1>
<p style="color:red;">이것은 나의 첫 번째 CSS 예제입니다</p>CSS를 공부하면서 선택자를 모르고 넘어갈 수 없다고한다
css 선택자는 다음과 같다
h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro
css 충돌시 어떤 스타일을 적용해야하는지 규칙이 있다
cascade 방식과 specificity 방식 계단식 우선순위 방식이있다
보통은 cascade 방식으로 진행되지만
class 선택자 및 요소 선택자가 있는 이전 블록의 경우 class가 출력됩니다
CSS는 속성 및 값으로 정의됩니다
대소문자를 구분할 수 있고 콜론으로 구분됩니다
css 안에서 함수 처리도 가능합니다
.outer {
border: 5px solid black;
}
.box {
padding: 10px;
width: calc(90% - 30px);
background-color: rebeccapurple;
color: white;
}위 글에서 보듯이 calc 함수를 사용하여 width의 값을 정의한걸 확인할 수 있습니다.
@rules 라는 css 규칙이있습니다
추가로 css 스타일 시트를 가져오려면 Import를 사용할 수 있습니다
@import "styles2.css";
가장 일반적인 rules중 하나는 media 입니다 이는 특정 조건이 참일때만 화면에 발현되는데
(예: 화면 해상도가 일정 폭 이상이거나 화면이 일적 폭 보다 넓을 떄)라고 정의합니다
예를들어서 모바일화면과 웹화면 하이브리드한 상황에서 나타내고 사라지는것을 정의하는거 같습니다
body {
background-color: pink;
}
@media (min-width: 30em) {
body {
background-color: blue;
}
}속기(shorthadns)
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
위 코드를 아래 코드처럼
/* 패딩 및 마진과 같은 4-값 속기에서는 위, 오른쪽, 아래, 왼쪽 (위에서 부터 시계방향) 순서로 값이 적용됩니다.
위, 아래에 패딩 / 마진을 설정하고 왼쪽 / 오른쪽에 패딩 / 마진을 설정하는 다른 shorthand 유형 (예: 2-값 shorthands)도 있습니다. */
padding: 10px 15px 15px 5px;
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;
위 코드를
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
아래 코드처럼 값에 여러 속성을 부여해서 코드를 간결하게 만드는 방법이있습니다
css에서 주석은
/* */ 을 사용하여 처리합니다
css 에선 공백을 가독성의 이유로 사용하는데 값에서는 공백을 가독성 이유와 별개로 값을 정의할때 사용합니다
