하루하루 성장하는 개발자가 되자

0. 만들어야 하는 menuBar체크 # 통합 메인 파일에서 자리 잡아 놓은 div에서 작업 # 메인메뉴와 서브메뉴 작업 ul> li에서 로 메인 메뉴 만들고 ul> li> ul> li에서 로 서브 메뉴 잡아준다. 1. 파일 하나 새로 만들어서 기본 틀 잡아주기 # 구조 잡고 내용 채우기 # 높이랑 너비는 임의로 지정 본 파일에서 사이즈를%로 적용해놓아서 정확한 값 몰라서 일단 임의 값으로 지정 후 작업 2. 스타일 적용/해제 해주기 2-1 , , 기본 적용되어있는 속성 제거 및 위치 잡기 2. ul>li { float : left } - 들 순서대로 만들어주기 3. 서브메뉴들 숨겨주고 – 메인메뉴:hover..

0. 만들어야 하는 footer 체크 # 3개의 div 중 2번째 div에서 작업 # 안에 div2개로 나눠서 작업 input text 들어갈 div input submit 들어갈 div 1. 파일 하나 새로 만들어서 기본 틀 잡아주기 #헤더의 3개 부분 중 가운데 header_2에서 작업 #header_2 : 높이랑 너비는 임의로 지정 본 파일에서 사이즈를%로 적용해놓아서 정확한 값 몰라서 일단 임의 값으로 지정 후 작업 2. 내용 채우고 스타일 적용해서 위치 잡아주기 2-1 아래의 div>input / div>input 해서 작업 # input 태그는 정보 전달 목적 - key/value 필요하다 - name/value 필요 2-2 안에 요소들 높이/너비 지정해서 틀 잡기 2-3...

0. 만들어야 하는 login폼 체크 ## div3개 중에서 3번째 div에서 작업 ## 2개의 div로 나눠서 작업 아이디 / 비밀번호 / 로그인 들어갈 div1 회원가입 / ID-PWD 찾기 들어갈 div2 ## div1 은 다시 나눠서 작업 아이디 비밀번호들어갈 div와 로그인 들어갈 div 1. 파일 하나 새로 만들어서 기본 틀 잡아주기 # CHECK 링크 영역 form 태그 안에 안쓰고 밖에 해준 이유? 데이터 전달 – 로그인 id / pwd 전달해주기 위한 목적으로 2. 스타일 적용해서 틀 잡아주기 2-1 #content_3: 높이랑 너비는 임의로 지정 본 파일에서 사이즈를%로 적용해놓아서 정확한 값 몰라서 일단 임의 값으로 지정 후 작업 2-2 안에 요소들 높이/너비 지정해서 틀 잡기 3. ..

0. 만들어야 하는 footer 체크 div 2개로 나눠서 위치 잡아주고 밑에 div쪽은 다시 div 2개로 나눠서 작업 1. 파일 하나 새로 만들어서 기본 틀 잡아주기 새로운 파일 생성 #footer : 높이랑 너비는 임의로 지정 원래 파일에 #footer 크기 지정되어있음 #footer_1 , #footer_2 틀 잡기 #footer_2 안에는 2개로 구성 가 기본적으로 마진을 잡고 있어서 --- 마진 없애는 작업 필요 2. 푸터 안쪽 내용 채우기 2-1. #footer_1 채워주기 a태그 | 만들기 2-2 #footer_2 채워주기 내용은 KH홈페이지 복사 붙여 넣기 해서 채워줬음. 스타일 적용해주기 상세_footer - 완성

BOOK : 모던 웹을 위한 HTMl5 + CSS3 바이블 폰트 속성 font-size px, em, large, small 등 사용 (h1-32px, p-16px 기본 값) font-family 사용자 컴퓨터에 설치 된 폰트 사용 font-style , font-weight 폰트의 기울기 / 두께를 조정하는 속성 line-height 글자의 높이를 지정, 글자 수직 중앙정렬할때 사용 text-align center, right 등 ( inline 형식의 태그에는 적용안 됨) text-decoration : none; a링크 href속성 글자에 밑줄 없애줌. 색은 별도로 지정 font-family 한 단어의 폰트는 따옴표 사용 X, 두 단어 이상 폰트는 반드시 사용 설치되어있지 않을 상황 대비해 font..

BOOK : 모던 웹을 위한 HTMl5 + CSS3 바이블 CSS3 속성 단위 크기 단위 백분율 단위 / 배수 단위 / 픽셀 색상 단위 < #000000 / rgb / rgba / hsl / hsla HEX 코드 단위 / RGB 색상 단위 / HSL 색상 단위 url 단위 < url('Desert.jpg') / url('other/Desert.jpg') 현재 폴더의 / 현재 폴더 내부 other 폴더의 Desert 파일 크기 단위 전체 폰트 크기에 절대 크기를 지정하고(px) 난 후에 각각 태그에 상대크기를 지정하는(%, em) 방법이 많이 사용 100%가 초기에 설정된 크기 // 1.5배=1.5em=150% 상대적 크기 // 16px, 20px은 절대적 크기 색상 단위 rg..

BOOK : 모던 웹을 위한 HTML5 + CSS3 바이블 CSS 선택자란? CSS 선택자는 특정한 HTML 태그를 선택할 때 사용하는 기능 선택자를 사용해 특정한 HTML 태그를 선택한 후 해당 태그에 우리가 원하는 스타일 또는 기능을 적용할 수 있다. 이러한 코드를 CSS 블록이라고 부름 style 태그 내부에 입력해 사용함. 이때 style 태그 내부에 입력되는 코드를 스타일 시트라고 부른다. CSS 선택자 선택자 종류 선택자 형태 선택자 예 전체 선택자 * * 태그 선택자 태그 h1 아이디 선택자 #아이디 #header 클래스 선택자 .클래스 .item 후손 선택자 선택자 선택자 header h1 자손 선택자 선택자 > 선택자 header > h1 속성 선택자 선택자[속성=값] input[type..

BOOK : 모던 웹을 위한 HTMl5 + CSS3 바이블 이미지 태그 이미지를 생성할때 사용 태그의 속성들 src / alt 이미지의 경로 지정 / 이미지 없을 때 나오는 글자 지정 width / height 이미지의 너비 지정 / 이미지의 높이 지정 이미지 크기는 아는데 아직 이미지가 없을 때 사용하는 좋은 방법 중 하나로 -> dummyimage.com 사이트에서 크기 이미지 이미지 얻어 와서 사용 오디오 태그 플러그인의 도움 없이 음악을 재생할 수 있게 만들어 주는 태그 태그의 중요 속성들 src / preload 음악 파일의 경로 지정 / 음악 재생 전 모두 불러올지 지정 autoplay / loop / controls 음악을 자동 재생할지/ 반복할지/ 재생 도구를 출력할지 지정 태그 -> 웹 ..

BOOK : 모던 웹을 위한 HTMl5 + CSS3 바이블 태그-Tag 요소-Element 속성-Attribute 주석 실행에 영향을 미치지 않고 설명을 위한 목적으로 사용하는 코드 기본적인 HTML 5 페이지 HTML5 Basic Page HTML5 Basic Page head 태그에 넣을 수 있는 태그 meta 웹 페이지에 추가 정보를 전달 title 웹 페이지의 제목 script 웹 페이지에 스크립트를 추가합니다. link 웹 페이지에 다른 파일을 추가합니다. style 웹 페이지에 스타일시트를 추가합니다. base 웹 페이지에 기본 경로를 지정합니다. 글자태그 , --- 크기 및 우선 순위 , , 단락 / 줄바꿈 / 수평 줄 태그 앵커태그 / href 속성 / 속성 값 "#" 빈 링크 / / 루비..

BOOK : 모던 웹을 위한 HTMl5 + CSS3 바이블 웹의 역사 ARPANET은 시간이 지나면서 두 가지 용도로 나뉨 ARPANET(민간 연구용) / MILNET(군사용) 팀 버너스 리 웹 브라우저로 보고 있는 웹 개발 하이퍼링크 개념 바탕으로 1991년 World Wide Web 배포 / 인기를 끌자 소스 코드 전체 공개 W3C(World Wide Web Consortium) 재단 창설-> 웹 표준을 지정하는 기관이며 HTML 표준을 제정하는 단체 플러그인 c++, 액션스크립트 ↓ 웹 2.0 시대 액티브엑스, 웹 애플리케이션 ↓ WHATWG 2004년 HTML5 표준 제정 2016년 마이크로소프트의 인터넷 익스플로러 10 이하의 버전 지원 중단-> 11 버전으로 강제 업데이트 -> 그 결과 HTM..