[html,css] 웹개발 기본과 HTML & CSS

웹 개발 기본과 HTML&CSS

오늘 수강한 강의 : 【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프

웹(WEB)이란?

• World Wide Web의 줄임말로 사용됨.
• 전 세계의 컴퓨터들을 네트워크로 연결하여 "정보를 공유"하는것을 목표로 함.
• 컴퓨터들을 인터넷으로 연결하는 여러 서비스들 중 하나가 바로 웹(Web,www).

www.google.com을 검색하면 벌어지는 일

HTTP

• HTTP(Hyper Text Transfer Protocol)
• 웹상에서 정보를 가져와 화면에 출력하기위해 사용하는 통신규약 중 하나
• 인터넷에서 HTML 문서와 같은 데이터를 주고받을 수 있도록 해주는 프로토콜.
• 기존 TIL 참고 :
  • HTTP/1.0, HTTP/1.1, HTTP/2, HTTPS, HTTP/3
  • HTTP 메서드
  • HTTP 멱등성

URL

• Uniform Resource Locator의 약자
• 즉, 웹에서 주어진 고유 리소스 주소.

도메인

• URL중 I주소가 아닌 사람이 사용하기 편리한 문자열로 찾는 서버를 쉽게 기억하고 찾을 수 있도록 하는 서비스

DNS

• Domain Name System
• 쉽게 말하면 인터넷 전화번호부.
• 할당된 도메인 영역에 대한 정보를 가지고있는 서버로, 도메인을 IP주소로 변환하는 역할을 주로 수행함.

HTML

• Hyper Text Markuo Language
• 웹 콘텐츠를 구성하고 의미를 부여하는 데 사용하는 마크업 언어.
• HTML, CSS, JS 언어를 포함한 파일.
• 웹페이지의 구조를 지정하는 기술적인 언어.
• HyperLink를 통해 링크가 걸린 개채로 여러 텍스트를 묶어놓은 것.

CSS

• Cascading Style Sheet
• 배경색과 글꼴을 설정하고 콘텐츠를 여러 열에 배치하는 등 HTML 콘텐츠에 스타일을 적용하는 데 사용하는 스타일 규칙 언어.

CSS를 사용하는 이유

• HTML 요소에서 style 속성을 사용해 디자인을 지정 할 수도 있지만, 페이지 수가 많아지는 경우 동일한 디자인을 적용할 요소에 각각 코드를 작성함으로써 코드의 중복이 발생하며, 결과적으로 유지보수가 어려워 지기 때문에 CSS 를 사용한다.

JavaScript

• 웹 페이지에서 복잡한 기능을 구현할 수 있는 스크립팅 또는 프로그래밍 언어.
• 동적으로 변경되는 콘텐츠를 만들고, 멀티미디어를 제어하고, 이미지에 애니메이션을 적용하는 등 거의 모든 작업을 수행할 수 있음.
• 변수에 값을 저장하는 등 다양한 일을 할 수 있음.

브라우저

• 렌더링 되어야 할 픽셀, 픽셀의 색상 등을 정하는 로우레벨의 작업을 각각 PC의 운영체제 대신 진행해줌.

index.html

• HTML문서에 대한 웹개발 규칙에서, 보통 웹사이트의 초기 화면에 대한 파일명으로 사용된다.

ide(vs code, intellij)를 사용하는 이유

• 태그별로 하이라이팅이 되거나, 사용 가능한 속성을 띄워주는 등 편리한 코드 작성이 가능하다.

왜 HTML을 사용해야 하는가

• 다양한 이유가 있지만 접근성 관점에서, 일반 텍스트로 작성할 경우 일반 사용자들은 화면을 봄으로써 제목과 중요한 단어 등을 알아차릴 수 있지만, 시각장애인들은 어느 텍스트가 제목인지 어느 텍스트가 중요한지 알 수 없다. 하지만 HTML 을 통해 특성에 맞는 요소안에 컨텐츠 작성시 해당 부분을 보완 할 수 있다.

HTML 요소(HTML 태그)의 종류

• 표준화된 HTML 태그들과, 요소 안에 포함된 콘텐츠.

HTML 요소가 필요한 이유

• 콘텐츠에 주석을 달거나, 더 많은 의미를 제공 할 수 있음.

HTML 속성

HTML 속성이 필요한 이유?

• 요소에 추가 구성을 추가 할 수 있음.

개발자 도구란?

• 각각의 브라우저들이 개발자들을 위해 제공하는 툴.
• HTML, CSS, JS를 검사하고 디버깅 할 수 있음.
• 네트워크 트래픽을 검사하거나 성능을 측정 할 수 있음.

오늘의 멘토링[김성훈 멘토님]

node학습 관련

• node의 강점과, 선택 이유, 학습과정 등을 자세하게 기록할 것.

포트폴리오 관련

• 코드도 좋지만, 개발을 하는 과정에서 어떤 것들을 겪었는지 기록할것.
• 동시성 이슈 등, 발생할수 있는 문제들에 대해서 고민하고, 일부러 발생시켜본 뒤, 개선시키는 과정을 정리해보는것도 좋을 것.

[내 질문] 스프링으로 간단한 api 구현을 할 줄 안다고 할 때, 입사 전에 redis, batch와 같은 스프링 프레임 워크를 추가적으로 공부해보고자 할 때, 이 부분은 꼭 공부해봤으면 좋겠다 하시는 프레임 워크가 있으실까요?

• batch(정산, 집계연산, 데이터 건수가 많은 건을 해볼것 몇백만 건 → 구성하는 과정에서 일어나는 문제도 분명 있을것. 벌크 insert 하는 과정에서 발생하는 이슈 등등을 정리할것.) → redis(생각보다 쉬움, 많은 이해도를 가질 수 있음. JWT 밸리데이션 스토어로 사용). logger 같은 경우는 default 로 해봐야하는 경험이라고 생각함.

[내 질문] 배치를 이용해서 개인정보 보호 기간이 만료한 유저의 데이터를 삭제하는 식의 구현을 해보는것도 괜찮을까요?

• 그것 또한 좋은 방법인것 같음. 대신 위에서 말 했 듯이 단순히 처리를 하는 것이 아닌 몇백만건의 데이터를 처리하는 과정을 담는것이 좋을것 같음.

[내 질문] 첫 입사를 node.js 혹은 Nest를 사용하는 기업으로 한 뒤, Spring 프레임워크를 사용하는 기업으로의 이직이… 쉽지 않을 것 같은데, 첫 입사에서 첫 회사가 사용하는 프레임 워크가 입사한 개발자에게 많은 영향을 끼칠까요?

• 주니어에게 프레임워크는 중요하지 않다고 봄. 오히려 내가 퀄리티 좋은 개발자라는 것을 보여줄 줄 아는 것이 더 중요하다고 생각함.

[내 질문] 그렇다면 1-3년차 주니어까지는 기존 근무에서 사용한 프레임워크는 중요하지 않고, 근무한 프레임워크에서 작성한 코드의 퀄리티가 더욱 중요하다고 보면 좋을까요?

• 코드의 퀄리티보다는 경험의 퀄리티가 중요함.

남아있는 질문

• 오늘은 멘토링 시간이 종료되어가는것 같아서 아쉽지만, 다음번 기회에 시간이 난다면 멘토님께서 가장 즐겁게 참여하셨던 프로젝트에 대해서 들어볼 수 있을까요?