WEB2 - CSS

<!--
-->

- 대시보드 사이의 코드를 없는셈 해주는 것!

 

<style> a {
color:red;
}
</style>

-css 태그 (a 링크태그의 폰트 색을 red로 바꿈)

 

css언어를 사용하면 웹페이지를 유지,보수하기 쉽고 가독성이 높아진다. 기존의 html 보다 디자인을 훨신 효과적으로 할 수 있다.

 

css가 탄생한 배경

• html에서 디자인의 기능을 뺏어옴
• css이 html을 통해서 디자인하는 것보다 훨씬 더 효율적이다.

 

---

css 속성

 

웹페이지에 css를 넣는 방법

• <style>태그를 사용하기
• style속성을 사용하기

선택자(selector)와 효과(declaration)가 있는데 선택자는 css효과를 적용해 줄 대상을 가리켜 선택해주는 것 = a{ }와 같은 모양새

효과는 그에 적용되어 나타나게 될 css효과를 css문법을 통해 표현한 것으로 color:black;text-decoration:none;과 같이 생김

효과는 여러 개를 선언하고 지정해 줄 수 있고 세미콜론(;)으로 효과를 구분해준다.

즉 웹페이지 내 여러개의 a링크 디자인을 한꺼번에 바꿀 때는 style태그를 이용하고 웹페이지 내 한 개의 a링크 디자인 바꿀 때는 속성을 이용함!

 

[text-decoration: none] : 밑줄 없애기

[text-decoration: underline] : 밑줄 생성

 

---

 

속성을 스스로 알아내는 방법

 

검색엔진에서 검색하기 !

폰트 크기와 가운데 정렬 -> css font size property, css text center property 검색 후 코드 보기 ~ 

property는 어떤 값을 나타낸다.

font-size:45px;
text-align:center;

 

 

---

선택자의 기본

 

• id
• class
• a(태그)

우선순위 : id(선택적)>class(중간층)>tag selector (포괄적)

class="saw active" 선택자에서는 .saw나 .active로 표현하고

id="active"선택자일 땐 #active로 표현. (id태그가 가장 우선적이고 하나만 존재한다)

 

class로 .saw .active표현

id선택자로 표현

 

 

---

박스 모델

 

 

border : 테두리

border - width : 테두리 두께

border - color : 테두리 컬러

border - style : 테두리의 스타일 ex) 단선인지 실선인지

 

block level element : 화면 전체를 쓰는 태그

inline element : 자기 자신의 크기만큼 갖는 태그

 

display : 속성 ex)inline, block

display : none; 태그를 안 보이게 할 수 있음.

 

padding : 콘텐츠와 테두리 사이의 여백

margin : 테두리와 테두리사이의 간격

 

개발자도구 사용하기 (크롬) : 오른쪽 마우스-검색

 

 

===중복 된 것을 압축===

1. h1,a {

}

 

[ , 를 통해 압축 가능]

 

2. border : 5px solid red;

 

[안에 내용은 순서 상관 없음]

 

 

박스 모델 써먹기 ( margin,padding 사용)

 

---

그리드(grid)

 

 

<div> block level element 줄바꿈 무색무취의 테그 (헤드가 아님)

- 디자인적 태그로서 헤드가 아님 (꾸며줄 때 쓰는 태그)

<span> inline element

 

grid-template-columns:150px 1fr; 

-> 한열에 나란히 놓고 (columns:열 row:행) 네비게이션이 150px 아티클이 1fr이다 fr은 나머지 전체 크기 말함!

id셀렉터를 쓸 때는 div부모태그를 만들어서 씀!

 

 

-현재 웹브라우저들이 그 기술들을(html,css,javascript 등등..) 사용하고 있는지 통계를 보여주는 사이트

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

 

 

---

미디어 쿼리(media query) -반응형 디자인

 

@media(min-width:800px) {
}

@media(max-width:800px {
}

min은 최소값 max 최대값

즉 min은 800부터 아래 명령이 작동됨 (800이상부터 작동)

    max는 800까지 아래 명령이 작동됨 (800이상부터 작동 안 함)

 

 

 

 

각각의 페이지를 수정할 때 일일히 붙여넣어서 중복을 주는 것보단 중복을 없애야한다

그래서 중복되는 style태그들을 style.css 파일을 만들어 저장하고

각각의 페이지에서 link태그를 이용해서 적용하면 된다.

 

*캐쉬로 인해서 style.css 파일을 캐싱할 수 있게 되면 훨씬 더 빠르게 웹페이지를 보여줄 수 있고 네트워크 트래픽, 다시 말해 사용료를 훨씬 더 적게 낼 수 있다.

*중복을 제거해서 재사용성을 높이고 가독성을 높이고 유지보수를 편리하게 하는 게 중요함!