3. CSS
- HTML이 정보를 전달하는 목적으로 만들어진 언어라면, CSS는 글꼴이나 크기, 색상, 배경 등 디자인의 목적으로 만들어졌다.
- style : HTML의 문법이면서, 해당 태그 안쪽에 있는 내용은 css이므로 그에 맞는 문법에 맞게 처리해야 한다는 의미를 지닌다.
<style>
a {
color: red; //이 문장이 CSS이다.
}
</style>
or
<a href="1.html" style="color:red">CSS</a> //sytle=""안의 내용이 CSS이다.CSS 문법
- 선택자의 종류
- 타입 선택자 : a, ol, body 등의 엘리먼트를 선택자로 한다.
- 클래스 선택자 : 특정 엘리먼트에만 스타일을 적용할 수 있다. 복수의 요소를 한 클래스로 지정할 수 있다.
- ID 선택자 : 특정 엘리먼트에만 스타일을 적용할 수 있다. 한 요소만 지정할 수 있다.
- 우선순위 : ID > class > 타입, 같은 종류라면 마지막에 등장하는 선택자의 우선순위가 높다.
박스 모델
- HTML element가 웹페이지에서 차지하는 공간을 정의한 모델이다.
- 여러 속성들
- border-width: value; : 테두리의 두께 지정
- border-color: value; : 테두리의 색상 지정
- border-style: solid; : 테두리 단선으로 지정
- border: width, color, solid로 한번에 작성 가능
- display: block/inline; : 화면 전체를 차지, 자기 자신의 콘텐츠 크기만 차지
- margin: value; : border 바깥의 margin 크기 지정
- padding : value; : border 안쪽의 padding 크기 지정
- ','를 이용해서 한번에 여러 선택자를 지정할 수 있다.
<sytle> h1, a { border = 1px red solid; } </style>
그리드
- 그리드를 사용하면 사진과 같이 두개의 문단을 양옆으로 나눌 수 있다.
- 해당 문단을 div(블록 레벨 엘리먼트)나 span(인라인 엘리먼트)로 묶어주고 css를 적용하면 된다.
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid {
border: 5px solid pink;
display: grid;
grid-template-columns: 1fr 1fr;
}
div {
border: 5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<div>Navigation</div>
<div>choi jun young</div>
</div>
</body>- grid-template-columns에서 px로 하면 고정값, fr로 하면 창 크기에 비례한다.
- can I Use에서 여러 CSS나 HTML, JavaScrip 기술들이 웹브라우저에서 얼마나 그 기술을 지원하는지 확인 할 수 있다.
미디어 쿼리
- 반응형 웹 : 화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 최적화도니 모양으로 바뀌는 웹이다.
- css의 미디어 쿼리 기능으로 반응형 웹을 구현할 수 있다.
<style>
@media(min-width: 800px) { // 웹 너비가 800px 이상일 시 글자 사라짐.
div {
display: none;
}
}
</style>재사용
- css의 코드를 따로 .css파일로 따로 저장한 뒤 css 코드가 있던 html파일에서 link를 이용해 css 코드를 사용할 수 있다.
- css 파일 하나만 변경하면 수많은 html을 변화시킬 수 있다.
- 캐싱 : 웹에서 한번 css파일을 저장했다면 해당 파일이 변경되기 전까지는 저장해두었다가 다음에 요청하면 저장된 결과를 바로 가져올 수 있다.
do for me