본문 바로가기

프론트엔드/CSS

(3)
[CSS] 미디어 쿼리(media query) 1. 미디어 쿼리(media query) 화면 해상도나 기기 방향 등을 조절하여 HTML에 스타일을 적용할 수 있으며, 반응형 웹을 만들 때 사용할 수 있다. @media(조건){스타일} - 조건에 사용하는 미디어 속성은 width, height, device-width, device-height, color, color-index, resolution, monochrome, orientation, aspect-ratio, device-aspect-ratio 등이 있다. - 이 중 width를 보면 max와 min을 사용해보면 (min-width: 800px) => 최소 800px 너비부터 스타일을 적용한다는 것이고, (max-width: 800px) => 최대 800px까지 스타일을 적용한다는 것이다...
[CSS] 박스 모델(box model)과 그리드(grid) 1. 박스 모델 박스 모델(box model) - HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분한다. - 내용(content) 텍스트, 이미지 - 패딩(padding) 내용과 테두리 사이의 간격 - 테두리(border) 내용과 패딩을 감싸는 테두리 - 마진(margin) 테두리와 이웃하는 요소 사이의 간격 예) h1 { font-size:45px; text-align: center; border-bottom:1px solid gray; margin:0; padding:20px; } - block level element 화면 전체 이용 ※ display:inline;을 쓰면 inline element처럼 됨. - inline el..
[CSS] CSS란? 1. CSS란? Cascading Style Sheets의 약자이다. HTML에 시각적 표현(디자인)을 입히는 언어이다. 2. CSS 문법 - 선택자(selector)와 선언부(declaratives)로 나뉜다. - 선택자: 디자인을 입히고 싶은 태그(요소) - 선언부: 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함한다. 중괄호({ })를 사용하여 전체를 두르고 있다. 선언 => {속성명(property) : 속성값(value);} 3. CSS 선택자 - HTML 요소 선택자 .... WEB - 그룹 선택자 여러 선택자에 CSS를 적용할 수 있다. 선택자 간에 쉼표(,)로 구분한다. .... WEB HTML CSS JavaScript - id 선택자 웹 페이지에 포함된 여러 요소 중에서 특정 아이..