웹표준 html,css,javascript 실무 과정 자료] 일반 영역 설정(div)








웹표준 html,css,javascript 실무 과정 자료] 일반 영역 설정(div)

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.


일반 영역 설정(div)


■ 특정한 의미를 갖지 않는 일반영역 설정



■ Flow Content(일반영역을 구성하는 요소)



■ 보통 id나 class 속성을 붙여서 의미 부여



웹표준 html,css,javascript 실무 과정 자료] 제목 표시(h1~h6) & 단락 표시(p)







웹표준 html,css,javascript 실무 과정 자료] 제목 표시(h1~h6) & 단락 표시(p)

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.


제목 표시(h1~h6) & 단락 표시(p)

■ 제목 컨텐츠

■ 숫자는 제목의 rank(계층)

■ h1이 최상위 계층이고, 커질수록 내려감

■ Phrasing Content(단락을 구성하는 요소)


단락 표시
■ Phrasing Content(단락을 구성하는 요소)


웹표준 html,css,javascript 실무 과정 자료] 글로벌 속성 id, class







웹표준 html,css,javascript 실무 과정 자료] 글로벌 속성 id, class

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.



글로벌 속성 id, class


■ 모든 요소에서 공통적으로 사용할 수 있는 속성


■ id=“이름”

  - 요소의 이름(식별자)

  - 동일 문서 안에서 중복해서 사용할 수 없다

  - CSS의 선택자, 링크 대상, 스크립트 등에서 참조 가능



■class=“클래스명”

 - 요소의 클래스명 지정

 - 스페이스로 구분하여 여러 개의 클래스명 지정 가능.

 - 동일 문서 안에서 여러 개의 요소에 동일한 이름 지정 가능

 - CSS의 선택자, 스크립트 등에서 참조 가능



웹표준 html,css,javascript 실무 과정 자료] 문자 인코딩 지정







웹표준 html,css,javascript 실무 과정 자료] 문자 인코딩 지정

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.


문자 인코딩 지정


■ 인코딩으로 “UTF-8”을 강력히 권장


■ <meta charset=“UTF-8”>


■ 되도록이면 문서의 처음(head태그 다음에)에 기술 권장


■ <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”> 을 써도 됨(기존 방식)



웹표준 html,css,javascript 실무 과정 자료] DOCTYPE 선언







웹표준 html,css,javascript 실무 과정 자료] DOCTYPE 선언

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.



DOCTYPE 선언


■ HTML5의 DOCTYPE선언


<!DOCTYPE html>

  - 매우 간단하고 심플함


  - 이유(DTD가 존재하지 않음으로 html버전등을 기술할 필요없음)


  - 목적(브라우저의 모드를 웹표준 모드로 만들기 위함)


  - 대소문자 구분 없음


  - 선언은 필수임



웹표준 html,css,javascript 실무 과정 자료] 부모 요소와 자식 요소







웹표준 html,css,javascript 실무 과정 자료] 부모 요소와 자식 요소

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.




부모 요소와 자식 요소


■ 내포(네스트): 이미 태그가 붙여진 요소 안에 다른 태그를 지정하여 정보를 추가 가능

  - ex) <p>여러분 안녕하세요<strong>또</strong> 여러분 안녕하세요</p>


■ 여기서 p는 부모요소, strong은 자식 요소



웹표준 html,css,javascript 실무 과정 자료] 속성과 값








웹표준 html,css,javascript 실무 과정 자료] 속성과 값

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.


속성과 값


■‘속성’이란?

  - 각 요소에 그 요소의 성질이나 역할등과 같은 상세 정보를 나타내는 것


■ 시작 태그의 요소명 다음에 한 칸을 띄우고 ‘속성명=“값” 형태로 기술


■ 속성명과 값이 동일할 경우 속성값을 생략하거나 속성명만을 사용 가능

   ex) disabled=“disabled”

       disabled=“”

       disabled


■ 여러 개의 속성 지정하는 경우 

- 각각을 스페이스로 구분

- 순서는 구분없음



웹표준 html,css,javascript 실무 과정 자료] 빈 요소(empty element)







웹표준 html,css,javascript 실무 과정 자료] 빈 요소(empty element)

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.



빈 요소(empty element)


■ 요소 내용(content)를 갖지 않는 요소


■ 시작 태그만 있고 종료 태그는 없음





+ Recent posts