Sparta 웹개발 종합반 1주차 5~12강

티스토리 뷰

sparta 웹개발 종합반 개발일지

Sparta 웹개발 종합반 1주차 5~12강

나아눙 2022. 5. 19. 22:19

05. CSS 기초

1.HTML 부모-자식 구조 살펴보기

태그가 바뀌면 그 안의 내용물도 모두 영향이 간다.

버튼1은 초록색 div의 자식이다.

11) CSS 기초

<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성

mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 한다.

배경관련

background-color

background-image

background-size

사이즈

width

height

폰트

font-size font-weight

font-famliy color

간격

margin

padding

06. 자주 쓰이는 CSS 연습하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인페이지</title>
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
    <style>
        *{ #모든태그에 다먹인다.
            font-family: 'Jua', sans-serif;
        }
    </style>
    <style>
       .mytitle {
           background-color: green; #안보이니깐 깔아줌

           width: 300px;
           height: 200px;

           color: white;
           text-align: center; #텍스트가 가운데로옴

           background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
           #url 하고 tab하면 자동완성됨
           background-size: cover; #사이즈 맞추기
           background-position: center; #이 세줄은 같이 다닌다.

           border-radius: 10px; #모서리 둥근정도
           padding-top: 20px; 
       }

           .wrap{ #양쪽 여백이 동등하게 최대이다.
               #background-color:green; 안보이니깐 깔아줌 나중에는 지운다.
               width: 300px;
               margin: auto;
           }
           .mybtn{
               width:100px;
               margin: auto; #auto만 하면 안움직임 
               display: block;#html은 글속성(가로X,세로X)과 박스속성(가로,세로)이 있는데 글->박스로 바꿔준다.
           }
           .red-font{
               color:red;
               font-size:16px;
           }

    </style>
</head>
<body>
    <div class="wrap"> #한꺼번에 이동하기 위해 div을 만들어줌
        <div class="mytitle">
            <h1>로그인 페이지</h1>
            <h5>아이디, 패스워드를 입력해주세요</h5>
        </div>
        <h1>로그인페이지</h1>
        <p>ID: <input type="text"/></p>
        <p>PW: <input type="text"/></p>
        <button class="mybtn red-font">로그인하기</button> #명찰 두개(mybtn red-font)붙인다.
    </div>

</body>
</html>

class 붙일때는 class="mytitle"

class를 부를때 .mytitle{

}

padding : 안쪽으로

margin :바깥으로

margin : 20px 20px 20px 20px

왼 위 오 밑(시계방향으로)

07. 폰트, 주석, 파일분리

13) 구글 웹폰트 입히기

https://fonts.google.com/?subset=korean

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

1.마음에 드는 폰트 클릭후 [ + Select this style ]을 클릭

2. 우측상단 모음 아이콘 클릭후 Embed탭 클릭

3. link 태그를 복사해서 <head> ~ </head>사이에,

CSS를 복사해서 <style> ~ </style> 사이에 넣는다.

14)주석

Ctrl +/ 거의 동일한 개발환경에서 동일한 단축키

15)파일분리

css파일을 만든후 스타일 안에 있는 것을 가져와서 붙이고 <style> </style>은 지운다.

<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

08. 부트스트랩, 예쁜 CSS 모음집

16) bootstrap이란?

예쁜 CSS를 미리 모아둔것

부트스트랩이 CSS를 미리 작성해놓음

17) bootstrap - 시작 템플릿

<!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>

<body>
    <h1>이걸로 시작해보죠!</h1>
</body>

</html>

시작 템플릿을 가지고 시작해야한다.

https://getbootstrap.com/docs/4.0/components/alerts/

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

getbootstrap.com

09. Bootstrap(부트스트랩)을 써보자!

10. Quiz_함께 만든 페이지를 발전시켜보세요!

11. Quiz_나홀로메모장의 포스팅박스를 완성하기!

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <link href="https://fonts.googleapis.com/css2?family=Jua&family=Nanum+Myeongjo:wght@400;700&family=Noto+Sans+KR:wght@100&display=swap" rel="stylesheet">
    #title 밑에 link태그 복사(font)
    <style>
        *{
           font-family: 'Jua', sans-serif; #css를 복사(font)
        }
        .wrap{ 
            width:900px; #줄임
            margin:auto; #가운데로
        }
        .comment{ #여기에 코멘트가 들어갑니다 중첩
            color:blue;
            font-weight:bold;

        }
        .posting-box{
            width:500px;
            margin:0px auto 30px auto; 
            border: 5px solid black; #css border w3schools,css border mdm 으로 검색해서 알아본다
            border-radius:10px;
            padding:30px;

        }
    </style>
    <script>
       function hey(){ #alert는 경고음을 준다.
           alert('안녕')
       }

    </script>
</head>

<body>
    <div class="wrap"> #div로 묶고 wrap라는 클래스를 만든다.
    <div class="jumbotron"> #jumbotoron 복붙
        <h1 class="display-4">나 홀로 링크 메모장!</h1>
        <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
        <hr class="my-4">
        <p class="lead">
            <a onclick="hey()" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스열기</a>
        </p>    #onclik="hey()"(javascript)
    </div>  

        <div class="posting-box">  #form -> div로 변경 ,명찰줌
            <div class="form-group"> 
                <label for="exampleInputEmail1">아티클 URL</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                       placeholder="">
            </div>
            <div class="form-group">
                <label for="exampleFormControlTextarea1">간단 코멘트</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">기사저장</button>
        </div>

    <div class="card-columns"> #검사를 눌러 몇번째 카드 쓸건지 정한다. 
        <div class="card">
            <img class="card-img-top"
                 src="https://th.bing.com/th/id/OIP.Aak8hvDsgpnjnKqL_CScjAHaE7?w=306&h=204&c=7&r=0&o=5&dpr=1.25&pid=1.7" #이미지 주소 복붙
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://th.bing.com/th/id/OIP.Aak8hvDsgpnjnKqL_CScjAHaE7?w=306&h=204&c=7&r=0&o=5&dpr=1.25&pid=1.7"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://th.bing.com/th/id/OIP.Aak8hvDsgpnjnKqL_CScjAHaE7?w=306&h=204&c=7&r=0&o=5&dpr=1.25&pid=1.7"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://th.bing.com/th/id/OIP.Aak8hvDsgpnjnKqL_CScjAHaE7?w=306&h=204&c=7&r=0&o=5&dpr=1.25&pid=1.7"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://th.bing.com/th/id/OIP.Aak8hvDsgpnjnKqL_CScjAHaE7?w=306&h=204&c=7&r=0&o=5&dpr=1.25&pid=1.7"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://th.bing.com/th/id/OIP.Aak8hvDsgpnjnKqL_CScjAHaE7?w=306&h=204&c=7&r=0&o=5&dpr=1.25&pid=1.7"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </di>
    </div>
    </div>
    </div>
</body>

</html>

css border w3schools

css border mdm

으로 검색해서 알아본다.

12. Javascript 맛보기

21)자바스크립트란?

프로그래밍 언어 중 하나로, 유일하게 브라우저가 알아들을 수 있는 언어입니다.

모든 홈페이지에 자바스크립트를 넣어놓음 표준이 되어버림

function hey() {

alert('안녕!');

}

</script>

버튼에 함수를 연결,누르면 함수가 불린다.

나홀로 링크 메모장에서

검사 - console

개발자 도구에서 불러다가 쓸수 있다.

'sparta 웹개발 종합반 개발일지' 카테고리의 다른 글

Sparta 웹개발 종합반 2주차 9~12강+숙제 (0)	2022.05.20
Sparta 웹개발 종합반 2주차 1~8강 (0)	2022.05.20
Sparta 웹개발 종합반 1주차 13~16강 +숙제 (0)	2022.05.20
Sparta 웹개발 종합반 1주차 1~4강 (0)	2022.05.19
1주차 개발 일지 (0)	2022.05.18

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/12 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

글 보관함

sy의 코딩 개발일지

티스토리 뷰