# absolute

126개의 포스트
post-thumbnail

[CSS] positon

CSS의 position 속성을 사용하여 HTML의 요소들을 원하는 위치에 배치할 수 있다.

2023년 11월 12일
·
0개의 댓글
·

position absolute 가운데 정렬

회색 테두리 box_container빨간색 선 box아이스크림 ice_imgleft: 50%; 주면 사진 크기만큼 계산해서 margin-left: -계산값px; 해준다.그래서 transform: translateX(-50%)을 사용transform: translateX

2023년 11월 9일
·
0개의 댓글
·
post-thumbnail

position absolute 가운데 정렬

회색 테두리 box_container빨간색 선 box아이스크림 ice_imgleft: 50%; 주면 사진 크기만큼 계산해서 margin-left: -계산값px; 해준다.그래서 transform: translateX(-50%)을 사용transform: translateX

2023년 11월 9일
·
0개의 댓글
·
post-thumbnail

[포스코x코딩온] KDT 웹 10기 231028 1주차 | CSS(3)-position, z-index, display

📖Position > position을 이용해서 요소의 위치를 지정할 수 있다. static : 정적 위치 지정 방식 (기본값) relative : 상대 위치 지정 방식 absoslute : 절대 위치 지정 방식 fixed : 고정 위치 지정 방식 relativ

2023년 10월 30일
·
0개의 댓글
·
post-thumbnail

jquery animate

스타일은 필수지속시간, 시간당속도함수는 필수는 아니다.$(선택자).click(function(){} → 클릭 기능 함수에 대해 무한 반복style="visibility: hidden;” 기능으로 아래 ‘파일선택 선택된 파일 없음’ 문구를 지울 수 있음.최종 결과물if(

2023년 10월 30일
·
0개의 댓글
·

CSS의 position

CSS position 속성에 대해 알아보기

2023년 10월 21일
·
0개의 댓글
·
post-thumbnail

[tailwind] 이미지의 정중앙에 텍스트 넣는 법

위처럼 이미지 가운데에 텍스트를 넣는 방법이다.흰 박스는 이미지라고 가정한다.tailwind 를 이용하면 위처럼 작성하면 된다.요소를 원래 있어야 할 위치로부터 상대적으로 \~~만큼 이동한다.반대로 이동한다고 생각하면 된다.이 코드에선 아래로 20px, 오른쪽으로 20

2023년 9월 11일
·
0개의 댓글
·
post-thumbnail

[CSS] 다양한 중앙 정렬 방법

빔캠프 당신은..나근 나근한 목소리로 급하지 않게 설명해 주시는 빔캠프님의 라이브에서다양한 block의 중앙정렬 방법을 알려주셨다.매번 중앙 정렬하면 margin: 0 auto;나 text-align: center;, flex, grid만 사용할 줄 알았지 다른 방법은

2023년 9월 2일
·
0개의 댓글
·
post-thumbnail

[CSS] position 속성

글의 흐름을 벗어나서 요소를 자유롭게 배치할 때 쓰는 속성이다. position에 따라서 위치를 정하는 기준이 달라진다. 기본값은 static이고, static인 경우 원래 있어야 할 위치에 배치된다.위치를 정하는 기준에 대해서 top, right, bottom, le

2023년 8월 7일
·
0개의 댓글
·
post-thumbnail

[사전학습 기간] position 속성 / inline-block

position 속성 - relative, absolute, fixed / inline, inline-block, block

2023년 6월 19일
·
0개의 댓글
·
post-thumbnail

[CSS] position 속성

static : (기본) 기본적인 html 쌓임맥락에 따라서 화면 상 위치를 차지한다 1 2 3 relative : absolute의 기준이 되는 요소 absolute : 요소 내에 특정위치에

2023년 6월 13일
·
0개의 댓글
·

position

position은 레이아웃을 배치하거나 요소를 위치시킬때 사용하는 css속성.상속x기본값, 따로 설정해줄 필요없음.position: absolute는 <가장 가까운 위치에 있는 조상 요소를 기준> 부모를 기준으로 절대적으로 움직이게 된다.일반적으로 absolute

2023년 6월 10일
·
0개의 댓글
·
post-thumbnail

position, 그만 헷갈리자

mdn의 position 문서를 바탕으로, 헷갈리기 쉬운 static, relative, absolute 를 비유를 통해 이해해 봅시다. position 은 중요하고 자주 쓰이는 프로퍼티임. 기억해둘 포인트가 많아서 나는 많이 헷갈렸음. 부모 element, 자식 e

2023년 5월 11일
·
0개의 댓글
·

[24] 05/09 자바스크립트 수업

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

2023년 5월 9일
·
0개의 댓글
·
post-thumbnail

Position: 위치속성

01 position: > selector{position: static / relative / absolute / fixed; } 02 static position 속성을 지정하지 않으면 기본값으로 지정된다. top, bottom, left, right 모든 좌표가

2023년 4월 13일
·
0개의 댓글
·

면접 스터디 - 4일차

HTTP는 hypertext transfer protocol의 약어입니다. hypertext는 웹페이지를 연결하는 링크를 뜻합니다. transfer는 전화 같은 것을 연결하다는 의미인데 인터넷의 경우 특정 페이지를 의미합니다. protocol은 절차를 뜻하는데 인터넷

2023년 3월 30일
·
0개의 댓글
·

position 속성

position 엘리먼트의 위치를 컨트롤 할 수 있다. position 속성은 상속되지 않는다. position의 기본 속성은 static 이다. 속성 종류 : 문서 흐름에 맞춘 기본 위치 : 해당 요소의 현재 기본 위치 : 지정한 기준점을 기준으로 절대 위치

2023년 2월 27일
·
0개의 댓글
·
post-thumbnail

[CSS] 화면을 position: absolute로 꽉 채우기 & letter-spacing으로 글자 좌우로 나란히

이게 부모 요소에 relative가 없어야 돼요! 그러면 body에 찰싹 붙겠죠?근데 좌 우 위 아래 다 0을 주면서 이쪽으로 오라고 유혹해요!!! 난 한 명도 없는데 4명 씩이나ㅠㅠㅠ결국 이곳 저곳에서 다 불려진 요소는 능지가 처참해지며 화면을 꽉 채우게 됐답니다!!

2023년 2월 20일
·
0개의 댓글
·

Layout - Positioning

요소를 일반적인 문서 흐름에 따라 배치한다.positon: sticky 속성을 적용한 요소는 평소 문서 안에서 positon: static 상태와 같이 일반적인 문서 흐름에 따라 배치해 있다가, 스크롤 위치가 임계점(내가 지정한 top / bottom / left /

2023년 2월 14일
·
0개의 댓글
·