Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 오늘부터 인라인 디스플레이를 알아봅시다! Inline DIsplay 모든 HTML의 요소는 디스플레이의 기본 값을 가지고 있는데 그 값은 이게 가로의 공간을 다른 요소들과 공유할 수 있는지 없는지 관여하게 됩니다. 어떤 요소들은 내용의 크기와 상관없이 브라우저의 왼쪽 부터 오른쪽까지 다 채우게 되고 또 어떤 요소들은 내용이 필요한만큼만 가로의 공간을 차지하고 그 옆에 다른 요소들이 올 수 있게 합니다. 필요한만큼만 가로의 공간을 차지하고 그 옆에 다른 요소들이 올 수 있게 합니다??? 필요한만큼만 가로의 공간을 차지하고 그 옆에 다른 요소들이 올 수 있게 하는 요소를 표로 정리해보았습니다. 태그 설명 The Anchor element / href 속성과 함께 쓰이며 웹 페이지, ..

안녕하세요 동기 여러분! 오늘은 Z-Index에 대해 알아봅시다! Z-Index 혹시 어도비의 일러스트레이터를 사용하시는 분이면 'ctrl + [ or ]'이라는 단축키를 알고 계실 겁니다. 이렇게 두 도형이 겹쳐져 있는데 분홍색 직사각형이 노란색 직사각형 위에 있습니다. 이때 분홍색 직사각형을 클릭하고 'ctrl + ['를 누르면 분홍색 직사각형이 아래로 내려갑니다. 네 ~ 이런 기능이 CSS에도 있는데 그게 바로 z-index입니다. z-index 정의와 사용방법 z-index는 요소의 겹쳐지는 순서를 정합니다. z-index의 값은 높아질 수록(숫자가 높을수록) 위에 배치됩니다. (위에 두 번째 스크린샷에 노란 직사각형이 z-index값이 2라면 분홍 직사각형은 1) ※ z-index는 오직 포지션..

안녕하세요 동기 여러분! 오늘은 포지션 프로퍼티의 값인 스티키에 대해 알아봅시다! 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 개발자들의 작명 센스가 돋보인다 고정된 데미지를 주는 정전기 기술이라니 영어로 ..

안녕하세요 동기 여러분! 오늘은 박스 사이징 프로퍼티에 대해 알아봅시다. Box Sizing 아래의 코드를 보도록 합시다. 우르르 쾅쾅 우르르 쾅쾅 * { margin: 10px; } #big { border: 15pt solid tomato; } #small { border: 5pt solid tomato; } 여기까지는 문제가 없는데 여기서 전체 요소나 div에 width를 설정하면 뭔가 특이한 일이 일어납니다. * { margin: 10px; width: 200px; /* 모든 요소에 적용하기 위해 값 설명 생김새 content-box content 영역을 기준으로 박스의 크기가 변함 border-box border 영역을 기준으로 박스의 크기가 변함 오늘의 느낌 아 오늘은 영어로 공부한게 이해가 ..

안녕하세요 동기 여러분! 오늘은 Visibility 프로퍼티에 대해 알아보도록 합시다! Visibility visibility를 영어 사전에 찾아보면 눈에 보임, 가시성 등등의 뜻을 가지고 있습니다. 흠 그럼 뭔가 보이게 하고 안 보이게 하는 프로퍼티겠군요? 생김새 p { visibility: hidden; } Visibility의 값들 값 설명 visible 기본 값. 요소가 보임. hidden 요소가 숨겨짐 (하지만 공간은 차지하고 있음!) collapse 테이블의 열 또는 행을 제거해기 위해 사용 (display: none;처럼) 해봅시당 visible 안녕하세요 동기 여러분! /* CSS */ p { visibility: visible; } hidden 안녕하세요 동기 여러분! /* CSS */ ..

안녕하세요 동기 여러분! 오늘은 새해 기념으로 CSS의 마진(Margin)과 페딩(padding)의 값을 초기화하는 방법을 알아봅시다! Resetting Defaults 우리가 많이 사용하는 크롬, 파이어 폭스, 마이크로소프트 엣지 등등 큰 회사의 브라우저들은 외부의 스타일시트가 없을 경우 자동으로 적용되는 기본 스타일시트가 있습니다. 이 기본 스타일 시트를 유저 에이전트 스타일시트(User Agent Stylesheet)라고 부릅니다. 크롬에서 외부 스타일 시트 없이 웹 페이지를 만들면 저는 CSS파일을 연동은 했지만 비워둔채 실행을 했는데요. 빨간 네모안을 보면 user agent stylesheet라고 쓰여 있고 margin: 8px;라고 설정이 되어 있습니다. 위와 같이 유저 에이전트 스타일시트가..

안녕하세요! 동기 여러분! 오늘은 Overflow-x와 Overflow-y에 대해 알아보도록 합시다! Overflow-x and y 우리 학교 다닐 때 x는 보통 가로 변을 표현하고 y는 세로 변을 표현했었는데 여기서도 같습니다. overflow-x는 내용이 박스보다 가로로 넘쳐날 때 사용하는 프로퍼티이고 overflow-y는 내용이 박스보다 세로로 넘쳐날 때 사용하는 프로퍼티입니다. Overflow-x 예시 SHOWMETHEMONEYOPERATIONCWALPOWEROVERWHELMING - 값이 visible일 경우 p { border: medium dotted rgb(234, 0, 255); width: 200px; overflow-x: visible; } - 값이 hidden일 경우 p { bord..