HTML로 작성하고자 하는 내용을 입력했다면 작성된 내용을 꾸며주는 역할이 필요합니다.
여기에 사용되는 것이 CSS라는 언어를 활용합니다.
CSS는 캐스케이딩 스타일 시트(Cascading Style Sheets)의 약자로 말그대로 '단계적인 스타일을 지정'하겠다는 뜻입니다.
CSS의 구조를 보면 다음과 같습니다.
See the Pen KKdBNrq by limqo (@limqo) on CodePen.
위를 보면 body, div 등 태그(tag)로 구성된 HTML과 CSS를 확인 할 수 있습니다.
CSS에서 body, div 부분을 '선택자(Selector)'라고 부릅니다. 스타일을 지정해줄 부분을 선택하는 것 입니다.
그리고 괄호({ }) 사이에는 입력할 스타일들을 적는 것입니다. 괄호 안에 background, font-size와 같은 부분은 '속성(Property)'라고 부르고 콜론(:) 뒤에 yellow, 10px를 '속성 값'이라고 합니다.
body의 background를 yellow로 지정하여 배경색이 노란색으로 지정한 것이고 div의 font-size를 지정하여 글자의 크기를 변경 한 것입니다.
그 밖에 속성중에는 이미지를 지정하고나 배치, 정렬등을 지정하거나 애니메이션 효과 등 다양한 기능들이 많이 있습니다.
CSS를 잘 하기 위해서는 선택자를 지정하는 방법과 어떠한 속성에 값을 입력하냐가 중요합니다.
저와 같이 Web개발자에 도전하시는 분들은 기초적인 HTML과 CSS를 공부하여 기초가 탄탄한 개발자가 되셨으면 좋겠습니다!!
* 본 글의 글쓴이는 IT스터디를 하며 작성하고 있습니다, 잘못된 지식과 정보가 포함 돼 있을 수 있습니다. 선배님, 후배님들께서 적극적인 피드백을 주시면 감사하겠습니다!
'Web > HTML+CSS' 카테고리의 다른 글
[HTML+CSS] div 자연스러운 테두리 효과(box-shadow) (0) | 2020.07.27 |
---|---|
[HTML+CSS] ul, li 태그로 트리구조 만들기 (2) | 2020.07.17 |
[HTML+CSS] 간단한 플로팅 배너 예제 (0) | 2020.07.16 |
[HTML] 절대 주소와 상대 주소 (0) | 2020.06.29 |
[HTML] HTML이란? (0) | 2020.05.08 |
댓글