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

1주차 5강의는 CSS 기초에 대해 배웠다.

CSS = 꾸미기 라고 배웠다. 뭔가를 꾸미는 것은 뭔가를 가리킬 수 있어야 꾸밀 수 있다.

내가 부를 수 있는 이름을 먼저 붙여주고 이름표를 붙이고 그 이름표를 어떻게 어떻게 하라고 명령한다.

class="mytitle"

이름표를 붙인다.

.mytitle {
  color: green;
}

그 다음에 이름표를 어떻게 어떻게 하라고 수식한다.

나중에 알아두면 좋을 것 같아서 일단 올려봄....

 

1주차 6강의는 자주 쓰이는 CSS 연습을 했다.

바깥 여백을 맞출때에는 margin: 태그를 쓰고

안쪽 여백을 맞출때에는 padding: 태그를 쓴다.

 background-color:green;

    width: 300px;
    height: 300px;

    color: white;

    text-align:center;

    background-image: url("사진 링크");
    background-size:cover;
    background-position: center;

    border-radius: 10px;

    padding-top: 40px;
}
.warp {
    width: 300px;
    margin:auto;

background-color: green; : 백그라운드 컬러를 녹색으로 바꾼다.

width: 300px; : 너비를 300px 이동

height: 300px; : 높이를 300px 이동

color: white;  컬러를 흰색으로 변경

text-align: center; : 줄을 가운데로 이동시킨다.

 

배경은 항상 세줄을 같이 쓴다. image, size, position

background-image: url("사진 링크"); : 백그라운드에 사진을 첨부한다.

background-size: cover; :  백그라운드에 사진을 덮는다(?? 이건 잘 모르겠다..)

background-position: center; : 사진을 가운데로 맞춰 정렬 해 주는 것 같다.

 

border- radius: 10px; : 귀퉁이를 만져준다.

padding-top: 40px; : 안쪽 여백을 40px 위로 올린다.

width: 300px: 너비를 300px 이동

margin:auto; : 바깥 여백을 상하좌우 최대로 밀어낸다.

 

1주차 6강의가 끝났다.. 솔직히 외울 것도 많아보이고 쉽진 않다.. 얼른 적응이 되야할텐데