ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko nb ko ko ko en en ko ko ko ko ko ko ko ko ko ko ko zh ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko fr ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko ko en ko ko ko ko en es ko ko ko ko ko ko en
#11 디자인을 똑같이 코딩하려면 꼭 알아야 할 박스 모델 - 웹 코딩 강좌 | 디자인베이스
홈 웹 코딩 #11 디자인을 똑같이 코딩하려면 꼭 알아야 할 박스 모델 – 웹 코딩 강좌
웹 디자이너를 위한 웹 코딩 강좌 열한 번째 시간입니다.
오늘은 아주 중요한 박스 모델에 대해 배워볼게요. 나중에 배워볼 강좌 중에 전체적인 레이아웃을 짜거나 특정 UI를 코드로 구현할 때 박스 모델에 대한 개념을 알면 더욱더 쉽게 작업이 가능합니다.
그리고 초급자에게 가장 중요한 것은 Box로 바라보는 눈을 기르는 것입니다. 가상의 선을 그려서 display 속성에 따른 네모를 그려보는 연습이 필요해요.
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
박스 모델은 패딩, 테두리, 마진, 내용(content)로 구분됩니다.
Content – 텍스트나 이미지가 들어있는 박스의 실질적인 내용입니다.
Padding – 테두리와 콘텐츠 사이에 있는 공간을 말합니다.
Border – 콘텐츠를 감싸는 테두리를 말합니다.
Margin – 테두리와 주변 요소와의 사이 간격을 말합니다.
강좌를 통해 배워볼 예시입니다.
여기서 알아두면 좋은 소소한 정보를 알려드릴게요.
마진에서 상하 마진끼리 닿으면 더 큰 값이 적용됩니다. box01에는 margin-bottom을 30px, box02에는 margin-bottom 60px로 한다면 더 큰 값이 60px이 적용됩니다. 30+60 = 90px로 적용되지 않습니다. (좌우 마진은 30+30 = 60이 가능)
추가로 레이아웃을 잡기 위해 알아두면 좋은 개념 하나가 있습니다. 바로, Box-sizing입니다.
이 박스의 크기를 어떤 것으로 기준을 할지 정하는 건데 속성값을 border-box로 사용하는 것이 좋습니다. 테두리를 포함한 값이기 때문에 레이아웃을 짤 때나 디자인을 코드로 옮기는 작업할 때 편하게 작업할 수가 있어요!
/* 모든 요소에 적용 */ *{ box-sizing:border-box; }
그리고 css에서는 이렇게 하면 ‘전체에 특정 스타일을 넣는다.’라고 생각하시면 됩니다. 대신 이걸 남발하는 건 좋지 않아요.
12. 블랜드 툴로 3D 텍스트 만들기 – 일러스트레이터 강좌
#10 스케치 플러그인 추천 – 스케치 강좌(멤버십 전용)
#19 CSS로 그라데이션 배경 만드는 방법 – 웹 코딩 강좌
디자이너가 무조건 피해야 할 회사 유형
각종 디바이스 무료 목업 (약 90종) by facebook
3d 카툰 핸즈 아이폰 목업
10. 자유롭게 화면 조절하는 방법 OrbitControls – Three.js 강좌
27. 귀여운 꿀벌 일러스트 쉽게 만드는 방법 – 일러스트레이터 기초 강좌
09. 3d 물체에 그림자 적용하는 방법 – Three.js 강좌
26. 프리폼 그라디언트로 5초 만에 부드러운 그라데이션 배경 만드는 방법 – 일러스트레이터 기초 강좌
Youtube Instagram Pinterest Naver Blog
포토샵 일러스트레이터 피그마 스케치 XD 프로토파이
웹디자인 웹코딩 인비전 프린서플 Lottie Three.js
소개 매거진 디자인 사전 북마크 무료 소스 문의하기 멤버십
© 2022 Designbase. All rights reserved.