프론트엔드 기초3 (VSCODE)[운동하는IT]

강의들으면서 정리한거라 양해부탁드려요 ㅎㅎ

 

 

codepen.com
이 사이트는 간단하게 html, css, js 사용하기 좋음
html은 바로 바디 영역으로 들어간다.
css는 링크로 연결하지 않아도 바로 적용됨
js도 연결하지 않아도 적용됨.
회원가입하고 사용하면 저장도 가능함




reset.css cdn(jsdelivr.com 꺼 사용)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"> 요거 사용 권장
브라우저의 기본 스타일을 초기화하기 때문에 메인 css보다 앞에 복붙한다.

파일명.min.확장자와 같이 min(Minify 단어의 약어)키워드는 파일이 난독화나 경략화 되었다는 것을 의미합니다.
 우리가 외부에서 가져와 사용하는 플러그인, 라이브러리 등을 직접 수정할 상황은 매우 드물기 때문에 굳이 원본을 사용할 필요가 없다.

Emmet(구글에 검색할것 자동완성시켜주는 애임)
img 탭 => <img src="" alt=""> 자동완성
h1 탭 => <h1></h1>자동완성
div.dd 탭 => <div class="dd"></div>자동완성


css
w: 200 =>width: 200px;
h:500 => height: 500px;
bc:red => background-color: red;



<태그> 내용</태그>
이러한 것을 요소(Element)라고 부른다.

앞의 태그를 열린(시작) 태그 뒤에 태그는 종료(닫힌) 태그
요소의 내용(contents)

<태그><태그> 내용 </태그></태그>
부모요소 와 자식요소
기본적으로 상대적인 관계임.
보통 자식요소는 들여쓰기를 하여 시각적으로 정리를 한다.

서비스의 규모가 커지고 담당자가 2명이상이 되면 코드는 정리를 하는 것이 좋다.

<태그>
<태그>
<태그>내용</태그>
</태그>
</태그>

이런 경우 제일 처음 태그는 상위(조상)요소 라고도 함
제일 안쪽에 있는 태그는 하위(후손)요소라고함  상대적인 것임



빈(empty)태그!
종료나 닫힌 태그가 없음
<태그> = 편리함 html1,2,3,4,5 사용가능
<태그/> = 안전함 xhtml,html5부터 사용, 슬래시가 있어서 닫혀있구나를 알 수 있음


<태그 속성 = "값">내용</태그>

<img/>

<img src="./cat.jpg" alt="고양이"/>


<input type ="text"/> = 화면출력은 text라는 데이터 타입이 사용자에게 텍스트창이 나와 입력을 받음

<input type ="checkbox"/> = 사용자에게 체크 여부를 입력 받음




글자와 상자 
요소가 화면에 출력되는 특성, 크게 2가지로 구분.
인라인(inline)요소 : 글자를 만들기 위한 요소들.(글자)
블록(block)요소 : 상자(레이아웃)를 만들기 위한 요소들 (상자)

인라인 요소
<span>hello</span>
<span>world</span>
스팬 태그는 대표적인 인라인 요소
본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도
기본적으로 요소가 수평으로 쌓임 => hello world
스팬의 줄바꿈행위는 화면에 띄어쓰기로 나타남
스팬의 글자요소들은 콘텐츠 크기 만큼 자동으로 줄어든다.



<span style="width:100px;">hello</span> = 요소의 가로너비 지정
<span style="height:100px;">world</span> = 요소의 세로너비 지정
하지만 화면에는 변화가없음
인라인 요소는 글자를 취급하는 요소
스팬태그는 글자처럼 취급을 하기 때문에 글자요소는 가로와 세로의 사이즈를 취급하지 않는다

<span style="margin:20px 20px;">hello</span>
 = 요소의 외부 여백을 지정하는 css속성 단 마진이 위아래는 먹히지 않음
<span style="padding:20px 20px;">world</span> 
= 요소의 내부여백을 지정하는 css속성 글자요소는 위아래는 먹히지 않고 좌우만 먹힌다

인라인 요소안에 블록 요소는 사용할 수 없다.
<span><div></div></span> = > 사용불가 span은 인라인 요소, div는 블록요소
<span><span></span></span> => 사용가능


블록요소
div요소는 대표적인 블록요소
본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도.

요소가 수직으로 쌓임
<div>hello</div>
<div>world</div>
hello
world

가로너비는 부모요소의 크기 만큼 자동으로 늘어남
세로너비는 인라인 요소처럼 포함한 콘텐츠 크기 만큼 자동으로 줄어듬!

가로 세로 너비 지정 가능
요소의 외부 내무 여백을 문제없이 지정할 수 있다.

블록요소는 안에 블록요소든 인라인 요소든 넣을 수 있다.




div : 특별한 의미가 없는 구분을 위한 요소.(divsion)
h1 : 제목을 의미하는 요소. (heading)  블록요소임
h1,2,3,4,5,6 등 이 블록요소는 제목을 입력할 때 숫자가 작을 수록 더 중요한 제목임을 정의
p :  문장을 의미하는 요소.(paragraph) 블록요소임
img : 이미지를 삽입하는 요소.(image) 인라인 요소
<img src="삽입할 이미지 경로" alt="삽입할 이미지의 이름" />
이미지가 출력 안되면 엑박떳다 라고 많이 말했대
ul : 순서가 필요없는 목록의 집합을 의미(unordered list) 블록 상자임 
ul태그는 목록의 집합이라 li태그와 꼭 함께 쓰임 
li : 목록 내 각 항목(list item) 블록 상자임
ol : 순서가 필요한 리스트

a : 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소.(anchor) 인라인요소
href 라는 속성에서 누리면 어디로 이동할 것인지 경로를 명확하게 명시할 것
targrt ="_blank" 라고 명시되는 a태그는 새 탭에 페이지가 열리게 된다.
타겟이라는 속성은 링크를 걸어서 이동할 때 어디에 표시 될것인지 명시
_blank는 새로운 탭에 열겠다는 의미
span : 특별한 의미가 없는 구분을 위한 요소 인라인 요소
br/ : 줄바꿈 요소(break) 인라인 요소

input : 사용자가 데이터를 입력하는 요소 
인라인 요소 , 블록요소로 글자요소로 수평으로 쌓이는 특징이 있지만 가로세로 조정 가능
<input type="text" value="heropy"/>   라고하면 네모창이 나와 헤로피라고 기본적으로 써있음
밸류 속성에는 미리 입력된 값은 친다.
placeholder는 사용자가 입력할 값의 힌트 ex이름을 입력하세요.
disabled 라는 속성에는 입력요소 비활성화한다. = 입력창이 입력못하게 회색창이 되어있음 


label : 라벨가능요소(input의 제목) 인라인 요소
<label>
<input type="checkbox"/>apple
</label>
이렇게 치면 apple을 체크할 수있는 박스가 나옴.
<input type="checkbox" checked/>apple
이렇게 치면 미리 apple에 체크되어있음

체크박스는 중복체크 가능

<label>
<input type="radio" name="fruits"/>apple
</label>
<label>
<input type="radio" name="fruits"/>banana
</label>
radio는 fruits그룹에서 하나만 입력 받는다.
name이 같아야 같은 그룹입


table : 표 요소 행과 열의 집합 테이블요소라고 따로 있음.
<table>
<tr>
<td>a</td><td>b</td>
</tr>
<tr>
<td>c</td><td>d</td>
</tr>
</table>
화면 출력   ab
               cd

tr: 행을 지정하는 요소(table row)
td 열을 지정하는 요소(table data)



html은 어디까지나 구조를 짜는 것

전역속성이란 html의 기능을 확장시켜주는 것


적역속성
<태그 title="설명"></태그>
타이틀은 요소의 정보나 설명을 지정

<태그 style="스타일"></태그>
스타일 속성은 요서의 적용할 스타일을 지정

<태그 class="이름"></태그>
요소를 지칭하는 중복 가능한 이름
클래스를 사용할 때는 css에서 이름 앞에 점(.)을 꼭 붙인다.

<태그 id="이름"></태그>
요소를 지칭하는 고유한 이름
css에선 이름 앞에 #을 해준다.
중복안되는 핵심이름에다가.


<태그 data-이름="데이터"></태그>
요소에 데이터를 지정
js를 사용할 때 사용