웹개발 종합반 1주차_2일

10208 단어 스파르타코딩클럽웹개발 종합반CSShtmlCSS

1. HTML 부모-자식 구조

HTML 태그는 "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요하다. 감싸고 있는 태그가 바뀌면 그 안의 내용물도 모두 영향을 받는다.

2. CSS 기초

  • head 안에 style로 공간을 만들어 작성한다.
  • 꾸밀 대상을 지정해서 변경한다.
    (예) 짱구의 바지 색을 바꿔줘! "짱구의 바지"라고 부를게 있어야 하며 이름표를 붙임

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

[연습할 것들]
h1, h5, background-image, background-size, background-position
color, width, height, border-radius, margin, padding

  • margin은 바깥 여백, padding은 안쪽 여백
  • 아래의 로그인 화면을 가운데로 가져오려면?
    width를 주고, margin:auto를 사용하자! 그래도안 되면 display:block을 추가
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | 로그인페이지</title>
    <style>
        .mytitle {
            color: white;
            width: 300px;
            height: 200px;
            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position: center;
            background-size: cover;
            
            border-radius: 10px;
            text-align: center;
            padding-top: 40px;
        }
    </style>
</head>

<body>
    <div class="mytitle">
        <h1>로그인 페이지</h1>
        <h5>아이디, 비밀번호를 입력해주세요</h5>
    </div>
    <div>
        <p>
            ID: <input type="text" />
        </p>
        <p>
            PW: <input type="password" />
        </p>
    </div>
    <button>로그인하기</button>
</body>
</body>

</html>코드를 입력하세요

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

1) 구글 웹폰트 입히기

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

  • select this style 눌러서 3번째 링크 복사하기
    복사해서 title 태그 아래 붙여넣기
  • CSS rules to specify families 내용 복사해서 style 태그 안에서 사용하기

2) 주석 달기

  • 주석은 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때
  • 코드에 대한 간단한 설명을 붙여두고 싶을 때
  • 단축키 : ctrl(또는 command) + /(슬래시)

3) CSS 파일 분리![]

  • style 태그가 너무 길어지면 보기 불편하니 파일을 하나 만들어서 분리
<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
구현 - 6. 기둥과 보 설치
[BOJ] 2866 문자열 잘라내기 - JAVA

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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