[Project] 공지사항 : notice.html
·
◈ Human Project/화면 설계 [HTML]🐯
- CSS : 공지사항(notice.html) /* 공지사항 */ .notice table {width: 700px; margin: 0 auto; border-collapse: collapse; table-layout: fixed;} .notice th {border-top: 3px solid blue; border-bottom: 3px solid blue;} .notice td {border-bottom: 1px solid gray;} .notice .col1, .notice .col4 {width: 8%;} .notice .col3, .notice .col5 {width: 14%;} .notice th, .notice td {padding: 10px;} .notice td + td { text-ali..
[Project] 메인페이지 : index.html
·
◈ Human Project/화면 설계 [HTML]🐯
- CSS : 메인페이지(index.html) /* 메인페이지 */ .index {width: 900px; margin: 0 auto;} .index::after {content: ''; display: block; clear: both;} .index .mainbox {width: 640px; float: left; padding: 20px;} .index .box {width: 630px; padding: 5px;} .index .box h2, .index .box h3, .index .box p {margin: 10px 0;} /* index : top */ .index .top { width: 630px; height: 200px; background-size: 110%; background-po..
[Project] 시맨틱(semantic) 태그 : header, nav, main, footer
·
◈ Human Project/화면 설계 [HTML]🐯
- CSS : 시맨틱 태그(header, nav, main, footer) @font-face { font-family: 'over'; src: url(font/AnyConv.com__koverwatch.woff); } /* body */ body {margin: 0; font-family: 'over'; font-size: 18px; color: rgb(80, 80, 80);} /* header */ header {background: #fee;} header .homebox {width: 1024px; height: 150px; margin: 0 auto; background-size: 100%; background-repeat: no-repeat; background-image: url(images..
[HTML5] HTML 기본 문서 구조 [마크업과 태그, HTML 문서 기본 구조]
·
◎ HTML5+CSS3/HTML5📝
1. 마크업과 태그(tag) 마크업 : 어디가 이미지고 어디가 텍스트인지 표시하는 것 태그(tag) : 마크업 할 때 사용하는 약속된 표기법 - HTML 문서를 만들기 전 기억해야 할 것들 태그는 〈 와 〉를 이용해 구분한다. 이미지를 삽입할 때는 'image'의 약자인 라는 태그를 사용하고, 텍스트 문단을 삽입할 때는 'paragraph'의 약자인 라는 태그를 사용한다. 태그는 소문자로 쓴다. HTML 태그는 대·소문자를 구별하지 않지만, HTML5 표준 명세에서는 태그와 태그 안에 사용하는 속성들은 모두 소문자로 사용할 것을 권장한다. // // 여는 태그와 닫는 태그를 정확히 입력한다. 대부분의 태그는 ~ 이나 ~ 처럼 여는 태그와 닫는 태그가 하나의 쌍으로 이루어진다. * 웹 브라우저는 여는 태그..
[HTML5] HTML 개발환경 구축하기 [VSC 다운로드, 'Hello World' 출력하기]
·
◎ HTML5+CSS3/HTML5📝
1. Visual Studio Code 다운로드 Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com - open in brower 플러그인 다운로드 2. 'Hello World' 출력하기 Hello World