-> 웹 애플리케이션의 줄임만, 웹사이트 웹 홈페이지
-> 사용자는 자신의 컴퓨터에서 브라우저 오픈 (크롬, 엣지 )
-> http: _ 뒤에 주소 를 입력하게 되면 최초의 주소창 서버로 들어가게 된다. (request)
-> 그럼 서버에서는 최초의 들어온 . (request) 로 최초응답을 하게 된다. (response)
-> 응답을 통해서 나가는 파일은 기본 구조를 담고 있는 html 파일 이다.
-> 구조의 맞게 그 외의 파일들을 서버에 추가적으로 요청을 하고 그렇게 서버에서 추가 응답을 통해 css, js, jpg 등 웹페이지를 구성하기 위한 파일들을 응답해준다.
-> 웹페이지 개발은 컴퓨터, 로컬
-> 개발한 웹페이지들을 사용자가 사용하게끔 하려면 "서버" 에 들어 있어야한다.
기본적인 원리 간단하게 우리가 만든 웹페이지를 서버에다가 업로드를 해놓을것이고,
서버에 주소 설정 - 그 주소를 접속하는 모든 사용자에게 우리가 만든 웹구조에 의해서 웹사이트를 보여줄수 있다.
-> 웹 표준이란 '웹에서 사용되는 표준 기술 이나 규칙을 의미 '
W3C 의 표준화 제정 단계의 '권고안' 에 해당하는 기술 .
-> 크로스 브라우징 이란 조금 다르게 구동되는 여러 브라우저에서
동일한, 사용자 경험(같은 화면) 을 줄수 있도록 제작하는 기술
구글의 전체창 - window
탭 - 상단에 있는 현재 열려있는 구글 작은창 영역들
주소창 - 주소를 입력하는 창
뷰포트 - 웹페이지가 출력되는 전체 영역 , 렌더링 되는 전체 영역
💻 비트맵
🎇 ex) .jpeg, .gif, .png
1).jpeg
2) .gif
3) .png
벡터
🎇 ex) .svg
-> `` 백틱, 그레이브 (Backtick, Grave)
~ -> 틸드, 물결 표시 (Tilde)
& -> 엠버센트 (Ampersand)
_ -> 언더스코어, 로대시 , 밑줄 (Underscore, Low, dash)
( ) -> 페런서시스, 소괄호, 괄호 Parenthesis
{ } -> 브레이스, 중괄호 (Brace)
[ ] -> 브래킷, 대괄호 (Bracket)
-> "오픈소스" 란 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를,
누구나 접근해서 열람 할수 있도록 공개. (저작권이 있기 때문에 확인해야한다.)
쉽게 찾을수 있고 무료인 라이센스
✨Apache License
아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스.
개인적/ 상업적 이용, 배포, 수정, 특허 신청이 가능
✨MIT LICENSE
매사추세츠 공과 대학에서 소프트웨어 학생들을 위해 개발
개인 소스에 이 라이선스 사용하고 있다는것만 표시 시키고, 나머지에 대한 제약은 없음.
<!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 - 문서의 구조를 나타내는 범위
사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴 , 버튼 , 이미지 같은
웹 페이지의 보여지는 구조를 작성하는 범위.
상대
-> ./ (주변파일) 주변의 기준이 상대 적으로 바뀔수 있다. (생략가능)
-> ../ 상위로 올라간다
-> 파일명 .min.확장자와 같이 min 키워드는 파일이 난독화나 경량화 되었다는 것을 의미.
우리가 외부에서 가져와 사용하는 플러그인, 라이브러리들을 직접 수정할 상황 드움. 굳이 원본 사용할 필요 없음.
-> 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)
-> 전체 영역에서 사용할수 있는 태그. < body > 안에서 사용할수 있는 영역
-> <태그 title=”설명”></태그> = 요소의 정보나 설명을 지정.
-> <태그 class=”이름”></태그> = 요소를 지칭하는 중복 가능한 이름
-> <태그 id = “이름”></태그> = 요소를 지칭하는 고유한 이름
-> <태그 data-이름=”데이터”></태그> = 요소에 데이터를 지정
-> defer 속성, HTML 구조가 준비된후(문서 분석 이후)에 javascript 를 해석하겠다는 의미.
Ex)
📁index.html
📁main.js
결과
Console.log 결과
-> 오류가 생기는 것을 볼수 있다. 위에서부터 < script >태그까지 읽지 않는 상황이기 때문에 , defer 속성을 사용하여, HTML 구조가 준비된후(문서 분석 이후)에 javascript 를 해석하게 한다.
Defer 사용후
-> 콘솔에 결과 값이 잘 뜨는 모습을 볼수 있다.
-> 선택자 {속성 : 값; }
Ex) {color: red}
-> 선택자 {속성 : 값; 속성 : 값; } / 중괄호 범위안에 스타일.
주석처리 /**/ -> 주석안에 설명 내용 적을수 있음. 인식 하지 못함.
C + / , cmd + /
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;
}
📌전체 선택자
-> 모든 요소를 선택
* {
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;
}
📌일치선택자
-> 선택한 태그와, 클래스 선택자를 동시에 만족하는 요소.
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) 가상 클래스
-> 해당하는 선택자 앞부분 요소에 마우스를 올라가 있는 동안 선택이 된다. 선택이 된후 해당 css 가 적용된다.
ex)
<a href = "https://www.naver.com">NAVER</a>
a: hover {
color: red;
}
-> 해당하는 선택자 앞부분 요소에 마우스를 클릭하고 있는 동안 선택.
ex)
<a href = "https://www.naver.com">NAVER</a>
a: active {
color: red;
}
-> 해당하는 선택자 앞부분 요소에 포커스.
ex)
<input type = "text" />
a: focus {
Background-color: red;
}
✨Tip!!!
-> tabindex 속성을 통해 focus가 될수 있는 요소를 만들 수 있다.
이름에서도 알 수 있듯, tab 키를 사용해 FOCUS 할 수 있는 순서를 지정하는 속성.
순서값으로 -1 이아닌 다른 값 넣는것은 흐름 방해하기때문에 권장하지 않는다.
-> 해당하는 선택자 형제 요소중 첫번째
ex)
<div class="color">
<span>빨강</span>
<span>주황</span>
<div>노랑</div>
<p>초록</p>
<h3>파랑 </h3>
</div>
.color span:first-child {
color: pink;
}
-> span 태그의 첫번째 자식 즉, 빨강 이라는 단어의 색이 pink로 변한다.
-> 해당하는 선택자 형제 요소중 막내
ex)
<div class="color">
<span>빨강</span>
<span>주황</span>
<div>노랑</div>
<p>초록</p>
<h3>파랑 </h3>
</div>
.color h3:last-child {
color: pink;
}
-> 앞에 color의 class 를 가지고 있는 요소들중 막내를 찾고, 막내가 일치 선택자로 h3 요소여야 한다.
-> 선택자 형제 요소 중 (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
등등....
-> 해당 선택자가 아닌 요소 선택 .
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) 가상 요소 (:: 세미 콜론이 두개 이다. )
-> 요소의 내부 앞 내용을 삽입.
ex)
<div class="box">
hi!
</div>
.box::before {
content: "안녕 이건 앞에다 넣어"!
}
-> before 라는 가상 요소 선택자를 통해서 "안녕" 이라는 문자를 hi!앞에다 추가.
content 로 추가 하는 내용이 앞부분에 삽입 된다. block요소 가 아닌 inline 요소이다.
content 의 속성을 꼭 넣어줘야 실행된다 .
-> 선택자 요소의 내부 뒤에 내용을 삽입.
ex)
<div class="box">
hi!
</div>
.box::before {
content: "안녕 이건 뒤에다가 넣어!";
}
-> after 라는 가상 요소 선택자를 통해서 "안녕" 이라는 문자를 hi! 뒤에다가 추가.
5) 속성
-> 속성 선택자를 사용할때 특수 기호는 [ ] 대괄호 이다.
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 색이 바뀐다.
-> 하위 요소들까지 영향이 미치는것.
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 라는 속성값을 써 강제 상속 받는다.
ID 선택자 - 100점
class 선택자 - 10점
태그 선택자 - 1점
전체 선택자 - 0점
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
6) border
7) box-sizing
8) display
-> 요소의 화면 출력
9) position
-> 요소의 위치 지정 기준
10) z-index
p.s 이글은 패스트캠퍼스의 강의를 듣고 공부한것을 요약해서 적은 글입니다.
제 방식대로 요약한 글이기 때문에 잘못된 정보가? 적혀 있을수 있습니다. 😌😭