오늘 수강한 강의 : 【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프오늘의 강의 정리 📗멋있는 웹사이트 만들기CSS 변수변수의 선언 : "–"로 시작하는 변수명 : 사용하고자 하는 속성일반 속성과 마찬가지로 요소 내부에 선언하면 되나, 보통은 root 의사선택자 안에 적용해서 전역으로 사용main { --main-bg-color : brown;}:root { --main-ft-color: rgb(255,255,255);}변수 사용 : var(“CSS 변수명”, [해당 변수가 없을시 사용할 속성])main { background-color: var(--main-bg-color)}CSS 변수의 상속상위 엘리먼트의 변수값은 하위 엘리먼트로 상속됨하위 엘리먼트에 선언된 변수값은 상..

오늘 수강한 강의 : 【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프오늘의 강의 정리 📗em : 해당 단위가 사용되고 있는 요소의 font-size 속성값에 비례해서 결정되는 상대 단위font-size : 20p0.5em = 20 px x 0.5 = 10px1em = 20 px x 1 = 20px2em = 20 px x 2 = 40px3em = 20 px x 3 = 60pxfont-size : 10px0.5em = 10 px x 0.5 = 5px1em = 10 px x 1 = 10px2em = 10 px x 2 = 20px3em = 10 px x 3 = 30pxrem : html 요소의 font-size 속성값이 기준rem에서 r은 rootHTML에서 최상위 요소는 이기 때..

오늘 수강한 강의 : 【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프오늘의 강의 정리 📗HTML CSS 레이아웃 및 포지셔닝text 스타일링margin 축소(중복)인접 요소끼리만 margin 축소 현상이 일어나는게 아니라, 부모자식 요소 사이에서도 margin 축소가 일어남.선형 그라디언트linear-gradient( to right, yellow 50%, red 60%, purple )positionstatic : (default) 요소를 일반적인 문서 흐름에 따라 배치차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓임relative : 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋 적용abso..

오늘 수강한 강의 : 【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프오늘의 강의 정리 📗오늘 VOD 강의(13-16일차) 진도에서는 깃과 깃허브를 통한 버전관리와, HTML CSS의 레이아웃 및 포지셔닝에 대해서 배웠다. Git, Github의 경우엔 계속해서 써왔고, 앞으로도 계속 사용할 버전관리 시스템이기 때문에 다시 한 번 복습한다는 관점에서 수강을 완료했다. HTML CSS에서도 grid와 flex처럼 요소를 배치하는 부분에서 최근 프로젝트에서 고생을 했던 부분이었기에 관심있게 수강 할 수 있었다.git, github를 통한 버전관리브랜치가지 또는 분기점.보통 git을 통한 협업 혹은 개발을 할때에 주 축이 되는 브랜치의 현재 상태를 복사하여 ** 생성한 새로운 Br..

오늘 수강한 강의 :  【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프 HTML & CSS 요약HTML과 CSS에 관해 기존에 배운 HTML 요소들과, CSS 스타일링 방법에 대해 복습하는 강의를 들으며 아래의 새로운 태그를 배웠고,강조 태그 강조할 컨텐츠 //(시스템에서 읽어 줄 때 텀을 두면서 어조를 조금 바꾸는 식으로 강조)강조할 컨텐츠 //(시스템에서 읽어줄 때 강하게 읽으면서 강조)파비콘 태그 HTML과 CSS를 summery하는 웹페이지를 만들었다.강의를 따라 배포한 netlify 링크가 아마 하루까지밖에 유효하지 않는다고 해서, 아래에 작성한 코드를 첨부한다.//index.html Hi there! marks a comment by..

HTML & CSS 자세히 알아보기오늘 수강한 강의 :  【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프 css 코드 서식인라인 스타일을 사용하지 않을 때(style 속성을 통해) CSS 코드는 일반적으로 다음과 같다.p { font-family: sans-serif; text-align: center;}이 코드는 읽기 쉽게 작성되어 있다. 하지만, 반드시 위처럼 작성해야 하는 것은 아니며, 이론적으로는 아래와 같이 작성할 수도 있다.p {font-family: sans-serif;text-align: center;}그러나 위와 같은 코드는 이해하고 유지 관리하기가 훨씬 더 어렵기 때문에 일반적으로 읽기 쉽게 작성한 맨 위의 서식처럼 작성한다. 다음은 CSS 코드 형..

웹 개발 기본과 HTML&CSS오늘 수강한 강의 : 【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프웹(WEB)이란?World Wide Web의 줄임말로 사용됨.전 세계의 컴퓨터들을 네트워크로 연결하여 "정보를 공유"하는것을 목표로 함.컴퓨터들을 인터넷으로 연결하는 여러 서비스들 중 하나가 바로 웹(Web,www).www.google.com을 검색하면 벌어지는 일HTTPHTTP(Hyper Text Transfer Protocol)웹상에서 정보를 가져와 화면에 출력하기위해 사용하는 통신규약 중 하나인터넷에서 HTML 문서와 같은 데이터를 주고받을 수 있도록 해주는 프로토콜.기존 TIL 참고 :HTTP/1.0, HTTP/1.1, HTTP/2, HTTPS, H..

1. 선택자란? - 특정 항목(HTML)을 선택하여, 해당 항목의 속성을 변경. 1) tag 선택자 : 특정 태그(HTML)를 선택하여, 해당 태그의 속성을 변경. 선택자(특정 태그 명) + { 설정 } 제목입니다 본문입니다 제목입니다 본문입니다 또 하나의 DIV 입니다 2) 다중 태그 선택 : 여러 태그를 선택하여, 해당 태그의 속성을 변경 선택자,선택자,선택자 + { 설정 } cf) 특정 태그에 다중 설정시 가장 마지막으로 설정된 값으로 홈페이지 반영됨. MY HOMEPAGE HTML5 CSS3 JAVASCRIPT JQUERY What is HTML5? HTML5 is goooooooooooooooooooooooooooooooooooooooooooooooooooooooood! xxx주식회사 서울시 0..

1. 홈페이지의 전체적인 레이아웃을 잡는 태그 1) div(division) 태그 : 웹사이트의 전테적인 틀(레이아웃)을 만들 때 주로 사용. - 웹표준 테그(테이블 태그에서 표준화로 변화) - 웹페이지에서 논리적 구분을 정의하는 태그. - 블럭형식 태그(개행하지 않아도, div 태그가 끝나면 개행) cf) 라인형식 태그(개행하지 않으면 개항이 되지 않음) block_01 block_02 block_03 block_04 block_05 (1) div 태그의 속성 ① style : div 태그의 여타 속성을 지정 해주기 위한 속성 ② width, hight : 높이와 너비 설정 ③ border : 테두리 굵기 설정 ④ background-color : 배경색 설정 ⑤ float : 정렬기준 설정 ⑥ mar..

1. 폼을 통해 정보를 입력받는 태그 웹사이트에서 회원가입 등 여러 정보를 입력받아 웹 서버로 전달할 때 사용하는 폼을 만들어주는 태그 1) form 태그 - 폼 안에 있는 모든 데이터를 백엔드 서버에 전달한다. - 전체 양식 설정(화면에 보이지 않지만 양식을 지정해줌) 1-1) form 태그 필수속성 (1) action 속성 ① form data를 서버로 보낼 때 해당 데이터가 도착 할 URL을 명시 (2) method 속성 ① get : 디폴트 값. 도메인에 입력값이 문서헤더에 그대로 보임 - 보안에 취약 ② post : 파일 헤더에 정보값이 암호화되어 저장되어, 도메인에는 변화가 없음 - 보안이 필요한 부분에 사용. 로그인 값 등에 사용 2) input 태그 - 실질적으로 데이터를 입력받을 양식을 ..

1. 동영상을 출력하는 태그 1) video 태그 - 종료태그 있음 2) video 태그 필수 속성 (1) src(source) 속성 : 비디오 소스(경로/URL) 제공 (2) type 속성 : video/확장자명 cf: 필수 속성과 기타 속성은 아래처럼 별도로 작성 할 수 있음 3) video 태그 기타 속성 (1) controls 속성 : 컨트롤러 제공(소리조절, 동영상 탐색, 일시정지, 재시작) (2) autoplay 속성 : 자동 재생

1. 이미지를 나타내는 태그 웹사이트에서 이미지를 출력해주는 태그 1) img(image) 태그 : 이미지 출력을 위한 태그 - 별도의 종료 태그 없음 2) src(source) : 이미지 파일의 경로 표시 / img 태그 필수속성 - 사이트 파일 내에 위치한 이미지 파일의 경로 - 원격지에 위치한 파일 3) img 태그 기타 속성 (1) alt(alternate) 속성 : 이미지 파일이 없을 시 교체(대신)하여 출력할 문구 (2) width 속성 : 너비(가로 길이) (3) highth 속성 : 높이(세로 길이) (4) border 속성 : 경계선 설정(사각형 모양) 및 굵기 (5) alt 속성 : 그림 설명(그림 위에 포인터 위치시 풍선 도움말) (6) (2)~(5) + align, hspace, v..