강의 16

CSS 활용해서 반응형 웹사이트 만들기

CSS: Cascading Style sheet(CSS)는 HTML에 스타일을 추가하여 웹페이지의 레이아웃, 색상, 폰트 등을 제어하는 언어이다.    외부 CSS 파일 사용법      반응형 웹사이트란?반응형 웹사이트는 다양한 디스플레이 크기와 해상도에 대응하여 콘텐츠나 레이아웃이 동적으로 변화하는 웹사이트를 말한다.사용자가 접속하는 기기에 따라서 사이트의 레이아웃과 디자인을 최적화하여, 최상의 사용자 경험을 제공하려는 웹 디자인 방식이다.    CSS를 활용한 반응형 웹디자인 예시: CSS의 Media Quary를 사용하여 특정 장치나 화면 크기에 따른 스타일을 적용할 수 있다.@media only screen and (max-width: 768px) { body { backgrou..

강의 2024.08.05

[Git] 브랜치 생성, 브랜치 목록 확인 및 원격 브랜치 로컬로 가져오기

팀프로젝트를 하면서 브랜치 생성, 브랜치  목록 확인 및 원격 브랜치 로컬로 가져오기를 매번 검색해서 하였다. 그래서 팀프로젝트를 하면서 매번 검색해보지 않아도 내 블로그를 보거나 기억할 수 있게 이 내용을 블로그에 간단하게 포스팅 하겠다.      branch 생성 (local repository)git branch (브랜치명) 을 통해 브랜치 생성이 가능하다. 새로운 브랜치(new branch)를 생성 후 체크아웃 해보도록 하겠다.(master)$ git branch newbranch(master)$ git chechout newbranchSwitched to branch 'newbranch'      branch 생성 후 이동 (local repository)git checkout -b (브랜치명)..

강의 2024.08.05

display: flex에 대해서 익혀보자!

Flex는 레이아웃 배치 전용 기능으로 고안되었다. 그래서 레이아웃을 만들 때 훨씬 강력하고 편리한 기능들이 많다.  flex는 부모 요소에서 display: flex; 를 적용하는게 시작이다. display: flex;: 가로방향으로 자식요소의 너비만큼 차지 display: block;: 세로방향으로 줄바꿈이 들어가 자식요소들이 한줄씩 차지 display: inline-flex;display: inline-block;: inline이 추가되면 자식요소들 크기만큼만 차지   flex-direction: row;: 자식요소를 가로 방향으로 배치 flex-direction: row-reverse;: 자식요소를 역순으로 가로 방향으로 배치 flex-direction: column;:자식요소를 세로 방향으로 배..

강의 2024.07.18

HTML <a> 태그를 이용한 내부링크 걸기

내부링크란?동일한 웹사이트나 도메인에 있는 이미지나 문서와 같은 다른 페이지나 리소스에 대한 웹 페이지의 하이퍼링크 유형이다.한마디로 말해서, 동일한 도메인에 있는 두 페이지를 연결하는 링크이다.     그럼, 내부링크를 태그를 사용해서 걸어보겠다!  먼저, 태그란? 태그는 현재 사이트에서 다른 웹 문서나 사이트를 연결하는 태그이다.링크가 있는 부분에 마우스 커서를 올려놓으면, 손가락 모양의 커서로 바뀌어서 표시된다.    태그 형태네이버로 이동 href에는 연결할 웹 문서의 경로나 사이트 링크를 걸어주면 된다.화면에 표시되는 "네이버 이동"을 클릭하면 href 속성값에 입력한 사이트로 이동하게 된다.   링크 태그 에 적용되는 속성속성속성값내용href웹 문서의 경로, 사이트 주소 값연결할 웹 문서 ..

강의 2024.07.17

HTML CSS JS 외부 링크 연결하는 방법

CSS를 HTML에적용시키는 총 3가지 방법ⓐ linking style sheet    - 별도의 css파일을 생성한 다음 html문서에 연결하는 방식 ⓑ inline style sheet     - Html태그의 style 속성에 CSS 코드를 삽입하는 방식​ⓒ internal style sheet    - Html문서 내에서 태그 사이에 CSS코드를 삽입하는 방식​  1. linking style sheetlink를 사용하는 방식html 파일에 css링크를 달아주면 된다. (href="파일 경로") 2. inline style sheetLorem ipusm dolor.html 태그의 style 속성에 css 코드를 삽입하는 방식꾸미는 것에 한계가 있고, html 파일이 없으면 수저이 어렵다는 점 등..

강의 2024.07.16

Github 명령어 정리

★ Github에 처음 코드 업로드하기1. 초기화git init  2. 저장할 파일 지정하기git add . . (점)은 모든 파일이라는 뜻, 선택적으로 올리고 싶으면 add 뒤에 파일이름 붙여주면 된다. (예, git add index.html)  3. 상태 확인 (선택사항)git status  4. 히스토리 남기기git commit -m "메모" -m 은 메세지의 줄인말로 뒤에 "" 안에 주고 싶은 히스토리 이름을 주면 된다.  5. Github repository를 내 로컬 프로젝트에 연결git remote add origin 깃허브주소 깃허브주소는 Github에서 복사해와서 붙여야한다.  6. 잘 연결됐는지 확인 (선택사항)git remote -v 내가 연결한 주소값이 잘 뜨면 연결된 것이다.  ..

강의 2024.07.15