웹개발 종합반 1주차-(2)

1.HTML, CSS 기본 내용

  1) HTML과 CSS의 개념 

      HTML은 뼈대, CSS는 꾸미기!

      HTML은 구역과 텍스트를 나타내는 코드로, CSS는 잡은 구역을 꾸며주는 것으로 생각합니다.

      HTML 내 style 속성으로 꾸미기 를 할 수 있지만, 긴 세월동안 이것을 한데 모아 볼 수 있는 CSS 파일이 탄생하게 되었       습니다.

      HTML 코드 내에 CSS 파일을 불 러와서 적용합니다. 또한 CSS를 잘 사용할 줄 아는 것과, '예쁘게' 만드는 것은 다른         영역이기 때문에(붓을 잡을 줄 아는 것과 그림을 잘 그릴 줄 아는 것의 차이), 많은 경우 웹디자이너나 퍼블리셔에게             의존하게 됩니다.

 

 2) HTML 기초

     TML은 크게 head와 body로 구성된답니다.

     *head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다.

     *head 안에 들어가는 대표적인 요소들: meta, script, link, title 등

      페이지의 속성을 정의하거나, 필요한 스크립트들을 부릅니다. 즉, 눈에 안 보이는 필요한 것들을 담는 것.

      나중에 body 작업을 하면서 필요한 정보들을 넣어보겠습니다.

      body 안에 들어가는 대표적인 요소들! 

2. 간단한 로그인 페이지 만들어보기

Quiz 로그인 페이지 만들어보기!! 이런 식으로~

정답~

 

3.CSS 기초

1) HTML 부모-자식 구조 살펴보기

html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요합니다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물 도 모두 영향을 받지요! 빨간색 div 안에, 초록색/파란색 div가 들어있습니다. 아래와 같은 상황에서 빨간색 div를 가운데로 옮기면, 내용물인 초록/파란 div도 모두 함께 이동하겠죠! 즉, 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리입니다. 같은 원리로, 초록 div의 글씨색을 바꾸면, 나는버튼1의 글씨색도 바뀐답니다!

 

2) CSS 기초 CSS는 어떻게 사용하나요? 

*배경관련

background-color

background-image

background-size

 

*사이즈

width height

 

*폰트

font-size

font-weight

font-famliy color

 

*간격

margin

padding

 

3)자주 쓰이는 CSS 연습하기: h1, h5, background-image, background-size, background--position color, width,

                                                height, border-radius, margin, padding

margin과 padding ( → 헷갈리지 말기!)

- margin은 바깥 여백을, padding은 내 안쪽 여백을

- div에 색깔을 넣고, 직접 사용해서 차이를 비교해보세요!

 

-구글 웹  폰트 

https://fonts.google.com/?subset=korean