본문 바로가기
Helen's 개발일지

Helen's 개발일지 (2021.11.27)

by sweethelen 2021. 11. 27.

파이참에서 태그 잘라내어 붙여넣기 ctrl+X  후 ctrl+V

 

명령을 내릴 태그를 지칭하는 것 ( class="  ") 따옴표 안에 지칭할 이름을 붙여준다. 

 

ex> class ="mytitle" 태그를 부를때는 <style></style>안에 

      .mytitle로 부른다. (쩜mytitle)

 

태그 끝에 ; (세미콜론)을 붙여줘야 하는 애들이 있는데 ; 를 까먹고 붙이지 않아서 계속

예제처럼 html이 안떴다...짲응...ㅋㅋㅋㅋㅋ

 

강사님은 어떤 태그는 : (콜론) 다음에 글자를 띄어쓰시고 어떤 경우에는 : (콜론) 다음 글자를 붙여쓰시는데 

왜그러는지는 모르겠다. 

 

코드 이름을 많이 알아야 html로 css를 만들기 쉬울것 같다. 

 

margin: auto; 태그는 

내가 지정한 것을 정중앙에(양쪽 여백이 같도록) 놓는 역할을 한다.

(* 하지만 html에는 '글속성'과 '박스속성'이라는게 있는데, 글속성은 margin: auto; 로도 가운데에 놓이지 않는다.

 박스는 가로, 세로라는 개념이 존재하지만 글은 가로, 세로라는 개념이 존재하기 어렵기 때문.

 따라서, 글속성은 박스속성으로 바꾸어 주어야 margin 태그가 먹는다. )

글속성 -> 박스속성 태그 (display: ) 

 

 

class 태그에는 '중첩'이라는 개념이 있다. 

따라서, 내가 효과를 먹이고 싶은 태그의 class 의 따옴표(" ") 안에 두개이상의 단어를 넣을수도 있다.

ex) red-font를 먹이고 싶어서 button class에 이미 mybtn이 존재하지만 mybtn red-font로 써넣는다. 

     명찰을 두개 붙이는 것이다. (부를 이름을 두개 지정해준 것)

 

 

 

 

?   왜 font-size: 36px; 뒤에다

        font-color: red;를 넣으면 글자색이 안바뀔까? 슬랙에 질문을 올려두었다. 

     내 예상은 이미 button의 글속성을 display 태그로 박스속성으로 바꾸었기 때문이 아닐까 한다. 

 

 

 

* { } 태그는 "모든 태그에 효과를 다 먹인다"는 뜻이다. 

 

 

주석처리란 ) 개발자는 읽고 싶지만, 컴퓨터는 인식 못하게 하는 것이다. 

(코딩하다가 써놓고 싶은 메모, 잠깐 해보고 지우고 싶은 코드 등)

주석처리하고 싶은 태그부분을 드래그 하여  Ctrl + /   (컨트롤+슬래시)를 누른다.

거의 모든 개발환경에서 동일한 단축키이다!

그리고, 그부분을 드래그하여 ctrl+/ 를 다시 누르면 주석처리가 풀린다!

또한, 주석을 처리하는 모양이 태그마다 다르므로 놀라지 말것!

너무 많아 외울수 없으므로 외울필요 없음. 

 

 

<style></style> 안쪽의 지정해둔 스타일들은 따로 파일화시켜 두면

다른 html 코드에 적용할때 <link rel=" "> 으로 불러와 코드를 간단하게 정리할 수 있다. 

 

 

 

쌩으로 고생하지 말고 부트스트랩 CSS와 내가 만든 커스텀 CSS를 함께 사용할것! 

(뭐 실력을 위해서 연습삼아 처음부터 끝까지 하는것도 나쁘진 않겠지만)

 

 

 

아래 그림의 빨간 원속 +/- 는 누르면 

긴 태그가 펼쳐지거나/접힌다.

 

 

 

wrap 은 내가 원하는 부분을 싼다(wrap)는 의미로 이해하면 될듯.

내가 원하는 부분의 태그들을 한데 묶는 기능인듯. 

 

# 오늘 내가 만든(이라고 쓰고 붙여넣기 해서 수정한이라고 읽는) CSS!!

<!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 rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Stylish&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Stylish', sans-serif;
        }

        .wrap {
            width: 900px;
            margin: auto;
        }

        .comment {
            color: blue;
            font-weight: bold;
        }
    </style>
</head>

<body>
<div class="wrap">
    <div class="jumbotron">
        <h1 class="display-4">나홀로 링크 메모장!</h1>
        <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다.</p>
        <hr class="my-4">
        <p class="lead">
            <a class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
        </p>
    </div>
    <div class="card-columns">
        <div class="card">
            <img class="card-img-top" src="https://img.khan.co.kr/news/2021/07/20/2021072001002618500220181.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://www.naver.com/" class="card-title">여기 기사제목이 들어가죠</h5></a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>

            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://img.khan.co.kr/news/2021/07/20/2021072001002618500220181.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://www.naver.com/" class="card-title">여기 기사제목이 들어가죠</h5></a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>

            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://img.khan.co.kr/news/2021/07/20/2021072001002618500220181.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://www.naver.com/" class="card-title">여기 기사제목이 들어가죠</h5></a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>

            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://img.khan.co.kr/news/2021/07/20/2021072001002618500220181.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://www.naver.com/" class="card-title">여기 기사제목이 들어가죠</h5></a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>

            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://img.khan.co.kr/news/2021/07/20/2021072001002618500220181.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://www.naver.com/" class="card-title">여기 기사제목이 들어가죠</h5></a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>

            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://img.khan.co.kr/news/2021/07/20/2021072001002618500220181.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://www.naver.com/" class="card-title">여기 기사제목이 들어가죠</h5></a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>

            </div>
        </div>
    </div>

</div>

</body>

</html>

'Helen's 개발일지' 카테고리의 다른 글

Helen's 개발일지 (2021.11.29)  (0) 2021.12.06
Helen's 개발일지 #1  (0) 2021.11.24

관련글

티스토리툴바