:root {
--site-width:700px;
}
.header-1 {
width:var(--site-width);
}
.header-2 {
width:calc(var(00site-width) - 200px);
}
.con-min-width{
min-width : var(--site-width);;
}
.con {
width:var(--site-width);;
}
| 나만의 클린코드 요약 (0) | 2023.11.01 |
|---|---|
| 탑바 메뉴만들기(노말라이즈, 라이브러리) (0) | 2022.10.20 |
| 이미지 링크주소 (0) | 2022.10.07 |
| 자식선택자와 후손선택자 (0) | 2022.10.06 |
| 클래스101 개발자 로드맵 (1) | 2022.10.01 |
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 연습하고 가기!</title>
<!-- JQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
</style>
<script>
// 변수에 입력값 넣기 그후 경고창
function q1() {
let txt = $('#input-q1').val();
if ( txt == ''){
alert('입력하세요!');
} else {
alert(txt);
}
}
// @ 포함하는지 확인후, 주소만 출력하기 [includes 와 split]
function q2() {
let email = $('#input-q2').val();
if ( email.includes('@')){
alert(email.split('@')[1].split('.')[0])
} else{
alert('이메일이 아닙니다');
}
}
// JS에서 HTML 문법 출력하기
function q3() {
let name = $('#input-q3').val();
if (name == ''){
alert('이름을 입력하세요');
return;
}
let temp_html = `<li>${(name)}</li>`
$('#names-q3').append(temp_html);
}
function q3_remove() {
$('#names-q3').empty();
}
</script>
</head>
<body>
<h1>jQuery + Javascript의 조합을 연습하자!</h1>
<div class="question-box">
<h2>1. 빈칸 체크 함수 만들기</h2>
<h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
<h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
<input id="input-q1" type="text" /> <button onclick="q1()">클릭</button>
</div>
<hr />
<div class="question-box">
<h2>2. 이메일 판별 함수 만들기</h2>
<h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
<h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
<h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
<input id="input-q2" type="text" /> <button onclick="q2()">클릭</button>
</div>
<hr />
<div class="question-box">
<h2>3. HTML 붙이기/지우기 연습</h2>
<h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
<h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
<input id="input-q3" type="text" placeholder="여기에 이름을 입력" />
<button onclick="q3()">이름 붙이기</button>
<button onclick="q3_remove()">다지우기</button>
<ul id="names-q3">
<li>세종대왕</li>
<li>임꺽정</li>
</ul>
</div>
</body>
</html>| 3주차 숙제 지니사이트 순위 크롤링(파이썬) (0) | 2022.10.23 |
|---|---|
| 2주차 JQery, Ajax와 함께 API 적용하기 퀴즈(날씨정보) (0) | 2022.10.21 |
| 스파르타 코딩클럽 [내일배움캠프] 웹개발 1주차 후기 (0) | 2022.10.20 |
| 스파르타 코딩클럽 [내일배움캠프] 시작 (0) | 2022.10.20 |
| 영화사이트 만들기 (0) | 2022.10.19 |
공식 개강일에 앞서 기초 지식을 쌓기 위해 합격자들은
웹개발 종합반을 먼저 수강하여야 한다.
웹개발 종합반 1주차는 총 20강이며, 강의당 평균시간은 5분정도 되는 것 같다.
1주차의 주된 내용은 HTML, CSS의 기본 내용을 공부하고,
부트스트랩을 이용하여 손쉽게 나만의 사이트를 만들어본다.
그리고 자바스크립트도 기초내용만 맛보기까지 하며 숙제 제출하면 1주차 끝!
내일배움캠프를 시작하기전 1~2달정도 방황하던 시기에
생활코딩과 클래스101의 몰입코딩 강의를 들었을때와 비교하여
스파르타 코딩 웹개발 종합반의 장단점을 적자면,
장점)
강의 시간이 짧아 부담이 적다.
정말 필요한 문법만 간단하게 알려준다.
부트스트랩을 이용하여 곧바로 높은 퀄리티의 사이트를 만들 수 있다.
단점)
강의 시간이 짧아 하루 8강을 듣고 나면 시간이 남는다. ( -> 다른 강의 병행중)
필요한 문법만 알려줄뿐 해당 태그에 대한 이론은 자세히 알지 못한다. ( -> 구글링 또는 지인문의)
웹개발 종합반을 듣기전에 유명한 무료강의 [생활코딩]과 클래스101 [몰입코딩]을
듣다왔기 때문에 기초적인 지식이 있어서 1주차는 쉽게 따라갔다는 느낌이 듭니다.
만약 사전지식 없이 들었다면, 짧은 영상과 설명에
갈팡질팡하여 혼란해하지 않았을까 생각도 듭니다.
그래도 이전 강의들과 비교하자면 간결하고 실전적인 내용을
바로 코드에 적용하여 빠른 성취감을 느낄 수 있다는 것이 큰 장점이었습니다.
| 2주차 JQery, Ajax와 함께 API 적용하기 퀴즈(날씨정보) (0) | 2022.10.21 |
|---|---|
| 1주차 자바스크립트(feat.jQuery) 퀴즈 1,2,3 (0) | 2022.10.20 |
| 스파르타 코딩클럽 [내일배움캠프] 시작 (0) | 2022.10.20 |
| 영화사이트 만들기 (0) | 2022.10.19 |
| 팬사이트 만들기 (0) | 2022.10.19 |
22년 33살의 나이로 마케팅 회사에서 오랜기간 일하면서 개발자와의 마찰이 많았다.
눈대중으로 코딩공부를 했던적도 있었고, 친구가 개발자이기에 내가 말한 기술을
개발하려면 얼마나 걸리는지 물어보았다. 몇달간 부탁해도 안만들어주던걸
3시간만에 나에게 알려주면서 만들어주는걸 보고 충격받았다.
이후에 나는 마케팅 회사를 그만두고, 생활코딩과 클래스101 강의를 들으며
개발자 취업을 준비하기 시작했다. 그와중에 3가지 루트를 고민했다.
- 무료강의와 유료강의를 들으면서 혼자 포트폴리오 만들고 취업할 자신이 없어서 패스
- 유튜브에서 후기와 주변 지인들의 후기를 들었을때 강사분들이 너무 무성의하다고 하여,
돈 500만원을 내고 부트캠프를 들을지, 최후의 보루로 무료 국비지원을 들을지 고민...!
약 500~700만원대의 돈을 내고 빡센 관리와 체계적인 취업 설계를 받을까 고민을 많이 했다.
그러나 앞으로 6개월 이상 공부를 하는 입장에서 생활비 걱정때문에 무료국비지원과 부트캠프를 고민했다.
알고보니 내일배움카드로 무료로 들을 수 있는 부트캠프가 있었는데
그게 바로 스파르타 코딩클럽의 [내일배움캠프] 였다.
다른 부트캠프에도 이와 같은 무료부트캠프가 있었지만,
알게 된 시점에서 내일배움캠프가 가까운 시기에 모집을 하고 있었다.
내일배움캠프는 내가 원하는 2)무료국비 와 3)부트캠프를 모두 합친
최고의 선택지였다. 결국 지원서를 작성하고 셀프인터뷰를 녹화하여 제출한 결과 합격!!!
앞으로 열심히 공부할 일만 남았다~
| 2주차 JQery, Ajax와 함께 API 적용하기 퀴즈(날씨정보) (0) | 2022.10.21 |
|---|---|
| 1주차 자바스크립트(feat.jQuery) 퀴즈 1,2,3 (0) | 2022.10.20 |
| 스파르타 코딩클럽 [내일배움캠프] 웹개발 1주차 후기 (0) | 2022.10.20 |
| 영화사이트 만들기 (0) | 2022.10.19 |
| 팬사이트 만들기 (0) | 2022.10.19 |
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>★코딩연습장★</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle{
height: 250px;
width: 100%;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
background-position:center;
background-size:cover;
color:white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mytitle > button {
width:200px;
height: 50px;
background-color: transparent;
color:white;
border-radius: 50px;
border: 1px solid white;
margin-top:10px;
}
.mytitle > button:hover{
border: 2px solid white;
}
.mycmt{
color:gray;
}
.wrap{
max-width: 1200px;
width: 95%;
margin: 20px auto 0px auto;
}
.mypost{
max-width: 500px;
width: 95%;
margin: 20px auto 0px auto;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
.mybtn{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top:10px;
}
.mybtn > button{
margin-right: 10px;
}
</style>
<script>
</script>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
</div>
<div class="wrap">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">제목</h5>
<p class="card-text">영화내용</p>
<p>⭐⭐⭐</p>
<p class="mycmt">여기는 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">제목</h5>
<p class="card-text">영화내용</p>
<p>⭐⭐⭐</p>
<p class="mycmt">여기는 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">제목</h5>
<p class="card-text">영화내용</p>
<p>⭐⭐⭐</p>
<p class="mycmt">여기는 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">제목</h5>
<p class="card-text">영화내용</p>
<p>⭐⭐⭐</p>
<p class="mycmt">여기는 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
</div>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">영화URL</label>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>--선택하기--</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">코멘트</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
</body>
</html>| 2주차 JQery, Ajax와 함께 API 적용하기 퀴즈(날씨정보) (0) | 2022.10.21 |
|---|---|
| 1주차 자바스크립트(feat.jQuery) 퀴즈 1,2,3 (0) | 2022.10.20 |
| 스파르타 코딩클럽 [내일배움캠프] 웹개발 1주차 후기 (0) | 2022.10.20 |
| 스파르타 코딩클럽 [내일배움캠프] 시작 (0) | 2022.10.20 |
| 팬사이트 만들기 (0) | 2022.10.19 |
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>★코딩연습장★</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
height: 300px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://mblogthumb-phinf.pstatic.net/MjAyMTEyMzBfMjU3/MDAxNjQwODIzNTM5ODU4.4N5iYjgtyzTpiKCe5RlPuNM5aRqP-rxu8Lv4M7PIYy8g.FYFlO1cup4cXoyBEgOtSEWpw_baR76D5h_JwiJdCQyIg.JPEG.letis_make_idea/asdasd.jpg?type=w800");
background-position: center 20%; /*높이 맞추기*/
background-size: cover;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mybtn {
display: flex;
flex-direction: row;
justify-content: left;
align-items: center;
margin-top: 10px;
}
.mypost {
max-width: 500px;
width: 95%;
margin: 20px auto 0px auto;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
blockquote {
margin: 5px;
padding: 5px
}
.card {
margin: 10px 0px 10px 0px;
}
.form-floating{
margin-top:10px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>🎻릴러말즈 팬사이트🎻</h1>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">닉네임</label>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">응원댓글</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">응원남기기</button>
</div>
</div>
<div class="card">
<div class="card-body-1">
<blockquote class="blockquote mb-0">
<p>TRIP 노래 너무 좋아요~!</p>
<footer class="blockquote-footer">힙합맨 <cite title="Source Title"></cite>
</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body-1">
<blockquote class="blockquote mb-1">
<p>성산히어로 뮤비 내주세요>_<</p>
<footer class="blockquote-footer">성산주민1 <cite title="Source Title"></cite>
</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body-1">
<blockquote class="blockquote mb-1">
<p>야망으로 채워줘요~릴러말즈💘</p>
<footer class="blockquote-footer">엠비션보이 <cite title="Source Title"></cite>
</footer>
</blockquote>
</div>
</div>
</div>
</body>
</html>| 2주차 JQery, Ajax와 함께 API 적용하기 퀴즈(날씨정보) (0) | 2022.10.21 |
|---|---|
| 1주차 자바스크립트(feat.jQuery) 퀴즈 1,2,3 (0) | 2022.10.20 |
| 스파르타 코딩클럽 [내일배움캠프] 웹개발 1주차 후기 (0) | 2022.10.20 |
| 스파르타 코딩클럽 [내일배움캠프] 시작 (0) | 2022.10.20 |
| 영화사이트 만들기 (0) | 2022.10.19 |
HTML <!-- -->
CSS /* */
자스 /* */ AND //
| ★기본 CSS노말라이즈★ (0) | 2022.10.21 |
|---|---|
| 인라인 그리드, 이미지 박스 (0) | 2022.10.21 |
| 메뉴박스 노말라이즈 (0) | 2022.10.20 |
| 부트스트랩 시작템플릿(JQuery 포함) (0) | 2022.10.19 |
| ★자주 사용하는 기초태그 모음★ (0) | 2022.10.14 |
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</head>
<body>
</body>
</html>
| ★기본 CSS노말라이즈★ (0) | 2022.10.21 |
|---|---|
| 인라인 그리드, 이미지 박스 (0) | 2022.10.21 |
| 메뉴박스 노말라이즈 (0) | 2022.10.20 |
| 주석표 (0) | 2022.10.19 |
| ★자주 사용하는 기초태그 모음★ (0) | 2022.10.14 |