Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 오늘은 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의 레이스가 생산될 때의 대사이다. 항상 '윙거윙어졸스'라고 들려서 그렇게 생각했는데 '레이쓰 어웨이링 런치 오덜스'라니ㅋㅋ 한참을 레이..

와썹 동기 가이즈! 오늘은 패딩에 대해 알아보도록 합시다! Padding 위의 그림과 같이 패딩은 경계(border)와 내용(content)사이에 있는 공간을 나타냅니다. 코드에서의 padding p { border: thick solid teal; padding: 30px; width: 7.5rem; } 위 코드를 실행 하면 아래와 같은 모습 padding을 없애고 실행하면 이런 모습이 됩니다. 방향에 따른 프로퍼티 설정 padding: 30px;로 코드를 설정하면 네 방향으로 30px씩 빈공간을 만들지만 padding-top: 30px;로 코드를 설정하면 윗 방향으로 30px의 빈공간을 만듭니다. 프로퍼티 설명 padding-top 내용 위쪽으로 빈공간을 만들고 싶을 때 padding-right 내용..

안녕하세요 동기 여러분! 오늘은 보더 레디우스(Border Radius) = 모퉁이 깎기에 대해 알아봅시다! Border Radius border-radius프로퍼티 h1 { border: thick solid teal; border-radius: 40%; width: 210px; } border-radius가 40%로 지정돼서 직사각형이 아닌 둥그스름한 도형으로 바뀌었습니다. 예시 Fire love /* CSS 코드 */ h2 { border: thick solid rgb(187, 0, 0); border-radius: 50%; width: 210px; text-align: center; } border-radius를 50%를 지정했을 때 가장 예쁜 타원형이 됩니다. You wanna piece of ..

안녕하세요 동기 여러분! 오늘은 경계(Border)에 대해 알아보도록 합시다. Borders 경계의 생김새는 아래와 같이 생겼습니다. CSS에서의 코드는 아래와 같이 생겼습니다. p { border: 3px solid red; } 위 코드를 보시면 3가지 종류의 값들을 넣는데 width와 style 그리고 color입니다. Width border에서의 width는 경계선의 굵기를 의미합니다. 아래의 예시는 15px의 굵기입니다. 값 설명 thin 좁은 굵기 medium 중간 굵기 - 기본값 thick 굵은 굵기 숫자 + px 가장 많이 사용하는 픽셀단위 이밖에도 in, pt, cm, em 등등 무수히 많은 단위들이 있다. ※ 만약 width의 값을 정하지 않고 공백으로 둔다면 기본값인 medium으로 설..

안녕하세요 동기 여러분! 지난 시간에 이어서 이제 height와 width를 적용하는 방법과 어찌 생겼는지 알아봅시다. Height and Width height와 width를 지정하지 않고 어떠한 content를 실행한다면 날것의 content에 HTML 박스가 height와 width가 조정되어 나타납니다. 하지만 높이와 폭을 지정해주고 싶다면 아래의 방법으로 가능합니다. p { height: 70px; /* em, rem으로도 가능 */ width: 350px; } px로 높이와 폭을 딱 정했을 때의 문제는 어떤 디바이스에서든 딱 정해진 높이와 폭으로 밖에 보이지 않습니다. (부트스트랩을 쓴다면 다름) 예시 엊그제 고스트 페퍼가 들어간 알리올리 소스를 팔길래 한번 사보았다. 한 뭉태기를 빵에 발라 ..

안녕하세요 동기 여러분! 오늘은 CSS의 박스 모델이 어떻게 구성이 되어 있는지 알아보도록 합시다. The Box Model 박스 모델은 margin, border, padding, content height, content width의 프로퍼티로 이루어져 있는데 이들 값으로 요소가 웹 페이지에서 공간을 어떻게 차지할지 조절할 수 있습니다. 생김새 width 와 height : content의 높이와 폭을 나타냅니다. padding : border와 content 공간 사이의 공간을 나타냅니다. ( 영어 사전에서의 padding : 충전재 ) border : content의 공간과 padding의 공간을 감싸는 (두께가 있는)경계 또는 스타일. ( 영어 사전에서의 border : 경계, 가두리 ) mar..