Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 오늘은 포지션 프로퍼티의 값인 스티키에 대해 알아봅시다! Position: Sticky 혹시 라이언 일병 구하기라는 영화를 보신적이 있나요? 거기에 보면 보병들이 독일군의 탱크를 불능 상태로 만들기 위해 스티키 범(Sticky Bomb)이라는걸 만들어서 작전에 사용하는데 보병들이 탱크가 공격할 수 없는 사각지대로 몰래 접근하여 탱크의 무한궤도(탱크 바퀴)에 폭탄을 붙이고 달아납니다. 그러면 폭탄이 터지고 탱크는 움직일 수가 없는 상태가 되죠. 네 ~ sticky의 뜻인 '끈적거리는, 달라붙는'을 말하고 싶어서 영화 이야기를 해보았습니닼ㅋㅋㅋ 오늘 알아볼 Sticky도 달라붙는 친구이기 때문에 뜻을 유념하면서 가봅시다~ Position: Sticky는 fixed와 비슷한 기능을 가..

안녕하세요 동기 여러분! 오늘은 포지션 프로퍼티의 값인 픽스드에 대해 알아봅시다! Position: Fixed Fixed는 영어사전에 찾아보면 '고정된'이라는 뜻을 가지고 있다. 그렇다 이 녀석은 요소를 내가 정한 위치에 고정시켜 주는 녀석이다. -> 이 말은 웹 페이지가 커지든 작아지든 스크롤을 내리든 올리든 상관없이 요소가 정해진 자리에 고정된다는 소리 진짜 고정이 되는지 해봅시다. 난 모르는 사람 난 부모 난 자식 /* CSS */ div { border: 8px solid palevioletred; margin: 20px; } #parent { height: 5000px; /*

안녕하세요 동기 여러분! 오늘은 포지션의 프로퍼티의 값인 엡솔루트(보드카)에 대해 알아보도록 합시다! Position: Absolute HTML의 요소 위치를 지정하는 방법이 다섯 가지가 있는데 그중 한 가지가 Absolute이다. Absolute absolute를 영어사전에서 찾아보면 형용사로는 '완전한, 완벽한' 명사로는 '절대적인 것'이라는 뜻이 있다. 그렇다. position: absolute는 절대적인 파워로 요소를 움직이는 것이다. 아래의 코드와 실행화면을 보자. 난 모르는 사람 난 부모 난 자식 /* CSS */ div { border: 8px solid palevioletred; margin: 20px; } #child { position: absolute; } 포지션의 값을 엡솔루트로 설..

안녕하세요 동기 여러분! 오늘은 포지션 프로퍼티의 값인 스태틱과 릴레이티브에 대해 알아보도록 합시다! Position: Static, Relative HTML의 요소의 위치를 지정하는 방법이 5가지가 있는데 그중 두 가지가 Static과 Relative이다. Static static을 영어사전에 찾아보면 '고정된, 정지 상태의' 또는 '정전기'라는 뜻을 가지고 있다. 혹시 디아블로2를 하는 유저라면 원소술사의 기술 스태틱 필드를 들어본 적이 있을 것이다. 정전기 공격인데 고정된 양 만큼의 적의 체력을 깎는 무시무시한 기술이다. 음.. 이걸 안다면 static의 '고정된, 정지 상태의' 라는 뜻을 더 외우기 쉽다. (디아블로2 개발자들의 작명 센스가 돋보인다 고정된 데미지를 주는 정전기 기술이라니 영어로 ..

안녕하세요 동기 여러분! 오늘은 포지션 프로퍼티... Working with Position 포지션 프로퍼티는 HTML의 요소들을 정확히 어디에 위치할지를 결정할 때 사용합니다. 포지션의 값(value) 중 유용하게 쓸 수 있는 게 바로 relative입니다. 오늘은 positon: relative;에 대해 알아보도록 합시다! position: relative;에 사용할 수 있는 프로퍼티들이 있는데, top, left, right, bottom이 있습니다. 위 네 가지의 프로퍼티들은 px, em, rem으로 설정이 가능한데 설정을 했다면 자기 자신의 위치로부터 top에서 ?px, left에서 ?px 만큼 이동을 합니다. 생김새 .showmethemoney { position: relative; top: ..