1.1 HTML, CSS 태그

HTML 태그

• head
  부가정보 표기하는 태그들 위치하는부분

• body
  콘텐츠 정보 가진 태그들 위치하는 부분

• title
  페이지위의 대표글표시 (head안에 존재)

• meta
  해당 문서의 정보 메타데이터 정의할 때 사용
  

 <--! 한국어 쓰려면 -->
<meta charset = “UTF-8”>

• div
  레이아웃을 나누는데 쓰임

• section
  관련있는 내용 묶는데 사용 (따로 사용할 수 없는 것)
  (h1처럼 제목 나타내는 코드 포함)

• article

  독립적으로 구분 가능한 것(재사용이 가능한 것)
  ex) 게시판 글, 뉴스 기사, 위젯 등등…
  

• a
  하이퍼링크 걸어주는 태그

 <a href="인터넷 주소">글이나 이미지 </a>

• script
  스크립트 요소를 내부에 직접 명시하거나 src 속성 활용하여 외부 스크립트 참조 가능

• link
  외부 css와 연결할 때 사용

<link rel= “stylesheet” href=”css파일이름”>

• img
  이미지를 표기할 때 사용

<img src=”표기할이미지”>

• span
  인라인요소 그룹화할 때 사용

• p
  문단 정의시 사용 (한줄 다차지)

<!-- 클래스 지정하는 방법-->
 <p class=”클래스이름”></p> 
<!--css에서 쓸 땐 .클래스이름으로 사용-->

• ul
  순서없는 목록 묶을 때 사용 (요소 3개 이상일 경우에만 사용)

• ol
  순서 있는 목록 묶을 때 사용

• li
  각 항목 나열할 때 사용

• dl
  용어 정의 목록

• dt
  용어 제목

• dd
  용어 설명

• aside
  광고 부분 표기

• figure
  이미지 요소

• figurecation
  이미지요소의 설명 포함한 텍스트

• footer
  페이지 가장 아래 상세설명 부분

• adress
  footer안에 위치함 주소 표기할 때 사용

• pre
  태그안 작성내용 공백까지 그대로 표시

CSS 태그

• text-align : center;
  중앙 정렬

• background-color: black;
  배경색상 지정

• color : white;
  글자색 지정

• font-size: 10px;
  폰트 크기 지정

• border: 두께 방식 색상 ;
  5px solid black;
  지정된 두께 방식 색상으로 박스 그리기
  

• margin
  외부여백
  margin- left : auto;
  margin-right: auto;

            → 박스 가운데 정렬 시 사용

• padding
  내부여백
  padding-left: 10px;

• box-shadow: x축 y축 블러 퍼짐 그림자색상;
  0 1px 20px rgba(0, 0, 0, 1);

• 폰트 바꾸는 방법
  css
  @import url( 폰트 url);

*{ 
     font-family: ‘폰트이름’; 
   }

• line-height : 16px;
  줄간간격 설정( 글씨크기의 160% 이상적)

• float :left;
  같은줄에 두개의 요소 넣을 때 사용
  → 다른요소와 겹치지 않게 하려면 overflow : hidden; 해줘야 함

마크업 실습

→ 강의에서 페이지를 시맨틱하게 코딩하는게 중요하다고 하셨다.

직접 삼성페이지를 마크업하면서 시맨틱한 코드를 짜는게 정말 중요하다는 것을 느꼈다.