Review

KOSTA 교육 30일차(HTML5, 시맨틱 마크업, CSS, link, Font, 박스모델, 테이블&테두리 속성)

Tigger 2020. 6. 23. 00:49

18.12.10(월)

 

배운 내용

 

  1. 시맨틱 마크업
  2. link
  3. 내부 스타일 시트
  4. 선택자 요소
  5. Font속성
  6. 테이블&테두리 속성
  7. 박스모델

1. 시맨틱 마크업

시맨틱 마크업은?
기존HTML보다 확장된 문서구조 태그를 지원한다.
검색엔진에 노출이 잘 될 수 있도록 해준다.

 

  • section : 제목과 단락으로 구별할 수 있다.
  • article : 새로운 문서에서 사용하더라도 전혀 이상하지 않다.
  • header : 페이지의 타이틀, 로고를 표시한다.
  • aside : 사이드에 연관된 부분을 표시한다.
  • footer : 홈페이지 밑에 나타나는 부분을 표시한다.

 

  • 홈페이지의 제목인 ‘제주 올래'를 header로 선언한다.
  • 제목, 단락으로 구별할 수 있는 제주올래 7코스 및 설명을 section으로 선언한다.
  • 새로운 문서에도 사용 가능한 부분을 article로 선언한다.
  • 홈페이지 밑에 첨가할 footer를 선언한다.

2. link

link는?
외부 스타일 시트를 참조하여 CSS를 적용할 수 있다.

  • link는 <head>안에 작성하며 rel, type, herf 속성을 사용한다.

  • @charset “UTF-8”; 을 선언한 외부 스타일 시트에서 스타일 선언을 한다.
  • <head>태그 내에 <link>태그를 선언한다.
  • 외부 스타일 시트에의하여 result값으로 변한다.

 

  • @import url() 을 사용하여 외부 스타일 시트를 불러들일 수 있다.

3. 내부 스타일 시트

내부 스타일 시트는?
내부 스타일 시트에 바로 스타일을 적용하여 출력하는 것을 말한다.

  • <style>태그를 사용하여 작성한다.
  • <head>태그 내부에 작성한다.

  • <style>태그 내에 type을 선언한다.
  • 각 태그에 맞는 스타일을 선언한다.

4. 선택자 요소

선택자 요소는?
HTML 문서에서 CSS 규칙 적용 타겟이 되는 다양한 종류의 CSS 선택자가 존재한다.

 

  • 클래스, ID, 하위, 자식 선택자는 무조건 알아둘 것(활용도가 높음)

 

  • class 선택자는 .클래스명{} 으로 선언한다.
  • 해당 클래스에 해당되는 스타일을 선언한다.

 

  • ID 선택자는 #클래스명{} 으로 선언한다.
  • 해당 클래스에 해당되는 스타일을 선언한다.

 

  • 하위 선택자는 두 요소를 나열{} 선언한다.
  • 자식 선택자는 부모 > 자식 {} 선언한다.

5. Font속성

Font속성은?
Font 관련 속성은 text의 글꼴, 굵기, 크기, 스타일 등을 지정한다.

 

 

6. 테이블&테두리 속성

테이블&테두리 속성은?
요소의 속성에 대해사 테이블의 너비나 높이를 지정, 테두리 속성을 지정한다.

 

 

7. 박스모델

박스모델은?
컨텐츠, 패딩, 테두리, 마진으로 구분한다.

 

 

오늘 교육 간 느낀점

오늘로서 HTML과 CSS를 마무리했다. 지금까지 언어를 배우다가 Web을 배우니 직접 화면에 보여서 흥미를 느꼈다. 하지만 외우지 못하면 사용하지 못하는 큰 단점이 있었고 아직은 보면서 실습을 하지만 나중에 습득하게 되면 유연하게 사용할 수 있을 것 같다.

 

내일부터 JavaScript를 배우게 되는데 조금 긴장되기도 하고 걱정되기도 한다.
내일도 화이팅 해야겠다!