미미 공부/취미방

[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 5/7 본문

Programming

[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 5/7

mionager 2022. 6. 28. 16:48

1주차.Chapter 05

 

 

01


자주 사용하는 태그특징

div
(division)
블록요소, 특별한 의미가 없는 구분을 위한 요소, 아주 많이 사용
h1 블록요소, 제목을 의미, 목차, 1 ~ 6까지 존재, 숫자가 작을수록 더 중요
p
(paragraph)
블록요소, 문장을 의미
img 인라인요소, 이미지를 삽입하는 요소. src와 alt 속성 입력 필수

(alt : 대체 텍스트. 사진이 제대로 나오지 않을 때, 사진 대신 나타나는 텍스트)
ul / li
(unordered list)
블록요소, 순서가 필요없는 목록, ul 내부 li 필수세트.
<ul>
    <li></li>
</ul>
a
(Anchor)
인라인요소, 링크 지정. href 속성에 링크값이 들어간다.
(예.<a href="https://daum.net">Daum</a>)
span 인라인요소, 특별한 의미가 없는 구분을 위한 요소, 많이 사용
br 인라인요소, 줄바꿈 요소
input 인라인요소+블록요소. 수평으로 쌓이지만 상하좌우 margin/padding 가능, 데이터 입력 요소

속성 종류 : value(미리 입력될 값), placeholder(힌트), disabled(비활성화), type
Type 종류 : text, checkbox(다중선택 가능), radio(택1)
label 인라인 요소, 라벨 가능 요소의 제목, input이랑 사용 가능
(예. <label> 라벨이름 <input type="checkbox" /> </label>)
table 블록요소 > 테이블요소, 표 요소, 행(row)과 열(column)의 집합, 행을 먼저 입력
tr
(table row)
테이블요소, 행을 지정
td
(table data)
테이블요소, 하나의 칸,  열을 지정

*위에 태그를 그냥 많이 적어 보세요!

 

 

02


<!-- 주석 -->

/* css */

//js

 

주석은 코드를 작성하는 것과 상관없이 그냥 메모를 남기는 거예요.

브라우저는 주석을 해석하지 않고,

그냥 사람들이 작업할 때 편하려고 메모, 북마크, 코드를 숨길 때 사용해요.

 

커서가 있는 줄에서 ctrl + /(단축키)를 누르면 해당 줄이,

드레그 해서 여러 줄을 한꺼번에 주석처리도 가능합니다.

 

주석 처리하는 코드는 HTML, CSS, JS마다 다르게 생겼는데

단축키는 똑같아서 단축키를 먼저 외우시는 게 좋아요.

 

 

03


전역 속성

 

이전 내용에서 속성 src, href, type 등에 대해 조금 알아봤는데,

src, href 같은 경우는 특정 태그에서만 사용되는데

전역속성은 모오오오든 태그에서 사용이 가능한 속성입니다.

 

그중 자주 사용되는 5가지

1. title

title="네이버로 이동" 요소의 정보나 설명을 지정

 

2. style

style="스타일" css 지정

 

3. class

class="이름" 요소에 주는 이름, 중복 가능, 이름을 주면 선택이 쉬움(css에서), 태그는 제한적

 

4. id

id="이름" 요소에 주는 이름, 중복 불가능

 

5. data-이름

data-이름="데이터" 요소에 데이터를 지정, 해당 태그가 데이터를 갖게 됨.

 

 

1주 차가 곧 끝나요!!!

조금 더 화이팅😭

Comments