# @media

ijy1995

transform 태그

wonder1247

position 으로 시작점을 설정하고,t-r-b-l 로 위치를 정한다.static가장 기본형. static 은 위치 변형이 불가하다.relative현위치 기준. trbl을 적용할 수 있다.absolute부모 태그를 기준으로 trbl을 적용할 수 있다.fixed브라우저

codemodel6

반응형웹을 만들기 위해서는 미디어쿼리를 사용한다.1.CSS 파일을 HTML 파일에 적용하던 것처럼 < head >태그 안에 < link >태그를 위치 시킵니다. 다른 css 파일을 적용할 때와 다른 점은 미디어 속성을 사용하여 조건을 지정한다는 점입니다. 미

ksykma

게시글&댓글 관련 기초 api 설계를 해보자!게시글 리스트 보여주기, 게시글 작성하기, 게시글 상세페이지 보여주기, 게시글 상세페이지에서 수정하기, 게시글 상세페이지에서 삭제하기, 댓글 전체 보여주기, 댓글 작성하기, 댓글 수정하기, 댓글 삭제하기, 좋아요에 대한 ap

azerose

밸!하~밸로그 여러분 안녕하세요!오늘의 주제는 반응형 디자인에 대해서 이야기를 드려보려고 합니다!요즘 가장 많이 들리는 말이죠?여러 채용공고에서도 자주 보이는 내용인데요!바로 반응형 웹입니다!취업을 하기위해서 나아가 현 프론트엔드의 흐름을 알기위해서라도 꼭 알아야겠죠?

nanyong0214

화면 크기에 따라 화면 요소들을 다르게 보여주도록 웹 페이지를 디자인하는 것을 말한다. 쉽게 말해 디바이스 종류에 따라 웹 페이지의 크기가 자동적으로 재조정되는 것순수한 웹을 통해, css를 구현하는 핵심적인 개념화면의 특성들에 따라 어떤 조건을 만족할 때만 css내용

gaeul11

플렉스박스는 사용자 인터페이스 디자인에 최적화된 레이아웃을 정의하는 CSS.이미지, 텍스트 같은 요소를 원하는 곳에 배치하는 데 사용합니다. 인라인이 단순히 여백을 없애는 데 사용한다면, 플렉스박스는 여백을 없앨 뿐만 아니라 축을 변경한다든지, 자식 간의 정렬을 가운데

xmun74

다양한 전자기기가 등장하면서 각각의 화면 크기에 맞는 웹 페이지를 위해 반응형 웹이 등장하게 됐다.유지보수에 효율적검색엔진 최적화에 유리하나의 URL을 기반하여 사용자 접속 효율적을 관리 가능사이트 속도 저하로딩 속도, 이미지 리사이징 문제로 성늘 저하될 수 있고, 사

euji42

웹 브라우저의 동작원리, 구조, 렌저링 과정에 대한 설명과 반응형 웹 구현을 위한 미디어쿼리 사용법

anfrhkrna

1) > static, media 파일을 정적 파일이라하며 데이터가 가공돼서 보여지는 동적 파일과 달리, 미리 저장되어 있어서 페이지가 렌더링될 때 제공된다. >> static은 이미지,css,js 개발자가 심어둔 파일로 같이 식당의 기본 세팅과 같고, media는 model의 파일 필드나 이미지 필드를 통해 저장된 파일, 즉 사용자가 업로드할 수 있는 파...

sehee-xx

Responsive Design 반응형 웹 디자인(Responsive Design)이란 웹 디자인 기법 중 하나로, 하나의 웹사이트에서 PC, 스마트폰, 태블릿 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 의미한다. 이를 사용할 때, 미디어 쿼리를 이용해 사용할 수 있다. > @media @media...

rlatjsdn147

데스크톱 뿐만아니라 모바일, 태블릿, 등 모바일 기기의 이용이 늘어남에 따라 소비자(이용자)들은 데스크톱이 아닌 환경에서도 서비스를 제공받기를 원한다. 데스크톱에 비해 태블릿, 모바일 환경은 이용자의 눈에 들어오는 영역이 좁기 때문에 (데스크톱의 모니터 환경과 다르기

ssalpyo

사이트는 크게 반응형 사이트와 적응형 사이트 두가지로 나뉘게 된다.적응형 사이트의 대표적인 예로는 네이버가 있다.크기를 줄였을 때 사이즈가 같이 줄어들지 않고 덮이는 것을 적응형사이트라고 한다.반면에 배달에 민족같이 크기에 따라 이미지도 줄어드는것을 반응형 사이트라고

space086

📔 학습목표 메모 >> Memoization 반응형 >> @Media 접속방법 Memoization : 따로 기록해두고 기록해둔거 가져다 쓸거야~ render시 , 변수가 새로 만들어지는 상황 함수가 새로 만들어지는 상황 부모가 리렌더시, 자식도 리렌더되는

hmds1606

특정 페이지의 state가 변할때 그 안의 모든 컴포넌트들이 아래와 같이 전부 다시 그려지는 매우 불필요한 과정이 생기기 때문에 이를 방지하기 위해 memoization을 사용한다.부모가 리렌더시 자식도 리렌더되는 상황리렌더시 변수가 새로 만들어지는 상황함수가 새로 만

hskwon517

rerender 시, 변수가 새로 만들어지는 상황함수가 새로 만들어지는 상황부모가 리렌더 시, 자식도 리렌더 되는 상황state가 변경될때마다 처음부터 다시 렌더링 되어서 처음에 써놓은 "컨테이너가 렌더링 됩니다"가 계속 찍히고 있음또한 state가 변경될때 다시 렌더

huiju

Algorithm Self Study, Responsive design, @media, Weekly Algorithm Test, Algorithm Class, self Study

anfrhkrna

1) > 장고에서 모델의 FileField/ImageField를 이용해 저장한 모든 파일을 media 파일이라고 한다. css, js 등 개발 리소스로서 우리가 흔히 사용하는 정적인 static 파일과 대조할 수 있다. 2) > Post 클래스에 ImageField를 넣어주고 해당 필드가 내부적으로 사용하는 pillow 라이브러리를 설치했다.(과거 pil...

watervottle

none : 보이지 않게 함visibility : 보이게(기본 값)block : 박스형태의 공간inline : 컨텐츠를 작성하는 공간inline-block : 박스형태의 컨텐츠를 작서하는 공간height 값을 지정할 수 있음margin / padding 을 지정할수 있

gaeul11

1) Cat_Blog Css 추가 모바일 화면으로 작성된 페이지에 @media quary를 이용하여 데스탑 화면으로 보일때 다른 스타일로 보이도록 했다. (1) 모바일 버전 화면(2) PC화면 2) CSS에서 적용할 수 있는 사용자 지정반복적으로 사용되는 스타일을