[생활코딩] 2일차_CSS

CSS(스타일 시트 언어)

1. 기본 문법

• <style></style>: 선택자(Selector)를 사용하여 효과를 적용

<style>
            a{
                color:black;
                text-decoration: none;
            }
        </style>

🔔Selector=a / Property=color, text-decoration / Value=black, none

• 각 태그의 속성에 style을 추가하여 효과 적용

<a href="2.html" style="color: blue;text-decoration:underline">CSS</a>

 

2. 속성

글씨 크기: font-size / 정렬: text-align,,,

사용할때마다 그에 맞는 검색과 에디터의 도움을 이용하는것이 좋음

 

3. 선택자

ex) 기본 a 태그는 black, 방문한적이 있는 페이지(html, css)는 gray, 방문중인 페이지는 red로 표시하기

① html, css 를 그룹으로 묶어서 사용: class

<li><a href="html.html"class="saw">HTML</a></li>
<li><a href="css.html"class="saw">CSS</a></li>

② class 선택자는 .[클래스이름] 로 사용

.saw{
                color:gray;
            }

③ 클래스는 여러개 선언 가능: CSS에 클래스 saw, active 두개 지정

<li><a href="css.html"class="saw active">CSS</a></li>

④ 우선순위를 높이기 위해 active를 id로 지정

<li><a href="css.html"class="saw"id="active">CSS</a></li>

⑤ id 선택자는 #[id]

 #active{
                color: red;
            }

🔔우선순위: id > class > tag / 같은 우선순위라면 가장 마지막에 선언된 선택자가 가장 높은 우선순위

                🔎id 는 보통 한번만 사용하도록 권장하기떄문에 우선순위가 높음

 

4. 박스 모델

🔔각 태그가 차지하는 곳을 알고 싶을때는 border 속성으로 확인 가능

속성 border : 테두리 표시/ 한번에 여러 속성값 입력 가능 / width, color, style, padding, margin,display,,,

• padding: 박스의 안쪽 여백
• margin:  박스의 바깥쪽 여백

• display: 요소를 어떻게 표시할지 선택/ block, inline, none, inline-block(박스가 inline처럼 옆으로)

            🔔visibility: 요소를 보일지 말지 결정

 

5. 그리드

• 의미는 없이 디자인을 위한 태그 : <div>, <span>

<div>: 블록 / <span>: 인라인

• 그리드를 위한 속성 정하기

display:grid;
grid-template-columns: 1fr 1fr

 🔔1fr 1fr일 경우 1:1 비율로 고정되어 자동으로 크기가 바뀌며 그리드가 나누어짐(크기 고정도 가능)

            🔎fr: 분수 fraction을 뜻하는 단위로, 유연한 크기를 갖는 단위이다.

 

6. 미디어 쿼리

반응형웹: 화면의 크기에 따라 각 요소가 최적화되는 웹, css의 미디어 쿼리를 이용하여 구현 가능

@media(조건){ 스타일 }: max-width /min-width 조건을 이용하여 설정

 

7. css코드의 재사용

.css 파일을 만들고 html 문서에 <link>를 이용하여 사용하면 여러 페이지에 같은 서식 적용 가능

<link rel="stylesheet" href="style.css">