study diary

오늘은 어제 이어서 만들던 반응형 웹사이트를 완성했다! 오늘은 며칠동안 만들던 반응형 웹사이트를 완성했다! 인포메이션 인포메이션 flat design 홈하위메뉴토글버튼 플랫디자인이란?하위메뉴토글버튼 갤러리하위메뉴토글버튼 문의사항하위메뉴토글버튼 전체메뉴토글버튼 문의사항 홈 / 문의사항 문의사항영역 문의사항게시판 번호 제목 글쓴이 조회수 5 저는 누굴까요? flat design 22 4 blog에서 다양한 정보를 만나보세요 flat design 32 3 flat design은 원색을 강조합니다 flat design 67 2 홈페이지 리뉴얼 소식 flat design 96 1 안녕하세요 홈페이지가 오픈되었습니다. flat design 123 검색대상 제목 내용 제목+내용 댓글 이름 닉네임 아이디 태그 글쓰기 ..

오늘은 하루종일 반응형 웹페이지 만들기 실습을 진행하였다. - 인덱스 pc버전일 때 - 인덱스 태블릿 -인덱스 모바일 1) index html 코드 인포메이션 flat disign 홈하위메뉴토글버튼 플랫디자인이란?하위메뉴토글버튼 갤러리하위메뉴토글버튼 문의사항하위메뉴토글버튼 전체메뉴토글버튼 플랫 디자인이란? 홈 / 플랫 디자인이란? 플랫 디자인 플랫 디자인은 평평함을 추구합니다. 플랫 디자인의 시초는 정확히 언제부터인지 알 수 없지만, 오래 전부터 전해져온 디자인 흐름인것은 분명합니다. 물론 플랫 디자인을 대세의 흐름에 서게 한 장본인은 있습니다. 바로 마이크로소프트의 윈도우8 UI입니다.마이크로소프트는 윈도우8에서 파격적인 플랫 UI를 발표하면서 플랫 디자인을 대중적인 디자인 흐름으로 만든 장본인입니다...

오늘은 반응형 웹 2번째 시간으로 미디어쿼리와 플렉스 박스에 대해 학습했다. 플렉스 박스는 이전에 배웠던 float와 비슷한 기능을 하는 것 같은 느낌인데 아직 개념이 확 와닿지는 않는다...ㅠ 앞으로 실습해보면서 감을 익혀나가야겠당. 파이팅!! [chapter 03 미디어쿼리] 1.미디어쿼리 : 미디어쿼리는 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성 중 하나 : 반응형 웹 디자인에서는 미디어 쿼리를 사용해 적용하는 스타일을 기기마다 (화면 크기마다) 전환할 수 있다. [chapter 04 뷰포트] 1. 뷰포트 기본 문법 : 뷰포트는 화면에서 실제 내용이 표시되는 영역 2. 뷰포트 영역 확인하기 : F12를 눌러서 확인할 수 있음(휴대폰,태블릿 모..

국비교육 3주차 시작! [chatper 01 반응형 웹 기본 개념 이해하기] 1. 반응형 웹이란? : 데스크탑, 모바일, 태블릿 등 다양한 디바이스에 따라 웹페이지의 사이즈가 조절이 되어 스크린의 해상도에 맞게 보여지는 것을 말한다. *반응형 웹을 추천하는 이유? 1) 유지보수가 간편하다. 모바일 버전, 데스크탑 따로 버전이 나눠져 있으면 내용 수정할 때 개별 수정해야하므로 시간과 노력이 많이 가지만 반응형 웹은 모바일 버전, 테블릿 버전, 데스크탑 버전 등 모든 디자인을 하나의 HTML파일과 CSS파일에서 작업하기 때문에 유지보수가 쉬움 2) 모바일 점유율의 증가 웹 사이트를 만들 때 pc용 웹 외에 모바일용 웹을 별도로 만들거나 반응형 웹으로 만드는 것이 기본이다. 3) 마케팅에 유리하다. 마케팅 최..

오늘 수업도 거의 실습하는 시간을 가졌다. float 아직도 감을 못잡고 했갈린다...ㅠ 2개를 제작했는데 2번째 제작한 건 집중력이 떨어져서 그런가 여러가지 디테일한 부분을 놓쳐서 제작했다. 이부분은 이번주 주말에 다시 학습하며 다시 코드를 짜서 올려야겠다. 1. 무빙사진 동호회 첫번째 사진이 예시, 두번째 사진이 내가 제작한 웹 사이트이다. 이전에 만들어보던 예제와 비슷한데, 맨 아래 도트 1개짜리 이미지를 5개 연달아 넣어보았다. 대학원소개 동문회소개 동문회소개 동문회조직도 임원리스트 커뮤니티 동문경조사 동문행사일정 사용자메뉴얼 한국대학교 총동문회 환영합니다. 공지사항 MORE 제17회 한국대학교 동문회장배 자선골프대회 안내문.. 2023-08-27 개교 100주년 기념 야외 오페라 '토스카'축제 ..

교육 8일차인 오늘은 css파트에서 table관련 속성에 대해서 공부하고 오후 시간에는 웹 사이트 만들기 실습을했습니다. 오늘은 목요일이니까 하루만 더 화이팅하면 주말이니 힘내보겠습니당!! [chapter 05 table을 위한 스타일] 1.caption-side 속성 : 표 제목 위치 정하는 속성 속성 값 설명 top 캡션을 표 윗부분에 표시(기본값) bottom 캡션을 표의 아랫부분에 표시 2. border-collaps : 테두리 통합, 분리하는 속성 속성 값 설명 separate 테두리를 따로 표시(기본값) collapse 테두리를 하나로 합친다 3.border-spacing : 인접한 셀 테두리 사이 거리 지정하는 속성 4. empty-cells 속성 : 내용을 안넣는 빈 셀의 표시 여부 관련 ..

오늘은 간단한 웹 사이트를 만들어보는 실습을 했다. 강사님과 같이 따라가면서 할 때는 이해가 된 줄 알았는데,,, 혼자 만들어보려고 하니까 많이 했갈렸다 ㅠㅠ 특히 위치 배열하는데 float 속성이 아직 감이 안잡혀서 어려웠다... 이 부분은 주말에 더 공부해와야겠다. 1) 여행사 웹사이트 만들기 DD소개 빵 만들기 제빵 재료 제빵 도구 제빵 포장재료 커뮤니티 나만의 레시피 내가 만든 빵 제빵 노하우 메인슬라이드 이미지 : fade in/out 베이커리 카페 세상에 하나뿐인 베이커리 공지사항 내용 날짜 제1회 DD 베이커리 워크숍에 초대합니다(서울권). 2017-12-12 올림픽공원 카페 초보 여성 창업을 추천받습니다. 2017-12-10 맛과 영양, 환경문제까지 생각하는 베이커리! 2018-03-09 ..

오늘은 실습 위주로 홈페이지 구조를 만들어보는 시간이 길어서 새로운 개념들은 몇가지만 학습했다! 5.clear 속성 : float 속성에서 설정한 좌우 정렬을 해제 시키는 속성 : float 설정은 float다음에 오는 태그도 영향을 받아서 자기 자리를 못 찾는 경우가 있음 속성 값 설명 left left의 속성을 해제 right right의 속성을 해제 both left와 right의 속성을 해제 6.box-sizing 속성 : 기본적으로 width, height 값에 padding 값이나 border 값은 포함되지 않는다. 속성 값 설명 content-box (기본값) width 속성 값을 padding, border값을 포함시킴. border-box width 속성 값을 padding, border..

국비교육 5일차 학습 일지 오늘도 css를 학습하였다. [chapter 02 테두리 관련 속성] 2=> 5px(위, 아래) 2px(왼, 오른쪽) 3=> 3px(위) 5px(왼,오른쪽) 7px(아래) 4=? 3px(위) 5px(오른쪽) 7px(아래) 10px(왼) ---------------------------------------------------------------------- 1. border-style 속성 : 테두리 종류를 설정하는 속성 속성 값 설명 solid 실선 dotted 점선 dashed 긴 점선 double 두 줄 실선(굵기가 적어도 3px 이상) none 테두리를 치지 않음 groove, ridge, inset, outset 각종 액자 형태의 테두리 hidden 테두리를 숨기다..

오늘은 국비 교육 4일차! css를 중심적으로 공부했다. 개념이 어려운 건 없었지만 나열식으로 너무 많이 한번에 배워서 틈틈히 복습하고 공부해야겠다..! 화이팅...! [chpapter 01 텍스트 관련스타일] 1.font-family 속성 : 웹 문서의 글꼴 지정 : 한 가지 글꼴만 지정해도 되지만 지정한 글꼴이 없을 경우를 대비해 2~3번째 글꼴까지 지정 : 두 개 이상의 글꼴을 지정할 때는 , 콤마로 구분 : 폰트명이 한 단어 이상일 때(공백이 있을때!)는 따옴표로 묶어주기 (예) "맑은 고딕"(폰트명 자체가 한칸의 공백이 있어서 따옴표로 묶어서 공백을 넣어주어야 함) 2.@font-face : 웹 사이트에 폰트를 심어주고 그 폰트를 사이트에 불러오는 것 : 최근 브라우저들이 웹 폰트를 대부분 지원..