오우진

DOCTYPE html> 덕담 하나 주면 안 잡아먹지! //->공유할때 글씨 //->페이지 설명 //->공유할때 이미지링크 @font-face { font-family: 'Cafe24Ssurround'; src: url('https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/Cafe24Ssurround.woff') format('woff'); } * font-family: 'Cafe24Ssurround'; } .background{ width: 100vw; height: 100vh; max-width: 450px; background-image: url('https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/bg..

DOCTYPE html> 덕담 하나 주면 안 잡아먹지! @font-face { font-family: 'Cafe24Ssurround'; src: url('https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/Cafe24Ssurround.woff') format('woff'); } * { font-family: 'Cafe24Ssurround'; } .background{ width: 100vw; height: 100vh; max-width: 450px; background-image: url('https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/bg_default.png'); background-position:..

DOCTYPE html> 덕담 하나 주면 안 잡아먹지! @font-face { font-family: 'Cafe24Ssurround'; src: url('https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/Cafe24Ssurround.woff') format('woff'); } * { font-family: 'Cafe24Ssurround'; } .background{ width: 100vw; height: 100vh; max-width: 450px; background-image: url('https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/bg_default.png'); background-position:..

DOCTYPE html> 덕담 하나 주면 안 잡아먹지! @font-face { font-family: 'Cafe24Ssurround'; src: url('https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/Cafe24Ssurround.woff') format('woff'); } //->url에 파일링크넣고 format에 파일형식넣기 * { //->*은 전체에 적용하겠다 라는 의미 font-family: 'Cafe24Ssurround'; } .background{ width: 100vw; height: 100vh; max-width: 450px; background-image: url('https://2022-01-newyear.s3.ap-northeast-..

DOCTYPE html> 덕담 하나 주면 안 잡아먹지! .background{ width: 100vw; height: 100vh; max-width: 450px; //->늘어나는 이미지 크기제한 background-image: url('https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/bg_default.png'); background-position: center; background-size: cover; //->사진으로 배경올리기 + 가운데정렬 margin: auto; //->좌우 여백을 동일하게 하여 가운데로 정렬하기 } body, h1,p{ margin: 0; //->짜투리 여백을 없게하기 } .title{ color: #3f3732; //->타..

DOCTYPE html> 덕담 하나 주면 안 잡아먹지! .background{ width: 100vw; //->이미지화하고 사이트에서 지정한 사이즈에 맞게 꽉차게 하고싶을때 height: 100vh; //->이미지화하고 사이트에서 지정한 사이즈에 맞게 꽉차게 하고싶을때 max-width: 450px; //->늘어나는 최대치를 지정 background-image: url('https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/bg_default.png'); //->background-image: url('//여기에 링크를 넣으면 된다//'); background-position: center; //->이 세줄은 이미지를 삽일할때 같이 묶어서 사용 backgro..

ALT+b를 눌러서 사이트 열고 F5눌러서 변경사항 확인하기 DOCTYPE html> Document .box{ //-> .box의 style 을 꾸미겠다 background-color: green; //-> 배경색 지정 width: 800px; //-> 넓이 height: 800px; //-> 높이 display: flex; | flex-direction: column; | box를 기준으로 안에들은 것들을 가운데로 정렬 justify-content: center; |(4줄을 항상 같이 쓴다고 생각) align-items: center; | } .first{ ->box 안의 first라 이름붙은 애를 꾸미겠다 background-color: red; ->배경색 지정 width: 300px; ->넓이 h..

DOCTYPE html> 스파르타코딩클럽 | HTML 기초 h1 { //->의 h1을 꾸미겠다 color: red; //->색깔을 변경하겠다:red; 로 } .test { //->.test{} : 에서 test로 이름붙은 애를 꾸미겠다 color:green; //->색깔을 변경하겠다:green; 으로 font-size: 30px; //->폰트사이즈를 변경하겠다: 숫자px; } 나는 구역을 나누죠 나는 문단이에요 bullet point!1 //-> class="이름표" 넣어준다 bullet point!2 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. h2는 소제목입니다. h3~h6도 각자의 역할이 있죠. 비중은 작지만.. a 태그입니다: 하이..

바탕화면에 새폴더 만들고 VS code에서 폴더열고 새파일 example.html 생성 html:5 기본 내장함수 클릭후 저장 -> 폴더에 html링크 생성됨 html 기초 DOCTYPE html> 스파르타코딩클럽 | HTML 기초 나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. h2는 소제목입니다. h3~h6도 각자의 역할이 있죠. 비중은 작지만.. a 태그입니다: 하이퍼링크 img 태그입니다: input 태그입니다: button 태그입니다: 버튼입니다 textarea 태그입니다: Alt+b 누르면 열림

[수업 목표] HTML, CSS의 기초 지식을 이해한다. 모바일 대응 가능한 페이지를 완성한다. 나만의 웹페이지를 완성한다! [목차] 01. 오늘 배울 것 서버/클라이언트/웹의 동작 개념 👉 크롬 창에서 보이는 웹페이지는 어떤 원리로 보여지는 것일까요? 원리를 알기 위해서, 일단 해킹부터 해보죠! (응?) 우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 "받아서" → "그려주는" 것입니다. 즉, 브라우저는 1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 일을 한답니다. 그런데 이 HTML파일에는 세 가지가 섞여 있으니, 바로바로! 💡 오늘 우리가 만드는 것은, 이 HTML 파일이에요. 이것을 스파르타 서버에 올리고, 친구들이 볼 수 있게 할 것이랍니다. → 올리는 것은 대신 해드릴게..