20210114_웹 프론트엔드(Web front end) 기초01, HTML, CSS

웹 프론트엔드(web front end) 기초01

1. 서버와 클라이언트

• 클라이언트 : 정보를 요청하는 자
• 서버 : 정보의 요청을 받아 응답 하는자(정보 혹은 서비스를 제공하는 컴퓨터 or 프로그램)
• 주의) 상대적인 개념, 서버도 요청을 보낼 수 있음 그러면 반대 관계가 가능
• ex)
  클라이언트(웹 브라우저) - 요청 > 서버(웹 서버)
  클라이언트(웹 브라우저) < 응답 - 서버(웹 서버 , index.html)

2. 웹 동작 원리

• HTTP : 리소스를 주고 받는 형식의 약속(프로토콜)

1) 사용자가 웹 브라우저에 url 입력
2) 웹 브라우저가 url 해석
3) 해석결과로 서버에 HTTP 요청
4) 서버 요청 확인 및 요청 문서 찾기
5) 웹 브라우저로 HTTP 응답 송신
6) 웹 브라우저 수신 받은 HTTP 응답 렌더링(해석)-> 사용자에게 표시

• HTTP 요청 (Method(서버가 수행할 동작), Url, Header(여러 정보), Body(서버에 올려야 하는 정보들))
• HTTP 응답 (상태코드(요청의 성공여부), Header, Body(HTML 코드 등의 파일))

3. 프론트엔드와 백엔드

User -(입력, 출력)- Web Browser -(요청, 응답)- Web Server - Data Base

• 프론트 엔드 : 사용자의 요청 반영(JS) , 레이아웃 디자인(CSS), 웹 콘텐츠 구조화(HTML)
• 백 엔드 : 정보를 처리하고 요청에 따른 응답을 해줌,
  • 운영체제OS, 네트워크, 데이터 베이스, 프레임워크(Spring, Flask/Django 등), 프로그래밍 언어(Java,PHP, Python 등)

4. 개발자 도구

1) chrome 브라우저 개발자 도구 활성화

• F12
• ctrl + shift + i
• 크롬 메뉴(삼단 점 ... 모양) - 도구 더 보기 - 개발자 도구
• 우클릭 - 검사

2) Elements 탭

• html 요소 추가 변경 & CCS 확인, 변경

  3) Console 탭

• JS 실행 가능

  4) Network 탭

• 페이지 로딩하는데 필요한 네트워크 작업에 대한 결과를 시간순으로 표시(웹서버와 주고 받는 데이터의 실제 모습 확인 가능)

• type탭
  html -> document , css -> stylesheet, JS -> script

  • Headers 탭 : 요청 응답받은 기초 정보
    • General : URL, Method, status
    • Response Headers(응답 헤더)
    • Request Headers(요청 헤더) : user-agent 어떤 브라우저를 통해서 접근했는지

• method 탭: 수행 동작

• status 탭 : 수행 완료 : 200 코드 / 서버에 없음 : 404 코드

• Response 탭 : HTML 파일 있음

5. HTML

• 웹페이지에서 콘텐츠의 구조를 표현하기 위해 고안된 텍스트 포맷(어떤 자료인지 알려주는 것임)
• 프로그래밍 언어 처럼 연산X
• 태그를 이용하여 콘텐츠를 다른 형식으로 보이게 하거나 특정 동작을 하게 만들음
• 검색엔진이 페이지를 파악하기 위한 방법

1) HTML 구조

• Content(콘텐트) : 태그 안의 영역 요소
• 태그(<>) : 콘텐트가 화면에 어떻게 보여야 할지 알려줌 , 콘텐트가 없어 닫는 태그가 없는 것도 있음(빈 요소 -> 이미지 태그)
• Attribute(속성) : 요소의 성질을 정의, 이미지 파일 경로, 대체 텍스트 등의 추가적인 정보
  • class 속성 : 추가적인 정보 제공, 가독성 향상 등
• 태그 안에 태그가 있고, 상대적인 부모 자식 관계가 가능

2) 실제 코드 구조

: 문서의 타입을 알려줌, HTML 버전 등을 알려줌
html 은 head 와 body를 포함
head : 브라우저 타이틀 바에 출력되는 정보, 연결된 css, javascript 파일이 어디에 위치하는지 알려줌
body : 브라우저에 출력되는 부분

6. CSS

• html있는 문서의 선택적으로 스타일 적용 가능

• 별도로 스타일 시트를 작성해서 연동해야 어디 부분이 어떤 스타일인지 파악하기 편하고 효율적임

• 선택자 :

  • tag 선택자 : html 요소 이름으로 CSS
  • class 선택자 : html에서 특별하게 지정하고, .class 명으로 CSS, 여러 요소에 적용 가능
  • id선택자 :(id 선택자는 딱한번만 가능함, css 에서는 지정한 이름 # 붙여서 사용

• 프로퍼티 : CSS 에서 각 요소의 속성들로 color, font-weight 등이고 속성끼리는 세미 콜론(;)으로 구분

• CSS 장점 : 유지보수, 검색엔진, 스크린리더, 성능 향상 등

7. JavaScript

• 웹 페이지를 동적으로 만드는 데에 사용되는 언어
• 서버와 꼭 통신하지 않아도 상호작용을 가능하게 함(에러 처리를 브라우저에서 가능하게 함)
• 브라우저에서 정보를 좀더 복잡하게 표시할 수도 있게 되었음

8. 작업환경 설정

1) Codepen

• 웹상에서 HTML, CSS, JS 를 별도 설치 없이 구현 가능
• 자동완성 단축키 : 태그 이름 치고 tab 누르면 자동으로 형식이 만들어짐
  (탭을 눌러도 안되는 경우가 있을땐 일시적 오류이니 나갔다 다시 와보길, 계속 안되서 화났음 솔직히 근데 오류였음)

2) 문서 검색 사이트

MDN (개발 문서 웹사이트) : 모질라 사이트
개발 공식문서 통합검색 : 데브독스
브라우저 버전이나 종류에 따른 기술지원 확인 사이트 : CanIUse -> 호환성 생각할 때

9. HTML 태그

• <h1></h1> : 헤드 태그는 목록 구성을 할 수 있음

• <p></p> : 텍스트를 단락으로 정의할 때 사용(유사한 주제 문자열 묶음, 빈여백 처리 용도 불가)

• <em></em> : 강조 태그 (이텔릭체)

• <strong></strong> : 강조 태그(볼드)

• <ol></ol> : 순서가 있는 목록 태그 (odered list 의 약자)

  • <li></li> : ol 태그 안에 li 태그 사용시 li 태그 앞에 숫자가 붙음(숫자 붙는 리스트형)

• <ul></ul> : 순서가 없는 정보 목록 태그

  • <li></li> : 순서 없이 되고 (노션의 bulleted list 느낌)

• <dl>``</dl> : 정의 목록, 어떤 단어의 의미 부여하고 정의를 내리는 태그, 주종관계 성립 콘텐츠에서 사용

  • <dt></dt> : 정의 하고자 하는 것
  • <dd></dd> : 정의의 설명

• <pre></pre> : code태그를 여러개 사용하고 싶을때

  • <code></code> : 코드를 보여주고 싶을 때 사용

• < > : 이스케이프 문자 역할 함

•   : 공백을 나타냄

• <a href="주소"></a> : 하이퍼링크 content 부분은 표시할 텍스트 (줄바꿈 안됨)

• <div></div> : 의미가 없는 요소, 구분이 필요하나 다른 적절한 태그가 없을 때 사용하고 목차 효과가 가능하고 class로 의미부여

• Tidy HTML 기능 : 각 인덴트(들여쓰기)를 표시하여 계층 구조를 볼수있게 함

• <span></span> : div와 유사하지만 div는 블록 요소이고 span 인라인 요소이다.

• 블록 vs 인라인 :

  • 블록 : 여러 요소들을 넣을수 있음, 옆에 다른 요소가 오지 못함
  • 인라인 : 다른 인라인은 포함가능하나, 블록을 포함할 수 없음, 다른요소와 옆에 같이 있을 수 있음, CSS에서 width,height 값을 못가짐

• 인라인 요소 : a 태그, code, span, strong, em 등의 태그

• 노말 플로우 : 블록과 인라인을 통해 레이아웃을 만든 상태

• 블록과 인라인 특성있는 태그를 CSS display에서 블록, 인라인 속성을 변경 가능함

10. CSS font, background

• font-family : 글꼴 지정하는 속성 (1개이상 값 가능_에러 대비, 사용자가 없는 폰트일 경우) 띄어쓰기가 있는 폰트 이름에는 "" 따옴표를 씌워줘야함, 상속이 가능함(부모를 바꾸면 자식도 바뀌게 가능)

  • serif : 컴퓨터에 저장된 아무 폰트 보여줘라

• font-size : 글꼴 크기 지정 픽셀단위의 고정값 가능 , 부모에 고정값 주고 부모값의 상대값으로 할수도 있음(1.5em -> 부모의 1.5배), inherit (상속 받은 값 그대로 사용해라)

• em : 상대값으로 사용시 li 태그가 중복 적용 되는 경우 합성 이슈가 나오기 때문에 그럴땐 rem 사용

• font-weight : 두께 나타냄 (bold 등의 키워드로 지정 가능, 100~900까지 숫자로 지정 가능)

• font-style : italic , normal 등의 글자 스타일 지정 가능

• font 단축표기법 : font: style weigt size family 순서로 나열해야 반영됨 (SWSF)로 외우자

• text-align : 텍스트 정렬 (right, center, left )

• line-height : 줄간격 단위 없이 가능하고 주로 1, 1.2 사용, 읽기 좋은 것은 1.5 정도

• color : 글자 색상 지정, 색상코드(키워드) or 16진수RGB값(#으로 시작하는 코드값, ex. #ffffff 흰 , #000000 검) or 10진수 RGB(rgb(0, 0, 0, 투명도0~1))

• background-color : 배경색 지정 단축키bgc + tab

하루평

듣고 있는 강의가 파이썬은 정말로 잘되있었는데,, 뭔가 프론트 강의는 자료가 잘 정리되어 있지 않아서, 보고 정리하기 보단 듣고 정리하는 느낌이 강해서 힘들었다.

강사의 설명도 빠르고 용어에 대한 설명이 좀 많이 부족한 느낌, 그래서 곱씹고 반복해서 듣고 생각해야 이해가 되는 정도 이다. 그리고 웃긴게 나는 깃허브를 공부해서 알지만 깃허브 강의를 마지막에 배치해 놓고 수업 자료는 깃허브에 올려 논건 좀 웃기다.

나름 열심히 하긴했지만, 뭔가 별로 끌리진 않는 느낌이다. 그래서 생활코딩 강의도 들어보려고 한다.

어제 집에 들어가면서 Notion으로 여러가지 필요한 템플릿을 만들었다.
나중에 시간이 나면 유튜브를 시작해서 내가 공부한 내용과 Notion 템플릿 및 팁을 올리는 것도 나쁘지 않을 듯 하다.