Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 오늘은 포지션 프로퍼티의 값인 스태틱과 릴레이티브에 대해 알아보도록 합시다! 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..

안녕하세요 동기 여러분! 오늘은 Overflow에 대해 알아봅시다. Overflow라는 단어 주방에서 일할 때 자주쓰는 단어인데 여기서 만나니 반갑네용ㅋ Overflow 하나 둘 셋 야 ~~ 뚜루루루루루루루 뚜루루루 천방지축 어리둥절 빙글빙글 돌아가는 짱구의 하루 우리의 짱구는 정말 못말려 (짱구야~) 짓궂은 장난은 나에게 맡기세요 이 세상 누구보다 자신이 있다구요 이리모여 모두 모여 양파를 먹어보자 그런 눈으로 바라보면 부끄럽죠 엄마~ 아빠~ 나는 인기만점 (짱구야~) 천방지축 어리둥절 빙글빙글 모두가 정신이 없네~ 짱구는 대단하네 짱구는 천재라네~ 다음은 무엇을 할까? 하나 둘 셋 야 ~~ 뚜루루루루루루루 뚜루루루 천방지축 어리둥절 빙글빙글 돌아가는 짱구의 하루 우리의 짱구는 정말 못말려 (짱구야~)..

안녕하세요 동기 여러분 오늘은 최소, 최대의 폭과 높이 설정에 대해 알아봅시다! Minimum and Maximum Height and Width 웹 페이지는 사용자가 사용하는 스크린마다 다르게 보이기 때문에 웹 페이지를 만드는 개발자들은 사용자에게 일정하고 같은 페이지를 보여주기 위해 많은 시간과 노력을 기울여야 합니다. (부트스트랩이면 한방에 해결되는데) 이러한 문제점 때문에 CSS는 폭과 높이에 각각 두 가지의 프로퍼티를 제공하는데 그게 바로 min-width, max-width, min-height, max-height입니다. 생김새 p { min-width: 300px; max-width: 500px; min-height: 300px; max-height: 500px; } 최소 폭을 300px로..

안녕하세요 동기 여러분! 오늘은 Margin Collapse에 대해 알아봅시다! Collapse는 영어사전에서 찾아보면 붕괴되다, 무너지다 또는 명사로 실패, 붕괴라는 뜻을 가지고 있습니다. Margin Collapse 마진이 겹쳐서 박살이 나는 경우가 있는데 이를 Margin Collapse라고 합니다. 아래의 코드로 실험을 해봅시다. 프로토스 사이오닉 에너지를 사용하는 최초의 자손 테란 코프룰루 지역에 정착한 인류 저그 젤나가가 창조한 두 번째 생명체 /* CSS */ * { width: 300px; text-align: center; } .protoss { background-color: gold; border: 3px solid black; margin-bottom: 50px; } .terran ..

안녕하세요 동기 여러분! 오늘은 마진(Margin)의 값인 오토(Auto)에 대해 알아봅시다! Auto 요소를 중앙에 정렬하고 싶을 때 사용하는 값(value)인 Auto는 사용하기 위해 몇 가지 필요한 사항들이 있습니다. .notEnoughMinerals { width: 400px; margin: 0 auto; } 위의 코드를 살펴보면 위아래 방향의 마진(margin)은 0으로 좌우 방향은 auto로 설정이 되어 있습니다. auto는 브라우저가 직접 적절한 크기의 여백을 설정하는 기능이 있는데 여기에서는 .notEnoughMinerals를 클래스로 가진 요소를 중앙으로 정렬해주는 역할을 합니다. auto를 쓰기 위해서 width를 설정해주자 다음의 코드로 실험을 해봅시다. 미네랄이 부족합니다. 미네랄을..

와썹 동기 가이즈! 오늘은 마진에 대해 알아보도록 합시다! Margin 마진(Margin) 설정은 경계(Border) 밖의 빈 공간을 나타냅니다. 코드에서의 Margin #margin1 { border: thick solid red; padding: 35px; width: auto; margin: 50px; } #margin2 { border: thick solid blue; padding: 35px; width: auto; margin: 50px; } 마진이 없다면? ※ 조금 뜬금 없는 소리인데 'Wraith awaiting launch orders.' 스타크래프트 1의 레이스가 생산될 때의 대사이다. 항상 '윙거윙어졸스'라고 들려서 그렇게 생각했는데 '레이쓰 어웨이링 런치 오덜스'라니ㅋㅋ 한참을 레이..