본문 바로가기

전체 글

 (91)
Project(1)-3. 개발 모든 것이 정해졌다면 이제 개발 차례다. 나는 상품 판매 페이지와 상품 상세 정보 페이지 이렇게 두 개를 맡았기 때문에 부트스트랩에서 이 두 페이지에 활용하기 적합한 템플릿을 찾기로 했다. 페이지 구성 내가 참고한 부트스트랩 사이트는 바로 이곳이다. https://bootstrapmade.com/ Free Bootstrap Themes and Website Templates | BootstrapMade At BootstrapMade, we create beautiful website templates using Bootstrap, the most popular front-end framework for developing responsive, mobile first websites. All of our ..
Project(1)-2. 스토리보드 주제와 벤치마킹을 모두 완료한 끝에 페이지를 어떻게 구성하면 좋을지 이야기했다. 우리는 총 4명으로 2페이지씩 총 8페이지를 구성해야 했다. 따라서 기본적으로 메인페이지와 로그인 및 회원가입 페이지, 레시피 상세 보기 페이지를 구성하기로 했다. 그 다음, 상품 판매 페이지와 상품 상세설명 페이지, 결제페이지와 마이페이지까지 총 8가지를 생각해냈다. 이 중에서 내가 맡은 페이지는 상품 판매 페이지와 상품 상세설명 페이지다. 스토리보드 스토리보드는 우리가 만들 페이지에 대해 어떻게 만들지 구체적으로 이미지화하지만 설명은 간단하게 설명해주는 것이다. 팀원들끼리 각자 맡은 페이지도 직접 스토리보드를 짜보기로 했고, 나는 다음과 같이 작성해보았다. * 참고로 나는 header와 footer를 제외하고 화면을 구성..
Project(1)-1. 주제 & 벤치마킹 국비학원을 다니고 처음으로 하게 된 아주 작은 프로젝트를 시작했다. 여태 배운 HTML과 CSS 내용을 바탕으로 사이트를 한 번 만들어보는 것이었다. 기능 구현까지 하는 것이 아닌 오직 디자인하는 것까지만 하는 프로젝트로, 강사님께서는 팀원들끼리 주제를 잡고 스토리보드를 짜보는 데 의의를 두라고 하셨다. 구현은 인당 2페이지 정도로 이틀이라는 제한 시간 안에 꽤 많은 과제가 주어졌다고 생각했다. 주제 정하기 팀원들끼리 모여 주제를 정했을 때, 처음에는 이렇게 막막할 수가 없었다. 이때 우리가 가장 중요하게 생각한 포인트는 '초보자인 우리가 구현할 수 있는 주제인가'였다. 그래서 정한 주제가 바로 흔하디 흔한 마켓 사이트였다. 마침내 우리는 요리 레시피라는 콘텐츠를 중심으로 레시피를 공유하고 그에 맞는 재..
8. 슬라이더(slider) 만들어보기 head head 부분에 외부 CSS파일을 링크해준다. body input 태그 4개와 label 태그 4개를 id와 for을 이용해 연결해준다. input 태그의 첫 번째를 checked 해주면서 실행 시 첫 번째가 나타나도록 한다. ul > li는 body상에서 구분을 위해 글씨를 작성해주었지만 CSS를 통해 가린다. 첫 번째 화면(이미지) 두 번째 화면(이미지) 세 번째 화면(이미지) 네 번째 화면(이미지) CSS 편의상 한 줄로 표현한 코드 존재 유의하기! 슬라이더가 들어갈 공간(div)는 상위 공간으로서 position을 relative로 설정해주고 다음과 같이 추가적으로 작성해준다. 슬라이더 변화가 총 4개이므로 width를 400%로 설정해준다. 만약 세로로 움직이는 슬라이더를 만들고 싶다면..
7. transform과 transition transform transform은 요소의 모양을 변화시키는 속성으로, 속성값은 다음 함수를 사용한다. 1. 위치 변환 - translate translate(x, y) - 현재 위치에서 x, y 만큼 이동 translateX(x) - x축으로만 이동 translateY(y) - y축으로만 이동 2. 각도 변환 - rotate(각도) 단위 deg 기본 회전 방향은 시계 방향 minus 수치는 반시계 방향 3. 크기 변환 - scale 단위 없음 -> 배수로 변환 scale(x, y) - 너비, 높이 둘다 변환 scaleX(x) - x축으로만 변환 scaleY(y) - y축으로만 변환 4. 기울기 변환 - skew(각도) 단위 deg skew(deg, deg) - x축, y축 모두 기울기 변환 skewX..
6. display의 flex display: flex 요소 display: flex는 컨테이너 요소(부모 요소)에 설정한다. 주요 속성 1. flex-direction flex-direction은 내부 요소(자손 요소)의 배치 방향을 조정한다. 속성값) row : 기본값. 왼쪽에서부터 가로로 배치 row-reverse : 오른쪽에서부터 가로로 배치 column : 위에서부터 세로로 배치 column-reverse : 아래에서부터 세트로 배치 2. flex-wrap flex-wrap은 내부 요소의 줄바꿈을 설정한다. 속성값) nowrap : 기본값. 줄바꿈 없음. (내부 요소가 부모 요소 밖으로 나감) wrap : 자동 줄바꿈. (넘치는 요소가 밑으로 이동) wrap-reverse : 자동 줄바꿈. (넘치는 요소가 위로 이동) 3. ..
5. 다양한 요소(element) z-index z-index는 중첩된 요소의 쌓이는 순서를 지정한다. 작은 번호가 바닥으로, 큰 번호가 위로 올라간다. opacity opacity는 투명도를 지정하는 속성이다. 범위는 0.0(완전 투명) ~ 1.0(완전 불투명, 기본값)을 가진다. overflow overflow는 영역 요소에 비해 내부 콘텐츠 요소의 너비와 높이 길이가 큰 경우 사용한다. 속성값) visible : 기본값. 그대로 둠. (아무 조치 안 함) hidden : 넘친 콘텐츠를 숨김. (제거) scroll : 넘친 콘텐츠를 숨기고, 스크롤바를 붙임. (항상 붙임) auto : 안 넘치면 그대로, 넘치면 스크롤바를 붙임. => 콘텐츠가 text인 경우에는 auto, image일 경우에는 hidden을 주로 사용한다. float..
10. 배열 배열 배열은 여러 개의 데이터를 하나의 변수에 담는 것이다. JavaScirpt의 배열은 타입에 상관없이 값을 넣을 수 있다. 1. 선언 방법 var arrNum = []; var arrString = new Array(); 선언한 배열 자체의 Type은 Object이다. 2. 값 넣는 방법 arrNum = [1, 2, 3, 4, 5] => Number Type 값 넣기 arrString = ["A", "B", "C", "D", "E"] => String Type 값 넣기 3. 배열값 확인 방법 console.log(arrNum); => 1 2 3 4 5 => 배열에 넣어진 값이 모두 출력됨. console.log(arrNum[3]); => 4 => 대괄호 안에 넣은 인덱스에 해당하는 값만 출력됨. 4...

티스토리툴바