CSS의 간단한 문법을 복습해보고 CSS 꾸미기의 유용한 도구인 부트스트랩에 대해서 공부해보고자 합니다. : 내 눈에 보이는 부분입니다. : 구역을 나누는 태그로, 여러가지 태그들을 한번에 옮길때 묶어서 옮길 수 있습니다. : 문단을 뜻합니다. : 문장 중에서 특정 글자에만 무언가를 효과주고싶을때 사용합니다. : 하이퍼링크를 사용할 수 있습니다. : 가로선을 주는 태그 CSS 주석처리 : 태그에서 /* 텍스트 */ HTML 주석처리 : 태그에서 1. div 태그 >> Button의 부모태그는 div태그라고 한다. >> 부모태그의 내용을 상속받는 것이다. 2. image 태그 이미지를 넣을때는 background-image:url("링크"); background-size:cover; background-p..
강의를 참고해 객체에 간단한 애니메이션을 주는 방법에 대해 알아봅니다. 먼저 CSS에는 애니메이션에 쓰일 Animation 속성이 있는가 하면 간단하게 바꿀 수 있는 Transition 과 Transform 속성이 있습니다. Transition은 속성을 서서히 변화시키는 효과, Transform은 객체를 회전시키거나 크기 조절, 이동, 기울임 등을 지정할 수 있는 속성입니다. Introduction Transition transition : property timing-function duration delay | initial | inherit property : 속성을 정할 수 있습니다. ex) width, background 등을 포함할 수 있습니다. timing-function : 트랜지션의 속도..
강의를 참고해 홈페이지 디자인, UI를 만들어봅니다. 간단하게 들어갈 요소와 구성, 레이아웃은 어떻게 할 것인지 생각해봅니다. 이번 실습에서는 Float Layout 방법을 사용해 요소들을 배치할 것입니다. Introduction Float Layout은 요소들을 좌측이나 우측에 위치시킬 수 있는 옵션입니다. float: left | right 필요한 요소 : 버튼 = 로그인 / 회원가입 / 마이페이지 / 주문배송 조회 / 장바구니 / 이용안내 / 고객센터 / 게시판 등 로고(버튼 좌측에 위치하도록 함) 가장 먼저 보여질 Top Bar 부분 전체 코드 (Editing_homepage.html) 로그인 | 회원가입 | 마이페이지 | 주문배송 조회 | 장바구니 | 이용안내 | 고객센터 | myshop 소개 ..
강의를 참고해 절대 위치와 상대 위치에 대해 알아봅니다. 절대 위치와 상대 위치는 position 위치에 대한 요소를 의미합니다. 절대 위치는 다른 객체에 영향받지 않고 지정한 위치나 속성에 따라 고정값을 가지는 위치를 의미합니다. 절대값이며, 부모 요소를 기준으로 위치를 정하게 됩니다.상대 위치는 자신의 위치에서 상대적인 위치로 이동이 되는 속성입니다. 다른 객체를 이용할 수 있고, 간단히 이동하고자 할때 사용하기도 합니다. Introduction 보통 도형이나 박스 혹은 객체들을 만들어줄때 크기나 위치를 지정해주기도 합니다. 크기 속성으로는 width (너비 - 가로) 와 height (높이 - 세로) 속성이 있고,위치 속성으로는 position : absolute | relative 외로 left ..
강의를 참고해 박스에 스타일을 적용합니다. 태그 내에 box-shadow 속성을 적용하여 박스에 그림자를 적용하고, 태그 내에 border, border-color, border-width 등의 속성을 이용해 테두리를 적용합니다. Introduction 박스 그림자 속성은 box-shadow 를 통해 지정해 줄 수 있습니다. box-shadow: none | x-position y-position blur spread color | inset | initial | inherit 이러한 문법을 가지는데, 왼쪽부터 none : 그림자를 적용하지 않음 x-position : 가로에 대한 그림자 위치를 나타내며, + 시 오른쪽에 그림자가 생기고, - 시에는 왼쪽에 그림자가 만들어집니다. (필수) y-positi..
강의를 참고해 선택자에 대한 예제를 실습해봅니다. 간단한 실습이며, h1 = 적용하고자 하는 태그 test1 = 임의 클래스명 { color : blue } = 지정하고자하는 속성 전체 코드 (class_selector.html) 가벼운 마음으로 배우는-녹색 가벼운 마음으로 배우는-파란색 가벼운 마음으로 배우는-빨간색 Result 다음은 구조 선택자입니다. 구조 선택자는 '일반구조 선택자'와 '형태구조 선택자'로 나뉩니다. 일반구조 선택자에서는 홀수나 짝수번째에 다른 스타일을 적용하고자할때 사용합니다.'요소의 class 특성에 기반해 요소를 선택하는 선택자' 입니다. 형태구조 선택자에서는 일반구조 선택자와는 다르게 태그의 형태를 구분합니다. 특정 태그를 선택하여 스타일을 적용하게됩니다. 선택자 형태 : ..
강의를 참고해 간단한 홍보책자를 만듭니다. 간단한 웹페이지이므로 태그와 CSS의 폰트스타일을 통해 구현합니다. Introduction 안내문 형식으로 작성해야하므로, 그림자와 색 조합, 글씨 크기 등의 속성을 사용해야합니다. 필요한 속성 : 그림자 스타일(text-shadow) / 폰트 크기(font-size) / 폰트 굵기(font-weight) / 폰트 색깔(color) 텍스트 정렬(text-align) / 밑줄(text-decoration : underline) / 폰트(font-style : italic) 속성 값 : └ font-size : px 단위로 지정합니다. ex) 2px / 5px / 10px └ font-weight : normal / 숫자(100~900) / bolder(상위요소보다..
강의를 참고해 간단한 웹페이지를 만듭니다. 간단한 웹페이지를 구현하기 위해 대표적으로 "회원가입 양식"을 만들어봅니다. Introduction 겉으로 보여지는 양식은 주로 태그 안에서 만들어집니다. 필요한 요소 : 아이디 / 비밀번호 / 비밀번호 확인 / 이름 / 성별 / 전화번호 / 이메일 / 자기소개 요소 별 특정사항 : 아이디 ~ 이름까지는 label 태그와 input태그로 text 형식으로 구현할 수 있습니다. 다만, 성별 / 전화번호 / 이메일 / 자기소개를 구현하기 위해서는 특정한 태그를 사용해야합니다. └ 성별 : label 태그와 radio input 타입으로 선택할 수 있게 만들어줍니다. └ 전화번호 : select 태그로 하위 option에 지역번호를 넣어주어 가장 처음 지역번호를 선택..
