개발입문뉴비 - 국비지원 ( Front End )/html

[2021/12/16]국비지원 HTML5 코딩툴 기본학습 8 커피빈 index 마크업

이 날은 하루종일 커피빈 홈페이지의 메인화면만 html5 마크업 한 날. 코드 보면 죄다 ul li 임을 알 수 있다. 담임강사의 코딩스타일이 그러할 뿐 굳이 ul li로만 묶지 않아도 되고, 본문 영역 나눌 때 div로 크게 묶어놓고 내용을 목록으로 했을 때 더 의미가 있거나 적절하다 싶을 때 ul li를 쓰면 될 듯 하다. 당시 사이트화면 작업 내용 본문 바로가기 topmenu 로그인 매장찾기 체용정보 단체 및 기업구매 고객서비스 회원정보 안내 BUY ONLINE View All ♥2021 커피빈몰 BEST AWARDS♥ 재고 한정 품목 할인 상품 분쇄형 커피 드립백 소풍커피 파우치 커피 ♥NEW♥파우치 커피 캡슐커피 ♥NEW♥네스프레스 호환용 CBTL 호환용 원두 원두가이드 MD's Pick 라이트..

[2021/12/15]국비지원 HTML5 코딩툴 기본학습 7-(5) 과제: 전기계 공기업 공지사항 페이지 마크업

이 날의 과정 1. form 복습 + form 예제 이미지 마크업 해서 수업 중 과제로 제출 2. video 태그 3. audio 태그 4. 기타 요소 태그 5. 한국남부발전공사 공지사항 페이지 마크업 아마 후에 올리는 과제를 보면 다들 알아채겠지만... 담임강사가 제일 좋아하는 페이지 : 공지사항 or 경영정보, 채용정보 ( 항목 10개 이상이어야 하며 1개일 경우 임의로 10개 채우도록 함 = table 태그 ) 문의 ( 항목 개수 필히 5개 이상이어야만 함 = form 양식 ) 그리고 내가 이거 꼭 해야 의미 있냐? 싶게 생각하는 페이지 역시 저 2종.. 요즘은 카톡이 대세올습니다.. 예.. 채용정보는 심지어 사이트 따로 빼놓는 곳이 더 많사옵니다... 강사님.. 한국남부발전|주| 공지사항 총 게시..

[2021/12/15]국비지원 HTML5 코딩툴 기본학습 7-(4) 기타 요소

이 날의 과정 1. form 복습 + form 예제 이미지 마크업 해서 수업 중 과제로 제출 2. video 태그 3. audio 태그 4. 기타 요소 태그 5. 한국남부발전공사 공지사항 페이지 마크업 기타 요소 태그 ⓐ ins : 글 추가 ⓑ del : 글삭 ⓒ sup : 윗 첨자 ⓓ sub : 아랫 첨자 ⓔ 특수기호 일부 : &, , ", ', ©, · ⓕ abbr : 축약어. Abbreviation의 약자. ⓖ pre : Preformatted Text의 약자. pre태그 내에 입력한 형태 그대로 문장을 출력시켜 주는 기능. p태그에서 enter효과를 출력하려면 br을 입력해야 하지만, pre태그에서는 툴에서 enter 친 그대로를 출력함 ⓗ code : 어떤 코드를 썼는지 설명하려고 할 때 쓰면 ..

[2021/12/15]국비지원 HTML5 코딩툴 기본학습 7-(3) audio, iframe

이 날의 과정 1. form 복습 + form 예제 이미지 마크업 해서 수업 중 과제로 제출 2. video 태그 3. audio 태그 4. 기타 요소 태그 5. 한국남부발전공사 공지사항 페이지 마크업 audio : video태그와 마찬가지로 한 방에 정리할 수 있는 태그. 과거 N사 블로그의 블로그배경음 서비스 그 기능을 떠올릴 수 있음 (지금은 없어진 기능) iframe : video태그와의 차이 = 해당 영역에 프레임을 쳐놓고 그 안에다 타 사이트의 동영상 등을 불러올 수 있음 inline frame의 약어. 자주 보지 못 한 유형의 태그. 어쨌든 하나의 블록요소로 보자면, 초과 될 경우 스크롤 기능이 지원된다는 특성이 있는데 이 안에 텍스트를 불러올 경우에는 차라리 div에 overflow scr..

[2021/12/15]국비지원 HTML5 코딩툴 기본학습 7-(2) video

이 날의 과정 1. form 복습 + form 예제 이미지 마크업 해서 수업 중 과제로 제출 2. video 태그 3. audio 태그 4. 기타 요소 태그 5. 한국남부발전공사 공지사항 페이지 마크업 작성은 video 따로, source 따로 했지만 굳이 이렇게 나눠서 하지 않아도 된다. 출력물 더보기 동일한 내용을 한방에 정리한 태그 이게 더 깰끔