[TIL 01/31_사전캠프 11일차] HTML/CSS 기초

　오늘 학습 요약　

1. 개인 공부

• [왕초보] 웹개발 종합반 1주차 강의 수강
  • HTML / CSS / Bootstrap

---

　학습 내용 정리　

1. 웹개발 종합반 1주차 강의 수강

• 웹 브라우저 작동 원리
  • 데이터를 요청하는 쪽 : 클라이언트 / 데이터를 주는 쪽 : 서버
  • HTML : 뼈대 / CSS : 꾸미기 / JavaScript : 움직이기
  • 브라우저의 역할은 요청을 보내고, 받은 HTML 파일을 그려주는 것이다.
    1. 사용자가 브라우저(클라이언트)에서 URL을 입력하면 요청을 서버로 보낸다.
    2. 서버는 요청을 받고 필요한 데이터를 처리하거나 데이터베이스에서 정보를 가져온다.
    3. 서버는 처리된 결과(HTML, CSS, JavaScript 등)를 응답으로 클라이언트에 보낸다.
    4. 클라이언트는 받은 데이터 화면을 렌더링하여 사용자가 볼 수 있게 한다.
    5. 이 모든 과정은 HTTP/HTTPS 프로토콜을 통해 이루어지며, 빠르게 반복된다.
• VS Code 간단한 요약키
  • Ctrl + S : 저장
  • Alt + B : 작성한 웹사이트 열기
  • Shift + Alt + F (맥은 Shift + Option + F) : 자동 정렬
    코드의 생김새를 파악하기 쉽게 하기 위해서 정기적인 점검이 필요함
• HTML
  • Head : CSS, JS, 파비콘, 탭제목 등 속성 정보 작성
  • Body : 뼈대 Tag를 활용하여 페이지 내용 작성
  • VS Code에서, html 파일을 만들고 코드를 적는 공간에 html이라고 작성
    => html:5를 클릭하면 html 뼈대 나타남
  • HTML TAG 기초 (암기보다는 필요시에 그때그때 찾아 쓰기)
    • <div></div> : 구역 나누기
    • <p></p> : 문단 나누기
    • <li></li> : Bullet point
    • <h1></h1> : 제목을 나타내는 태그, 페이지마다 작성하기
      <h2></h2> : 부제목
      그외 h3~h6까지 있음
    • <span></span> : 글자 꾸미기
    • .<a></a> : 하이퍼링크
    • <img src="링크"> : 이미지 첨부
    • <input> : 아이디,패스워드 창과 같이 데이터 입력
    • <button>></button> : 버튼
• CSS
  • Head Tag 안에 <Style></Style> 기입 후 CSS class 작성
  • div Tag로 구역을 나눈 후 class 지정
  • CSS 기초
    • width
    • height
    • background-color
      - transparent :투명
    • color
    • text-align
    • border-radius
      
      
    • 여백 줄 때
      padding : 안쪽 여백
      margin : 바깥 여백
      - 위에서 부터 시계방향으로  여백 기입
      - auto는 끝까지 민다는 뜻
      
      
    • 그림 넣을 때
      background-image: url('이미지 주소 기입');
      background-position: center;
      background-size: cover;
      
      
    • 정렬
      display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
      - flex-direction에서 column은 세로 정렬 / row는 가로 정렬 의미
      
      
    • 만들어둔 구역을 가운데로 가져오려면?
      1. div tag로 박스 씌우기
      2. width로 넓이 지정
      2. margin: auto로 양옆 여백 주기
  • [구글폰트] 사용하기
    • https://fonts.google.com/?subset=korean
    • 원하는 폰트 클릭 후 Get font 버튼 클릭
    • <> Get embed code 버튼 클릭
    • Web 탭에서 import 버튼 클릭
    • <style></style> 태그 안에 묶인 코드만 복사해서 작성중인 HTML Head Style태그 안에 붙여넣기
    • CSS class 탭의 코드를 복사한 후 전체적용(*{})을 CSS에 넣으면 끝
  • mytitle > button{} : mytitle란 이름을 가진 class가 있고, 그 class가 적용된 DIV 구역이 있으면, 그 안에 있는 button tag에 적용할 CSS를 작성하는 방법이다.

• Bootstrap
  • https://getbootstrap.com/docs/5.3/getting-started/introduction/
  • 예쁜 CSS를 미리 모아둔 라이브러리
• CDN(Content Delivery Network) : 콘텐츠 전송 네트워크
  지리적으로 분산된 서버드를 연결한 네트워크
  웹 콘텐츠를 사용자에게 빠르고 안전하게 전달하는 기술 (설치없이 연결)

---

　메모　

1. 무작정 암기하는 것 보다는 반복적으로 사용하혀 익숙해지는 것이 중요!

---

　다음 공부 계획　

1. 웹개발 종합반 3주차까지 듣기

---

　TIL 작성 시 참고 자료　

1. JQuery append 이해하기

https://www.devkuma.com/docs/jquery/element-append-prepend-before-after/

 

2.  백틱을 사용하는 이유

https://spartacodingclub.kr/community/fastqna/all/631c3d9f6a94af1725a4be56/%EB%B0%B1%ED%8B%B1%EC%9D%84%20%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%20%EC%9D%B4%EC%9C%A0%20