배울수록 연봉은 늘어간다./자바스크립트(7)
-
4주차 위치 정렬 - grid 1
▲ 위에 보이는 화면처럼 만들어 봅니다. 프로그램은 구름 IDE를 사용했습니다. 소프트웨어 스택은 HTML , CSS, JS 선택을 했고 프로젝트는 빈 프로젝트로 시작하였습니다. 1. Grid 란? 격자 또는 눈금을 뜻합니다. 즉 행렬을 통해 요소들을 좀 더 정교하게 배치할 수 있는 레이아웃입니다. Grid 내부는 Lines , Track , Area , Gap 이라는 영역으로 이루어져 있습니다. 2. Grid 명칭 1. Lines 행과 열의 선들을 모두 Grid Lines라고 합니다. Grid Lines에서 행은 Grid column , 열은 Grid row라고 합니다. 2. Track 평평한 Grid Line의 두 줄 사이의 공간을 Grid Track라고 부릅니다. 3. Area 네 줄의 Grid L..
2022.11.16 -
3주차 HTML & CSS 기본 (4)
▲ 위에 보이는 화면처럼 웹페이지를 만들어 봅니다. 프로그램은 구름 IDE를 사용했습니다. 소프트웨어 스택은 HTML , CSS, JS 선택을 했고 프로젝트는 빈 프로젝트로 시작하였습니다. github 링크 :https://github.com/develup-official/htmlcss-s01e04 1. 터미널에서 깃허브 링크 불러오기 터미널에 git clone 링크 주소를 입력하세요. 2. 파일 만들기 다운로드한 폴더에 파일을 만들어 줍니다. 문자는 대소 문자를 구분합니다. 특수문자는 언더바나 하이픈 정도만 쓰도록 합니다. 파일명 : index.html 파일명 : style.css 3. 타이포 그래피 간단히 말해 글자를 디자인한다고 생각하면 됩니다. 4. 기본 세팅 html css header cont..
2022.10.24 -
3주차 HTML & CSS 기본 (3)
▲ 위에 보이는 화면처럼 웹페이지를 만들어 봅니다. 프로그램은 구름 IDE를 사용했습니다. 소프트웨어 스택은 HTML , CSS, JS 선택을 했고 프로젝트는 빈 프로젝트로 시작하였습니다. github 링크 :https://github.com/develup-official/htmlcss-s01e03 1. 터미널에서 깃허브 링크 불러오기 터미널에 git clone 링크 주소를 입력하세요. 2. 파일 만들기 다운로드한 폴더에 파일을 만들어 줍니다. 문자는 대소 문자를 구분합니다. 특수문자는 언더바나 하이픈 정도만 쓰도록 합니다. 파일명 : index.html 파일명 : style.css 3. 꼭 알고 넘어가야 할것은?? css의 우선 순위에 대해 알고 넘어 갑니다. https://drive.google.co..
2022.10.23 -
3주차 HTML & CSS 기본 (2)
▲ 위에 보이는 화면처럼 웹페이지를 만들어 봅니다. 프로그램은 구름 IDE를 사용했습니다. 소프트웨어 스택은 HTML , CSS, JS 선택을 했고 프로젝트는 빈 프로젝트로 시작하였습니다. github 링크 :https://github.com/develup-official/htmlcss-s01e02 1. 터미널에서 깃허브 링크 불러오기 터미널에 git clone 링크 주소를 입력하세요. 2. 파일 만들기 다운로드한 폴더에 파일을 만들어 줍니다. 문자는 대소 문자를 구분합니다. 특수문자는 언더바나 하이픈 정도만 쓰도록 합니다. 파일명 : index.html 파일명 : style.css 3. index.html에 기본 구조를 작성해 줍니다. html css wow body { background-color:..
2022.10.15 -
3주차 HTML & CSS 기본 (1)
▲ 위에 보이는 화면처럼 웹페이지를 만들어 봅니다. 프로그램은 구름 IDE를 사용했습니다. 소프트웨어 스택은 HTML , CSS, JS 선택을 했고 프로젝트는 빈 프로젝트로 시작하였습니다. github 링크 : https://github.com/develup-official/htmlcss-s01e01 1. 터미널에서 깃허브 링크 불러오기 터미널에 git clone 링크 주소를 입력하세요. 2. 파일 만들기 다운로드한 폴더에 파일을 만들어 줍니다. 문자는 대소 문자를 구분합니다. 특수문자는 언더바나 하이픈 정도만 쓰도록 합니다. 파일명 : orange.html 3. 콘텐츠를 확인합니다. 위 이미지를 크게 보자면 눈에 보이는 콘텐츠는 "이미지 , 오렌지 글자 , 아래 작은 글자로 오렌지 / 키위 / 스토로우..
2022.10.11