생활코딩 | WEB2 - CSS 를 통해 배운 CSS의 기본 개념을 정리해본다.
CSS 🤔
CSS는 HTML과 함께 웹을 구성하는 기본 프로그래밍 요소이다. HTML이 웹 문서의 뼈대라면 CSS는 웹 문서의 디자인 요소를 담당한다.
CSS를 사용함으로써 "중복"의 제거가 가능하고 디자인, 내용의 변경에 용이하며 반응형 디자인(Reponsive Design)이 가능하다.
CSS 적용방법
CSS를 사용하기 위해서는 코드의 어떤 부분에 CSS를 적용해야 하는지 알아야 한다.
HTML 문서에 CSS를 적용하기 위해 3가지 방법이 존재한다.
1. Style Tag
<head>
<style>
a {
color:black;
text-decoration: none
}
h1 {
font-size:60px;
text-align:center;
}
</style>
</head>HTML과 CSS가 한 파일에 있어 작업이 쉽고 간편하지만 CSS의 재활용이 용이하지 않다.
2. Style Property
<li><a href="2.html" style="color:red;">CSS</a></li>Style은 HTML의 속성으로, 그 안의 값은 CSS의 효과를 받는다. 필요한 디자인 속성을 직접 작성하기에 편리하지만 일관된 디자인 체계를 유지하는 데 좋지 않다.
3. Link 사용
<link href="main.css" rel="stylesheet">중복된 Style Tag를 가지고 있는 HTML 문서의 경우 수정이 용이하지 않기에 별도로 CSS 문서를 작성하고 해당 CSS를 HTML 문서에 불러와 사용한다.
CSS 기본문법
선택자(Selector)와 선언부(Declaration)으로 구성된다. Selector는 Style을 지정할 HTML 요소(Tag, ID, Class, etc)를 가리키며 Declaration은 CSS Property와 Value가 포함된다.
- 각 Declaration(
color:blue;)은 항상 세미콜론(;)으로 끝나며 중괄호({})로 묶인다. /* Comment */는 주석으로 사용한다.
Property, Selector 등에 대해 궁금하다면
CSS text size property와 같이 Googling하여 쉽게 찾아낼 수 있다.
CSS Selector
Type Selector
E { property:value;}
태그명이 E인 특정 태그를 선택한다.
Class Selector
.Class {property:value;}
주어진 값을 Class 속성값으로 가진 HTML 요소를 선택한다.
ID Selector
#id {property:value;}
Class가 아닌 id 속성을 사용하는 것을 제외하곤 Class Selector와 매우 유사하다.
ID 속성은 어떤 요소에 대해 유일한 특성을 정의하고 Class 속성은 어떤 분류 안에 포함된 요소의 특성을 정의하는 데 사용된다.
.saw {
color:gray;
}
#active {
color:red;
}이 경우 Id Selector의 우선순위가 Class Selector보다 높기에 Color는 Red가 된다.
왜 Tag, Class, Id Selector에서 Id가 가장 강한가? Tag는 좀 더 포괄적이고 Id는 구체적이기 때문이다. 코딩의 효율성을 위해서!
Box Model
HTML 문서의 각 요소를 CSS Box Model에 따라 사각형 박스로 표현한다. CSS는 박스의 크기, 위치, 속성(색,배경, 테두리 모양 등)을 결정한다.
하나의 박스는 네 영역으로 이루어지고 각 영역을 Content, Padding, Border, Margin이라 한다.
Block Levele Element와 Inline Element
<h1> 태그는 화면 전체를, <a> 태그는 Content 자체만 블록으로 사용한다.
이와 같이 웹 화면 전체를 사용하는 태그를 Block Level Element
Content 크기만큼 사용하는 태그를 Inline Element라고 한다.
일반적으로 Block Level Element는 다른 Element들을 포함할 수 있다. 따라서 Inline Element보다 더 큰 구조를 생성할 수 있다.
관련 Property
display:inline;Inline Element와 같이 자기 부피만큼 보여주고자 할 때display:none;숨기기 위해border:width style color;padding: 테두리와 Content의 간격margin: 테두리와 테두리의 간격width: 크기만큼 태그의 크기가 변경
Web 검사
웹 페이지의 검사에서 태그의 스타일, HTML 소스 등을 찾아볼 수 있다. 도구를 잘 이해하고 사용하는 것이 중요하다.
Grid Model
CSS Grid Model은 페이지를 여러 영역으로 나누고 크기와 위치, 문서 계층 구조의 관점에서 관계를 정의하는데 탁월하다.
<span>은 Inline Element, <div>는 Block Element이므로 <div>를 하나의 구역이라고 생각할 수 있다. 이러한 "구역"들을 배치하고, 나누고, 정렬할 경우 Grid Model을 이용한다.
** Flex Model은 한 방향 레이아웃 시스템이지만 Grid는 두 방향 레이아웃 시스템이다.
.container {
grid-template-columns: 200px 200px 500px;
/* grid-template-columns: 1fr 1fr 1fr */
/* grid-template-columns: repeat(3, 1fr) */
/* grid-template-columns: 200px 1fr */
/* grid-template-columns: 100px 200px auto */
grid-template-rows: 200px 200px 500px;
/* grid-template-rows: 1fr 1fr 1fr */
/* grid-template-rows: repeat(3, 1fr) */
/* grid-template-rows: 200px 1fr */
/* grid-template-rows: 100px 200px auto */
}grid-template-rows행의 배치grid-template-columns열의 배치: 1fr 1fr 1fr;Fraction으로, 숫자 비율대로 크기 나누기(1:1:1): 100px 2fr 1fr;100px만큼 고정하고 나머지 2:1:repeat(3, 1fr 4fr 2fr);1:4:2 나누기를 3번 반복:minmax(100px, auto);최소 100px, 최대 자동으로 늘어나게
미디어 쿼리(Media Query)
화면의 크기에 따라 웹 페이지의 요소들이 반응해서 동작하게 되는데, 이러한 반응형 디자인을 CSS를 통해 구현하는 개념이 미디어 쿼리이다.
@media media-type and (media-feature-rule) { /* CSS rules go here */ }
@media(max-width:800px){
div{
display:none;
}
}
/* 화면의 크기가 800px 이하일때 보여주지 않음 */