Today's HTML
HTML 기본 개념
분명 이전에 html 공부했었는데 부분 부분만 기억나는거 같다,,
다음주에 계산기 배우는걸 페어랑 같이 한다고 하는데 넘나 떨리는 것🥺🥺
어제까지는 뇌 과부하 걸리는 것 같았는데ㅋㅋㅋㅋ(어제의 코틀릿,, 혼자 다시 정리해야지)
오늘 할당량 다하고 저번에 정리 못했던 반복문이랑 함수를 마저 정리했다
HTML 기초 개념도 다시 한번 되새기자!
HTML
HyperText Markup Language
프로그래밍 언어가 아닌 웹페이지의 구조(뼈대)를 구성하는마크업 언어
- HTML : 구조 (Structure)
- CSS : 스타일 (Presentation)
- JavaScript : 상호작용 (Interaction)
태그(tag)
- HTML 은 태그(tag) 들의 집합
- 부등호
<>로 묶인 기본 요소
<p class = 'paragraph'> Hello </p>p태그(tag) 에 속성(attribute)은class, 속성값(attribute value)은paragraph값(value) 는 'Hello'
div (block)
- 한 줄을 다 차지하며 하나의 그룹을 생성 (시멘틱요소를 생각해 section, form 태그로 쓰일 수 있음)
span (inline)
- 줄바꿈 되지 않고 한 단어(컨텐츠) 크기만큼 차지해서 옆에 붙음
입력폼 input
<input>요소의 동작 방식은type특성에 따라 달라짐- 유형 : text, password, radio, chekbox, button 등
시맨틱 요소
- 의미를 가진 요소를 사용하면 검색 엔진에 효과적으로 노출
(하나의 키워드라고 생각해서 담긴 의미에 따라 검색 결과 상위 노출) - 개발자 작업 시 코드 찾기 용이, 요소 안의 데이터 유형 예측 가능
div나span에 CSS 적용해서 시맨틱요소처럼 보이게 할 수 있지만 시맨틱 성격을 가지진 못함
시맨틱 요소의 종류
<article>: 독립적이고 자체 포함된 콘텐츠 지정<aside>: 본문의 주요 부분 표시하고 남은 부분 설명하는 요소 (ex. 사이드바, 광고창)<footer>: 페이지 가장 아래 위치 (ex. 사이트 라이센스, 주소, 연락처 등)<header>: 페이지 가장 위에 위치 (ex. 사이트 제목, 상단바, 검색창)<nav>: 상단바 등 사이트 안내 요소 (ex. ul 을 안에 넣어 목록형태로 사용)<main>: 문서의 주된 콘텐츠- 그 외
h1이나section,form등도 있음
-<section>
제목, 컨텐츠가 포함된 구획을 나눌 때 사용. 렌더링은 div 와 크게 다른점은 없음
-<form>
사용자 입력을 제출하는 용도, 보통 컨트롤(input, button) 등을 포함,
But 화면 전환해버리는 액션 있으니 주의
id 와 class
| id | class |
|---|---|
# 으로 선택 | . 으로 선택 |
| 한 문서에 단 하나의 요소에만 적용 | 동일한 값을 갖는 요소 많음 |
| 특정 요소에 이름 붙일때 사용 | 스타일 분류에 사용 |
<!--id 예제-->
<div id='writing-section'>
div#writing-section
<!--class 예제-->
<li class='comment'>
div.comment