출처: https://opentutorials.org/course/3086
CSS의 등장
HTML이 정보에 전념하게 하기 위해 HTML로부터 디자인의 기능을 뺏어온 것
웹페이지를 디자인할 때 HTML을 이용해서 디자인하는것 보다 효과적(중복 제거)
<head> 태그안에 넣어야 함
<style>
a { // 모든 a태그에 대해서 변경 // __ { } -> 선택자(selector) (주고 싶은 효과를 누구에게 줄것인가)
color:red; // 선언(declaration) -> 선택자에게 지정될 효과
text-decoration: none; // 텍스트 밑줄 없앰
}
</style> HTML의 문법이면서 <style>태그 안쪽에 있는 내용은 CSS 문법 따름
CSS 문법은 중복의 제거
하나를 바꾸면 모든 것을 바꾸는 폭발적인 효과
CSS 기본 문법
<style> 태그가 아닌 style 속성을 이용하는 방법
<a href="1.html" style="color:red; text-decoration: underline"> // 색상변경과 밑줄, ;으로 여러 속성 구분
// a태그 안에 style 태그를 직접 사용(선택자 필요x)CSS 속성을 스스로 알아내기
구선생: css [text size] property
CSS의 토대 1.효과
<style>
a {
color:black;
text-decoration: none;
}
h1 { // h1 선택자
font-size: 60px; // 텍스트 사이즈
text-align: center; // 텍스트 위치 정렬
}
</style>CSS 선택자의 기본
CSS의 토대 2.선택자
<a href="1.html" style="color: gray;">HTML</a> // style 태그가 중복
<a href="2.html" style="color: gray;">CSS</a> // style 태그가 중복웹페이지에 있는 모든 태그 중에서 saw라는 class 값을 가지고 있는 모든 태그에 대해
폰트 컬러를 gray로 주기
<head>
<style>
. saw { // '.saw' class값이 saw인 태그를 가리키는 선택자
// '.'을 안붙이게 되면 class값이취소선 saw인 태그를 가리키는 선택자
color:gray;
}
</head>
...
<a href="1.html" class="saw">HTML</a>
// class라는(같은 의도에 따라 하나로 그룹핑) HTML 속성을 사용해 중복 제거
<a href="2.html" class="saw">CSS</a>
// = class값이 saw인 태그<head>
<style>
.active {
color: red;
.saw { // (모두다 class 선택자일 경우) saw 선택자가 a태그와 더 가까워 active보다 힘이 쎄다
color: gray;
}
}
</head>
....
<a href="2.html" class="saw active">CSS</a>
// class는 여러개의 속성 ok, 띄어쓰기로 구분
// 하나 태그에는 여러개의 속성이 들어올 수 있고
// 여러개의 선택자를 통해 하나의 태그를 공동으로 제어 가능id 선택자: 우선순위가 더 높은 것을 사용할 필요가 있을 때
<head>
<style>
#active { // id 선택자 // saw보다 a태그에 더 멈에도 불구하고 힘이 쎄다
color: red;
}
.saw { // class 선택자
color: gray;
}
a { // tag(element) 선택자
color:black;
text-decoration: none;
}
</head>
....
<a href="2.html" class="saw" id="active">CSS</a>구체적 ←→ 포괄적
(우선순위 ↑) (우선순위 ↓)
id class tag
tag 선택자를 통해 전체적인 디자인을 쭉 해놓고
그 중에 예외적 것들의 ID를 딱,딱, 딱 찍어 가면서
ID 선택자를 통해 예외를 두는 것이 디자인과 코딩에 있어서 효율적
박스 모델
Block element, Inline element
같은 block 태그(element)는 한 줄의 화면 전체를 쓰지만 같은 inline 테그(element)는 줄바꿈을 하면 보기 좋지 않아 딱 자기의 콘텐츠 크기만큼을 쓴다
<head>
<meta charset="utf-8">
<title></title>
<style>
h1, a { // 모든 h1과 a태그에 적용 // 선택자는 콤마로 구분!
//border-width:5px; // border: 테두리 지정
// border-color:red;
// border-style:solid; // solid: 단선
border:5px solid red; // 위 세줄을 한줄로 줄일 수 있음
padding: 20px; // padding, 컨텐츠와 테두리 사이에 여백
magin: 0; // magin, 컨텐츠 바깥 여백
width:100px; // 100px 크기만큼 태그 크기 변경
display: inline;
// block태그를 inline 태그처럼 사용
//반대로 display: block;도 가능
//display: none; 을하게되면 화면에서 태그 사라짐
}
</style>
</head>박스 모델 써먹기
개발자도구(F12) 눌러서 박스 영역 확인
border-bottom:1px solid gray; // 테두리 아래쪽만 라인 표시그리드 소개
2차원(행과 열)의 레이아웃 시스템을 제공
<style>
#grid{ // grid id 태그
border:5px solid pink;
display: grid; // grid 설정
grid-template-columns: 150px 1fr;
// 입력 순서대로 적용, columns의 자동 비율 설정 단위: fr
}
div{
border:5px solid gray;
}
</style>
<body>
<div id="grid"> // grid id 태그 선언
// <div>: 디자인을 위한 용도없는 태그, block 태그 (태그들묶어줄때 주로 사용)
// <span>: <div>와 용도같으나 inline 태그
// 2개의 <div>태그를 감싸기 위해 <div id> 태그로 묶음
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
기술 사용 빈도: caniuse
- 웹페이지 수정원하는 영역 마우스 오른쪽 클릭
- 검사 선택
- 원하는 영역 코드 클릭
- 값 더블클릭 후 이동해보며 원하는 값 찾기
반응형 웹
미디어 쿼리 - 반응형 디자인을 css를 통해 구현하는 핵심개념
개발자 도구에서 화면의 크기(픽셀) 확인하기
드래그시 우상단에 픽셀 표시
@media(max-width:800px) {
/* 미디어쿼리(조건) */
div{
display: none;
}
}CSS 코드의 재사용
항상 극단적인 생각, 웹 페이지 100,000,000개의 디자인을 바꾼다면?
중복의 제거는 코딩의 핵심
style 태그 안의 css코드를 별도의 style.css 파일에 복사 -> 관리의 폭발적인 효과!
// style.css 파일을 불러들여와 웹 페이지에 표시 # 크롬 개발자도구 -> Network -> 파일을 리로드했을 때 내부적으로 어떤 파일들을 서버에서 다운로드했는지 보여줌 # + style.css 파일을 만들면 좋은 또 하나의 이유! 캐싱: 저장하다 한 번 STYLE.CSS 다운로드 받았다면, STYLE 파일이 바뀌기 전엔 웹브라우저는 로컬에 파일을 저장해놓고 재사용함
CSS의 뿌리
★속성[풍부한 표현력]과 선택자[속성을 정확하게 표현]★
.
댓글