개발로 가치를 찾는 개발자 개발로 가치를 찾는 개발자

웹 사이트 프로젝트 Day1. 23.07.17 지금까지 배운 내용(HTML, CSS, JS)들로 간단한 웹 사이트를 다른 2명의 크루분들과 함께 협업하여 제작하는 프로젝트 시작하였습니다. 아이디어 회의: 어떠한 주제를 가지고 웹사이트를 제작할지에 대한 아이디어 회의를 진행하였다. 주제를 정하기 위해 서로의 관심사나 원하는 주제에 대해 이야기를 나누었다. 그 결과, 쇼핑몰, 심리테스트, 영화 추천, 여행지 추천의 후보지가 도출되었다. 4가지의 후보 중에 개인정보 데이터를 저장할 데이터베이스 서버와 클라우드 플랫폼이 필요 없을 것 같은(아직 만들지 않았으니...) 심리테스트 사이트를 만들기로 결정하였다. 서버와 데이터베이스가 없는 상태에서 간단한 데이터를 저장하기 위해 HTML5웹 스토리지 옵션인 Local..

jquery를 활용한 이미지 전환 결과 버튼을 누르면 그 글자에 맞는 과일이 뜨게 만들었습니다. 코드 jquery를 사용할 예정이니 CDN을 연결해준다. 첫번째 방법 1. 먼저 버튼들을 만들어 줍니다. 사과 바나나 포도 복숭아 2. 버튼에 클릭시 나타날 사진들을 다운로드 해서 파일을 업로드 해줍니다. 3. 이미지 태그를 만들어서 이미지들을 연결해준다. style에서 display: none을 통해 초기 설정을 화면에 안보이게 만들어 둔다. 4. 버튼들이 클릭했을 때 사용될 함수들 설정 클릭된 버튼에 관한 img만 보이게 하고 나머지는 none으로 설정하여 화면에 안나타나게 한다. 두번째 방법 1. onclick시 발생하는 함수에서 이름을 변수로 설정하면 코드가 간결해진다. 사과 바나나 포도 복숭아 코드 ..

CSS의 속성(마지막) 전환(Transform) transform: 요소의 변환 효과 2D 변환 함수 translate(x,y px) 이동(x축, y축) translateX(x px) 이동(x축) translateX(y px) 이동(y축) scale(x,y) 크기(x축, y축) rotate(degree) 회전(각도) skew(x,y) 회전(각도) 3D 변환 함수 translateZ(z px) 이동(Z축) rotateX(x deg) 회전(X축) backface-visibility : 3D 변환으로 회전된 요소의 뒷면 숨김 여부 / visible(뒷면 보임) / hidden(뒷면 숨김) / 이미지 3개 연달아 나열하기(Transform 사용) 전환(Transition) transition: transitio..

CSS 요소 Position static: 정적 위치 지정 방식(position의 기본 속성) relative: 상대 위치 지정 방식(요소 자신을 기준으로 배치)(상대적으로 위치 정한다.) absolute:절대 위치 지정 방식(위치상 부모 요소를 기준으로 배치한다.) fixed: 고정 위치 지정 방식(뷰포트를 기준으로 배치한다.) 요소 쌓임 순서(Stack order) 요소에 position 속성의 값이 있는 경우 위에 쌓인다.(기본값 static인 경우에는 제외된다.) 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높은 순으로 위에 쌓인다.(기본값은 0) 1번과 2번 조건까지 같으면 HTML의 다음 구조일수록 위에 쌓인다. z-index: auto:부모 요소와 동일한 쌓임 정도 / 숫자: 숫..

CSS의 속성 font-weight: 글자의 두께, 기본(normal, 400), 두껍게(bold, 700), 100단위로 9개 있음. font-size: 글자의 크기, 기본(16px), 단위(px, em, rem 등) line-height: 한 줄의 높이, 행간과 유사(숫자: 요소 글꼴 크기의 배수로 지정, px,em,rem등) 글꼴: 구글 폰트(폰트 선택 후 ->remove Regular 400 클릭 -> 복사 후 head파일 안에 링크 넣기 -> CSS rules to specify families 복사 후 스타일 태그 안에 넣기) .google { font-family: "Fasthand", cursive; color: #1818dd; } 글꼴:눈누 폰트(웹폰트로 사용 복사 -> 스타일태그 안에 ..

CSS(Cascading Style Sheet) 웹 페이지를 디자인하기 위해 사용하는 언어 CSS 참조 방식 인라인(inline) 방식: 안에 태그마다 스타일 작성 / 같은 스타일을 가진 태그 모두에게 복붙을 해야 하는 귀찮음이 발생한다. 내장 Style: 링크 방식: 모든 Style을 하나의 CSS 파일에 넣고, 필요한 HTML 파일에서 해당 파일을 링크해서 사용 / 제일 유용하게 사용할 수 있다. /* css에서 링크 방식을 사용하는 방법 */ div { width: 200px; height: 200px; border: 1px solid black; background-color: lightgray; } ---------------------------------------------------- C..