[HTML&CSS] 2주 학습 톺아보기

MarkUp/HTML&CSS

[HTML&CSS] 2주 학습 톺아보기 - 기본 정리

코딩왕(진) 2023. 3. 4. 23:24

1 시작하기

1.1 VSCODE에서 HTML 코드 만들기

- html을 입력하면 나오는 html:5 선택하기

1.2 Live Server 열어놓기

- 우클릭 후 Open with Live Server 클릭하여 기본 브라우저에 html 파일 열어놓기

(확장 프로그램인 Live Server가 설치되어 있어야함)

- 드림위버와 달리 수정된 코드가 바로 확인이 되지 않기 때문에 열어놓고 작업

2 기초

2.1 <h1></h1>

<body>
    <h1>제목</h1>    
    <h2>제목</h2>     
    <h3>제목</h3>     
</body


♬ 제목, 소제목

2.2 <input type="text" />

<body>
    <h1>로그인</h1>
    ID : <input type="text">  
    PW : <input type="text">   
</body>


♬ "text"를 입력했기 때문에 텍스트 필드가 출력(해당 부분 입력값을 변경하면 다르게 출력)

2.3 <br>

<body>
    <h1>로그인</h1>
    ID : <input type="text">
    <br>     
    PW : <input type="text">
</body>


♬ 줄바꿈

2.4 <p></p>

<body>
    <h1>로그인</h1>
    <p>ID : <input type="text"></p>
    <p>PW : <input type="text"></p>
</body>


♬ <p>와 <br>의 차이점
   <p>는 문단으로, 독립적인(Block-level Element) 태그지만
   <br>은 단순한 줄바꿈으로, 하나의 문단 내에서 줄을 바꾸는 기능

2.5 <button></button>

<body>
    <h1>로그인</h1>
    <p>ID : <input type="text"></p>
    <p>PW : <input type="text"></p>
    <button>로그인하기</button>
</body>


♬ 말 그대로 버튼 뿁 나옴

2.6 HTML 문서 내에 CSS 작성하기

<!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 {
            
        }
    </style>
</head>
<body>
    <h1 class="mytitle">로그인</h1>
    <p>ID : <input type="text"></p>
    <p>PW : <input type="text"></p>
    <button>로그인하기</button>
</body>
</html>


♬ CSS는 <head>태그 내에 <style> 태그를 만들어 작성
   CSS를 적용할 태그에 class로 이름을 지정해주고, <style> 태그 안에서
   .이름 {중괄호} 를 사용

2.7 색상 변경

    <style>
        .mytitle {
            color: red;
        }
    </style>

2.8 폰트 크기 변경

    <style>
        .mytitle {
            color: red;
            font-size: 60px;
        }
    </style>
    
    
♬ px처럼 단위까지 붙이고 세미콜론(;) 붙여줘야함

2.9 배경색 변경

    <style>
        .mytitle {
            color: red;
            font-size: 60px;
        }
        .mybutton {
            background-color: blue;
        }
    </style>
</head>
<body>
    <h1 class="mytitle">로그인</h1>
    <p>ID : <input type="text"></p>
    <p>PW : <input type="text"></p>
    <button class="mybutton">로그인하기</button>
</body>


♬ button에도 역시 적용 가능. class로 mybutton 지정해주고 변경
   transparent는 배경 없어짐

2.10 다수 적용

        .mylogin {
            color: purple;
        }
    </style>
</head>
<body>
    <h1 class="mytitle">로그인</h1>
    <p class="mylogin">ID : <input type="text"></p>
    <p class="mylogin">PW : <input type="text"></p>
    <button class="mybutton">로그인하기</button>
</body>


♬ 똑같이 적용할 값들은 같은 이름으로 지정하기
   (다른 방법도 많지만 정리를 위해 작성)

2.11 <div></div>

<body>
    <div class="mypage">
        <h1>로그인 페이지</h1>
        <h5>아이디, 패스워드를 입력하세요</h5>
    </div>
    <p class="mylogin">ID : <input type="text"></p>
    <p class="mylogin">PW : <input type="text"></p>
    <button class="mybutton">로그인하기</button>
</body>


♬ div는 쉽게 생각하면 박스를 만드는 것
   div안에 h1과 h5 태그를 넣었기 때문에 div를 수정하게 되면 자식태그인 h1과 h5 태그도 변경됨
   background-color를 설정하지 않으면 정확한 박스 구역이 안보이기 때문에 바로 지정해줌

3 <div> 수정하기

3.1 크기 수정

    <style>
        .mypage {
            background-color: pink;
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="mypage">
        <h1>로그인 페이지</h1>
        <h5>아이디, 패스워드를 입력하세요</h5>
    </div>
    <p class="mylogin">ID : <input type="text"></p>
    <p class="mylogin">PW : <input type="text"></p>
    <button class="mybutton">로그인하기</button>
</body>


♬ width / height으로 크기 설정하기. 단위와 세미콜론(;) 붙이기

3.2 둥글둥글 모서리

    <style>
        .mypage {
            background-color: pink;
            width: 300px;
            height: 200px;

            border-radius: 20px;
        }
    </style>
    
♬ border-radius로 모서리를 동글동글하게 만들 수 있음
   숫자가 커질수록 더 동그랗게

3.3 텍스트 가운데 정렬

    <style>
        .mypage {
            background-color: pink;
            width: 300px;
            height: 200px;

            border-radius: 20px;

            text-align: center;
        }
    </style>
    
    
    ♬ text-align: center; 입력하여 중앙정렬

3.4 여백

3.4.1 margin (바깥 여백)

    <style>
        .mypage {
            background-color: pink;
            width: 300px;
            height: 200px;

            border-radius: 20px;

            text-align: center;
        }
        .mybutton {
            margin: 40px 40px 40px 40px;
        }
        </style>
        
        
♬ 버튼을 mybutton으로 지정하고 <style> 태그 안에 넣어서 margin 적용
   (시계방향으로 적용된다. 위-오른쪽-아래-왼쪽)

3.4.2 padding (안쪽 여백)

        .mybutton {
            padding: 40px 40px 40px 40px;
        }
        
        
♬ margin에서 padding으로 변경하면 움짤처럼 안쪽 여백으로 변경됨
  다른데는 냅두고 위만 여백을 주고싶으면 padding: 40px 0px 0px 0px; 해도 되지만
  padding-top: 30px; 로 간단하게 입력 가능
  (padding-left, padding-bottom 등)

3.5 배경을 원하는 이미지로 변경

    <style>
        .mypage {
            background-color: pink;
            width: 300px;
            height: 200px;

            border-radius: 20px;

            text-align: center;

            padding: 30px 0px 0px 0px;
         
            background-image: url('이미지 주소');
        }
        </style>
        
        
♬ background-image: url('이미지주소');로 배경을 원하는 이미지로 바꿀 수 있음
   url 앞에 linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 를 넣으면 이미지가 어두워짐
   background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('이미지 주소');

3.5.1 배경 이미지 가운데 정렬

    <style>
        .mypage {
            background-color: pink;
            width: 300px;
            height: 200px;

            border-radius: 20px;

            text-align: center;

            padding: 30px 0px 0px 0px;
         
            background-image: url('이미지 주소');
            background-position: center;
        }
        </style>
        
    
♬ background-position: center;로 가운데 정렬

3.5.2 사이즈 맞추기

    <style>
        .mypage {
            background-color: pink;
            width: 300px;
            height: 200px;

            border-radius: 20px;

            text-align: center;

            padding: 30px 0px 0px 0px;
         
            background-image: url('이미지 주소');
            background-position: center;
            background-size: cover;
        }
        </style>
        
        
♬ background-image: url('이미지 주소');
   background-position: center;
   background-size: cover;
   이미지 넣고, 정렬하고, 사이즈 조절하기 이 셋은 보통 같이 다님

3.6 페이지 가운데 정렬하기

1) margin
margin: 0px auto 0px auto;

♬ 부모태그를 하나 더 생성하여 옮김 <div class="wrap">
   margin으로 여백을 쭈우욱 밀고 싶으면 auto 입력
   
   
2) display
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

♬ 얘넨 4개가 세트임
   column은 세로로 정렬한다는 것 / 가로는 row

3.7 border

        .mymovie > button {
            width: 250px;
            height: 50px;

            background-color: transparent;

            border: 1px solid white;
        }
        
        
♬ .mymovie > button은 mymovie라는 tag안의 button 태그를 지정
   solid(실선) , double(액자선) , dashed(점선) , dotted(도트점선)

3.8 hover 적용

        .mymovie > button {
            width: 250px;
            height: 50px;

            background-color: transparent;

            border: 1px solid white;
            border-radius: 50px;

            margin-top: 20px;
        }
        .mymovie > button:hover {
            border: 2px solid white;
        }
        
        
♬ hover를 따로 하나 더 빼서 마우스를 올리면 출력될 값을 작성

3.9 Shadow 적용

        .mypost {

            width: 500px;
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;

            box-shadow: 0px 0px 3px 0px gray;
        }
        
        
♬ box-shadow로 그림자 적용

4 TIP

4.1 마우스로 끌어서 코드 이동

4.2 뒤죽박죽 코드 정렬

- shift + alt + F로 정렬

5 Github에 배포하기

1) 가입 후 Create a new repository 클릭하여 생성

2) uploading an existing file 클릭 후 파일 업로드 (파일이 index.html이어야 함)

3) Commit changes 클릭

---↓ 다른 사람에게 보이기---

4) Setting - Pages 클릭

5) Branch 기본설정을 None에서 main으로 변경 후 Save

6) 배포가 완료되면 pages 페이지에서 내 사이트를 방문할 수 있음

7) 코드 수정

Code 클릭 - 내가 업로드한 파일 클릭 - 우측 연필모양 누르고 수정 - Commit changes

저작자표시 비영리 변경금지 (새창열림)

'MarkUp > HTML&CSS' 카테고리의 다른 글

[CSS] 이미지 상대경로 / 절대경로 (0)	2023.03.05
[HTML] 자주 쓰는 특수문자 (0)	2023.02.26
[CSS] 구글 웹폰트 / 파일 분리 / 부트스트랩 (0)	2023.02.22
[HTML/CSS] 기초 (0)	2023.02.20

현재글[HTML&CSS] 2주 학습 톺아보기 - 기본 정리

코딩왕국