[부트캠프 HTML/CSS] 210706 html css 기본 개념 및 정리

📌 HTML / CSS

HTML은 HyperText Markup Language의 약자로 웹 페이지를 구성하는 마크업 언어이다. 문서의 틀 또는 구조라고 본다. CSS는 그 HTML를 꾸며주는 스타일시트라고 간단하게 정의할 수 있다. 그리고 자바스크립트가 유저와 상호작용 할 수 있게 하는 언어라고 볼 수 있다.

Achievement Goals

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

📌 HTML

HyperText Markup language 약자이며 웹페이지의 틀을 만드는 마크업 언어이다

• 태그들의 집합
• 기본적인 형태

Html 
 Head 
    Title 
Body
   H1 : Hello World
   Div:contents
       Span 

• Self closing 태그
  ex) 이미지 태그

📌 자주 사용되는 html 요소

<div> 한줄 차지
<span> 컨텐츠크기만큼 차지 
<img> image
<a> link
<ul> & <li>
<input> radio & checkbox 형태
<textarea>
<button>

📌 CSS

CSS는 스타일링을 담당

• 콘텐츠의 배치와 위치 (레이아웃 디자인)
• 텍스트를 강조하거나 밑줄을 치는 등, 최소한의 타이포그래피 (Typography)

사실 css 를 매일 다루던 사람이라 오히려 정의를 내린다거나 개념을 내린다는게 좀 어색하게 느껴질 정도다. 기억해야 할 것들만 기억해두면 될 것 같다.

• CSS 파일 추가

<link rel="stylesheet" href="index.css" />

---

• id와 class의 차이점

id

#으로 선택
한 문서에 단 하나의
요소에만 적용
특정 요소에 이름을 붙이는 데 사용

class

.으로 선택
동일한 값을 갖는 요소 많음
스타일의 분류(classification)에 사용

*박스 모델 참고