CSS html 시작

한가연·2021년 7월 19일
0

궁금했던 CSS와 html을 시작했다. 생각보다 쉬었다 java보단 확실히. 뼈대인 html 위에 CSS로 꾸미는 맥락이 꽤 새로웠다. 전에 들었을땐 '뭐가 다르지?'란 생각을 했는데 강의 들어보니까 차이가 보이기 시작했다. 나쁘지 않은 시작이다!

What I learned:

1. Padding과 Margin의 차이점
Padding은 안쪽으로 여백을 줄 때 쓰는 태그고 Margin은 밖으로 여백을 줄 떄 쓰는 태그다.

/*안쪽으로 20px 여백 줌*/
padding: 20px;
/*centeralize*/
margin: auto;
/*시계방향 - 위, 오, 밑, 왼*/
margin: 0px auto 30px auto;

2. html 파일 안에서 CSS 사용 방법
head 태그 안에 style 이라는 태그를 만들고 CSS 코드를 style로 만들어진 공간 안에 작성한다.

<style>
    /*applies to all the tags*/
    * {
        font-family: 'Yeon Sung', cursive;
    }
    /*center everything*/
    .wrap {
        width: 500px;
        margin: auto;
    }
    .item-image {
        width: 500px;
        height: 350px;
        /*for image*/
        background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVJcI3ksEmv60dmrFymYf6tsbtaHLufJRkrA&usqp=CAU");
        background-size: cover;
        background-position: center;
        margin-bottom: 20px;
    }
    /*to centralize the button*/
    .btn-primary {
        margin: auto;
        /*autoing margin alone doesn't work so adding the following code*/
        display: block;
    }
</style>

건조한 html에다가 CSS를 입히면서 아쉬운 부분들이 채워지는게 흥미롭다.
다음은 javascript! 얼마나 java랑 비슷한지 보러 가야겠다!!!

profile
코딩하는 드라마러버

0개의 댓글