# fixed

beckhye

구글에서 폰트 추가 1. 코드 추가 해당문구 추가 원하는 폰트 다운 해당 폰트 추가 icon fontAwesome사이트 head 끝 태그 전에 붙혀넣기 ![](https://velog.velcdn.com/images

muscatcola

position 속성 글의 흐름을 벗어나서 요소를 자유롭게 배치할 때 쓰는 속성이다. position에 따라서 위치를 정하는 기준이 달라진다. 기본값은 static이고, static인 경우 원래 있어야 할 위치에 배치된다. 위치 정하기 위치를 정하는 기준에 대해서 top, right, bottom, left 속성으로 위치를 정할 수 있다. 값이 모두 똑같은 경우 inset 속성을 쓴다. relative 포지션 요소의 원래 위치를 기준으로 배치한다. 이때 요소의 원래 자리는 그대로 차지하고 있다.![](https:

tjsrn183

문제 > aside 컴포넌트를 상단과 우측기준으로 fixed시킨 상황이었습니다. 브라우저를 최대한 확대시킨 상태에선 정상적으로 작동하였지만 브라우저를 축소시킨 상황에서는 main컴포넌트위로 겹쳐지는 이슈가 발생하였습니다. 해결노력 > 1. float을 사용하여 우측 사이드바를 만들고 그안에 aside블록을 포함시켜봄 sticky를 사용해봄(aside컴포넌트가 우측에 붙어야하는데 하단좌측에 붙어버리는 이슈발생) 전체 화면을 3등분(3행)을해서 그 컨테이너들은 flex시키고 가장 우측 블록에 aside를 포함시켜봄 모두다 실패했다. fixed는 정말 무적의 position인듯해보였다. 정답 정답은 원티드 홈페이지에서 얻을수있었다. ![](https://velog.velcdn.c

93youngsun

LOD 표현식 세부수준 식 : Level of Detail INCLUDE : 화면에 포함되지 않은 특정 차원을 포함하여 결과를 계산 계산된 필드 만들기 { INCLUDE [제품 중분류]: SUM([매출])} 측정값 합계 -> 최댓값으로 변경 복사 후 재집계하여 사용가능 EXCLUDE : 화면에 포함된 특정 차원을 제외하여 결과를 계산

sjkang930

📍 position 속성의 역할 > 문서 상에서 요소를 배치하는 방법을 정의한다. 기본값은 position : static으로, 일반적인 html 문서의 흐름대로 요소를 배치하는 방식을 의미한다. 📌position : static : (기본) 기본적인 html 쌓임맥락에 따라서 화면 상 위치를 차지한다 1 2 3 📌relative : absolute의 기준이 되는 요소 > 상대위치 position:relative는 그자체로는 특별한 의미가 없습니다. 딱히 어느 위치로 이동하지는 않습니다. 위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있습니다. static을 선언한 요소와 relative를 선언한 요소의 차이점은 좌표 프로퍼티의 동작 여부 뿐 그외는 동일합니다.

rosencrantz96

혼자 정리를... 해보는... 레이아웃의 진화 처음 배울 때 머가 먼지 몰라서 무조건 fixed 갈겨보면서 페이지를 만들었던게 떠오른다 ㅋㅋㅋㅋㅋ 미친 페이지를 만들었었내 아주... 💡 Fixed (aka Static) 현재는 잘 사용하지 않는 레이아웃 가장 기본이 되기 때문에 다른 타입의 레이아웃과 어떻게 다른지 비교하기에 좋다 ㅋㅋㅋ > 픽셀로 고정된 레이아웃 (a fixed width in pixels) ✔️ 웹사이트의 컨테이너가 움직이지 않도록 프로그래밍 되어있다 → 'static'이라는 이름이 붙은 이유 ✔️ 스크린 사이즈나 해상도와 관계없이 독립적으로 width를 유지한다 ✔️ fixed-layout 웹사이트에서는 960px이 가장 널리 사용된다 🥲 이러한 레이아웃은 작은 화면으로 볼 때 흉측한 수평 스크롤이 나타나고 사용성이 떨어진다 🥲 인터페이스를 완벽하게 통제할 수 있다는 장점보다 단점이 크기 때문에 새로 만들어지는

brinymaestro05

포지션 position: relative, absolute, fixed; 지정된 태그의 위치를 지정해주는 스타일 z - index : 뒤에 적힌 숫자의 크기에 따라 z축(높이)를 지정함(크기순) fixed : 박스를 지정한 위치에 고정함 absolute : 박스를 부모의 크기 내에서 지정된 위치로 옮김 *absolute를 쓸땐 부모에 포지션 relative나 absolute가 적용되어 있어야 한다

sungbin3833

회사에서 기존에 바텀시트를 일일이 컴포넌트를 만들어야 해서 너무나 귀찮고 관리하기가 어려웠다. 그래서 이번 리팩토링에서 글로벌 바텀시트를 새로 만들어 관리하기로 하였다. 하지만 생각지 못한 문제들에 부딛혔는데 그 중 하나가 css 관련 문제였다. position fixed overflow 문제 원래 보여주고 싶은 바텀시트는 아래처럼 모바일에 맞는 화면을 보여주고 싶었다. 하지만 styled component에 다음과 같이 코드를 넣었더니 예상치 못한 현상이 발생하였는데... 이런식으로 모바일에 맞춰진 컨테이

yeonn

01 position: > position: fixed; top: 0; left: 0; right: 0; fixed 속성도 absolute 처럼 html문서의 흐름과 상관없이 위치를 좌표로 결정한다. 하지만 absolute와 다른 점은 부모 요소나 다른 요소를 기준으로 하는 것이 아닌 브라우저 전체 창을 기준으로 이동한다. fixed로 고정한 객체는 스코롤 바를 내려도 고정된 위치에 계속해서 표현된다. 03 relative > position: absolute; background-color: #207a5c;; top: 50px; z-index: 99; absolute는 모든 위치 기준 top, bottom, `

arch-spatula

HTTP에 대해 설명하고, 알고있다면 HTTP 메세지 구조에 대해 더 자세히 설명해주세요 HTTP는 hypertext transfer protocol의 약어입니다. hypertext는 웹페이지를 연결하는 링크를 뜻합니다. transfer는 전화 같은 것을 연결하다는 의미인데 인터넷의 경우 특정 페이지를 의미합니다. protocol은 절차를 뜻하는데 인터넷 통신의 다양한 절차를 의미합니다. HTTP는 특정 페이지 같은 리소스를 서버에게 요청을 보내고 그 특정 페이지를 서버로 부터 받는 응답입니다. HTTP의 메시지 구조는 다음과 같습니다. 먼저 요청의 경우 요청라인, 해더, 공백라인, 요청 메시지로 구성됩니다. 요청라인에는 메서드, request-target, HTTP-version이 있습니다. 요청 메시지 해더의 경우 Host와 url을 담습니다. 반면 응답의 경우 상태라인, 해더, 공백라인, 응답 메시지고 구성됩니다. 상태라인의 경우 HTTP-version, status-c

imyoox

position 엘리먼트의 위치를 컨트롤 할 수 있다. position 속성은 상속되지 않는다. position의 기본 속성은 static 이다. 속성 종류 : 문서 흐름에 맞춘 기본 위치 : 해당 요소의 현재 기본 위치 : 지정한 기준점을 기준으로 절대 위치 : 지정한 위치에 고정시킴 > position: static; position의 기본값으로 위-왼쪽(0, 0) 에 배치된다. 속성을 무시한다. > position: relative; 자신의 원래 위치 기준으로 지정값만큼 위치가 이동된다. 기존 위치가 0, 0 인 상태에서 값을 주면 아래로 100px, 오른쪽으로 50px 이동하게 된다. > position: absolute; 일반적으로 속성을 가진 부모의 엘리먼트를 기준으로 위치가 이동된다. 해당 속성을 가진 부모를 찾아 위로 계속 올라가는데, 속성을 가진 부모가 없다면 브라우저 (상단-왼쪽)인

minsu2344

코드 Header의 position fixed를 사용하면 스크롤을 내려도 화면 상 고정한 곳에 위치 다른 게시물을 가릴 수 있음 Wrapper Header의 children으로 Wrapper가 있는데 높이가 4rem Spacer HeaderBlock이 끝나고 존재하는 공간 창출 컴포넌트 PostListPage Header를 넣고 그 아래 게시물을 작성했다. Header의 크기가 4rem이고 그 밑 Spacer가 4rem 안녕하세요는 4rem 이후에 나옴

csj20222

CSS Casacading Style Sheets HTML 태그에 옷(=디자인)을 입혀주는 기법 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄여준다. 1. HTML문서에 CSS적용하는 방법 CSS는 HTML문서 내의 어느 위치에나 올 수 있지만, 일반적으로 head 태그 안에 위치한다. 2. HTML문서에 CSS를 적용하는 방법 CSS코드를 별도의 외부 소스파일에 작성해 두고 HTML에서 해당 파일을 참조하는 방법 이 방법은 한번 작성한 코드를 여러 페이지에서 재사용 할 수 있다는 장점이 있지만, CSS에 문제가 생길 경우 해당 파일을 참조하는 모든 웹페이지에 문제가 번질 수 있다는 위험도 있다. 3. HTML 태그에 style 속성을 사용하는 방법 이 방법은 세밀한 조정이 가능하다. 전체적으로 소스코드 양이 지나치게 많아지고, 유지보수가 쉽지 않다. 4. CSS코드를 작성하는 기본 형식 -

2sel

으아아 오늘은 힘냈다... ui가 변경된 부분이 flex가 아닌 grid로 나누는게 편한 디자인이라서 좀 걱정이긴하지만... 14일에 댓글 기능과 함께 찾아보기로 했다. 아마 사이드바처럼 나누는 느낌으로 한다면 좀 괜찮지 않을까 싶긴한데... 자신은 없다...ㅎㅜㅜ 그래도 데드라인까지는 어떻게든 해봐야겠다 ++ 튜터님께 설마 이걸 grid로 바꿔서 해야할까요? 싹싹 빌면서 확인사살하러 갔는데 나는 또 멍청함을 증명하고 말았다. 이거 fixed 쓰면 되는데.. 왜 난 fixed를 생각 못했지??? flex-shrink주고 난리를 쳤는데... 이런 경우가 있다면 한번 fixed도 생각해보는 것을 추천한다.

kimhsr

fixed를 사용하게 되면 navbar에 아래 배너이미지가 가려지게 됨 원래는 이렇게 해야되는데 이 화면과 같이 설정이 된다. 해결 방법 body { padding-top: 70px; } body 엘리먼트의 상단에 메뉴바 높이 만큼 패딩(padding)을 주면 쉽게 해결이 가능하다.

yoo_oon

년월에 해당하는 세그먼트의 수익을 사용자가 설정한 금액에 따라 색상의 범위를 만드는 예시 Fixed 함수를 사용하여 세그먼트의 항목별로 금액에 따른 범위를 설정해주면 위의 이미지와 같이 설정 가능하다.

mike7643

position 속성 position 속성은 요소들이 화면에 어떻게 배치될지를 지정한다. 특이사항으로는, 이 속성은 자식 요소에게 대물림되지 않는다는 점이 있다. static static은 기본값으로, 전적으로 페이지의 흐름을 따르며 top, bottom, left, right, z-index 속성의 영향을 받지 않는다. relative relative 값은 원래 위치를 기준으로 top~right 속성값이 적용되도록 한다. 요소의 위치는 이동하지만 요소가 차지하는 공백의 위치는 유지된다. (의자는 그 자리에 두고 나만 움직인다. 다른 사람들의 의자도 가만히 있다.) absolute absolute 값은 static이 아닌 첫 부모 요소(바로 앞 부모 -> [내 바로 아버지]가 static인 것은 absolute의 기준이 될 수 없다!)를 기준으로 top~right을 사용하여 위치를 조정할 수 있다. 요소는 페이지의 문서 흐름에서 벗어나, 자

svstar94

정렬, 요소 배치, 등 웹 화면을 그릴 때 자주 사용하는 CSS 기법들을 정리해보았다. 순서 >1. 특정 요소 내 정가운데 정렬 화면 가운데 정렬 내부 요소 크기 조정 1. 특정 요소 내 정가운데 정렬 div 박스 내에 있는 요소를 정가운데에 정렬해야 할 경우 사용한다. 2. 화면 가운데 정렬 고정된 크기의 모달이나 배경을 화면 정 가운데 위치시킬 때 사용한다. 요소를 담는 배경을 만들어놓고, 해당 요소 안에 flex로 가운데에 배치한다. 요소 하나만 사용할 것이라면, fixed center 주석 아래 부분만 사용하면 된다. 3. 내부 요소 크기 조정 상위 컴포넌트가 flex, flex-wrap일 경우 사용한다. 한 줄에 보일 하위 요소 개수를 조절해야할 경우, 맨 뒤에 숫자를 계산하면 된다. 계산법은 100% / item 수 보다 살짝 작게하면 된다. (gap, padding, margin을 넣을 경

nuyhes

반응형 페이지 제작 2-1 디자인 호텔스 클론코딩 >결과 > HTML >SCSS >모바일 720px 사이즈로 메뉴바를 먼저 제작하였다. left 100%를 벗어난 영역에서 나타나는 효과를 만들기 위해 position: fixed; , display: none; , left: -100% 를 적용한다. >left: -100% 로 나간 모습 _* 오늘 처음 알게된 사실인데 fixed를 한 상황에서 left방향으로 화면 밖을 나가더라도 스크롤이 생기지

silver-bell

그렇다면, 부모의 속성에 property "position"이 있으면 어떻게 될까? > Ans : 부모 영역을 기준으로 움직인다. [예시] 다른 이름의 두 가지 selector(big-box, small-box)가 있다. big-box가 small-box를 감싸고 있다. 1) 다음은, 아래 그림은 부모의 속성에 position이 없을 때, 예시이다. (big-box의 style에 position이 없을 때) small-box는 position: absolute로 전체 화면 기준으로 이동한 것을 볼 수 있다. 2) 부모(big-box)의 속성에 position(relative, absolute, fixed)가 있기라도 하면, 그 부모의 영역을 기준으로 움직인다. > _**big-box 내 p