썸네일 [Do it!] HTML+CSS+JS 웹표준의 정석 실전 프로젝트 3 목표 푸터 만들기 bottomMenu와 sns 연결, 회사 정보 표기 float:left를 활용해 위치 맞추기 position을 활용해 위치 맞추기 border을 나타내고 숨김으로써 구분선 만들기 (이번에는 JS를 추가하지 않아 본문에는 생략하겠습니다 ㅎㅎ) 1. html Dream Jeju 단체 여행 ▼ 회사 연수 수학 여행 맞춤 여행 ▼ 4.3 평화 기행 곶자왈 체험 힐링 워크숍 갤러리 문의하기 ⬅ ➡ 공지사항 갤러리 공지사항 내용입니다. 사무실을 이전했습니다. [참가 모집] 카약 체험에 초대합니다. [참가 모집] 여름 방학 기간, 오름 체험단을 모집합니다. 겨울, 추천 여행지 가을, 추천 여행지 갤러리 내용입니다. 평화 기행 힐링 워크숍 문의하기 회사 소개 개인정보처리방침 여행약관 사이트맵 제주특별..
썸네일 [Do it!] HTML+CSS+JS 웹표준의 정석 실전 프로젝트 2 목표 이미지 슬라이드 쇼 만들기 css로 버튼 스타일 지정하고 js로 이미지 이동하도록 탭 메뉴 만들고 내용과 연결하기 (css 사용) 1. html Dream Jeju 단체 여행 ▼ 회사 연수 수학 여행 맞춤 여행 ▼ 4.3 평화 기행 곶자왈 체험 힐링 워크숍 갤러리 문의하기 ⬅ ➡ tab-area quick-link footer 2. css @import url('https://fonts.googleapis.com/css2?family=Merienda:wght@700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; } a { text-decoration: none; } ul { list-style-type: none; } #cont..
썸네일 [Do it!] HTML+CSS+JS 웹표준의 정석 실전 프로젝트 1 웹 사이트 기획하기 전체 레이아웃 만들기 로고 만들기 내비게이션 만들기 1. html Dream Jeju 단체 여행 ▼ 회사 연수 수학 여행 맞춤 여행 ▼ 4.3 평화 기행 곶자왈 체험 힐링 워크숍 갤러리 문의하기 tab-area quick-link footer 2. css @import url('https://fonts.googleapis.com/css2?family=Merienda:wght@700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; } a { text-decoration: none; } ul { list-style-type: none; } #container { margin: 0 auto; /* 화면 중앙에 배치 */ ..
썸네일 [FrontEnd1] 토이스토리 페이지 보강 (컨텐츠 영역 설정, 푸터 영역 추가- 로고, 카피라이트) 안녕하세요:) 보라해바라기입니다! 오늘은 오랜만에 토이스토리 페이지를 보강하였습니다. 오늘의 목적은 컨텐츠 영역 설정 푸터 영역 추가해 로고와 카피라이트 영역 설정 로고 영역에 디즈니 로고 삽입 입니다. 1. index.html DISNEY+ PARKS & TRAVLEL MOVIES SHOP MORE Movies & TV Buy Movies Video Galleries Parks contents-wrap copyright 2. index.css @charset "utf-8"; *{ margin: 0; padding: 0; font-family: 'dongdong'; } ul{ list-style-type: none; } a{ text-decoration: none; } @font-face { font-f..
썸네일 [FrontEnd1] 5월 첫째주 한페이지 개념 정리 안녕하세요:) 보라해바라기입니다~ 벌써 5월이 일주일이나 지나갔네요... 시간이 참 빠름을 요즘 계속 느끼고 있어요 ㅠㅠ 오늘은 다른 날 보다 내용 자체는 적습니다. first-child, nth-child(숫자), last-child 가상요소 (before, after)의 적용 (컨텐츠, 도형) 어썸폰트 가 주 내용입니다! 1. html 5월 첫째주 개념 정리 child 요소 (무지개 만들기) red orange yellow green blue navy purple 가상 요소 (before, after) 컨텐츠 활용 it's me! 도형 활용 it's me! 어썸폰트 사용(fb, insta, kakao) 2. css @charset "utf-8"; *{ margin: 0; padding: 0; } #t..
썸네일 [FrontEnd1] 토이스토리 페이지 보강 (로고 삽입, 메뉴 설정, 폰트 설정, 검색창 만들기) 안녕하세요! 보라해바라기입니다:) 토이스토리 오피셜 페이지를 클론코딩하는 방향으로 다시 길을 잡았습니다. 오피셜 페이지 자체를 클론코딩 하면서도 배울 점이 많다는 생각이 들었습니다. 로고 삽입 메뉴 만들기 (메인 메뉴만 완성 폰트 설정 검색창 만들기 (완전 X) 를 시도해보았습니다. 모든 것은 메인페이지 하나에서 만든 것입니다. 메인 페이지 하나를 만들고 나면 서브 페이지를 추가 할 생각입니다^_^ 1. html DISNEY+ PARKS & TRAVLEL MOVIES SHOP MORE search menu contents 2. css @charset "utf-8"; *{ margin: 0; padding: 0; font-family: 'dongdong'; } ul{ list-style-type: none..
썸네일 [FrontEnd1] 4월 다섯째주 한페이지 개념 정리 안녕하세요~ 보라해바라기 입니다:) 벌써 5월이 다가왔군요 ㅎㅎ 4월 개념은 4월 안에 다 정리하고 싶었지만... 5월이 되었네요...?ㅎㅎ 그래도 늦은 만큼 더 열심히 복습했답니다. 1. html 4월 5째주 개념 정리 margin과 padding + border-radius (시계방향 순, padding도 동일) margin: 20px (전체 margin이 20px) margin: 20px 40px (위, 아래: 20 좌, 우: 40) margin: 20px 40px 60px (위: 20, 좌, 우: 40, 아래: 60) margin: 20px 40px 60px 80px (위: 20, 우: 40, 아래: 60, 좌:80) relative (div 가로) 1 relative (top, left 30) ..
썸네일 [FrontEnd1] 4월 넷째주 한 페이지 개념 정리 안녕하세요:) 보라해바라기입니다! 오늘도 한 주동안 배운 개념을 정리한 "한페이지 개념 정리" 게시글이 돌아왔습니다~ 뭔가 신박한 시리즈 제목이 없을까요... 뭔가 한페이지 개념 정리! 이건 너무 직관적이라...ㅎㅎ 1. review.html 4월 넷째주 개념 div와 span 보라해바라기 보라해바라기 menu 만들기 보라 해바 라기 input, form, label 이용한 로그인 창 ID: PW: table 이름(가명) 성별 직업 프론트엔드 보라해바라기 여 대학생 홍길동 남 직장인 div 이용한 원 만들기 멈춤 대기 출발 audio, video, embed embed 이용해 유튜브 삽입 embed 이용해 유튜브 삽입 (조건 주기) 조건: 자동 재생, 60초부터 영상 시작 iframe 사용해 유튜브 삽입..
썸네일 [FrontEnd1] 토이스토리 페이지 보강(로그인창, 오피셜 트레일러 삽입, 노래 삽입, 메뉴창) 안녕하세요~ 저번주에 토이스토리 관련 홈페이지를 찾아보니 오피셜 페이지가 있었습니다:) 그래서 저는 그 페이지를 참고해서 저만의 방식으로 홈페이지를 만들어보려 합니다. 오늘 보강한 것은 로그인 창 만들기 (아직 전송은 안됩니다 ㅠㅠ) 메뉴 창 만들기 official trailer 삽입 (slide 부분에) introduction.html에 음원 삽입하기 (controls를 활용) 1. index.html 토이스토리 1995년 월트 디즈니 컴퍼니가 배급하고 픽사 애니메이션 스튜디오가 제작한 장난감을 다룬 3D 애니메이션이다. 픽사의 최초의 장편 애니메이션이고, 전세계 최초의 풀 CG 3D 애니메이션 영화이다 캐릭터 소개 우디 버즈 라이트 이어 제시 보 핍 미스터 포테이토 헤드 슬링키 헴 렉스 3. inde..
썸네일 [FrontEnd1] 4월 3째주 한 페이지 개념 정리 안녕하세요~ 보라해바라기입니다:) 한 주 동안 배운 내용을 한 페이지로 정리하면 좋겠다는 생각에 오늘부터 매주 한 번씩 "한페이지 개념 정리"를 해 볼 생각입니다. 오늘 정리하면서 아직 css파일을 사용하지 않고 style태그를 이용하였더니 코드가 많이 지저분함을 느꼈습니다. html파일과 css파일을 분리하는 것의 중요성을 다시금 깨달았습니다. 1. html 코드 4월 셋째주에 배운 개념들 b태그와 em태그 글씨를 "진하게" 설정했습니다. 글씨를 "강조하여" 설정했습니다. a태그와 img태그 네이버 a태그와 img태그 응용 *이미지를 누르면 링크로 이동하게 만들기* style 속성 *style속성을 이용하여 이미지 크기, 글씨 크기, 글씨 색을 바꾸기* 글씨의 색깔이 달라졌죠? ol, ul, li태그 ..
썸네일 [FrontEnd1] 여러 태그 (a, img 응용, br, div, ul, ol, li, style)과 내부 속성(style 속성) / 토이스토리 게시판 형태 만들기 안녕하세요~ 보라해바라기입니다. 오늘은 저번 시간에 이어서 게시판 형태의 토이스토리 소개 웹사이트를 만들기 위해 index.html 과 introduction.html을 따로 만들어 a태그를 이용해 연결시켜주었습니다. 아직 완벽한 설계를 하지 않아 토이스토리의 소개가 담긴 introduction.html은 "바로가기" 하이퍼링크를 누르면 연결될 수 있게 만들었습니다. 게시판의 개요는 다음과 같습니다. (웹디자인 기능사 공식문제를 참고함.) 1. index.html 토이스토리 1995년 월트 디즈니 컴퍼니가 배급하고 픽사 애니메이션 스튜디오가 제작한 장난감을 다룬 3D 애니메이션이다. 픽사의 최초의 장편 애니메이션이고, 전세계 최초의 풀 CG 3D 애니메이션 영화이다 캐릭터 소개 우디 버즈 라이트 이어 제..
썸네일 [FrontEnd1] html의 기본 구조와 여러 태그 _ 토이스토리 소개 페이지 만들기 안녕하세요~ 보라해바라기입니다. 오랜만이죠? 저는 요즘 알바도 하고 어제부터 프론트엔드 수업을 본격적으로 듣기 시작했습니다. 복습의 일환으로 수업 내용을 바탕으로 한 여러 웹 페이지를 만들어 볼 예정입니다. 저의 주제는 제가 좋아하는 영화 시리즈 중 하나인 토이스토리! html의 구조와 여러 태그를 활용해 토이스토리 소개 페이지를 만들었습니다. 1. html 토이 스토리 토이스토리는 1995년 월트 디즈니 컴퍼니가 배급하고 픽사 애니메이션 스튜디오가 제작한 장난감을 다룬 3D 애니메이션이다. 픽사의 최초의 장편 애니메이션이고, 전세계 최초의 풀 CG 3D 애니메이션 영화이다. 2. css img { width: 300px; height: 400px; } /*높이가 400px이고 너비가 300px인 이미지..