{code-banana} {code-banana}

이론은 이해했지만, 직접 짜보지 않으면 아무 소용 없습니다.오늘은 BEM 네이밍 규칙을 활용해서 심플한 카드 리스트 레이아웃을 만들어봅니다.🛠 만들 대상: 카드 리스트3개의 카드가 가로로 나열됨각 카드에는 이미지, 제목, 버튼이 들어감특별한 카드에 Modifier도 적용🍌 BEM을 적용한 HTML 구조 맛있는 바나나 구매하기 특별한 바나나 한정판 구매 싱싱한 바나나 구매하기 여기서 보면,- card-list : 카드 전체를 감싸는 Block- card : 하나의 카드 Block- card__image, card__title, card__button : 카드 안의 구성요소(Element)- card--highlighte..

HTML을 짤 때 가장 흔히 듣는 질문 중 하나:"클래스 이름 아무렇게나 지으면 안 되나요?"결론부터 말하면, 안 됩니다. 이름 하나에도 질서가 있어야 코드 유지보수, 협업, 확장성이 좋아집니다.💡 그래서 나온 게 BEM입니다BEM은 Block / Element / Modifier의 약자입니다.쉽게 말하면, "큰 덩어리(Block) → 내부 구성요소(Element) → 변형(Modifier)" 이런 식으로 클래스 이름을 체계적으로 짓자는 거죠.🍌 BEM 네이밍 규칙Block: 독립적인 기능 단위card, btn, headerElement: Block 안의 구성요소card__image, btn__iconModifier: Block이나 Element의 변형btn--primary, card--highlig..

HTML을 처음 배우면 가장 먼저 만나는 태그가 입니다.그런데 이걸 아무 데나 막 쓰면? CSS가 더럽게 꼬입니다.유지보수도 힘들고, 디자이너랑 협업도 안 됩니다.🧱 div는 '구조'를 짜는 태그입니다는 'division(구역)'이라는 뜻.즉, 콘텐츠를 기능/의미/디자인 기준으로 나눠주는 박스입니다.그래서 '이게 하나의 덩어리인가?'를 기준으로div를 감싸고, 분리하고, 정리하는 게 핵심입니다.🍌 바나나로 이해하는 div 구조웹사이트를 바나나에 비유해봅시다.layout = 바나나 숲 🌳 (전체 페이지 뼈대)wrap = 바나나 나무 🌲 (그 페이지의 주제 단위)section = 바나나 송이 🍇 (기능별 콘텐츠 묶음)div = 바나나 🍌 (하나의 콘텐츠).card__peel = 바나나 껍질 (스타..

웹디자인을 하다 보면"코드는 못 하는데 HTML은 좀 알아야겠죠?" 라는 질문, 정말 많이 나옵니다.그리고 제가 독학할 때 깨달은 게 하나 있어요.div는 곧 '레이어'다.🎨 디자이너가 익숙한 개념 = 레이어우리가 Photoshop, Figma, XD 같은 디자인 툴을 쓸 때가장 기본이 되는 게 뭐죠? 바로 레이어입니다.레이어를 쌓고, 그룹핑하고, 위치를 조정하고, 순서를 바꾸죠.그걸 HTML에서 담당하는 게 바로 입니다.div = 콘텐츠를 감싸는 박스 = 레이어 라고 보면 이해가 쉽습니다.📚 코드와 레이어 개념 매칭하기디자인 개념HTML/CSS 요소설명레이어구성 요소 하나를 감싸는 박스그룹 폴더div 안에 또 다른 div중첩 구조 = 구조화된 컴포넌트순서 정하기z-index누가 위에 올라오느냐위치 ..

요즘 개발 커뮤니티를 보면"HTML/CSS만으로는 한계가 있다"는 말을 너무 쉽게 한다.맞는 말이기도 하다. 하지만 그게 전부는 아니다.💡 아직도 HTML/CSS는 '기본기' 이상이다“요즘은 다 노코드/AI지”라고 하지만…현업에서 디자이너에게 HTML/CSS 요구하는 경우? 아직도 비일비재하다.특히 1인 운영, 프리랜서, 사이드 프로젝트에서는 HTML/CSS만으로 완성된 것처럼 보이는 사이트가 유용하다.📣 열정 입문러 생태계, 무시하면 손해다“코딩 몰라도 사이트 만들 수 있나요?”이 질문은 무시할 게 아니라, 그걸 진짜로 해보려는 사람들이 세상에 많다는 증거다.우리는 그런 입문러들을 조롱하지 않고, 오히려 존중한다. 왜냐면… 그들이 미래 고객이자, 조회수 주인이니까.🎯 노련한 실무자는 이 흐름을 읽..

도메인/호스팅 어디서 사야 할까? 내가 진짜 견적 비교 다 해봤다 (국내편 + 가성비 히든팁 있음)웹사이트 한번 만들어보겠다고 HTML 열심히 배웠는데,“주소랑 집 필요합니다” 이 말 듣고 혼란 온 사람 손?그래서 내가 진짜 국내 도메인 & 호스팅 업체 견적 비교 다 해봤음. 바나나 껍질 벗기듯 쉽게 설명할게. 🍌📮 도메인 등록처 비교 (국내)업체첫 해 가격연장 가격특징가비아22,000원22,000원대기업 느낌, UI 깔끔, 가격은 쎔닷네임코리아11,000원16,500원깔끔한 인터페이스, 연장 요금 주의호스팅케이알8,800원13,200원가성비 최고, 입문자 강추카페2411,000원11,000원호스팅 연동 편함, 디자인은 옛날 느낌📌 추천: 처음이면 호스팅케이알 or 닷네임이 무난함.🏢 웹호스팅 업..

도메인과 호스팅, 왜 사야 하나요?HTML을 배웠다고 웹사이트를 만들 수 있는 건 아닙니다.도메인과 호스팅이 없다면, 당신의 사이트는 세상 어디에도 존재하지 않아요.도메인이란? – 웹사이트의 주소입니다택배를 받으려면 주소가 필요하죠. 웹사이트도 마찬가지예요.도메인은 사용자가 인터넷에서 당신의 웹사이트를 찾아올 수 있게 해주는 고유한 주소입니다.📦 왜 도메인이 필요할까요?주소가 없으면 택배는 못 옵니다.도메인이 없으면 사람들이 당신의 사이트에 접근할 방법이 없습니다.예시 도메인: google.com, codebanana.dev직접 설정한 도메인으로 사이트를 운영하면 신뢰도도 올라갑니다.호스팅이란? – 웹사이트가 살 집입니다도메인이 주소라면, 호스팅은 그 주소에 지을 건물입니다.HTML, CSS, JS 파..

1. 필수 확장 기능 추천Prettier – 코드 정렬의 신. 저장하면 코드가 이뻐짐.Live Server – HTML 실시간 미리보기. 저장하면 자동 새로고침됨.CodeSnap – 코드 스크린샷 찍는 확장자. 감성 + 블로그용으로 꿀.Bracket Pair Colorizer – 괄호 색깔 다르게 표시. 초보 구세주.Auto Rename Tag – HTML 태그 닫을 때 자동으로 짝 맞춰줌.2. VSCode 확장 기능(Extensions) 설치 방법확장 기능은 Visual Studio Code를 더 똑똑하고 편리하게 만들어주는 플러그인입니다.입문자라면 최소한 2~3개는 깔고 시작하는 걸 추천드립니다.설치 방법왼쪽 사이드바에서 네모 4개 아이콘 (확장 기능 탭)을 클릭합니다.상단 검색창에 원하는 확장 기능..