HANCO

안녕하세요 핸들링 코드 크루 박준영 입니다. 오늘은 쇼핑몰 페이지 상단을 만들어 보려고 합니다. 제가 만든 쇼핑몰 상단 화면입니다. 오늘은 이부분을 어떻게 만드는지 포스팅해보도록 할게용! 먼저 페이지의 공간을 나누어야 합니다.일단 위에서부터 3곳의 구역으로 나눕니다. 첫번째는 즐겨찾기, 로그인, 회원가입이있는 부분두번째는 header와 내정보, 장바구니가 있는 부분세번째는 카테고리, 메뉴등이 있는 부분으로 나눕시다. 시멘틱하게 만들어 주기위해 태그와 태그를 사용해볼게요 먼저 첫번째 부분은 간단하게 태그로 구역을나눠서 둘게요 top.html class="top"으로 전체 틀을 잡습니다.그다음 "wrapper"라는 클래스로 감쌀건데 "wrapper"클래스는 임의의 이름으로서 저는 width값을 제한하려고 사..

안녕하세요 핸들링코드 크루 박준영 입니다. 오늘은 상단의 메뉴를 만들어 보는 시간을 가질게요 어려운 코드는 없습니다. html 부분입니다. 클래스를 정해주세요 아래 코드는 css입니다. 메뉴에 커서를 올리면 이렇게 색상이 나오게 됩니다..top-menu ul li:hover {} 어려운코드는 질문해주세요

안녕하세요 핸들링코드 크루 박준영 입니다. css를 사용하다보면 배경이미지를 설정해줄때가 있는데요이때 픽셀이 작은 이미지를 구해서 넣으면 배경이 잘려서 분리되는 경우가 있습니다. 바로 이런식으로 말이죠.!! 이걸 해결해주는 한줄의 코드를 알려드릴게요 배경화면의 반복을 안한다는 코드입니다.css속성에 이 코드를 사용하시면 위 화면같은 문제는 없으실 거에요!! 근데 픽셀 깨지니깐 주의하자그럼이만!

안녕하세요 핸들링코드 크루 박준영 입니다. css에는 padding과 margin이 있다고 저번에 말했었는데요 그에 대해서 좀더 자세히 공부해보고 응용해봅시다. 먼저 content, padding, border, margin에 대해 알아봅시다. 위 그림을 보면 패딩과 마진의 차이를 알 수 있습니다.content는 글이나 그림등이 삽입되어지는 공간을 나타내고border은 그 콘텐츠의 테두리입니다. 이제 패딩과 마진의 차이를 알려드릴게요 먼저 padding은 콘텐츠와 테두리 사이의 공간 입니다.한개의 틀을 만들어 안에 텍스트를 넣었을 때패딩값을 올린다면, 그 글과 테두리 사이의 간격이 늘어납니다.또, margin은 그 경계(테두리)로부터 다른 테두리사이의 간격입니다.margin값을 올리면 다른 틀과의 간격이..

안녕하세요 핸들링코드 크루의 박준영입니다. 오늘은 웹공부중에 정말 어려운 css를 공부해볼 생각입니다. 환경은 익숙하신 에디터를 사용하시면 되는데 저는 BRACKET을 사용해볼게요! 간단하게 Bracket을 소개하자면 깔끔한 개발 공간지원과 빠른 인터페이스를 통해 웹개발시 좋더라구요!! 특히 통합개발환경이라는 점! 위 코드를 보면 html코드인데요 header, section, footer부분으로 나누어 시멘틱 적인 html을 제작할 수 있습니다. 저 코드는 현재 부분에 대한 정의라고 할 수 있습니다. html에서는 div를 가장많이 사용하는데 각 부분을 나눌때 div를 사용해 나누게 됩니다. 한번 코드를 실행해볼게요 html 코드로만 이루어진 웹페이지 입니다 되게 칙칙합니다. 여기에 간단한 css를 입..