# max-width
naver careers
-사이트명 : naver careers -사용언어 : html , css -분류 : 반응형 🔋 Main Point [x] max-width , min-width [x] button vs a 태그 차이는? [x] [form] Tag 1. max-width , min-width 헤더 max-width 지정해주지 않았을 때 문제점 : 화면의 양 끝으로 한없이 뻗어져나갈수있다 (항상 화면비율을 100%로만 맞춰놔 실수하는것 중 하나) max-width:1920px로 맞춰놨다 ㅎㅎ 반대로 축소시켰을 때 min-width를 주어 원하는 구간의 정렬이 깨지지 않도록 해주자 2. button vs a 태그 차이는? 
Height & Width
Height & Width height와 width property는 요소의 높이와 가로길이를 정의한다. height와 width property는 padding, borders, margins을 포함하지 않는다. cf) 블럭요소의 기본크기는 width:100%이다. max-width 요소의 최대길이를 정의한다. max-width를 사용하게 되면 가로길이를 줄였을때, 수평 스크롤바가 생기지 않고 자동으로 텍스트를 조정해서 화면에 띄워준다.
max-width,min-width
사용법 주로 반응형웹에서 너비의 최소값 최대값을 줄때 사용한다. 반응형웹에서 창의 너비가 깨지는경우를 방지하기 위해 최대,최소너비값을 정한다. width의 기본값 width : auto;로 되어있으며 웹브라우저가 각html의 요소에 맞게 자동으로 설정해준다. max-width의 기본값 max-width : none; 이 기본값이다. 요소에 제한을 두지 않는다는 뜻. 해당 HTML 요소가 가질 수 있는 최대 너비(width)를 설정함. max-width를 먹은 오브젝트 안에 들어있는 내용들의 크기가 max-width값을 넘지 못하게 한다. min-width의 기본값 min-width : 0; 이 기본값이며, 요소에 제한을 두지 않는다는 뜻. max-width와 같다. 해당 HTML 요소가 가질 수 있는 최소 너비(width)를 설정함. 브라우저가 min-width 속성으로 설정된 너비 이하로 줄어들면 html의 요소의 넓이는 줄어들지 않고, 스크롤이 생성된
[CSS] 박스 모델(1) 2-6
요소의 크기 inline이 아닌 요소는 width와 height로 크기를 조절할 수 있다. 단위 부모의 길이에 상대적인 % 뷰포트(viewport) 너비와 높이의 1/100 단위인 vw와 vh 이들 중 큰 것과 작은 것의 1/100 단위인 vmax와 vmin (텍스트가 한 줄일 경우) height과 line-height을 똑같이 맞춰주면 세로 방향에서 가운데로 정렬한 것과 같은 모습이 된다. calc(100% - 50px)과 같은 형식으로 연산자를 사용하여 필요에 맞는 길이로 조절할 수도 있다. 최대/최소 너비/높이 속성 max-width max-height min-width min-height 설정함으로서 부모 요소의 div보다 더 커지지 않거나(max-width / max-height) 부모 요소가 설정된 자식요소의 min값 (min-width / min-height)보다 줄어
[HTML] min-width와 max-width
1. min-width 기본 설정값은 0이며, 최소 너비를 설정한다. 웹 브라우저가 min-width 속성으로 설정된 너비 이하로 줄어들면, HTML 요소의 너비는 더는 줄어들지 않고 수평 스크롤 바를 생성하게 된다. !codepen[sosoyoon/embed/XWYjBWz?default-tab=html%2Cresult] 2. max-width 마찬가지로 기본 설정값은 0이며, 최대 너비(width)를 설정한다. 설정된 너비 이하로 브라우저의 크기가 줄어들 때 해당 요소에 스크롤 바를 생성하게 된다. !codepen[sosoyoon/embed/xxzEJVJ?default-tab=html%2Cresult]
[css] 잡다한 CSS Tips.1
[주의] 단. 'Can I Use'에서 호환성 체크 필수 1. 상속(inherit) 위 태그들은 폰트 크기가 기본 사이즈보다 작다. inherit 속성을 적용하면 동일해진다. input, select, button, textarea {font: inherit;} 컬러 역시 inherit 이 필요한 a 태그 a {color: inherit;} 2. 크기 지정? (max-width) 고정된 폭보다 %를 사용하거나 vh, vw, wmin, wmax등 사용 권장. 큰 해상도에서 고정된 폭을 지정할 때 width:보다 max-width: 사용을 권장한다. , , , 같은 요소는 max-width: 100%로 설정을 잊지 말자. 3. 다단 텍스트(columns) column-count: {num} 동일
반응형 웹(Responsive Web)
최근 절대 허용하지 않을 것 같던 '애플'도 허용한만큼 웹을 어느 기기에서도 사용할 수 있도록 만드는 것의 중요성이 더욱 높아지고 있죠! 때문에 기기마다 다른 화면을 맞추기 위해 viewport의 개념을 더 잘 이해할 필요가 있습니다 아래 사진의 viewport, 눈에 보이는 화면의 크기를 말합니다. 다시 말해 웹페이지가 사용자에게 보여지는 영역을 의미합니다. 그렇다면 우리는 viewport를 어디서 확인할 수 있을까? HTML문서를 오픈했을 때 자동으로 head태그에 "meta"태그 중 "meta name="viewport" content="width=device-width, initial-scale=1.0""를 통해 viewport의 크기를 지정해주고 있습니다. 맥
@media 반응형
react color 플젝 하다가 알아낸 사실이다. (min-width ##px)은 최소 ##px 이상이면 발동한다는 뜻.(여기부터) (max-width ##px)은 최대 ##px 까지는 유효하다는 뜻.(여기까지) 그리고 css 코드도 JS와 마찬가지로 위의 코드는 아래코드에 덮어씌여진다. 따라서 max-width일 경우 큰것부터 작은것 순으로 적어야 창 사이즈 크기에 따라 순차적으로 적용이 된다. 만약, max-width일 경우에 작은것을 먼저적은면 창의 크기를 늘려도 작은사이즈가 계속 적용될 수 밖에 없다.(min-width일 경우엔 반대겠지?) 요런식으로 적어야 창을 늘렸을 때, go-back-box가 창에 비례해서 커지고 작아진다.
풀 스크린 화면에 가로 고정
!codepen[learnwebcode/embed/WXRaeM?default-tab=html%2Cresult] css 페이지 제일 위에 폰트 넣기 1. container 삭제 html의 배경색 2. content-area 배경색 흰색 3. header 배경색 #617140 글자 흰색 4. 네비메뉴 site-nav a 글자 흰색 5. header 안에 div.container로 감싸기 CSS 에서 
CSS | Responsive Web (반응형 웹)
Responsive Web(반응형 웹) 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하는 웹 페이지를 의미 Media Query Responsive Web 을 구현하는 CSS technique 특정 조건에서는 어떤 CSS 를 적용 하라는 규칙 부여 가능 작성법 CSS에 @media 라는 문법으로 작성 예시 해석 @media — media 쿼리를 시작 only screen — 어떤 디바이스에서 적용하는지 알려줌. only print— 프린트를 하고싶을 때. screen— 디바이스에 상관없이, 화면에 보이는 스크린이면 전부 적용. and (max-width : 480px) — media feature라고 불리는 부분. 어느 조건에 아래의 css를 적용할지. max/min-width
[TIL] 2020/11/14
Today, I Learned const { matches } = window.matchMedia('(max-width: 48rem)'); 이 코드를 통해서 만약 웹으로 접속하면, 즉, max-width설정을 통해, 48rem 이하인 디바이스에서 접속하면(max-width은 그만큼의 px를 넘지 않을 때를 가정한 것), matches에 true가 리턴되고, 만약 데스크톱과 같은, 48rem 이상의 디바이스에서 접속하면, matches에 false가 리턴되어서, 리액트 내에서 모바일, 데스크톱에 따른 다른 onClick 이벤트 등을 설계할 때 유용하다.(실제 사용 예시) useEffect(() => { const { matches } = window.matchMedia('(max-width: 48rem)'); if (matches && text.copyOfTask.len