본문 바로가기

HTML & CSS21

BNX 홈페이지 구현 - 2 HTML div.prod-list-box.con>ul.row>li.cell*18>(.img-box>img[src="bnx.oa.gg/img/bnx_16fw_visual_$$_list.jpg"])+.prod-name{단가라 ops}+.prod-price{19,000}를 한후 탭하여 18개의 이미지의 밑에 상품명과 가격이 들어가게 만들어 준다 CSS 1. 상품 리스트 박스의 ul>li에 위치를 조정하고 마우스를 올렸을 때 커서가 포인터로 바뀌게 설정해주고 6개의 사진씩 들어가게 바꾸어준다 2. 800px이하의 넓이일때는 5개씩 보이도록, 700px일때는 4개, 600px일때는 3개, 500px일때는 2개, 400px일때는 1개로 설정해준다. 3. 상품리스트 박스의 양옆을 메인사진과 같게 맞추어 준다 4. 상.. 2020. 5. 12.
float 개념 2020. 5. 12.
BNX 홈페이지 구현 - 1 HTML 1. div.logo-bar>a[href="#"].logo>img를 탭한 후 로고 이미지 주소를 넣어준다 2. div.menu-bar.con>nav.menu-box-1>ul.row>li.cell*7>a[href="#"]{메뉴이름}을 한 후 탭을 하여 7개의 메뉴아이템을 만들어준다 3. div.top-bn-box-1.con>div.img-box>img를 탭한후 상단이미지의 주소를 넣어준다 CSS 1. body, ul, li, a 노말라이징 2. 모든 con을 margin-left/right를 auto해주어 가운데 정렬시켜준다 3. cell을 float를 left로 왼쪽으로 정렬시켜주고 box-sizing해준다 4. float을 썼으니까 cell의 부모인 row를 정리해준다 5. img-box>im.. 2020. 5. 12.
left-side-bar HTML div.left-side-bar>div.icon-status+nav.menu-box-1>ul>li*4>a[href="#"]{1차 메뉴아이템$}+ul>li*4>a[href="#"]{2차 메뉴아이템$}을 하고 탭을 해주어 left-side-bar안에 icon따로 menu-box따로 만들어준다 icon-status의 자식으로 span*2를 하여 두개의 아이콘을 넣어준다 CSS 1. body, ul, li, a를 노말라이즈해준다 2. .left-side-bar의 배경색, 유령화, 크기조절을 해주고 transition을 left로 0.3초 지정해준다 -->transition : 변환옵션을 준다. ex) width 1s => 너비를 변환하는데 기간을 1초 동안 3. left-side-bar에 마우스를 올렸.. 2020. 5. 3.

티스토리툴바