[웹 공부] 1주차 정리 (2)

https://opentutorials.org/course/3086

WEB2 - CSS - 생활코딩

위의 강의 복습용 포스팅입니다.

아직 작성중

---

CSS - html의 문법에 태그를 추가하는 대신 디자인을 맡는 프로그램을 제작하게 되었다

 

선택자 우선순위

tag < class < id

(우선순위가 같은 것들 중에선 마지막에 오는 것이 우선)

 

왜?

=> id값은 단 한 번 등장해야함

모든 a 태그 선택 vs 하나의 id 선택

=> tag 선택자는 id 선택자보다 포괄적이다. ( id가 더 구체적이므로 우선 )

=> 포괄적인 것을 먼저 처리하고 예외적인 것들을 처리( 더 효율적 )

 

grid

display : block level element, inline, none 등 어떤 태그가 표시되는 방법을 완전히 바꾸는 속성

<div> 태그 : 아무 의미없음 디자인 목적으로 묶어주기 위한 태그

display:grid;
grid-template-columns: 2fr 1fr;

 

fr : 화면 전체를 기준으로 조정하게 되는 단위

 

그리드를 사용하면 텍스트의 양에 따라서 자동으로 크기를 조절하게 된다.

 

---

CSS의 최신기술을 사용할 때 그 기술을 사용할 수 있는지(지원하는지) 데이터에 근거해서 판단해야 한다.

https://caniuse.com/

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

-> 현재 웹 브라우저들이 얼마나 그 기술을 채택하고 있는가에 대한 통계를 보여주는 사이트

 

---

반응형 디자인 (Responsive Web)

화면의 크기에 따라서 웹 페이지들이 반응해서 최적화된 모양으로 바뀌게 하는 것(동작하는 것)

 

미디어 쿼리

어떠한 조건을 만족할 때만 CSS의 내용이 동작하도록 하는 것이 가능(가로모드 세로모드)

@media(min-width:800px){
    div{
        display:none;
    }
}

=> 화면 너비가 800px 이상이 되면 div 태그 항목이 사라진다

=> min-width:800px -> display:none이 실행될 조건 : 화면의 너비가 최소 800px은 되어야 한다.

 

CSS 코드의 재사용

<link rel="stylesheet" href="style.css">

 

link 태그

 

내부적인 원리를 몰라도 적용 가능, 중복의 제거 -> 파일 하나만 바꾸면 수 많은 웹 페이지가 동시에 변화한다.

네트워크적인 측면에서는 웹 페이지 안에 CSS를 넣기가 효율적 -> But, 캐싱을 통해 해결

=> 한 번 CSS 파일을 다운받으면 파일이 변경되기 전까지 컴퓨터에 저장해서 계속 사용한다(캐싱하면 네트워크 사용 X)