# calc()

tootb

2.4 뷰포트 단위 상대단위로 em과 rem만 있는 것이 아니다. 브라우저 뷰포트의 상대적 크기(길이)를 정의하기 위한 뷰포트 단위도 존재한다. > Viewport 란 출처: MDN - Viewport 컴퓨터 그래픽스에서, 뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역입니다. 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면 전체)을 말합니다. 뷰포트 바깥의 콘텐츠는 스크롤 하기 전엔 보이지 않습니다. - 브라우저 주소창, 툴바, 상태바(다운로드 시 보이는 하단창)는 포함하지 않음 뷰포트 중에서도 지금 볼 수 있는 부분을 시각적 뷰포트 (visual viewport)라고 부릅니다. 스마트폰에서 사용자가 화면을 확대했을 때와 같은 특정 상황에서 레이아웃 뷰

dram26

[flex / space-between / calc] 위처럼 하나로 묶인 두 버튼이 있다. 업로드 하기 버튼은 왼쪽에, 작성취소 버튼은 오른쪽에 붙어 정렬 돼있고, 두 버튼의 사이는 16px로 고정한채로 다양한 넓이의 창에 대응하려면 어떻게 해야할까? 두 버튼을 묶는 부모 div 에 display: flex; 와 justify-content: space-between; 를 주고, 각각의 버튼의 width 값을 calc를 활용하면 된다. flex로 다양한 넓이에 대응하게 만들고 space-between 으로 어떤 넓이이든 각 요소간 간격이 동일하게 한 다음 width 값에 calc(계산자)를 활용해 가로길이의 %와 px 값을 활용해 디테일한 사이 간격과 넓이를 맞출 수 있다. ![](h

deukchan

calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 된다. 표현식은 표준 연산자(곱셉과 나눗셈을 먼저 계산, 괄호 먼저 계산) 우선순위를 따른다. 과 - 는 좌우 공백이 존재해야 한다. (곱셈과 나눗셈은 반드시 필요로 하지 않지만 일관성을 지키는 것이 좋다.) 0으로 나누면 html 구문분석기에서 오류가 발생한다. 식 안에는 상대적인 길이 단위를 포함해야 한다. 나누기의 경우 값이 정수로 반올림 된다. css 변수와도 계산이 가능하다. 주로 가변적인 길이와 고정 길이의 계산이 필요할 때, 영역 등분시 값이 명확하게 떨어지지 않을 경우 사용한다.

harimad

0. Intro 이번 장에서는 웹 페이지 기본 구조를 설계해 보겠습니다. 위의 이미지는 웹 페이지에서 해당하는 영역을 색깔별로 나타냈습니다. 특정 넓이(768px)를 기준으로 몇몇 영역이 동적으로 변경됩니다. 반응형 웹 페이지를 적용하는 것이 목표입니다. 위의 이미지는 전형적으로 많은 웹 사이트에서 사용하는 웹 페이지 구조중에 하나입니다. 이번에 기본 페이지 구조를 잘 이해해 놓으면, 언제든지 원하는 웹 페이지 구조를 구현해낼 수 있을 것입니다. 아래 4가지를 중점적으로 살펴보겠습니다. CSS root 변수를 생성 & 사용 CSS 함수인 calc() 를 이용해서 CSS의 속성값으로 사용 웹 페이지의 기본 구조 설계 반응형으로 페이지 적용 실습확인 👈👈👈

hmds1606

첫날 프로젝트를 위한 팀이 발표되었고.. 두근두근.. 코캠 프론트 7기에서 차분하고 은근 개그캐인 지수님, 엄마처럼 잘 챙겨주는 은채님, 순수한 4차원 하니님, 백엔드에서 제일 조용한 것 같은 똑똑한 세웅님, 덩치도 크고 키도 큰 민준님 우리조 이름은 오쪼라고!!(5조라서 5조라고!!) 하니님의 강력한 어필로 방탈출 러버들을 위한 통합예약사이트를 주제로 진행하기로 했다ㅎㅎ 첫날은 정신없이 이것저것 정하고 피그마..... 작업을 했는데 박스 아래 테두리 그리는거를 하려고 했는데 무려 20분이나 걸렸다ㅠㅠ 하지만 사람은 적응의 동물ㅎ 적응되니까 기계처럼 기획안대로 척척 만들어내고 마무리했다! 7/5 오늘부터는 피그마를 토대로 코드를 작성하기 시작했다. 아직 백엔드에서 API를 넘겨주지 않아 기능작업은 하지 못하고 UI만 그리고 있었는데도 난관에 부딪혔다ㅠㅠ ![](https://velog.velcdn.com/images/hmds1606/post/3101

igit322

1. 학습한 내용 라이브러리 HTML과 CSS 더 빠르고 쉽게 관리하는 방법 에밋(Emmet) https://emmet.io/ https://docs.emmet.io/cheat-sheet/ calc 함수 크기를 정할 때 사용 >연산자 앞뒤에 꼭 공백넣기 사용 가능 연산자: + - * / 계산단위가 달라도 사용가능 커스텀 속성(변수)과 조합 커스텀 속성 css변수, 캐스케이드 변수 >커스텀 속성 주의점 대소문자 구분함 커스텀 속성에 속성명을 넣을 수는 없다 커스텀 속성을 호출한 뒤 '단위'를 덧붙이면 적용되지 않는다. clac 함수 사용하면 단위를 빼고도 사용 가능 * 1rem SASS css를 보조하는 새로운 도구 파일 확장자 .scss .sass https://www.sass-lang.com/ >장점 셀렉터 부모 자식 관계를 네스트로 구현 변수로 값 다

vrisel

배경 현재 CSS는 bootstrap, vuetify 등의 라이브러리를 사용하고 있긴 하지만 간혹 커스텀 클래스가 필요한 경우가 있는데, 마냥 CSS로만 다루기보다는 다른 테크닉도 체험해보려고 SCSS에 발을 들였다. CSS와 형태가 비슷한 SCSS가 SASS보다 마음에 들었다. 현재 버전의 create-nuxt-app에는 sass-loader 등이 내장되어있는지, 별다른 패키지 추가설치 없이 다음과 같은 테스트 코드가 잘 작동했다. 그런데 SCSS 변수를 calc()에 넣으니 제대로 동작하지 않았다. 1차 시도 nuxt와 sass/scss를 키워드로 검색해보니 다들 node-sass와 sass-loader를 설치하라고 하는데 내 프로젝트 package.json에는 둘 다 없기에, 일단 설치를 해보았다. 그랬더니 다음과 같은 컴파일 에러가 났다. ![](https://images.velog.io/images/vris

jinic

https://stackoverflow.com/questions/37754542/css-calc-round-down-with-two-decimal-cases

0715yk

!youtube[x7EWFoRzAkk] css calc()에 대하여 calc css 내에서 사칙연산을 가능하게 해준다. 실제로 어떤 부분에서 쓸 수 있는지를 바탕으로 학습을 해보고자 한다. 이번 포스팅은 위의 동영상을 참고로 작성했다. 1) calc를 이용한 반응형 설계 !codepen[0715yk/embed/dyRvVjW?default-tab=html%2Cresult] 실제로 코드펜 사이트에 들어가보면 괜찮은데.. velog로 축소된 화면으로 보니까 내가 설계한 부분이 전부다 깨졌다..ㅎㅎ px값으로 설정해놓은 부분이 많아서 그런 것 같다. calc는 내가 생각했을 때, 반응형에 아주 유용한 도구인 것 같다. 위에서처럼 width를 줄 때 calc(100% - 30px) 이렇게 해놓으면 반드시 오른쪽에 30px만큼의 여백을준다(전체를 기준으로). 이 때, 짚고 넘어가야할 것은 calc를 쓸 때 저렇게 사칙연산을 해줄거면 1