[TIL] 220429(금)

Beanxx·2022년 4월 29일

TIL

목록 보기

4/120

☑️ HTML (HyperText Markup Language)

: 웹 페이지의 뼈대(틀)를 구성하는 마크업 언어. (구조를 표현하는 언어),
tag들의 집합

<!DOCTYPE html>
<html>
	<head>
		<title>Page title</title>
	</head>

	<body>
		<h1>Hello world</h1>
		<div>Contents here
			<span>Here too!</span>
		</div>
	</body>
</html>

HTML	CSS	JS
Structure(구조)	Presentation(스타일)	Interaction(상호작용)

Tag	Role
`<div>`	Division (한 줄 전체 차지)
`<span>`	Span (콘텐츠 크기만큼 공간 차지)
`<img src=”url”>`	Image
*`<a href="url" target="_blank">`	Link
`<ul> & <li>`	Unordered List & List Item
`<ol>`	Ordered List
`<input type="checkbox" checked>`	Input(Text, Radio, Checkbox)
`<textarea>`	Multi-line Text Input
`<button>`	Button
`<p>`	하나의 문단 표현

*<a target=”_blank”> : 새 탭으로 링크 페이지 이동

💡 Input

<!-- placeholder 속성: 입력폼 안에 작성해야 하는 내용 힌트 제공 가능 -->
<input type="text" placeholder="ID"></input>
<input type="password"></input>

<!-- name이 같은 Checkbox 타입 중 여러 개 체크 가능 -->
<input type=”checkbox” name=”fruits”>

<!-- name이 같은 Radio 타입 중 하나만 체크 가능 -->
<input type=”radio” name=”subject”>

💡 시맨틱(semantic) 요소

: Semantic 이란 ‘의미가 있는, 의미론적인'. → 의미를 가진 요소

`<article>`	독립적이고 자체 포함된 콘텐츠 지정
`<aside>`	본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소. (사이드바, 광고창)
`<footer>`	페이지나 해당 파트의 가장 아랫부분에 위치 (사이트 라이선스, 주소 ...)
`<header>`	페이지나 해당 섹션의 가장 윗부분에 위치 (사이트 제목)
`<nav>`	상단바 등 사이트를 안내하는 요소에 사용 (보통 `<ul>`을 넣어 목록 형태로 사용)
`<main>`	문서의 주된 콘텐츠 표시
`<section>`	제목, 콘텐츠가 포함된 구획을 나눌 때 사용. (`<div>`와 역할 비슷)
`<form>`	사용자가 입력한 값을 다른 페이지로 전송하는 역할 (보통 `<input>`, `<button>` 요소 등의 자식 요소를 감싸는 경우에 자주 사용)

✋ <div>, <span> 요소는 시멘틱 요소로 분류 X

💡 id & class

id : 고유한 이름을 붙일 때 사용 (# 으로 표시) ⇒ 중복 허용 X

class : 반복되는 영역을 유형별로 분류할 때 사용 (. 으로 표시)

✋ 읽기 영역 자체는 고유 ⇒ id로 이름 표시
✋ 반복되는 항목 ⇒ class로 지정 (같은 class 값을 지정 → 동일한 유형)

HTML tag	Selector
`<div id=”writing-section”>`	div#writing-section
`<li class=”comment”>`	li.comment

 <!-- 아래의 class value와 같이 하나의 태그에 여러 개의 class를 작성하고 싶을 땐 띄어쓰기로 구분 -->
  <!-- id, class, type : attribute name(속성 이름) -->
  <!-- "id-input", "input focus" ... : attribute value(속성 값) -->
  <input id="id-input" class="input focus" type="text" placeholder="ID"></input>

<script> 요소: Javascript 실행을 위해 사용
```
<script src="my-java-script.js"></script>
```

Beanxx

FE developer

이전 포스트

[TIL] 220428(목)

다음 포스트