일일 개발일지 html, css

10/18일 Html이 Css와 만나다

YOOYOUNGJAE 2022. 10. 18. 14:14
728x90

오늘은 사전Ot가 있던날이다 

9시에서 약한시간10분정도의 ot를 가지고

팀배정을받았다 명단에는 6명인데 한분은 시작하기전에

하차하신다고한다 그래서 5명으로 한팀이 만들어졋다

아직은 첫만남이라 서먹서먹하지만

시간이 조금지나면 어색해하지않고 지낼수있겠지...

 

말이길어졋다 오늘 배운 내용을 써보겠다

먼저 어제 만들어 놓은 로그인 뼈대를 가지고 실습을 진행했다

 

html

<!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">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@700&display=swap" rel="stylesheet">
    <title>로그인창</title>
</head>

<body>
    <div class="wrap">
        <div class="mytittle">
            <h1>로그인하기</h1>
            <h5>아이디, 비밀번호를 입력해주세요</h5>
        </div>

        <p>
            ID:<input></put>
        </p>

        <p>
            pw:<input></put>
        </p>


        <button class="btn">로기안하기</button>
    </div>

</body>

</html>

html은 어제의 내용에서 변동된것이없으니 넘어가겠다

 

css

* {
    font-family: 'Nanum Myeongjo', serif;
}

.mytittle {
    width: 300px;
    height: 200px;
    color: white;
    text-align: center;
    background-image: url(https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    padding-top: 40px;
}

.btn {
    margin: 20px 50px;
}

.wrap {
    width: 300px;
    margin: auto;
}

오늘부터 css를 시작했는데 여러가지를 한번에 알려주었다 

강사님은 이렇게알려드릴테니 끌어다쓰시면서 익히세요라고는했지만

완벽히 이해를하지못한다면 나중에 쓰려해도 어떤게어떤건지모르기에

한가지한가지 되집어보며 이해해보자

 

먼저 css를 사용학에앞서 html에서 class로 지정해주었던 이름을기억해보자

전체적으로 wrap 이라는 class로 감쌋고

그안에 mytittle, btn 이렇게 두가지 class가 존재한다

 

css에서각 class에 적용할때는 . (콤마) 뒤에 class명을 붙인다

그러고 중괄호{} 를 열어주면 적용이된다

안쪽에 사용된 css는 다음과같다

 

width : 가로길이

height:  세로길이

color: 색상

text-align: 문자의정렬

background-image: url()  : 배경으로지정할 이미지파일이나 주소를

                                              url안에 넣어주면 화면제일뒤쪽으로 배경이깔린다

                                              background-color와 동일한위치

background-size: cover :  앞서 지정했던 가로 세로길이를 따라가기위해서는

                                             cover로지정해준다

background-position:center : 배경으로깔린 백그라운드를 어디에 둘것인가?

                                                   왼쪽이면 left  오른쪽이면 right 로 지정해주자

                                                   가운대는 center로 지정

 

위에보이는 백그라운드 3총사는 항상같이다닌다라고 알고만있자

 

border-radius: 90도로 꺽이는 모서리를 둥글게깍아준다 px단위로도줄수있고 %단위도줄수있다

padding , margin은 그림으로 첨부하겠다

border는 태두리를뜻한다

마지막으로 * 태그다

게임으로치면 전체월드에 공지를 쓰는느낌이라고 보면된다

개별적으로 설정된값이아니기에 앞에 콤마 <.>은 붙이지않는다

 

완성된 화면을 살펴보자

어떤가 금방이라도 어디 불법도박사이트같은 페이지가만들어지지않았는가

다음에만드는건 내가재미있게본 영화들을담는 사이트인거같다 그럼 다음글에서

실습을해보자 

 

ps : 버튼에 오타가있지만 고치지는않는다 저걸고치려면 글을다시써야하기때문이다.. 다음강의로넘어가자.

728x90