CSS 기본 개념
CSS (Cascading Style Sheets) 역할
-
HTML같은 구조화 된 문서(Document)를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 스타일시트 언어. (마크업 언어인 XHTML, XML 등에도 사용한다.)
-
HTML 각 요소의 스타일을 정의한다. → 디자인과 레이아웃 등
CSS 적용하기
-
inline style: HTML 요소에 CSS를 직접 작성 -
embedding style: HTML 문서 내부에 CSS를 포함 -
link style: HTML 외부에서 CSS 파일을 로드
inline style
<h1 style="color: red">Hello World</h1>
embedding style
<head>
<style>
h1 { color: red; }
p { background: aqua; }
</style>
</head>
link style
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>CSS 선택자
-
특정 요소에 css 속성을 부여하고 싶을 때 selector 사용
-
추상적 tag <<< class <<< id 구체적
-
id는 구체적이긴하지만 중복 적용이 어려워서 유지보수가 어렵다.
→
class를 사용하자. -
class나 id는 태그와 결합할 수 있다.
p.p-tag {
color: gray;
}
p#third-line {
text-decoration: underline;
} /* id는 어차피 고유하니까 이건 과한 표현이다 */- pre 클래스 안에 있는 span을 선택하기
.pre span {
background-color: yellow;
}
/* 아래 HTML 예시 */
<span class="pre"> 적용 되지 않는다 !!!!! </span>
<p class="pre">
<span> 이건 적용된다!!!!! 노란색배경! </span>
</p>
폰트와 텍스트 스타일
Font Style
/* 폰트 스타일을 지정 - 띄어쓰기 있으면 따옴표로 감싼다. */
#title {
font-family: Georgia, "Times New Roman", Times, serif;
}
/* 폰트 크기를 지정 - px, em, pt 등 여러 단위가 있다. */
.big-size-font {
font-size: 50px;
}
/* 폰트 두께를 지정 - normal은 400, bold는 700이며, 100단위로 900까지 있다. */
.bold-font {
font-weight: bold;
}
/* 글씨 스타일을 바꾸기 */
a {
font-style: italic;
}
/* 글씨색 바꾸기 - 색상 표현은 hex, rgb, hsl 방식이 있다. */
h1 {
color: #eb4639;
}
h1 {
color: rgb(235, 70, 57);
}
h1 {
color: hsl(4, 82%, 57%);
}
Text Style
<span>태그는 inline 이어서text-align으로 정렬이 되지 않는다.
/* 텍스트 정렬하기 - <span>은 inline이어서 정렬 불가*/
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
/* 텍스트 들여쓰기 */
.js-description {
text-indent: 50px;
}
/* html의 blockquote 태그는 기본으로 양쪽 여백을 적용한다. */
박스모델
Content, Margin, Padding, Border
- width와 height 프로퍼티를 비롯한
모든 박스모델 관련 프로퍼티(margin, padding, border, box-sizing 등)는 상속되지 않는다.
width / height
-
콘텐츠 영역의 너비와 높이를 지정한다.
→ box-sizing 프로퍼티의 값이 content-box 일때 (기본값)
-
box-sizing : border-box;를 적용하면 padding, border를 포함한 영역을 지정한다. -
실제 콘텐츠가 더 크면 넘치게 되고
overflow: hidden;으로 감출 수 있다. -
max-width를 지정하면 브라우저의 너비가 작아졌을때 요소 너비도 작아진다.
margin / padding
- margin 프로퍼티에
auto를 설정하면 중앙에 위치 시킬 수 있다.
border
-
border-style: 테두리 모양 지정 -
border-width: 테두리 두께 지정 -
border-color->border-style과 함께 사용해야 적용된다. -
border로 한번에 설정하기
/* border-width border-style border-color */
p { border: 5px solid red; }-
border-radius: 테두리를 둥글게 표현→ 원형으로 만들때는 값을
50%로 지정
box-sizing
-
width, height 프로퍼티의 대상 영역을 변경할 수 있다.
→ CSS Layout을 직관적으로 사용할 수 있다.
-
box-sizing: content-box; (기본값)→ width, height 값은 content 영역을 의미한다. (padding, border 미포함)
-
box-sizing: border-box;→ width, height 값은 content + padding + border 까지 모두 포함
* {
box-sizing: border-box;
}
상속과 그룹
상속 (Inheritance)
-
스타일이 상속되어 자식에게도 같은 스타일이 적용된다.
-
본인 속성을 갖고 있다면 부모 속성보다 본인의 스타일이 우선한다.
그룹 (Grouping)
- 여러개의 요소를 선택하여 같은 스타일을 지정
.what-is-blockquote, span {
color: green;
}
Block VS Inline
-
대부분의 HTML 요소는 block 요소이다.
-
block 요소는 옆에 다른 요소가 붙을 수 없다.
<p>,<div>,<li>등 대부분→
<div>의 width는 항상 100% 이다.→ height는 내용의 크기 혹은 자식 태그 내용의 세로 크기에 의해 결정된다.
-
inline 요소는 서로 한 줄에, 옆에 붙을 수 있다.
<span>,<a>,<img>등
display를 이용해 요소 성질 바꾸기
- block 요소를 inline 성질로 바꾸기
.inline-p {
display: inline-block;
}
.float-left {
float: left;
}
.float-right {
float: right;
}- inline 요소를 block 성질로 바꾸기
.block-span {
display: block;
}- display 프로퍼티로 화면에서 가리기
.hide {
display: none;
}
/* 요소를 보이게or안 보이게 할 수 있다.
ex) JavaScript를 이용해 display: block; 으로 바꾸는 등 */Margin 값을 이용한 레이아웃
-
<div>에 width 값을 주면 길이가 정해진다.→ 이때 margin 값을
auto로 설정하면 요소가 가로 중앙에 온다.
.has-width {
width: 150px;
}
.center {
margin: 20px auto; /* 위아래 마진 20, 좌우 마진 auto */
}
/* HTML */
<div class="has-width center">너비 값을 주고 중앙으로 보내기</div>
