.png)
💡 Achievement Goals를 위주로 정리하는 TIL
✔️ chapter. 웹 개발 이해하기
- HTML - Structure
- CSS - Style 구조적인 문서를 어떻게 시각적으로 표현하는지
- JS - Interaction
✔️ chapter. Visual Studio Code
- Visual Studio Code를 이용하여 HTML과 CSS 파일 생성 방법
✔️ chapter. HTML의 기초
- Hyper Text Markup Language
- 프로그래밍 언어 x
웹 페이지의 뼈대가 되는 구조를 표현하는 언어 - 태그(부등호<>)들의 집합
- Tree Structure
HTML 기본 템플릿 form 생활코딩
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
- 구조와 문법
Opening tag< tag >
closing tag</ tag >
self-closing tag< tag />
- 요소 (Element)
태그 ( MDN 검색 )
<p>paragraph 문단
<div>content division 의미, 줄 바꿈 됨, 한 줄 차지 //큰 구역을 구분하기 위해 사용하는 것은 지양
<span>content 컨테이너, 줄 바꿈 안됨, 컨텐츠 공간만큼 차지
<section>웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는데 사용
<ul>Unordered List
<ol>Ordered List
<li>List Item
<img src(attribute name속성의 이름) = "(attribute value속성의 값)" >image //닫는 태그가 없음
<input>input(Text, Radio(그룹 중 1개만 선택 가능), Checkbox(여러개 선택 가능) 입력창
ex.
ID<input type="" placeholder="">
a<input type="radio" name="choice" valus="a">a
b<input type="radio" name="choice" valus="b">b
<textarea>Multi-line Text Input 창 안에서 줄 바꿈 가능
<button>Button
<a href="">link 해당 페이지에서 열기
<a href="" target="_blank">link 새 창에서 페이지 열기
<script>자바스크립트 실행
ex.
<script src="my-java-script.js"></script>
- 스타일 지정
id한 가지만 지정해서 사용, 유일무이 (#name)
class그룹으로 묶어 스타일을 지정할 때 사용 (.name)
archive