Dongi_coding 동기_코딩

와썹 동기 가이즈! 오늘은 마진에 대해 알아보도록 합시다! 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의 레이스가 생산될 때의 대사이다. 항상 '윙거윙어졸스'라고 들려서 그렇게 생각했는데 '레이쓰 어웨이링 런치 오덜스'라니ㅋㅋ 한참을 레이..

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

건강하세요 동기 여러분! 오늘은 어제 알아본 그리드를 토대로 간단한 웹 페이지 헤더를 만들어 보도록 합시다. Header/Navigation 디아블로 2 레저렉션 패치 노트 클래스 아이템 토론장 태그를 이용해 메뉴를 만들어 주는데 크기는 md로 768px 이상으로 주고 (모바일 환경 이상 사이즈) column의 수는 8개를 주었습니다. 에 4개를 주었으니 딱 12개가 맞아떨어집니다. 태그를 이용해서 네 가지의 메뉴를 넣어 주었습니다. 실행 한번 해볼까요? 뭔가 제가 원하는 모습이 아닌데요... main2.css로 들어가서 CSS를 조정하여 깔끔하게 꾸며 봅시다. 첫 번째로 추가할 CSS 코드 body { font-family: "나눔바른고딕", "Times New Roman", serif; font-we..

와쌉 동기 브로스! 마진(Margin) 프로퍼티에 대해 겁나 빠르게 알아 봅시다! 겁나 쉬움 Working with Margin 마진(Margin) 프로퍼티는 웹 사이트에서 HTML 요소들의 사이 사이에 공간을 설정할 수 있는 빠워를 가지고 있습니다. 생김새 .item { margin: 3px; } class ="item"을 가지고 있는 모든 요소들은 사이에 3px의 공간을 갖게 하라! margin-top : 위 공간 설정 margin-bottom : 아래 공간 설정 margin-left : 왼쪽 공간 설정 margin-right : 오른쪽 공간 설정 예 사실 이전 코드에서 margin을 사용 했기 때문에 별로 달라지진 않았습니다 ㅠ ㅠ 우리가 오늘 배운 내용의 CSS 코드 입니다. (지난번 코드와 다르..