목록Web (87)
hy30nq's blog
섹션 6: 깃 & 깃허브를 사용한 버전 제어 소개 [11일차]
Git & GitHub 이해하기: 웹 개발 도구를 넘어서 소프트웨어 개발의 세계에서 효율성과 협업은 핵심입니다. 바로 여기서 Git과 GitHub이 등장하는데, 이들은 웹 개발 도구를 넘어 모든 소프트웨어 프로젝트의 라이프 사이클을 관리하는 기본적인 자원으로 자리 잡고 있습니다. Git과 GitHub이 무엇인지, 그리고 시간에 따른 코드 변경을 추적하고 제어하는 방법이 어떻게 혁명적인지 알아봅시다. 목차 Git이란 무엇인가? GitHub의 필요성 버전 제어의 힘 웹 개발을 넘어서 결론 1. Git이란 무엇인가? Git은 컴퓨터에 설치된 로컬 도구로, 프로젝트의 전체 역사를 유지 관리할 수 있게 해줍니다. 주로 파일 변경 사항을 추적하는 버전 제어 시스템(VCS)으로 사용됩니다. Git을 사용하면 여러 개..
섹션 5: 웹사이트 제공(호스팅 & 배포) [11일차]
day 11 호스팅과 배포: 웹사이트 구축의 기본 이해 웹사이트를 만들고 관리하는 과정에서 '호스팅'과 '배포'는 중요한 단계입니다. 이 블로그에서는 이 두 개념에 대해 간단히 설명하고, 정적 웹사이트 호스팅의 예시와 HTML 및 CSS의 기본 요약, 그리고 파비콘 적용 방법을 소개합니다. 호스팅이란? 호스팅은 인터넷상에서 웹사이트가 접근 가능하도록 만드는 서비스입니다. 이는 웹사이트 파일(HTML, CSS, JavaScript 등)을 저장하는 서버 공간을 제공하는 것을 의미합니다. 사용자가 웹사이트 주소를 입력하면 호스팅 서비스는 해당 파일을 검색하여 사용자의 브라우저에 표시합니다. 배포란? 배포는 개발된 웹사이트를 인터넷상의 서버에 올리는 과정입니다. 이 과정을 통해 웹사이트가 인터넷에 연결되고, 전..
섹션 4: HTML & CSS - 연습과 요약 [9일-10일차]
day 9 그동안 배운 내용을 바탕으로 아래 사이트 만들어보기 만약 css로 이미지를 줄일 때 width를 사용하면 줄이면 기본적인 가로세로비는 유지되기 때문에 크기를 줄이거나 키울 수 있다. day 10 margin collapse 주의 margin: 수직 좌우; li { margin: 14px 0; padding-left: 10px; border-left: 5px solid transparent; } .extra-important { color: rgb(255, 237, 177); border-color: rgb(247, 209, 85); } 위의 방식으로 테두리 색을 지정할 수 있고 한 쪽만 지정할 수 있다. a href="/html-css-basics-summary.pdf" target="_bla..
섹션 3: HTML & CSS 자세히 알아보기 [7일 - 8일차]
day 7 css 박스 모델 border: 테두리두께 테두리유형 테두리색상; padding: 위쪽크기 오른쪽크기 아래쪽크기 왼쪽크기; (시계 방향) margin: 상하크기 좌우크기; margin: 전체크기; ex) 더보기 HTML The Box Model CSS p { padding: 2px 5px 2px 5px; border: 2px dashed black; margin: 8px 6px; } 크롬 개발자 도구에서 박스 모델을 볼 수 있다. -> Styles ol { list-style: none; width: 500px; margin: 36px auto 0 auto; padding: 0; } li { padding: 16px; margin: 32px; background-color: rgb(223, 1..
섹션 2: 첫 번째 웹사이트 구축: HTML 및 CSS 기초 [5일차], 섹션 3: HTML & CSS 자세히 알아보기 [6일차]
day 5 HTML & CSS가 텍스트 & 공백을 처리하는 방법 기본적으로 브라우저는 HTML과 CSS 코드에서 줄 바꿈과 들여쓰기를 무시합니다. 우리는 인간이므로 일반적으로 많은 들여쓰기와 줄바꿈ㅇ르 사용해서 코드를 구조화하고 구성하는 방식을 사용합니다. HTML에서 특수 문자를 출력하는 방법 ... 태그 이용 (공백도 보존되며 무시되지 않습니다.) HTML 엔티티 이용 ex) > -> ">", "
섹션 2: 첫 번째 웹사이트 구축: HTML 및 CSS 기초 [3일 - 4일차]
day 3 프론트엔드에서 색을 표현할 수 있는 방법은 다양함 + 색 표현 방식에 있어서 vscode가 도와줌 해당 사이트 참고 >> https://github.com/academind/100-days-of-web-development/blob/02-html-css-basics/extra-files/colors.pdf 코드 포맷팅 shortcut -> format document -> option + shift + f vscode extension 이용하기 prettier - 코드 포맷팅 auto rename tag - 태그명 변경시 마감태그 자동 변경 개발자 도구 이용하기 f12 or 검사 링크 추가 내용 -> html 요소는 중복 가능함 구조 html tag 안에 style 추가 -> inline 스타..
