가수면

프론트엔드 복습 (1) 본문

웹 개발/웹 개발

프론트엔드 복습 (1)

니비앙 2022. 10. 21. 20:33

드디어 코로나의 마수로부터 어느 정도 해방되어 살만해졌다.

혼미했었던 정신을 털어내고 복습하는 시간을 갖도록 해보자.

 

 

html 기본 양식

<!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*

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

보완해야 할 점

다시 해보니 모양은 제대로 나왔지만, 코드가 위 코드와는 다르게 조금 미숙한 구성이었다. 

 

 

*연습 2*

    <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;
        }

        .all {
            margin: 10px auto;
            width: 300px;
        }
    </style>
</head>

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

보완해야 할 점

 

· 글씨에 흰색을 주기 위해 아래와 같이 class를 mytitle, word로 나눠 잡았었지만, 그럴 필요 없이 그냥 mytitle에다가 흰색을 주면 되는 것이었다...

<div class="mytitle">
    <div class="word">
        <h1>로그인 페이지</h1>
        <h5>아이디, 비밀번호를 입력해주세요</h5>
    </div>
</div>

 

· 로그인 페이지 틀을 가운데로 옮기기 위해 <body> 자체에 class="all"을 지정해줬었다.  그러지 말고 전체를 묶는 <div>를 새로 만들어주고 class를 주자.

· 그렇게 만든 <div class="all">을 스타일 margin을 이용해 가운데로 옮기려면 width를 따로 지정해줘야 한다. 이유는 아래 그림으로 이해할 수 있음

 

 

*폰트 적용*

<!--    head 태그에-->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Noto Serif KR', serif;
        }

* = 모든 태그에 먹이겠다.

 

 

*CSS파일 분리*

# style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

 

 

*div 내 하위 태그 지정*

자꾸 까먹고 class 줌.

.mytitle > button {
}

 

 

*경계선 관련*

border-radius: 50px;(모서리)
border: 1px solid(실선) white;

 

 

*버튼에 마우스 올리면*

.mytitle > button:hover {
    border: 2px solid white;
}

 

 

*박스 만들기*

box-shadow: 0px 0px 3px 0px gray;

 

 

*모바일 화면 처리*

.mypost {
    max-width: 500px;
    width: 95%;

 

 

*코딩 접근법*

//목표. jhchoi1182@gmail.com에서 'gmail'만 띄우기!

let myemail = 'jhchoi1182@gmail.com'

//.split명령어를 쓴다.
> myemail.split('@')
< (2) ['starta', 'gmail.com']

//아하. 이렇게 뜨네. 나는 뒤에 것이 필요하다.

> myemail.split('@')[1]
< 'gmail.com'

//com은 필요 없으니까 한번 더 쪼개자.

myemail.split('@')[1].split('.')
(2) ['gmail', 'com']
myemail.split('@')[1].split('.')[0]
'gmail'

 

 

 

제대로 했는데 뭐가 문제인지 모르겠다면 오타와 div 구분을 체크하자.

'웹 개발 > 웹 개발' 카테고리의 다른 글

JavaScript 기초 문법  (0) 2022.10.25
Flask 복습  (0) 2022.10.24
프론트엔드 복습 (2)  (0) 2022.10.22
프론트 엔드 (Javascript, JQuery, Ajax)  (0) 2022.10.18
프론트 엔드 (HTML, CSS, Javascript 등 맛보기)  (0) 2022.10.18
'웹 개발/웹 개발' Related Articles more
Comments