코딩 배우기

코딩배우기 여섯번째_웹싸이트 만들어보자(css)

배수의 진 2020. 8. 19. 07:18

1. CSS

 

CSS는 무었인가? 찾아보니 Cascading Style Sheet(폭포수 스타일링 시트) 로 되어있다.

html 등의 마크업언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 언어라 하네요.
CSS의 C가 Cascading의 약자인데, 이는 상위 요소의 스타일 속성을 자손 요소들에게 상속시켜주는 모습이 DOM 트리구조에서 마치 폭포수처럼 내려가는 모습을 닮았기 때문이다.

 

 

 

2. 10초만에 배우는 HTML

 

머리가 안 좋아서 반복 합니다.

<div class="box">박스</div>

<a herf="google.com">구글</a>

 

 

1)<div></div>는 태그라고 하고 항상 열림/닫힘 한 쌍이 있슴

2) class="box"은 속성이라고 함. 이 class 속성을 이용해서 나중에 css로 스타일링 할 수 있음

3) 합쳐서 "엘레먼트"라고 부름

 

 

3. 10초만에 배우는 CSS

 

.box{

width:100px;

height:100px;

border:1px solid black;

}

 

 

 

 

 

1) CSS는 HTML엘레먼트의 스타일링을 하기위해 사용

2) .box는 class="box" 속성을 가진 엘레먼트를 스탕리하고 싶다고 명시하는 것

3) width, height, border같은 규칙을 써서 엘레먼트의 모양 및 위치를 바꿈

(가로 길이)(세로길이)(테두리)

 

 

4. nav bar부터 먼저한다.

 

css 제일 쉽게 하는 법은 html에 그대로 style를 하면 줄이 생긴다.

 

<style>

.nav {

height: 70px;

border-bottom: 1px solid black;

}

style>

 

 

 

5. 메뉴들이 세로로 있으니 이것을 고친다. flex를 쓴다.

 

displayh: flex;

 

대박 진짜 가로로 바뀌었네요!

 

 

6. 근데 위에 부터 있으니 중간으로 넣을려면 정렬을 한다.

 

align-itme: center;

 

와 중간으로 이동이 되었네요! 신기함.

 

 

7. 메뉴를 오른쪽으로 보낸다.

 

html element를 하나 더 만든다.

.nav-rigtht-items {

display: flex;

margin-left: auto;

}

 

 

style>

 

이 안에다 이걸 가둘게요 그러면 메뉴가 오른쪽으로 이동된다.

 

8. 여백을 준다

 

.nav-item[

margin-left:10px;

]

 

 

9. title과 subtitle을 만들어보자!

 

글자크기 키우고 굵은체 , 얇은 글씨체로

 

 

.title {

 font-size: 60px

font-weight: bold;

}

 

.subtitle {

font-size: 40px

font-weight: 300;

}

 

title, subtitle글씨 크기가 커졌다!

 

10. 정렬을 가운데 정렬하려면

 

text-align: center;

 

 

11. 중간으로 보낼려면

 

main element에 style을 줘서

 

'main{

 width: 800px;

 margin: 0 auto;

}

 

 

12. 정확히 font size모르니 개발자도구가서 정확한 font size를 가져와 수정한다.

 

 

title은

 

3.5 rem;

 

subtitle은

 

1.25rem;

 

 

 

13. title위에 여백이 있으니 여백을 준다

 

 

 

14. price-item을 만든다. 테두리를 준다

 

 

 

 

15. 세로로 된것을 가로로 정렬한다.  flex를 써서 정렬한다.

 

.prices {

   display: flex;

}

 

 

16. 중간에 위치해야하므로 main에 넣어버린다.

 

아랫것을 옮긴다.

 

<div class="prices">

<div class="price-item">

프라이스1

div>

<div class="price-item">

프라이스2

div>

<div class="price-item">

프라이스3

div>

div>

 

 

 

17. 여백을 주고 round를 주자

 

여백을 주고

margin: 20px;

 

round는

 

border-radius: 4px;

 

준다

 

 

글자도 바꾼다

 

 

 

18. 버튼을 만든다