생활코딩 web2 - CSS
2강. CSS가 등장하기 전의 상황
디자인<>정보
3강. CSS의 등장
<style>
a {
color: red;
}
</style>
4강. CSS의 기본 문법
웹페이지 안에 CSS를 삽입하는 2가지 방법
1. 스타일 태그 사용
<style>
a {
color: red;
}
</style>
a { } : 선택자. color:red; : 효과, declaration선언
2. style 속성을 사용
<li><a href="2.html" style="color:red">CSS</a></li> html의 속성
text-decoration: none; 밑줄 없애기
style="color:red;text-decoration:underline" 밑줄 생성
효과와 효과는 세미콜론(;)으로 구분
5강. 혁명적 변화
<style>
a {
color: red;
}
</style>
a: 선택자 selector
color:red; : 선언,효과,declaration
color: 속성property
red: 값value
6강. CSS 속성을 스스로 알아내기
h1 글씨 크기 바꾸기 검색어 추천: css text size property
h1 {
font-size: 45px;
}
가운데 정렬 검색어 추천: css text center property
text-align: center;
7강. CSS 선택자의 기본
a태그에서 파란색은 아직 방문하지 않았다는 뜻이고, 보라색은 한번 방문했었다는 뜻.
모든 a태그를 검은색으로 변경, 방문한 적이 있었던 링크는 회색으로 변경, 현재 사용자가 머물고 있는 링크는 빨간색으로 변경
: a {color: black;}
html,css라고 써진 a태그를 class이름이 "saw"로 묶기. class="saw" .saw {color: gray;}
class = 그룹핑grouping하다 = 하나로 묶는다. 띄어쓰기로 구분
class="saw active" css라고 써진 a태그에 클래스값 active추가. .active {color: red;}
active를 id로 변경. id가 class보다 우선순위가 높다. #active {color: red;}
태그선택자보다 class선택자가 우선순위가 높다. 같은 선택자 종류내에서는 가장 마지막에 등장하는 선택자가 우선순위가 높다.
id의 값은 단 한번만 등장해야 한다.(중복되어서는 안된다)
구글 검색: css selector
8강. 박스 모델
태그 종류별 차지하는 크기 알아보기 위해 테두리 설정
<style>
/*
block level element
*/
h1 {
border-width: 5px;
border-color: red;
border-style: solid;
display: inline;
}
/*
inline element
*/
a {
border-width: 5px;
border-color: red;
border-style: solid;
display: block;
}
</style>
block level element(element=tag)
display: none; /*태그를 안보이게 할 수 있음*/
,를 통해 선택자를 여러개 사용가능
h1, a {
border-width: 5px;
border-color: red;
border-style: solid;
}
h1, a {
border: 5px solid red; /* 순서는 중요하지 않다 */
}
콘텐츠와 테두리 사이 간격 : padding
테두리와 테두리 사이: margin
구글검색: css box model
개발자도구 f12
9강. 박스 모델 써먹기
F12로 박스모델보면서 margin, padding값 조정
10강. 그리드 소개
두개의 div태그를 나란히 놓기 위해서, 부모태그가 필요. 두 개의 div태그를 div태그 하나로 감싸줌.
부모 태그에 grid라고 아이디설정(아무거나 해도됨)
#grid {
border: 5px solid pink;
display: grid;
grid-template-columns: 150px 1fr;
}
caniuse.com 현재 웹 브라우저들이 css,html,javascript에 대한 기술들을 얼마나 채택하고 있는지 보여주는 사이트
11강. 그리드 써먹기
grid-template-columns: 150px 1fr; -> padding, margin 조정
12강. 미디어 쿼리 소개
Responsive Web=반응형 디자인=반응형 웹=화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것.
미디어 쿼리(Media Query)
화면의 크기에 따라서 어떤 HTML의 요소를 보였다 안 보였다하게 하기.
@media(min-width: 800px) {
div {
display: none;
}
}
미디어 쿼리를 이용하면 여러 화면의 특성들에 따라서 어떠한 조건을 만족할 때만 CSS의 내용이 동작하도록 하는 것이 가능.
13강. 미디어 쿼리 써먹기
@media(max-width: 800px){
#grid {
display: block;
}
ol {
border-right: none;
}
h1 {
border-bottom: none;
}
}
14강. CSS 코드의 재사용
코딩을 잘하는 방법: 중복의 제거
<style></style>태그 안 소스들을 style.css파일을 만들어 붙여넣기
<link rel="stylesheet" href="style.css">
F12개발자모드 - network탭: 내부적으로 어떤 파일들을 웹서버에서 다운로드 받는지 보여줌.