웹디자인기능사 실기 공부 _ HTML 기초, 주석 표시방법, 선택자, 임시링크 생성, 버튼 생성

 

HTML 이론, 실습

 

 

 

- '웹 표준' 이라는 말은 html5 태그(시맨틱태그)를 의미함

  시맨틱 태그 : header, footer, nav 등이 있다.

 

 

 

- 웹디자인기능사 자격증에서 메뉴=nav 태그 사용은 공식임!

  가로 레이아웃 : 메뉴가 가로모양 

  세로 레이아웃 : 메뉴가 세로모양

 

 

 

- HTML 문서 내의 주석 표시 방법 <!-- 내용 -->

  CSS 문서 내의 주석 표시 방법 /* 내용 */

 

 

 

- <p> 내용 </p> →태그

   ↳ 요소

 

 

 

- <br>or<BR>은 대소문자 구분 없이 사용가능

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

  줄 바꿀 때 사용하는 태그

 

 

 

- html과 css에서 하나의 태그에 대소문자를 섞어쓰면 오류가 나고 결과가 나오지 않음.

  javascript는 일부 섞어쓰는 부분이 있는데, 가독성이나 개발자 간의 약속을 위해서 일 뿐 오류가 나거나 하진 않음

 

 

 

- 선택자 : 스타일이 적용될 대상이나 영역을 지정하는 것

  → 범용 선택자 : html 문서 내의 전체 태그에 스타일 적용시

  ex) *{}

  → 타입 선택자 : tag요소의 이름을 직접 명시함, 특정 태그에 스타일 적용시

  ex) p{}

  → 클래스 선택자 : tag에서 class 속성을 사용힐 때 그 클래스 이름이 들어간 태그에 스타일 적용시

  ex) 클래스 이름이 logo인 경우 앞에 '.'를 붙여서 사용 .logo{}

  → ID 선택자 : tag에서 id속성을 사용할 때 그 아이디 이름이 들어간 태그에 스타일 적용시

  ex) 아이디 이름이 footer인 경우 앞에 '#'을 붙여서 사용 #footer{}

  → 속성 선택자 : 정확한 속성을 찾아 스타일 적용

  ex) span{color:blue;} = 선택자{속성:속성값'}

 

 

 

- <p>는 원래 자동 줄바꿈이 됨 / <span>은 띄어 써지지 않아서 <br>태그를 써야 줄바꿈이 됨

 

 

 

- <div>...</div>

  문서 내에서 콘텐츠 영역을 지정할 때 사용

  스타일을 담는 컨테이너 역할을 하며, 레이어와 가시성을 설정함

  class 속성을 이용하여 스타일시트(css) 파일에 지정한 스타일을 연속된 요소, 그룹들에 부여할 대 주로 사용

  html5에서는 <header>,<footer>,<article>,<aside> 요소 등으로 대체 됨

  div요소를 대체할 수 있는 다른 요소가 있다면 해당 요소를 활용해 독자의 접근성과 작성자의 유지보수를 용이하게 함

 

 

 

- <ol>...</ol> 1,2,3 등 숫자로 표시되는 목록 생성

  <ul>...</ul> ○ ○ ○ 등 도형으로 표시되는 목록 생성

  <li>...</li> 목록 내의 내용 정의

 

 

 

- <a href="#">이름</a> : 링크 생성

  #은 임시링크를 지정할 때 사용

 

 

 

- <butten>이름</butten> : 버튼 생성

 

 

 

---

 

 

HTML/CSS _ 구성요소, 기본구성