Html / Css

#프론트엔드

 

서버 – 클라이언트 : 2티어 아키텍쳐 / 클라이언트 – 서버 – DB : 3티어 아키텍쳐

 

HTML : 웹페이지의 구조 // 10.24

<> 태그의 집합, html->head(title)->body(h1, div(span))

<p> 하나의 문단 표현 / <section> 하나의 구역 표현

<img src = “파일주소”>/<a href = “인터넷주소” target=네이버</a>

<div> 태그 한줄을 차지 / <span> 컨텐츠 크기만큼 차지

<ul><li> 내용(리스트로 표시) / <ol> 넘버링 리스트

<input type= “text” (텍스트 박스) placeholder=“type here”(박스 안의 글)>

<input type= “radio” (체크박스) name=“그룹1”> 옵션1 <- name 같은이름 = 같은그룹

<textarea>줄바꿈 되는 입력폼

<button>로그인</button>

attribute name(속성의 이름) / attribute value(속성의 값) 으로 분류됨

CSS : 웹페이지 스타일(디자인)

<link rel:“stylesheet” href=“파일명“ /> <link>는 HTML 파일과 다른 파일을 연결하는 목적으로 사용

셀렉터 : id 한가지 요소(# 사용) / class 여러 요소(. 사용)

font-family : 폰트설정 ”“붙여 사용

굵기: font-weight

밑줄, 가로줄: text-decoration / letter-spacing / line-height

text-align : 가로정렬

- Flexbox : 부모를 조정해서 자식들을 한번에 변경할 수 있음

- 진한노랑(자식)/옅은노랑(부모) - 항상 부모요소에게 말을 걸어 자식요소를 조정한다.

x, y축은 고정적이지 않음 / 경우에 따라서 두 개가 바뀔 수 있음

flex-direction : row / column <- 축이 바뀐다

justify-content(가로축) : flex-start / align-items(세로축) : flex-end

정렬 방향 : row -> / column 아래 / row-reverse <- / column-reverse 위

ex) ul li

JavaScript : 상호작용

 

#CLI 명령어

pwd: 현재 위치를 확인하는 명령어

mkdir: 새로운 폴더를 생성하는 명령어

ls: 폴더나 파일의 목록을 출력하는 명령어

open (macOS): 현재 폴더를 파일 탐색기로 여는 명령어

cd: 폴더에 진입하는 명령어

touch: 새로운 파일을 생성하는 명령어

cat: 파일의 내용을 터미널에 출력하는 명령어

rm: 폴더나 파일을 삭제하는 명령어

mv: 폴더나 파일의 위치를 이동하거나, 이름을 변경하는 명령어

cp: 폴더나 파일을 복사하는 명령어 // 폴더복사 시 반드시 r 포함

sudo: 관리자 권한을 이해할 수 있다.

목록에 .zshrc가 있으면 nano .zshrc를 입력하여 편집창을 엽니다. // 환경변수 영구편집

- 목록에 .bashrc가 있으면 nano .bashrc를 입력하여 편집창을 엽니다.

nano /etc/profile을 입력하여 입력창을 엽니다.

- 참고로, 이 명령어  

서버 – 클라이언트 : 2티어 아키텍쳐 / 클라이언트 – 서버 – DB : 3티어 아키텍쳐

 

HTML : 웹페이지의 구조 // 10.24

<> 태그의 집합, html->head(title)->body(h1, div(span))

<p> 하나의 문단 표현 / <section> 하나의 구역 표현

<img src = “파일주소”>/<a href = “인터넷주소” target=네이버</a>

<div> 태그 한줄을 차지 / <span> 컨텐츠 크기만큼 차지

<ul><li> 내용(리스트로 표시) / <ol> 넘버링 리스트

<input type= “text” (텍스트 박스) placeholder=“type here”(박스 안의 글)>

<input type= “radio” (체크박스) name=“그룹1”> 옵션1 <- name 같은이름 = 같은그룹

<textarea>줄바꿈 되는 입력폼

<button>로그인</button>

attribute name(속성의 이름) / attribute value(속성의 값) 으로 분류됨

CSS : 웹페이지 스타일(디자인)

<link rel:“stylesheet” href=“파일명“ /> <link>는 HTML 파일과 다른 파일을 연결하는 목적으로 사용

셀렉터 : id 한가지 요소(# 사용) / class 여러 요소(. 사용)

font-family : 폰트설정 ”“붙여 사용

굵기: font-weight

밑줄, 가로줄: text-decoration / letter-spacing / line-height

text-align : 가로정렬

- Flexbox : 부모를 조정해서 자식들을 한번에 변경할 수 있음

- 진한노랑(자식)/옅은노랑(부모) - 항상 부모요소에게 말을 걸어 자식요소를 조정한다.

x, y축은 고정적이지 않음 / 경우에 따라서 두 개가 바뀔 수 있음

flex-direction : row / column <- 축이 바뀐다

justify-content(가로축) : flex-start / align-items(세로축) : flex-end

정렬 방향 : row -> / column 아래 / row-reverse <- / column-reverse 위

ex) ul li

JavaScript : 상호작용

 

#CLI 명령어

pwd: 현재 위치를 확인하는 명령어

mkdir: 새로운 폴더를 생성하는 명령어

ls: 폴더나 파일의 목록을 출력하는 명령어

open (macOS): 현재 폴더를 파일 탐색기로 여는 명령어

cd: 폴더에 진입하는 명령어

touch: 새로운 파일을 생성하는 명령어

cat: 파일의 내용을 터미널에 출력하는 명령어

rm: 폴더나 파일을 삭제하는 명령어

mv: 폴더나 파일의 위치를 이동하거나, 이름을 변경하는 명령어

cp: 폴더나 파일을 복사하는 명령어 // 폴더복사 시 반드시 r 포함

sudo: 관리자 권한을 이해할 수 있다.

목록에 .zshrc가 있으면 nano .zshrc를 입력하여 편집창을 엽니다. // 환경변수 영구편집

- 목록에 .bashrc가 있으면 nano .bashrc를 입력하여 편집창을 엽니다.

nano /etc/profile을 입력하여 입력창을 엽니다.

- 참고로, 이 명령어서버 – 클라이언트 : 2티어 아키텍쳐 / 클라이언트 – 서버 – DB : 3티어 아키텍쳐

 

HTML : 웹페이지의 구조 // 10.24

<> 태그의 집합, html->head(title)->body(h1, div(span))

<p> 하나의 문단 표현 / <section> 하나의 구역 표현

<img src = “파일주소”>/<a href = “인터넷주소” target=네이버</a>

<div> 태그 한줄을 차지 / <span> 컨텐츠 크기만큼 차지

<ul><li> 내용(리스트로 표시) / <ol> 넘버링 리스트

<input type= “text” (텍스트 박스) placeholder=“type here”(박스 안의 글)>

<input type= “radio” (체크박스) name=“그룹1”> 옵션1 <- name 같은이름 = 같은그룹

<textarea>줄바꿈 되는 입력폼

<button>로그인</button>

attribute name(속성의 이름) / attribute value(속성의 값) 으로 분류됨

CSS : 웹페이지 스타일(디자인)

<link rel:“stylesheet” href=“파일명“ /> <link>는 HTML 파일과 다른 파일을 연결하는 목적으로 사용

셀렉터 : id 한가지 요소(# 사용) / class 여러 요소(. 사용)

font-family : 폰트설정 ”“붙여 사용

굵기: font-weight

밑줄, 가로줄: text-decoration / letter-spacing / line-height

text-align : 가로정렬

- Flexbox : 부모를 조정해서 자식들을 한번에 변경할 수 있음

- 진한노랑(자식)/옅은노랑(부모) - 항상 부모요소에게 말을 걸어 자식요소를 조정한다.

x, y축은 고정적이지 않음 / 경우에 따라서 두 개가 바뀔 수 있음

flex-direction : row / column <- 축이 바뀐다

justify-content(가로축) : flex-start / align-items(세로축) : flex-end

정렬 방향 : row -> / column 아래 / row-reverse <- / column-reverse 위

ex) ul li

JavaScript : 상호작용

 

#CLI 명령어

pwd: 현재 위치를 확인하는 명령어

mkdir: 새로운 폴더를 생성하는 명령어

ls: 폴더나 파일의 목록을 출력하는 명령어

open (macOS): 현재 폴더를 파일 탐색기로 여는 명령어

cd: 폴더에 진입하는 명령어

touch: 새로운 파일을 생성하는 명령어

cat: 파일의 내용을 터미널에 출력하는 명령어

rm: 폴더나 파일을 삭제하는 명령어

mv: 폴더나 파일의 위치를 이동하거나, 이름을 변경하는 명령어

cp: 폴더나 파일을 복사하는 명령어 // 폴더복사 시 반드시 r 포함

sudo: 관리자 권한을 이해할 수 있다.

목록에 .zshrc가 있으면 nano .zshrc를 입력하여 편집창을 엽니다. // 환경변수 영구편집

- 목록에 .bashrc가 있으면 nano .bashrc를 입력하여 편집창을 엽니다.

nano /etc/profile을 입력하여 입력창을 엽니다.

- 참고로, 이 명령어