7/15 CSS,html기초 ( 왕초보기초반 1주차)

짤막정리

스파르타코딩 클럽 1주차

브라우저의 역할
1.서버 한테 요청
2.서버가 준걸 고대로 그려준다.

뼈대 hTML
꾸미기 CSS
동작 JS

데이터만 줘서 갈아 끼우기 -> 제이슨형식 jason

파이참 등록 설치 완료
파이썬을 쓰기에 가장 좋은 프로그램 -> 파이참

html
head - 꾸미기,자바스크립트, body를 제외한 것들
body - 밑에
h1 은 제목을 나타내는 태그 , 페이지 마다 하나씩 꼭 써주는게 좋다.!
span - 특정 글자를 꾸밀때 씁니다.

Ctrl + Alt + l 줄맞춤

뭔가를 꾸민다는것은 뭔가를 가리킨다라는 것 부를 이름이 있어야 함!
명찰을 달아줘야 합니다. -> class

background-image: url("");
background-size: cover;
background-position: center;

같이 묶어서 다님

pedding 안에 여백
margin 시계방향으로 4군데 밖에 여백

글속성을 박스로 바꿔야 옮겨질수 있다. !!
display : block;

부트스트랩 활용
head 에 링크 입력 후 필요한 소스 갖다가 붙여서 활용

부라우저는 자바스크립트만 알아듣는다.!
모든 브라우저는 기본적으로 자바스크립트를 알아듣게 설계되어있고, 모든 웹서버는 html+css+javascript를 주게 되어있죠

개발자 도구에서 콘솔창은 그 페이지에서 이어지는 것
개발자도구의 존재 의미 바로바로 수정 해서 확인 해볼수 있도록 만들어 놓은 것

함수 : 정해진 동작을 하는것

질문

jua 구글 폰트를 쓰는데 강의 내용에서의 링크랑 실제 들어갔을때 링크가 왜 다른지?? 물론 전부 복사해서 사용하면 잘 작동 된다.

강의

<link href="https://fonts.googleapis.com/cssfamily=Stylish&display=swap" rel="stylesheet">

실제

<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">

margin 활용 시계방향으로

margin 위 오 아래 왼
인줄 알았는데
margin 30px auto ;
시에 아래 30px 여백을 주게 되는데 그 이유가 뭐지??
30px auto 30px auto 로 들어가는듯!

잘안되거나 막힌부분

오류 가 세개뜸 작동은 되는데 부트스트랩에서 복붙에서 가져오다보니 아이디가 그대로 중복되어 있던것
duplicate ID reference

느낌

첫날 1주차 끝 2번째 강의 듣는데 훨씬 수월하게 강의를 습득했다.
딱히 막히는 부분 없었고 개념에 대해서 아직 확실하게 잡히지 못해 질문이 특정 되지 못한다.

작업결과물,퀴즈,숙제

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

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
    <!-- 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>
    <style>
        * {
            font-family: 'Jua', sans-serif;
        }
        .image{
            width: 600px;
            height: 400px;
            margin:30px auto;

            background-image: url("https://search.pstatic.net/common/?src=https%3A%2F%2Fshopping-phinf.pstatic.net%2Fmain_1055754%2F10557549622.20170916043402.jpg&type=sc960_832");
            background-size: cover;
            background-position: center;


        }
        .ment{
             width: 600px;
            height: 400px;
            margin:auto;
        }
        .price{
            font-size: 20px;
        }
        .mybtn{
            width: 100px;
            margin:auto;
            display: block;
        }

    </style>
     <script>
        function hey(){
            alert('안녕!');

        }

    </script>
</head>

<body>
    <div class="image">
    </div>
    <div class="ment">
    <h1>향초를 팝니다. <span class="price">가격:3000원/개</span></h1>
    <p>이 양초는 사실 특별한 힘을 가지고 있어요 양초를 켜고 소원을 빌면 짜자잔 뭐든지 이뤄지게 된답니다. 하나사가세요.! 대나무향이 아주 좋아요</p>

        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-default">주문자이름</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>


        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <label class="input-group-text" for="inputGroupSelect01">수량</label>
            </div>
            <select class="custom-select" id="inputGroupSelect01">
                <option selected>수량을 선택하세요</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
        </div>

        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-default1">주소</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default1">
        </div>

        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-default2">전화번호</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default2">

        </div>
        <p class="lead">
            <a onclick="hey()" class="mybtn btn-primary btn-lg" href="#" role="button">주문하기</a>
        </p>
    </div>




</body>

</html>

Author And Source

이 문제에 관하여(7/15 CSS,html기초 ( 왕초보기초반 1주차)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@stravinest/715-CSShtml기초-왕초보기초반-1주차

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

7/15 CSS,html기초 ( 왕초보기초반 1주차)

짤막정리

질문

잘안되거나 막힌부분

느낌

작업결과물,퀴즈,숙제

Author And Source

좋은 웹페이지 즐겨찾기