썸네일 [FrontEnd2] 5월 둘째주 한페이지 복습(출력, 사칙연산자, 관계 연산자, 논리 연산자, 증감연산자, 비트연산자) 안녕하세요:) 보라해바라기입니다! html&css과정이었던 FrontEnd1 수강을 마치고 저는 이제 js과정을 듣고 있는 중입니다. 이제 프로그래밍 언어를 제대로 배운다는 생각에 마음가짐또한 새로워지네요! 전과 마찬가지로 배웠던 내용을 복습하는 한페이지 정리를 해보았습니다. 출력 사칙연산자 (+ 나머지 연산) 관계연산자와 엄격하게 검사하는 연산자 ===, !== 논리연산자 관계연산자와 논리연산자의 응용 증감연산자 비트연산자 에 대해 정리해보았습니다! 1. html 2. 결과 이미지
썸네일 [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인 이미지..
[Python] 모각코 활동 후기 :) https://codemate.kr/@jgh0711/파이썬-기초편-수료-후기 파이썬 기초편 수료 후기 :) by jgh0711 | 코드메이트 안녕하세요~ 저는 보라해바라기입니다! 제가 참여해보고 싶었던 과정 중 하나인 파이썬 과정을 오늘 부로 마무리하게 되었네요~ 1. 모각코에 참여하게 된 계기 • 여러 프로그래밍 언어를 배웠 codemate.kr
썸네일 [JS] 모각코 활동 후기 :) 안녕하세요~ 보라해바라기입니다. 이번에도 모각코 활동 후기로 긴 글을 쓰게 되었네요. 새해에도 코딩을 손 놓지 않기 위해 1/10 ~ 1/28, 약 3주간 자바스크립트를 공부했습니다! 방학이 시작되어 상대적으로 여유로웠던 저는 '모각코+' 과정에 참여하여 매일 코딩을 해 보았습니다~ 1. 모각코에 참여하게 된 계기 저의 꿈은 프론트엔드 웹 개발자가 되는 것입니다. 이전에 HTML과 CSS를 모각코를 통해 학습하였습니다. 이 과정의 끝 물에 자바스크립트를 수박 겉 핥기 식으로 사용해봤습니다. 웹을 개발하는데 가장 기본적인 언어가 HTML, CSS, JS인 만큼 JS에 대한 기초적인 공부가 필요했습니다. 동적인 웹페이지를 만들기 위해 JS를 배우고자 마음먹었습니다. 항상 독학하는 것에 큰 부담을 느꼈던 저는..