1-2 HTML/CSS 기초

JH 2024. 7. 8. 19:23

먼저 코딩 환경 세팅하기 (윈도우)

1. VS Code(Visuall Studio Code) 다운로드
2. 익스텐션에서 'Open in browser' 인스톨
3. 익스텐션에서 'Korean Language Pack for Visual' 인스톨
4. 익스텐션에서 'Prettier' 인스톨 후 Ctrl + , 누른 후
Default Formatter 에서 Prettier 선택 (자동정렬 설정 완료 = shift Alt F)
5. 바탕화면에 폴더 만들고 프론트앤드 부분이니 파일 안에 'FrontEnd' 하나 더 만들기
6. 파일-> 폴더열기-> 바탕화면-> 폴더선택-> '작성자신뢰' 클릭-> 왼쪽 탐색기에서 마우스 오른쪽 버튼 누르고 새파일-> **tags.html** 만들기 -> 편집기로 돌아가 **html:5** 작성 후 선택 (또는 창에 '!' 입력)-> Ctrl S -> Alt B 눌러 새로운 창에서 잘 보이는지 확인

웹의 뼈대인 HTML 기초

- HTML은 크게 'head' 와 'body'로 나눔

head에는 속성정보를 넣음
ex) favicon, meta, script, style, link, title 등

body에는 페이지의 내용을 넣음/ 예를들면 뼈대, 태그가 들어감
ex) span, img, input, textarea 등

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | HTML 기초</title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <hr>
    span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

로그인페이지 하나 만들어보기

1. 탐색기에서 오른쪽 마우스 -> 새파일 -> **login.html** 입력
2. 편집기로 돌아와 html:5 입력
3. 아래 바디 안에 있는 내용 입력

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>로그인 페이지</h1>
    <p>ID: <input type="text" /></p>
    <p>PW: <input type="text" /></p>
    <button>로그인하기</button>
  </body>
</html>

뼈대를 꾸미는 CSS 기초

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

<head>...</head>안에 <style>...</style>로 공간을 만들어 작성
ex) mytitle 라는 클래스를 가리킬 때=스타일로 넣어줄 때, head 안에서 style 써주고 그 안에 .mytitle {} 라고 꼭 써줘야함

자세한 순서

1. 먼저  body 안에 있는 것 중에서 꾸미고 싶은 <div class="이름"> 넣어주기,
   여기서 class는  head 안에 입력할 style 의 이름을 정해주는 것

2. 그 다음 body 안에 넣었던 class의 이름을 head 안에서 넣어줘야
   작동이 되는데 이때 head > style > class 이름 순으로 넣어줘야 함

3. 그리고나서 <style> 바로 아래에 '.클래스 이름 {}' 를 입력 후
   괄호 안에 꾸미고 싶은 모든 속성들을 넣어주면됨
   (참고로 속성들을 넣을 때 어디로 움직이는지 확인이 잘 안되니
   늘 background-color: green; 제일 먼저 넣어줘서 보기 용이하게
   만들고 나중에 지우기)

오늘 사용한 속성

사이즈
width 가로
ex) width:300px;

height 높이
ex) height:200px;

배경
background-color
ex) background-color: green;

background-image

background-size

참고: 그림 넣을 때는 이 세가지가 항상 같이 다님
background-image: url('이미지 주소(=링크)넣기');
background-position: center;
background-size: cover;

폰트
color
ex) color: white;

font-size

font-weight

font-family

간격
!!참고로 간격은 시계방향으로 적용 위>오>아래>왼!!
padding 은 틀 안에 **안쪽 여백**을 말하는 것
ex) padding-top: 30px; 위에 안쪽에만 여백 주고싶을 때

margin 은 틀 밖에 **바깥 여백**을 말하는 것
ex) margin: 20px auto(오른쪽 끝까지) 0px auto(왼쪽 끝까지);

정렬
text-align 글자 정렬
ex) text-align: center;

테두리
border-radius 모서리 동글동글하게
ex) border-radius: 8px;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .mytitle {
        width: 300px;
        height: 200px;
        color: white;
        text-align: center;
        padding-top: 30px;
        border-radius: 8px;
        background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
        background-position: center;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <div class="mytitle">
      <h1>로그인 페이지</h1>
      <h5>아이디, 비밀번호를 입력해주세요</h5>
    </div>
    <p>ID: <input type="text" /></p>
    <p>PW: <input type="text" /></p>
    <button>로그하기</button>
  </body>
</html>

위에서 만든 로그인 페이지 가운데로 옮겨보기

(=가운데로 옮기는다는 것은 양쪽의 여백을 동등히)

천천히 생각해보기: 로그인 페이지를 감싸야함 -> 감싸야 하는건 구역이고 -> 구역은 div -> div 넣고, 만들어진 div 에도 클래스를 붙임 (이름 만들어주기) -> head 로 올라가 style 밑에 '.class이름 {}' 입력 후 괄호안에 백그라운드 컬러 먼저 넣기(보기 용이하도록) -> 속성 넣어주고 저장 후 정렬 > Alt B 로 확인

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .mytitle {
        width: 300px;
        height: 200px;
        color: white;
        text-align: center;
        padding-top: 30px;
        border-radius: 8px;
        background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
        background-position: center;
        background-size: cover;
      }
      .wrap {
        width: 300px;
        margin: 50px auto 0px auto;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="mytitle">
        <h1>로그인 페이지</h1>
        <h5>아이디, 비밀번호를 입력해주세요</h5>
      </div>
      <p>ID: <input type="text" /></p>
      <p>PW: <input type="text" /></p>
      <button>로그인하기</button>
    </div>
  </body>
</html>

구글폰트 가져다 쓰기

1. Google fonts 검색
2. 마음에 드는 폰트 선택
3. Regular 400 선택
4. Get Font 클릭
5. <> Get Embeded Code 클릭
6. import 클릭
7. 아래 사진처럼 style 사이에 있는 코드만 복사 후 편집기에 style 바로 아래 입력하기

8. 아래 더 내려가서 드래그한 부분 복사해서 폰트 입력한 아래에 별{ } 사용해서 괄호 안에 작성 ( ***{ }**의 의미는 전체 적용한다는 뜻)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

        * {
            font-family: "Playfair Display", serif;
        }

        .mytitle {
            width: 300px;
            height: 200px;
            color: white;
            text-align: center;
            padding-top: 30px;
            border-radius: 8px;
            background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
            background-position: center;
            background-size: cover;
        }
        .wrap {
            width: 300px;
            margin: 50px auto 0px auto;
        }
    </style>
  </head>
  <body>
    <div class="wrap">
        <div class="mytitle">
            <h1>로그인 페이지</h1>
            <h5>아이디, 비밀번호를 입력해주세요</h5>
        </div>
      <p>ID: <input type="text" /></p>
      <p>pw: <input type="text" /></p>
      <button>로그인하기</button>
    </div>
  </body>
</html>

아래 사진과 같이 글씨체 변경된 결과 확인됨

부트스트랩 (= 남이 만들어 놓은 예쁜 CSS 꾸러미) 가져다 써보기

1. 파일 먼저 만들기, 이름은 'Album'
2. VSCode -> 파일 -> 폴더 열기 -> Album 클릭 -> 열기
3. 새로운 창으로 Album 파일이 열릴텐데 혹시 전에 작업하던 파일도 함께 열고 싶으면 파일자체를 드래그해서 VSCode 에 끌어다 놓으면 옆에 함께 볼 수 있음
4. Album 파일에 **index.html** 새파일 만들고 **html:5** 입력
5. title에 '나만의 추억앨범' 으로 이름 바꾸기
6. 부트스트랩 링크 복사해서 head에 속해있는 title 바로 아래다 붙여넣기
7. https://getbootstrap.com/docs/5.3/components/buttons/
이 링크를 통해 버튼 하나 가져오기
button -> variants -> 첫째줄 복사
8. 바디에 그대로 붙여넣고 저장 그리고 실행해보기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나만의 추억앨범</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    <button type="button" class="btn btn-primary">Primary</button>
</body>
</html>

아래 사진과 같이 버튼이 나오는걸 볼 수 있음