728x90

CSS 3

li 개수에 따라 폭(width) 나누기

노드 수에 맞게 이미지 가로 너비를 조절한다. HTML CSS .photo_box{display: inline-block;} .photo_box ul li {overflow: hidden; float: left; height: 160px; margin-right: 1%;} .photo_box ul li:only-child {width: 100%; margin-right: 0%;} .photo_box ul li:nth-last-child(2), .photo_box ul li:nth-last-child(2)+li {width: 49%;} .photo_box ul li:nth-last-child(3), .photo_box ul li:nth-last-child(3)~li {width: 32%;} .photo_b..

STUDY/programing 2019.09.13

JUST 쇼핑몰 문제풀이 3. Header (2019 웹디자인 기능사 실기 공개문제)

하루 1시간 공부가 이렇게나 지키기 힘들다.갖은 이유들로 인해 이미지 만들고 나의 열정은 파사삭 식어버렸지만이제 정말 몇 일 안남았으니 차근차근 해본다. html도, 이미지도 준비되었고 이제 CSS 옷을 입힌다. 시험지에서 명시하고 있는것은 전체 width 1200px와 각각 영역의 height 값이다.나는 body영역으로 전체를 싸준다고 생각하고 1200px의 width 고정값을 주고margin: 0 auto; 를 주어 브라우저 크기에 맞게 가운데 정렬을 한다. header에는 크게 로고부분과 메뉴부분 두가지로 나뉜다.로고부분 과 메뉴부분 을 float 속성을 주어 나란히 배치한다. 그리고 메뉴(.gnb_wrap) 내부의 1차메뉴 탑, 아우터, 팬츠, 액세서리도 나란히 배치하기 위해 float 속성을 ..

STUDY/자격증 2019.03.19

웹디자인 기능사 실기 벼락치기 요점정리

급하게 컴퓨터 그래픽스 필기와 과목이 비슷하다는 말에웹디자인 기능사 필기도 응시했고, 어렵지 않게 합격할 수 있었다. 어느덧 미루고 미루던 실기시험 날짜가 오고있다.시험신청은 지난달에 했는데, 역시나 미루고~ 미루다~ 공부를 하나도 안하고오늘 처음으로 공개문제를 다운 받는다. 하루에 1시간씩 일주일만 봐보자!! 웹디자인 기능사 실기시험문제 너무 길어서 중요한것만 요점 정리를 해보았다. 벼락치기용 유의사항 1. HTML, CSS, JavaScript 총 파일 3개를 만든다. (이미지랑 jQuery 리소스는 제공된다)2. charset utf-8 으로 설정한다. 1) HTML : 2) CSS : @charset "utf-8";3. 전체영역 960px X 1200px 및 Header, Main , Conten..

STUDY/자격증 2019.03.05
728x90