[1주차] 스파르타코딩클럽 웹개발 종합반 1주차 3 (1-9까지)

1-7 폰트,주석,파일분리에 대해 배웠다.

구글 폰트에 Jua라는 폰트를 예제로 추가해보면, 아래와 같은 코드를 복사하면 된다.

<!-- HTML에 이 부분을 추가하고 -->
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">

/* CSS에 이 부분을 추가하면 완성! */
* {
font-family: 'Jua', sans-serif;
}

주석은 Ctrl+/로 주석 처리 할 수 있으며, 컴퓨터한테는 안보이지만 사람한테는 보인다.

css가 너무 길어질때 파일 분리를 할 수 있다.

<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->

<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

 

1-8 부트스트랩, 예쁜 css 모음집에 대해 배웠다.

부트스트랩이란? 예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많다.)

https://getbootstrap.com/docs/5.2/getting-started/introduction/

Get started with Bootstrap

해당 사이트에서 원하는 것들을 복사 붙여넣기 하여 예쁘게 꾸밀 수 있다.

 

1-9 CSS 꿀팁 한번 더 배우기에 대해 배웠다.

<div class="mytitle">
    <h1>내 생애 최고의 영화들</h1>
    <button>영화 기록하기</button>

css를 꾸며주기 위해 class="mytitle" 태그를 추가 해 주었고,

제목을 짓기 위해 <h1> 태그와 <button> 태그를 이용하여 버튼을 추가했다.

<style>
            * {
    font-family: 'Gowun Dodum', sans-serif;
    }
    .mytitle {
        background-color: green;
        width: 100%;
        height: 250px;

        background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
        background-position: center;
        background-size: cover;

        color: white;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;


    }
    .mytitle > button {
        width: 200px;
        height: 50px;

        background-color: transparent;
        color: white;

        border-radius: 50px;

        border: 1px solid white;

        margin-top: 10px;
    }
    .mytitle > button:hover {
        border: 2px solid white;
    }
</style>

상어이미지를 넣고, 상어 이미지를 어둡게 만들고, 위치를 중간으로 옮기고, 폰트를 바꾸고, 버튼을 투명화 했으며,

테두리를 하얗게 만들었으며, 마우스에 버튼을 갖다대었을때 더 찐하게 보여주는 효과를 적용했다.

완성본이다. 솔직히 너무 어렵다. 강사님이 background image, position,size 이 세개는 무조건 들어간다고 하였고

이번에 새로 배운 display: flex; 도 해당 태그가 들어가면

flex-direction: column; , justify-content: center; , align-items: center: 총 4개의 태그가 무조건 들어간다고 했다.

(center, 아니면 row)

 

아직까진 너무 어렵다. 강사님이 말해 주신 것 처럼 많이 참고 가능한 사이트도 있고 구글링 열심히 하면 

나도 이쁜 사이트 만들 수 있겠지..?