Front-end/CSS
[CSS] 스크롤바 생성하기 overflow: scroll
overflow: scroll : 요소의 내용이 요소 크기를 초과하는 경우 스크롤바를 추가하여 해당 영역을 확인할 수 있습니다. overflow: scroll : 가로 세로 스크롤바 overflow-y: scroll : 세로 스크롤바 overflow-x: scroll : 가로 스크롤바
Front-end/CSS
Front-end/CSS
[CSS] 반응형 웹 브라우저의 크기에 따라 너비 값 조절
반응형 웹 너비 값 지정하는 법 브라우저의 크기에 따라 검색창의 사이즈가 조절되도록 너비 값을 주는 방법! 반응형 웹디자인을 할 때는 너비 값을 %로 주는 것이 좋습니다. 개발자도구(F12)에서 상단 맨 왼쪽 두번째 모니터 모양을 눌러주시면 브라우저 사이즈에 따라 요소의 사이즈를 확인할 수 있습니다. 검색창의 크기를 calc() 함수를 써서 전체 100%에서 가로 요소들의 너비를 빼주시면 됩니다! (참고로, 여기서 엑스 버튼과의 간격 10px은 따로 넣은 것이 아닌 가로배열 flex의 justifycontent 속성입니다.) calc() 함수 CSS에서 산술 연산을 할 수 있는 속성으로 더하기, 빼기, 곱하기, 나누기를 사용해서 값을 넣을 수 있습니다.
Front-end/CSS
[CSS] 반응형 웹 디자인, 미디어 쿼리
미디어 쿼리 미디어 쿼리는 웹 페이지, 앱의 뷰 포트 크기, 장치 종류, 화면 방향 등 미디어의 특성에 따라 스타일을 적용할 수 있게 해주는 CSS입니다. @media 미디어 유형 and 조건 { } 미디어 유형의 종류 all print screen tv aural braille handheld projection tty embossed breakpoint(중단점) : 서로 다른 css를 적용할 화면 크기 스마트폰 portrait(세로) 320px, landscape(가로) 480px 태블릿 세로 768px 가로 1024px 데스크톱 1024px
Front-end/CSS
[CSS] 요소 사이즈 조절하는 box-sizing: border-box
box-sizing: border-box box-sizing: border-box 사용하는 이유 반응형 웹을 만들 때, 영역의 너비값을 %로 처리해야 하는 경우가 많습니다. width: 100%; padding: 20px; 해당 태그의 가로 길이는 부모태그의 길이 100% + 가로 padding 40px 부모 태그보다 더 길어져서 부모태그의 길이를 벗어나게 됨 width: 500px; padding: 20px; border: 5px 총 가로 영역: 550px width: 500px; padding: 20px; border: 5px; box-sizing: border-box; 총 가로 영역: 550px 'box-sizing: border-box'를 해주면 패딩, 테두리 포함해서 길이가 계산이 됩니다.
