디자인에 최적화된 새로운 언어이다.
<!-- " " -->
이 기호 사이에 있는 컨텐츠는 표시하지 않게하는 태그이다.
<style> </style> 이 태그 안에 있는 문법은 css 언어를 해석해서 처리하게 하는 의미이다.
디자인에 관련된 코드는 style 태그 안에 갇혀있다.
<style>
a {
color:red;
{
</style>
여기서 a는 이 웹페이지에 있는 모든 <a> 태그에 대해서를 의미한다.
즉 <a>태그에 있는 내용들을 red,빨간색으로 표시하라는 의미이다.
장점 : 한번에 일괄적으로 효율있게 색상을 변경할 수 있다.
의문: a를 쓰지 않으면 글 전체가 red색상으로 변할까?
답 : 변하지 않는다. 속성만 있어서는 이 효과를 누구에게 지정할지 설명할 수 없기 때문.
----------------------------------------------------------------------------------------------------------------
여기서 이 효과를 누구에게 주고싶은지 선택한다는 의미에서
a{
}
를 선택자(selector) 라고 부른다.
color:red;를
선택자에게 지정될 효과(declaration) 라고 부른다.
color는 속성(property) 라고 부른다.
style 태그를 직접 사용하여 효과를 주고싶을 경우에는 선택자를 사용할 필요가 없다.
웹페이지 안에 css를 삽입하는 2가지 방법
1. style 태그를 쓴다
2. style 속성을 쓴다.
text-decoration: none; 밑줄을 없애고 싶을 때 쓰는 속성.
text-decoration:underline 밑줄을 그으고 싶을 때 쓰는 속성.
;(세미콜론)이 끝에 있는 이유는 시작되고 끝나는 것을 구분하기 위해 존재한다.
----------------------------------------------------------------------------------------------------------------
font-size:" "px; : 폰트의 크기 조절하는 속성
text-align: " "; : 텍스트의 위치를 정렬하는 속성
class=" " 하나로 묶을 수 있는 태그
id=" " 단 하나만 지정할 수 있는 선택자 태그
. class에 지정한 선택자인 태그를 뜻함
# id선택자를 뜻함
id선택자 > class선택자 > 태그선택자
순으로 우선순위가 높다
id선택자는 중복돼서는 안되기 때문에 한번만 사용 가능하기 때문에 우선순위가 가장 높다
----------------------------------------------------------------------------------------------------------------
박스모델
화면 전체를 쓰는 것을 block level element
자기 크기만 갖는 것을 inline element
width : 폭
height : 높이
pading : 콘텐츠와 테두리 사이
margin : 테두리와 테두리 사이
dorder : 테두리
웹 페이지에서 검사를 눌러서 개발자 도구로 좀 더 견고한 박스 모델을 만들 수 있다...!
----------------------------------------------------------------------------------------------------------------
div: 아무런 의미가 없고 디자인의 용도로만 쓰는 태그, block level element이다.
span:아무런 의미가 없고 디자인의 용도로만 쓰는 태그, inline element이다.
grid는 수평선과 수직선으로 이루어져 있으면 디자인 요소를 정렬할 때 용의하고 일관성을 높여준다
grid-template-rows : 가로, 행의 크기
grid-template-columns : 세로, 열의 크기
----------------------------------------------------------------------------------------------------------------
미디어 쿼리
반응형 디자인
@media()
화면의 크기가 800px보다 클때
@media(min-width 800px)
화면의 크기가 800px보다 작을때
@media(max-width 800px)
css 파일에 css 코드를 만들어 놓고
<link> 태그를 사용하여 일괄적으로 관리, 수정하기에 편이하다.
ex) <link href="style.css">