CSS : 웹 페이지를 아름답게 꾸미기 위함.
웹 페이지 꾸미는 방법HTML, 이미 있는 언어에 디자인과 관련된새로운 태그 추가하는 방법 ( 사용 안함 )CSS, 디자인에. 최적화된 완전히 새로운 언어를 만드는 것
<style>...</sytle> : 웹 브라우저에게 작성 내용을 CSS 문법에 따라 해석하라고 알려줌.CSS 장점디자인을 바꿀 떄 개수에 상관없이 한 번에 바꿀 수 있음.처음 작성자 의도와 다르게 바꿀 가능성이 적어짐.유지보수도 쉽고, 가독성도 높아짐디자인
CSS 기본 문법<style> 태그 활용 selector(선택자) : style태그 효과를 누구에게 줄 것인지 지정declaration(선언) : 선택자에 지정될 효과style 속성 활용 sytle 속성을 쓰면 속성 값을 웹 브라우저가 CSS문법에 따라 해석
선택자 ( selector ) : <style> a(선택자) { color(속성, property): red(속성 값, property value);(선언,declaration)} </style>
font-size : 텍스트 크기 결정하는 속성text-align : 텍스트 정렬 결정하는 속성
class 선택자 : 같은 것 그룹핑효과 주려는 태그 안에 class="값"입력, style태그 안에 .값 { 선언 }해서 사용. -> 값이 있는 태그들에 효과 넣어짐.속성 값 여러 개 쓸 수 있고, 띄어쓰기로 구분여러 선택자로 하나의 태그 공동 제어 가능id 선택자i
block level element : 화면 전체 쓰는 태그ex) h1태그 inline element : 자기 컨텐츠 크기 만큼 공간 쓰는 태그 ex) a태그 display속성block level element, inline element로 부피 변경 해줌. none
그리드 : 데이터를 엑셀 모양의 정형화된 표 안에 나태내도록 하는 웹 기술NAVIGATION, ARTICLE 두 태그를 나란히 하기 위해, 부모 태그로 감쌈150px 1fr : 첫 번째 태그는 150px라는 사이즈 고정, 두 번째 태그는 나머지 공간 사용1fr 2fr
반응형 웹 (responsive web): 화면 크기에 따라 웹 페이지 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것미디어 쿼리 : 반응형 웹 구현해 주는 CSS문법스마트폰 쓰면 가로, 세로 화면 모드에 따라 ( 조건 만족 시 ) CSS내용이 동작하도록 하는 것이
800px보다 화면이 작을 때id값이 grid인 태그에 display가 grid에서 block 으로 바뀜.ol태그 오른쪽 테두리가 사라짐.h1제목 테두리 아래쪽 선이 사라짐.
중복 제거모든 웹페이지에서 중복되는 css 코드를 style 태그를 제외한 순수한 css 코드만을 복사해서 style.css라는 파일에 복사함.<link rel="stylesheet" href="style.css">style태그 지우고, 링크 태그를 그 자리에 적