HTML 정리

김하은·2023년 4월 4일
2

HTML

목록 보기
1/1
post-thumbnail

🎈1. 웹앱의 동작

-> 웹 애플리케이션의 줄임만, 웹사이트 웹 홈페이지
-> 사용자는 자신의 컴퓨터에서 브라우저 오픈 (크롬, 엣지 )
-> http: _ 뒤에 주소 를 입력하게 되면 최초의 주소창 서버로 들어가게 된다. (request)
-> 그럼 서버에서는 최초의 들어온 . (request) 로 최초응답을 하게 된다. (response)
-> 응답을 통해서 나가는 파일은 기본 구조를 담고 있는 html 파일 이다.
-> 구조의 맞게 그 외의 파일들을 서버에 추가적으로 요청을 하고 그렇게 서버에서 추가 응답을 통해 css, js, jpg 등 웹페이지를 구성하기 위한 파일들을 응답해준다.
-> 웹페이지 개발은 컴퓨터, 로컬
-> 개발한 웹페이지들을 사용자가 사용하게끔 하려면 "서버" 에 들어 있어야한다.
기본적인 원리 간단하게 우리가 만든 웹페이지를 서버에다가 업로드를 해놓을것이고,
서버에 주소 설정 - 그 주소를 접속하는 모든 사용자에게 우리가 만든 웹구조에 의해서 웹사이트를 보여줄수 있다.


🎈2. 웹표준

-> 웹 표준이란 '웹에서 사용되는 표준 기술 이나 규칙을 의미 '
W3C 의 표준화 제정 단계의 '권고안' 에 해당하는 기술 .

💻 크로스 브라우징

-> 크로스 브라우징 이란 조금 다르게 구동되는 여러 브라우저에서
동일한, 사용자 경험(같은 화면) 을 줄수 있도록 제작하는 기술

💻 브라우저 인터페이스

구글의 전체창 - window
탭 - 상단에 있는 현재 열려있는 구글 작은창 영역들
주소창 - 주소를 입력하는 창
뷰포트 - 웹페이지가 출력되는 전체 영역 , 렌더링 되는 전체 영역


🎈 3. 웹 이미지

💻 비트맵

  • 픽셀이 모여 만들어진 정보의 집합. 레스터 이미지라고도 부름
  • 정교하고 자양한 색상 자연스럽게 표현.
  • 확대/ 축소계단 현상 품질 저하

🎇 ex) .jpeg, .gif, .png

1).jpeg

  • full-color, Gray-scal의 압축위해 , 압축률이 훌룡함.
    사진, 예술분야 많이 사용.
    손실압축 표현 색상도 (24비트, 약 1600만 색상)가 뛰어남
    이미지 품질 용량 쉽게 조절, 가장 널리 쓰임

2) .gif

  • 비손실 압축
  • 여러장의 이미지를 한 개의 파일에 담을 수 있음 (움짤, 애니메이션)
    8비트 색상만 지원 (다양한 색상 표현에는 적합 하지 않음 )

3) .png

  • 비손실 압축
  • 8비트(256) 색상 / 24비트 (약 1600만 색상) 컬러이미지 처리 . W3C 권장 포맷

벡터

  • 점,선, 면 위치 색상등 수학적 정보의 형태 로 이루어진 이미지.
  • 확대/ 축소에서 자유로움 용량 변화가 없음 . 정교한 이미지 표현하지 어려움

🎇 ex) .svg

  • 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷.
  • 해상도의 영향에서 자유로움
  • CSS와 JS 로 제어가능
  • 파일 및 코드 갑입 가능

🎈4. 특수 문자 용어

-> `` 백틱, 그레이브 (Backtick, Grave)
~ -> 틸드, 물결 표시 (Tilde)
& -> 엠버센트 (Ampersand)
_ -> 언더스코어, 로대시 , 밑줄 (Underscore, Low, dash)
( ) -> 페런서시스, 소괄호, 괄호 Parenthesis
{ } -> 브레이스, 중괄호 (Brace)
[ ] -> 브래킷, 대괄호 (Bracket)


🎈5. 오픈소스 라이선스

-> "오픈소스" 란 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를,
누구나 접근해서 열람 할수 있도록 공개. (저작권이 있기 때문에 확인해야한다.)

쉽게 찾을수 있고 무료인 라이센스
✨Apache License

아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스.
개인적/ 상업적 이용, 배포, 수정, 특허 신청이 가능

✨MIT LICENSE
매사추세츠 공과 대학에서 소프트웨어 학생들을 위해 개발
개인 소스에 이 라이선스 사용하고 있다는것만 표시 시키고, 나머지에 대한 제약은 없음.

🎈6.HTML 구조


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

HTML - 문서 전체 범위
HEAD - 문서의 정보를 나타내는 범위 , 브라우저가 해석해야할 웹 페이지 제목,
설명, 사용할 파일 위치, 스타일 같은 웹페이지의 보이지 않는 정보를 작성하는 범위
META - HTML 문서의 제작자, 내용, 키워드 같은 여러 정보를 검색 엔진이나 브라우저에게 제공
CHARSET - 문자 인코딩 방식을 지정하는 HTML 속성 . 웹에선 UTF-8의 사용을 권장.
BODY - 문서의 구조를 나타내는 범위
사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴 , 버튼 , 이미지 같은
웹 페이지의 보여지는 구조를 작성하는 범위.

🎈7. 상대 경로vs 절대 경로

상대
-> ./ (주변파일) 주변의 기준이 상대 적으로 바뀔수 있다. (생략가능)
-> ../ 상위로 올라간다


🎈8. 확장자

-> 파일명 .min.확장자와 같이 min 키워드는 파일이 난독화나 경량화 되었다는 것을 의미.
우리가 외부에서 가져와 사용하는 플러그인, 라이브러리들을 직접 수정할 상황 드움. 굳이 원본 사용할 필요 없음.


🎈9. HTML 핵심 정리

-> div 블록상자 요소 특별한 의미가 없는 구문을 위한 요소 (division0) 어떤 개념을 한곳으로 묶을 때
-> h1 -~ h6 어떠한 제목. 제목을 포함한 범위의 제목. 어떠한 컨텐츠의 제목 (숫자가 커질수록 사이즈가 작아진다. )
-> p 어떠한 문장을 의미하는 요소 . div 대신에 p태그 사용하면 p 태그만 봐도 안에 내용이 문장인지 알수 있다. (블록 요소 )
-> img 태그 대표적인 인라인 요소이다. 이미지가 존재하는 경로 src 를 사용해서 이미지가 출력하지 못했을 때 대신해서 출력해주는 alt 속성. Img 를 할 때 alt 를 작성해주지 않으면 웹 표준에 어긋난다.
-> UL 순서가 필요없는 목록의 집합을 의미
-> Li 목록내 각 항목 (list)
-> A태그 (Anchor) : 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소. / target : 링크 url의 표시 브라우저 탭 위치
-> Span : 특별한 의미가 없는 구분을 위한 요소 ex) 문장 일부의 어떤 처리를 하고 싶을 때 이용한다.
-> Br 태그 : 줄바꿈 요소
-> Input : 사용자가 데이터를 입력하는 요소 (블록상자 요소 , 인라인 글자 요소 ) = inline-block요소. 가로, 세로 높이랑 여백 지정가능.
-> value : 미리 입력된 값(데이터)
-> placeholder : 사용자가 입력할 값의 힌트
-> diisabled : 입력 요소 비 활성화
-> type : 라벨 가능 요소의 제목.
-> Checked : 체크박스 입력 요소 체크됨.
-> Radio : 사용자에게 체크 여부를 그룹에서 1개만 입력 받음. / name =”” : 작성된 그룹의 이름
-> Table : 표 요소, 행 과 열 의 집합.
-> Tr : 행(Row) 을 지정하는 요소. ( Table Row ) / 행이먼저
-> Td : 열(Column) 을 지정하는 요소. (Table Data)


🎈10. HTML 전역 속성

-> 전체 영역에서 사용할수 있는 태그. < body > 안에서 사용할수 있는 영역
-> <태그 title=”설명”></태그> = 요소의 정보나 설명을 지정.
-> <태그 class=”이름”></태그> = 요소를 지칭하는 중복 가능한 이름
-> <태그 id = “이름”></태그> = 요소를 지칭하는 고유한 이름
-> <태그 data-이름=”데이터”></태그> = 요소에 데이터를 지정
-> defer 속성, HTML 구조가 준비된후(문서 분석 이후)에 javascript 를 해석하겠다는 의미.

Ex)
📁index.html

📁main.js

결과

Console.log 결과

-> 오류가 생기는 것을 볼수 있다. 위에서부터 < script >태그까지 읽지 않는 상황이기 때문에 , defer 속성을 사용하여, HTML 구조가 준비된후(문서 분석 이후)에 javascript 를 해석하게 한다.

Defer 사용후


-> 콘솔에 결과 값이 잘 뜨는 모습을 볼수 있다.


🎈11. HTML 기본 문법

-> 선택자 {속성 : 값; }
Ex) {color: red}
-> 선택자 {속성 : 값; 속성 : 값; } / 중괄호 범위안에 스타일.
주석처리 /**/ -> 주석안에 설명 내용 적을수 있음. 인식 하지 못함.
C + / , cmd + /


🎈12. CSS 선언 방식

1) 내장 방식
-> < style >< /style >의 내용(contents)로 스타일을 작성하는 방식
Ex)

<style>
div {
	Color: red;
	Margin: 20px;
	}
</style>	

2) 링크 방식
-> < link />로 외부 css 문서를 가져와서 연결하는 방식
Ex)

<link rel = “stylesheet”  href=./css/main.css”>

📁main.css

div {
	Color: red;
	Margin:20px;
	}

3) 인라인 방식
-> 요소의 style 속성에 직접 스타일을 작성하는 방식 (선택자 없음)

<div style=”color: red; margin: 20px;></div>

4) @import 방식
-> css 의 @import 규칙으로 css 문서 안에서 또 다른 css 문서를 가져와 연결하는 방식.
Ex)

<link rel = “stylesheet”  href=./css/main.css”>

📁main.css

@import url(./box.css”);
Div {
	Color : red;	
Margin: 20px;
}

📁box.css

.box {
	Background-color: green;
	Padding: 20px;
	}

🎈13.CSS 선택자

1) 기본

📌전체 선택자
-> 모든 요소를 선택

* {
    color: red;
  }

📌태그 선택자
-> 태그 이름이 li 인 요소 선택

li {
    color: red;
}

📌클래스 선택자
-> HTML class 옆에 써진 , 속성의 값 요소 선택
ex)

<div>
    <ul>
      <li class="apple">사과</li>
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span>오렌지</span>
</div>

.apple {
    color: red;
}

📌아이디 선택자
-> HTML id속성의 값이 orange 인 요소 선택.

<div>
    <ul>
      <li id="orange">오렌지</li>
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span>오렌지</span>
</div>

#orange {
    color: red;
}

2) 복합

📌일치선택자
-> 선택한 태그와, 클래스 선택자를 동시에 만족하는 요소.
ex)

<div>
    <ul>
      <li class="apple">사과</li>
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span>오렌지</span>
</div>

span .apple {
    color: red;
}

📌자식 선택자
-> 선택자 의 자식 요소 선택
ex)

<div>
    <ul>
      <li class="apple">사과</li>
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span>오렌지</span>
</div>

ul > .orange {
    color: red;
}

📌하위 선택자
-> 선택자 의 하위요소 선택. "띄어쓰기" 가 선택자의 기호!

ex)

<div>
    <ul>
      <li class="apple">사과</li>
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span class="orange">오렌지</span>
</div>

div .orange {
    color: red;
}

📌인접 형제 선택자
-> 선택자 의 다음 형재 요소 하나를 선택
ex)

<div>
    <li>사과</li>
    <li>수박</li>
    <li class="mango">망고</li>
    <li>사과</li>
</div>

.mango + li {
    color: red;
}

📌일반 형제 선택자
-> 선택자 의 다음 형제 요소 모두를 선택.
ex)

<div>
    <li>사과</li>
    <li>수박</li>
    <li class="mango">망고</li>
    <li>사과</li>
</div>

.mango ~ li {
    color: red;
}

3) 가상 클래스

📌 hover

-> 해당하는 선택자 앞부분 요소에 마우스를 올라가 있는 동안 선택이 된다. 선택이 된후 해당 css 가 적용된다.
ex)

<a href = "https://www.naver.com">NAVER</a>

a: hover {
    color: red;
}

📌 active

-> 해당하는 선택자 앞부분 요소에 마우스를 클릭하고 있는 동안 선택.

ex)

<a href = "https://www.naver.com">NAVER</a>

a: active {
    color: red;
}

📌 focus

-> 해당하는 선택자 앞부분 요소에 포커스.
ex)

<input type = "text" />

a: focus {
    Background-color: red;
}

✨Tip!!!
-> tabindex 속성을 통해 focus가 될수 있는 요소를 만들 수 있다.
이름에서도 알 수 있듯, tab 키를 사용해 FOCUS 할 수 있는 순서를 지정하는 속성.
순서값으로 -1 이아닌 다른 값 넣는것은 흐름 방해하기때문에 권장하지 않는다.

📌 First Child

-> 해당하는 선택자 형제 요소중 첫번째
ex)

<div class="color">
    <span>빨강</span>
    <span>주황</span>
    <div>노랑</div>
    <p>초록</p>
    <h3>파랑 </h3>
</div>

.color span:first-child {
    color: pink;
}

-> span 태그의 첫번째 자식 즉, 빨강 이라는 단어의 색이 pink로 변한다.

📌 LastChild

-> 해당하는 선택자 형제 요소중 막내
ex)

<div class="color">
    <span>빨강</span>
    <span>주황</span>
    <div>노랑</div>
    <p>초록</p>
    <h3>파랑 </h3>
</div>

.color h3:last-child {
    color: pink;
}

-> 앞에 color의 class 를 가지고 있는 요소들중 막내를 찾고, 막내가 일치 선택자로 h3 요소여야 한다.

📌 NthChild

-> 선택자 형제 요소 중 (n)째 라면 선택.
ex)

<div class="color">
    <span>빨강</span>
    <span>주황</span>
    <div>노랑</div>
    <p>초록</p>
    <h3>파랑 </h3>
</div>

.color *:nth-child(2) {
    color: pink;
}

-> 앞에 color의 class 를 가지고 있는 요소 들중 하위요소 모두 를 선택. 2번째 형제 요소여야 한다. 따라 주황 단어의 색이 pink로 변한다.

.color *:nth-child(2n+1) {
    color: pink;
}

-> 홀수만 선택하고 싶을 때 쓰인다. 
(2*0+1) = 1
(2*1+1) = 3
등등....  

📌부정 선택자 Not

-> 해당 선택자가 아닌 요소 선택 .
ex)

<div class="color">
    <span>빨강</span>
    <span>주황</span>
    <div>노랑</div>
    <p>초록</p>
    <h3>파랑 </h3>
</div>

.fruits *:not(span) {
    color: red;
}

-> 앞에 color의 class 를 가지고 있는 요소 들중 하위요소 중 span태그가 아닌 모든요소 . 따라. 노랑, 초록, 파랑의 단어의 색이 pink 로 변한다.

4) 가상 요소 (:: 세미 콜론이 두개 이다. )

📌Before

-> 요소의 내부 앞 내용을 삽입.
ex)

<div class="box">
    hi!
</div>

.box::before {
    content: "안녕 이건 앞에다 넣어"!
}
-> before 라는 가상 요소 선택자를 통해서 "안녕" 이라는 문자를 hi!앞에다 추가. 
content 로 추가 하는 내용이 앞부분에 삽입 된다. block요소 가 아닌 inline 요소이다. 
content 의 속성을 꼭 넣어줘야 실행된다 . 

📌After

-> 선택자 요소의 내부 뒤에 내용을 삽입.
ex)

<div class="box">
    hi!
</div>

.box::before {
    content: "안녕 이건 뒤에다가 넣어!";
}

-> after 라는 가상 요소 선택자를 통해서 "안녕" 이라는 문자를 hi! 뒤에다가  추가. 

5) 속성
-> 속성 선택자를 사용할때 특수 기호는 [ ] 대괄호 이다.

📌Atter

ex)

<input type="text" value="HI">
<input type="password" value="0000">
<input type="text" value="YEYE" diisabled>
  
css
[diisabled] {
    color: orange
}
-> 속성이 diisabled 인 요소의 color 가  orange. YEYE의 글자 색이 변한다. 

[type] {
    color: orange
}
-> 속성이 type 인 요소 . 따라 모두 color 색이 바뀐다. 

14.🎈스타일 상속

-> 하위 요소들까지 영향이 미치는것.
ex)

<div class="color">무지개
  <div class="red">빨강
    <div class="orange">주황</div>
    <div class="yellow">노랑</div>
    <div class="green">초록</div>
  </div>
  <div class="blue">파랑 </div>
</div>

.red {
    color: pink;
}

-> red의 클래스를 가지고 있는 모든 요소 . 자식요소들에게도 색상이 적용된다.

📌강제 상속.

ex)

<div class="color">
    <div class="orange">주황</div>  
</div>

.color {
    width:300px;
    height: 100px;
}

.orange {
    width: 100px;
    height: 100px; // inherit
}

-> .color 클래스와.orange 클래스의 같은 높이값을 주었다. color 클래스의 높이를 바꿀때 orange값도 바꿔야 하는데 이렇게 되면
하나하나 다 바꿔줘야 하기때문에 유지보수 하기 힘들어진다. 따라 자식이 부모의 속성값을 상속 받을수 있게끔한다. inherit 라는 속성값을 써 강제 상속 받는다.


15.🎈선택자 우선순위

ID 선택자 - 100점
class 선택자 - 10점
태그 선택자 - 1점
전체 선택자 - 0점


16.🎈css속성

1)CSS 넓이
span - 적어진 영역만큼만. inline 속성이며 inline 속성은 width, heigth 값을 줄수 없다.
max-width - 요소가 커질수 있는 최대 가로
max- height - 요소가 커질수 있는 최대 세로 너비
(none) - 최대 너비 제한 없음
(단위) - px,en,vw, 등 단위로 지정.

min-width - 요소가 작아질수 있는 최대 가로 너비
min-height - 요소가 작아질수 있는 최대 세로 너비

2)요소의 단위
px - 픽셀
% - 상대적 백분율
em - 요소의 글꼴 크기
rem - 루트 요소의 글꼴 크기
vw - 뷰포트 가로 너비의 백분율
vh - 뷰포트 세로 넓이의 백분율

3) 외부여백
margin - 요소의 외부 여백을 지정하는 단축 속성 . (음수 사용 가능)
0 -> 외부여백 없음
auto -브라우저가 여백 계산
px,em,vw등 단위로 지정.

4) 요소의 내부 여백
Padding - 요소의 내부 여백(공간) 을 지정하는 단축 속성.
0 -> 내부 여백 없음
% - px,em,vw, 등 단위로 지정.
px,em,vw등 단위로 지정.

5) border

  • 요소의 테두리 선을 지정하는 단축 속성 (요소가 늘어남)
    border : 선-두께 선-종류 선-색상.

6) border

  • 요소의 모서리를 둥글게 깎음.
  • 각각의 모서리에 정 원을 두고 . 해당 값을 반지름으로 되도록 배치를 하고, 배치된 곳의 둥근 부분을 삭제, 깎는다.

7) box-sizing

  • content-box => 요소의 내용으로 크기 계산
  • border-box => 요소의 내용 + Padding + border로 크기 계산 .

8) display
-> 요소의 화면 출력

  • block - 상자 요소
  • lnline - 글자 요소
  • inline-block요소 - 글자 + 상자 요소
  • flex - 플렉스 박스 (1차원 레이아웃)
  • grid - 그리드 (2차원 레이아웃)
  • none - 보여짐 특성없음, 화면에서 사라짐
  • 기타 - table, table-row, table-cell 등

9) position
-> 요소의 위치 지정 기준

  • static - 기준없음
  • relative - 요소 자신을 기준
  • absolute - 위치 상 부모 요소를 기준
  • fixed - 뷰포트(브라우저) 를 기준

10) z-index

  • auto - 부모 요소와 동일한 쌓임 정도
  • 숫자 - 숫자가 높을 수록 위에 쌓임

p.s 이글은 패스트캠퍼스의 강의를 듣고 공부한것을 요약해서 적은 글입니다.
제 방식대로 요약한 글이기 때문에 잘못된 정보가? 적혀 있을수 있습니다. 😌😭

profile
꾸준함을 이기는것은 없다

0개의 댓글