320.10 a

#300#Applications#320#Frontend#320.10#CSS#320.10 a#CSS_Default

토픽 목록

1. CSS 등장 이전의 상황
   스타일을 구현하는 html과 함께 사용되는 언어
   처음에는 html에서 구현했으나, 세세한 설정과 정보가 섞이는 문제가 발생해서 어렵지만 따로 떨어져나옴

2. CSS의 등장
   head에 사용 style태그안에 디잔인을 변경하고 싶은 태그 명시 후 사용
   여기서 a와같은 html의 어느 범위를 선택할지에 해당하는 부분이 선택자라고함
   color의 부분은 속성 이라고함. 속성을 다양하게 알아야 잘 사용 가능

   CSS덕분에 HTML이 아닌 부분에 대한 정보의 격리와 디자인을 기술에 특화된 언어로 웹 구축 및 관리 가능

3. 혁명적 변화
   다음과 같이 여러가지 속성을 한 태그에 표현하는 것도 가능

4. 박스모델
   태그는 자신의 부피만큼의 영역이 있음
   부피를 차지하는 부분도 테두리 border, 안의 내용과 테두리사이의 padding, 테두리와 바깥의 사이의 margin이 있음.해당 영역들을 없애거나 줄이거나 늘리거나 일부분만 표현하여 웹을 디자인함
   특히 css 속성에서 display:block 한 줄 전체를 차지하는 부피를 가지며, inline 의경우 컨텐츠의 길이만큼만 부피감을 가짐. 필요한 경우 width와 height로 길이나 높이 조절
   개발자 도구에서 style탭을 클릭한 후 해당영역에 마우스를 가져다 대면서 위에서 언급한 padding,margin등을 확인 가능

5. 그리드
   좀 더 복잡한 레이아웃을 표현하기 위해 그리드형태로 사용
   먼저 html 태그중 div와 span이라는 태그는 말그대로 css를 위해서 표현되는 아무영향도 안 주는 속성이 있음. div는 위에서 언급한 한 줄만큼의 부피감인 display:block이고, span은 inline.

   다음과 같이 border의 경우 border-width, border-style, border-color 의 속성을 한 줄로 표현
   display:grid 형태로 사용 하며 세로로 두 컨텐츠를 배치 가능.
   1fr의 경우 화면의 나머지 부피만큼의 해당

6. 반응형 디자인
   여러 화면 비율에 따라 디자인을 변경하는 웹.
   미디어쿼리를 이용해서 사용
   다음과 같이 조건에 따라 특정 조건을 거는 형태.
   max-width:800px라는의미는 800px보다 작은 해상도를 가진 (예를들어 휴대폰이나 작은 타블렛 같은)화면의 경우 다음과같이 표현이라고 가능.

7. CSS 코드의 재사용
   지금까지는 한 html페이지마다 작업을 해주기때문에 1억개의 페이지가 생겨버러미녀모든 작업을 수동으로 해야함. 그래서 한 파일에서 해당 속성을 가져오는 방식으로 사용

style.css를 다운받아야하기에 다운이 없을때보다는 느리긴함.
단 캐시라는 기능을 통해 css의 경우 변하지 않는 부분을 미리 다운받아 높는다면 이런 문제도 해결 가능

10. 수업을 마치며

#ID선택자
.CLASS선택자
TAG 선택자

style 태그, 사용법과 속성 사용법
세미콜론 문법

id선택자 # >CLASS선택자. > Tag선택자

같은 서택자일경우 가장 나중에 나오는 것이 우선순위

출처 생활코딩