CSS (5) 썸네일형 리스트형 CSS 용어 질문 정리 CSS 파일을 보신다면 .box { width: 200px; height: 200px; color: #fffff; font-size: 16px; } 형태로 되어있는 것을 보실 수 있습니다. 이에 대한 각각의 요소들에 대한 용어를 정리하겠습니다. box 부분은 selector(선택자) 를 의미합니다. width, height, color, font-size 등은 property(속성) 입니다. 200px, #fffff, 16px는 values(값) 이라고 합니다. CSS 반응형 웹사이트를 위한 media queries developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries 미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN 미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다. developer.mozilla.org 해당 내용에 대한 공식문서 반응형 웹사이트란? 우리가 홈페이지로 만든 레이아웃을 화면사이즈에 따라 변경해주는것이 반응형 웹사이트 디자인입니다. 이와 동시에 여러분들 부트스트랩이나 제이쿼리를 사용하실떄 @media 표시를 보신적 있으실겁니다. 네 바로 media queris 입니다. 형식은 @me.. CSS Flex Box (플렉스 박스) 본 게시물은 유튜버 "드림코딩엘리" 님의 플렉스 박스편을 보고 제 티스토리에 복습차원에서 정리하는 것입니다. http://academy.dream-coding.com/ Dream Coding All Courses, 프론트엔드 중급, 백엔드 타입스크립트 + 객체지향 프로그래밍 마스터 (16) 5.0 average rating academy.dream-coding.com Flex Box란? 박스를 행과 열로 배치시킬 때 쓰는것 원하는 프론트단의 view를 위하여 기존에는 position float table로 컨텐츠를 배치하여 왔습니다. float의 원래 목적은 텍스트들이 이미지를 감싸게 해주는 목적으로 쓰임. 하지만 Flex Box라는 개념이 나옴으로 우린 이제 container와 item의 개념만 알면 .. CSS 레이아웃 CSS 레이아웃편을 작성하게 된 이유 : 컨텐츠를 배치할 때 position의 개념과 display 개념을 까먹는 경우가 많아 이렇게 정리하게 되었습니다. 태그는 기본값이 block-level의 태그 ( 한줄을 모두 차지 ) 은 컨텐츠 단위로 감싸주는 기본값이 Inline-level의 태그 입니다. 컨텐츠가 없으면 자리를 차지하지도 않습니다. 태그에 컨텐츠를 넣었더니 Inline-level의 태그는 컨텐츠를 감싸줍니다. 요렇게 따로 CSS 셀렉터를 설정하여 배경색 설정을 해줍니다. inline , block , inline-block 3가지 종류의 케이스를 살펴보겠습니다. 위에서 설명드렸다 싶이 태그의 기본값은 block-level display: inline을 통해 inline-level로 변경하여 주.. CSS 셀렉터 selectors - html의 어떤 태그를 고를건지 규정하는것 selector의 종류들 Universal * -- 모든태그 type Tag -- 특정태그 ID #id -- 특정 id의 태그 Class .class -- 특정 class의 태그 State : attribute [] html 가상개발환경 : jsbin.com * { color: green; } -- 모든 태그의 컬러를 그린으로 설정. 그런데 li { color: blue; } -- li item의 컬러를 블루로 설정하면 universal 태그로 지정한것보다 더 강함. (태그 가까이 설정한 아이들이 더 강한 셀렉터이다. ) 태그는 block 레벨의 element임 => html문서에서 한줄을 모두 차지 이렇게 크기 조정도 가능 state 셀렉.. 이전 1 다음
