CSS의 등장
- HTML에 무분별하게 추가되는 디자인 코드는 정보로서 웹이 갖는 가치를 퇴보시킨다
- HTML이 정보에 전념할 수 있도록 디자인 기능을 가져온 것이 CSS이다
- HTML 파일 안에서 디자인 관련 태그를 <style></style> 태그 안에 몰아 넣으면 코드 가독성을 높이고 검색 엔진의 정보 분석을 용이하게 할 수 있다
- CSS를 쓰면 중복된 스타일 코드를 하나의 코드로 대체할 수 있고, 웹페이지를 손쉽게 유지 보수할 수 있다
CSS의 기본 문법
웹페이지에 CSS를 적용하는 두 가지 방법:
| <style> 태그 사용 | style 속성 사용 |
| 선택자가 필요하다 | 선택자가 필요 없다 (해당하는 태그에 바로 삽입) |
↓
| CSS 효과를 불러오는 HTML 태그 | CSS 효과를 불러오는 HTML 속성 |
|
<style> |
<a href="link" style="color: black; text-decoration: underline;">TEXT</a> |
CSS 선택자의 기본
selector {
property: value;
}- 선택자(selector): 특정 태그를 선택하는 역할 (대상 지정)
- 선언/효과(declaration): 선택자에 적용할 효과. 속성과 값으로 구성된다.
CSS 선택자를 사용하는 방법
<head>
<style>
#idValue {
color: red;
}
.classValue {
color: gray;
}
tag {
color: black;
}
</style>
</head>
<body>
<tag="value" class="classValue" id="idValue">TEXT</tag>
</body>- id는 #, class는 .으로 선택하고 태그는 다른 기호 없이 선택한다
- 우선 순위: 태그 선택자 < class 선택자 < id 선택자
- class는 여러 개의 코드를 하나의 그룹으로 묶어줄 때 사용한다
- id 선택자는 전체 콘텐츠에서 단 한 번만 사용되는 고유한 값이고 제일 구체적이다
CSS 박스 모델
- 블록 요소(block level element): 화면 전체를 쓴다(그다음 요소는 줄바꿈됨)
- 인라인 요소(inline element): 요소 크기만큼의 공간만 쓴다
- 스타일 태그에 display: inline이나 display: block을 적용하면 블록, 인라인 스타일을 원하는 대로 조정할 수 있다
- 블록 요소의 경우, width 속성을 이용하여 너비를 줄일 수 있다
<div>와 <span> 태그
- 아무런 의미와 기능 없이 여러 요소를 하나의 그룹으로 묶는 데 사용하는 디자인용 태그
- <div> 태그는 블록 요소, <span> 태그는 인라인 요소이다
CSS 그리드
<head>
<style>
#text {
display: grid;
grid-template-columns: 150px 1fr;
}
</style>
</head>
<body>
<div id="text">
<div>TEXT1</div>
<div>TEXT2</div>
</div>
</body>↓
| TEXT1 | TEXT2 |
- 그리드를 적용할 때는 <div> 태그가 2개 이상 있어야 그리드의 열을 만들 수 있다
- grid-template-columns의 첫 번째 값은 첫 번째 열, 두 번째 값은 두 번째 열을 나타낸다
- 텍스트 양에 따라 그리드 세로 길이가 자동 조절된다
반응형 디자인과 미디어 쿼리
- 반응형 디자인(responsive design): 화면의 크기에 따라서 웹페이지의 각 요소가 최적화된 모양으로 바뀌게 하는 것 (웹은 운영체제에 관계없이 수많은 형태의 화면에서 동작 가능해야 한다)
- 미디어 쿼리(media query) - 반응형 웹을 만들기 위해 사용하는 코드
- 미디어 쿼리의 코드에 각종 선택자와 속성 부여해서 스타일을 다양하게 조정할 수 있다
<style>
@media(min-width: 800px) {
tag {
/* code */
}
}
</style>
미디어 쿼리 속성 min-width와 max-width
| min-width | max-width |
| 화면 너비가 특정 값 이상일 때, 코드를 적용한다 | 화면 너비가 특정 값 이하일 때, 코드를 적용한다 |
CSS 코드의 재사용
- 중복해서 사용할 모든 CSS 코드를 .css 파일로 저장한 다음 html 파일에서 불러와 쓸 수 있다
- CSS 코드를 별도의 파일로 저장해서 사용하면 중복을 제거하기 쉽고 관리가 용이하며 경제적으로도 이익이다
- 캐싱(caching) 기술을 사용하여 컴퓨터에 CSS 파일이 저장된다. 이후 브라우저가 파일을 요청하면 저장된 파일이 사용되기 때문에 속도를 높이고 네트워크 사용량을 줄일 수 있다.
저장한 CSS 파일을 다른 HTML 파일에서 불러오는 방법 ("filename" 자리에 해당 CSS 파일 이름을 넣어주면 된다)
<head>
<title>TEXT</title>
<meta charset="utf-8">
<link rel="stylesheet" href="filename.css">
</head>
'학습 노트' 카테고리의 다른 글
| Xcode에서 Constraints 값이 입력되지 않는 문제 (0) | 2020.02.22 |
|---|---|
| #100DaysofCode 챌린지 진행 기록 (3) | 2020.02.17 |
| git을 이용한 파일 버전 관리 (0) | 2020.01.31 |
| 생활코딩 Web1 - HTML & Internet 강의 요약 (0) | 2019.12.13 |
| 프로그래밍 용어 정의 (0) | 2019.12.08 |
