728x90
스파르타코딩클럽에서 개발을 공부하고 있습니다.
1주차에서 배우는 내용들을 정리해보고 있습니다 :)
우선 개발 입문하면서 가장 궁금한 내용은 HTML은 뭐고 CSS는 뭘까 인데요. 스파르타코딩클럽에서는 아래와 같이 정리해줍니다.
HTML은 뼈대, CSS는 꾸미기!
HTML은 구역과 텍스트를 나타내는 코드로, CSS는 잡은 구역을 꾸며주는 것으로 생각합니다. HTML 내 style 속성으로 꾸미기를 할 수 있지만, 긴 세월동안 이것을 한데 모아 볼 수 있는 CSS 파일이 탄생하게 되었습니다. HTML 코드 내에 CSS 파일을 불러와서 적용합니다.
또한 CSS를 잘 사용할 줄 아는 것과, '예쁘게' 만드는 것은 다른 영역이기 때문에(붓을 잡을 줄 아는 것과 그림을 잘 그릴 줄 아는 것의 차이), 많은 경우 웹디자이너나 퍼블리셔에게 의존하게 됩니다.
HTML의 요소들
HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다.
head 안에 들어가는 대표적인 요소들: meta, script, link, title 등 페이지의 속성을 정의하거나, 필요한 스크립트들을 부릅니다. 즉, 눈에 안 보이는 필요한 것들을 담는 것.
CSS의 요소들
html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요합니다.
나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받지요!
빨간색 div 안에, 초록색/파란색 div가 들어있습니다. 아래와 같은 상황에서 빨간색 div를 가운데로 옮기면, 내용물인 초록/파란 div도 모두 함께 이동하겠죠! 즉, 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리입니다. 같은 원리로, 초록 div의 글씨색을 바꾸면, 나는버튼1의 글씨색도 바뀐답니다!
CSS 기초
mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭! 기억하세요!
<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성합니다. 아래 코드를 통해 간단한 사용 방법을 알아봅니다.
모든 CSS들을 다 알 수는 없겠죠~~ 오늘 쓰는 것만 알아도 굿! 나머지는 검색해서 쓰시면 된답니다~!
사이즈 width height
간격 margin padding
폰트 font-size / font-weight / font-famliy color
배경관련 background-color / background-image / background-size
728x90
반응형