코딩 도전기_02_210629

10405 단어 스파르타코딩클럽개발/학습일지개발/학습일지

학습 내용

- CSS 작업

  • div는 background-color 설정 후 작업하면 편리

  • font-size: 폰트크기

  • width: 가로

  • height: 세로

  • text-align: 텍스트 정렬

  • background-image는 아래 세 줄로 설정
    background-image: url("");
    background-size: cover;
    background-position: center;

  • border-radius: 모서리 둥글기 설정

  • padding: 안쪽 여백

  • margin: 바깥쪽 여백. (시계 방향으로 생각하고 위, 오른쪽, 아래, 왼쪽 설정 or auto;)

  • html은 텍스트와 박스 속성이 다름
    위의 CSS 사용하려면 텍스트를 박스로 변경
    : display: block;

  • class는 중첩 가능
    ex) class="mybtn red-font"

  • 폰트는 머리(head)

* : 전체 적용

  • cmd + / : 주석 표시

  • .css 파일 생성 : style만 분리

- 부트스트랩

  • 시작 템플릿 필수
  • body 부분에 원하는 코드 cmd C + V
    -> 헷갈리는 부분이 있어 2회 강의 청취 후 1회 본인 실습

목표[1] 진행 상황

  1. 결과
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NAVER_prac</title>
    <style>
        .mybtn {
            text-align: right;
            font-size: 13px;
        }
        
        .mytitle {
            color: #03c75a;
        }
        

        .title {
            width: 500px;
            height: 100px;
            padding-top: 10px;
        }

    </style>
</head>


<body>
<p>
    <div class="mybtn">
        네이버를 시작페이지로
        <button>></button>
        <span style="color:lightgray">쥬니어네이버 해피빈</span>
    </div>

</p>
    <div class="title">
        <h1 class="mytitle">NAVER
            <input type="text"/>
            <button>검색</button></h1>
    </div>


<p>
<hr>

<span style="color:#03c75a">메일 카페 블로그 지식IN 쇼핑 쇼핑LIVE Pay TV</span>
사전 뉴스 증권 부동산 지도 VIBE 책 웹툰 더보기
<button>></button>
<hr>
</p>
</body>

</html>

  1. 내용
    : 기존 파일에 간단한 css 적용

  2. 세부 수정 사항

  • text-align: right; 사용, 첫 줄 오른쪽 정렬
  • font-size 사용, 첫 줄 글자 크기 작게 조정
  • span 사용, 쥬니어네이버, 해피빈 텍스트 색깔 변경
  • width, height, padding-top 사용, 둘째 줄 여백 설정
  1. 자가 점검
  • 여전히 어렵다
  • 아직 css사용이 미숙함, 연습 필요
  • 불필요한 코드들이 있는 것 같음, 수정 필요
  • 부트스트랩 활용 필요
항해99 6주차 WIL (CORS)
[Day5] [코딩테스트연습] 2 x n 타일링

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage