FE/CSS(4)
-
[CSS] 미디어 쿼리
반응형 웹 디자인 화면의 크기에 따라 웹 페이지 요소들이 반응해서 최적화된 모양으로 바뀌는 디자인 @media(조건){실행문} ex) @media(min-width:800px){ div{display : none;}} → 화면 크기가 최소 800px이면 div 태그는 사라진다.
2022.06.06 -
[CSS] 그리드
그리드를 사용하기 위해서는 태그들을 그룹화할 필요가 있다. 그리드 속성 display : grid grid-template-rows: grid-template-colulmns:
2022.06.06 -
[CSS] 박스 모델
html 태그에는 block element, inline element가 있다. block element : 화면 전체 공간 사용 inline element : 자기 자신 크기 공간 사용 html 태그의 부피감을 결정하는 css 문법 폭 width 높이 height 테두리 border 컨텐츠와 테두리 사이 padding 박스 간 간격 margin
2022.06.06 -
[CSS] CSS란
Cascading Style Sheets의 약어로 마크업 언어로 쓰여진 문서의 외형을 만드는데 사용되는 언어이다. 웹 브라우저에게 html 문법으로 css 문법으로 해석하라고 알려줄 필요가 있다. : style 태그 안쪽 내용은 css 문법으로 해석하고 처리 → 웹 페이지 꾸미는 내용은 style 태그로 한정 CSS 구성 요소 선택자 selector : 스타일 입힐 대상을 결정 선언 declaration : 속성 : 값 속성 property : 어떻게 꾸밀지 결정 값 value : 값을 통해 구체화 ex) a { color:green} → a 태그 모든 글자색 초록색으로 변경 (css 코드로 중복 제거 가능) declaration을 구분자 ;를 사용하여 구분한다 CSS 문법 css 언어를 사용하는 방식에..
2022.06.06