TIL(2021.01.21)

4249 단어 TILCSShtmlCSS

HTML

  • 하이퍼텍스트 마크업 언어(HyperText Markup Language)의 줄임말로 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다.
  • 기본적으로 HTML은 태그들의 집함을 뜻함
  • self-closing tag : 예외 적으로 스스로 열고 닫는 태그들이 있다. ex) <img /> <input /> 등
  • HTML 구조는 부모가 하나이고 자식이 여럿인 트리 구조를 가진다. ex) 
<html> 
 <head>
   <title></title>
 </head>
    <body>
   
 </body>

</html>

HTML Achievement Goals

  • HTML이 markup language라는 것을 이해할 수 있는가.(o)
  • "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있는가.(o)
  • HTML의 구조와 문법에 대해서 이해하고 적용할 수 있는가.(o)
  • opening tag, closing tag, self-closing tag에 대해서 이해하고 있는가.(o)
  • 자주 사용되는 HTML 요소(element)가 무엇인지 알고 차이를 설명할 수 있는가.(o)
  • div, span 이 무엇이고, 차이는 무엇인지 알고 있는가.(o)
  • ul, ol, li 가 무엇이고, 언제 사용해야 하는지 알고 있는가.(o)
  • input type을 설정하여 다양한 종류의 input을 활용할 수 있는가.(o)
  • HTML을 동적인 웹 어플리케이션으로 개발할 수 있는 구조로 짤 수 있는가.(세모)
  • 간단한 웹 페이지 기획을 HTML 문서로 표현할 수 있는가.(o)
  • id, class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운 HTML 문서를 작성할 수 있는가.(o)
  • HTML5 semantic tag를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있는가.(o)

CSS

  • CSS(Cascading Style Sheet)는 웹 사이트의 페이지에 스타일을 추가할 수 있는 유연한 법을 제공한다. CSS는 페이지의 모양에 적용되며, 이를 통해 글꼴, 색상, 레이아웃 및 기타 프레젠테이션 기능을 정의할 수 있다.

  • CSS의 문법

  • CSS의 사용방법엔 3가지가 있다.
    - 1. Inline Style Sheet, 인라인 스타일 시트
    - 2. Embeded Style Sheet, 내부 스타일 시트
    - 3. External Style Sheet, 외부 스타일 시트

<link rel="stylesheet" href="style.css" /> 외부 스타일 시트를 추가 하는 방법

CSS Achievement Goals

  • CSS의 목적을 이해할 수 있는가 (o)
  • 프론트엔드 개발자의 소양에 대해 이해할 수 있는가 ()
  • CSS의 기본 문법과 구조를 이해할 수 있는가 (o)
  • CSS를 HTML에 적용하는 방법에 대해서 이해할 수 있는가 (o)
  • 직접 HTML 안에 CSS를 정의하는 것을 왜 권장하지 않는지 이해할 수 있는가 (o)
  • id 및 class와 관련된 selector 규칙을 이해할 수 있는가 (o)
  • CSS를 이용해 텍스트를 꾸밀 수 있는가 (o)
  • CSS에서 쓰이는 단위의 두가지 구분을 이해할 수 있는가 ()
  • 어떤 단위가 어떤 경우에 적합한지 이해할 수 있는가 (세모)
  • CSS 박스 모델을 이해할 수 있는가 (세모)
  • box model
  • width, height (o)
  • margin, padding, border (o)
  • 박스 크기를 측정하는 두가지 기준의 차이를 이해할 수 있는가 ()
  • MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있는가 (o)
boj-10989(Counting_Sort_Variation without Original_Array)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage