카테고리 없음

4. 웹개발 정리 (1)

jaeoun0238 2024. 10. 23. 17:06

웹 개발의 기초

 

Vs Code를 설치후

  • 바탕화면에서 sparta 폴더 만들기
  • sparta 폴더 안에 frontend 폴더 만들기
  • frontend 폴더 안에 tags.html 파일 만들기

Html

  • HTML은 웹의 뼈대를 잡아주는 구역을 나타내는 코드로 웹의 전반을 HTML을 통해서 작성할 수 있다.
  • CSS는 HTML을 통해 작성된 뼈대를 예쁘게 꾸며주는 코드이다.

html:5 -> 자동으로 뼈대를 만들어줌!
뼈대 >ㅡㅡㅡ<

 

이를응용한 로그인창도 만들었다!

로그인페이지만들기

 

추가로 응용 부분 만들려는데 처음에 안되는 이유를 못찾았었는데..! AI챗봇인 르탄봇한테 질문했더니 해결이 됐다..! 대박

AI 의 발달이 무섭다...!!!

body에 들어있던 클래스에 mytitle을 추가안했었던 나.. 고맙다 AI!

 

결국 우여곡절 끝에 완성..!

결과물이올시다
밑에 background3개는 짝궁으로 묶인다.. 메모메모

 

뭐라도 하나 만든 오늘 하루가 뿌듯.. 느리지만 착실하게 꾸준히 꾸준히 한걸음 걷자..!

 

오늘의 요약

html:5 는 뼈대를 만들어준다.

<head>…..</head> 안에 <style>…..</style>로 공간을 만들어 작성합니다.

아래 코드를 통해 간단한 사용 방법을 알아봅니다.

mytitle라는 클래스를 가리킬 때, .mytitle { } 라고 써줘야 하는 것을 꼭 기억하기 (별표5개) 

 

자주쓰이는 Css

  • 배경관련 background-color background-image background-size
  • 사이즈 width height
  • 폰트 font-size font-weight font-family color
  • 간격 margin padding
  • margin은 바깥여백, padding은 내 안쪽 여백