2021.07.16 CSS 공부
HTML 공부에 이어 CSS를 공부했다.
HTML과 한 세트인 듯 하다. 블로그를 만들면서 .woff 폰트 적용을 위해 /assets/css/main.scss 파일을 수정했던 기억이 나는데, 아무것도 모르고 구글만 보고 따라했던 기억이 난다.
마찬가지로 생활코딩을 따라가며 공부했다.
1. CSS 란?
Cascading Style Sheets의 앞자를 따서 CSS이다. Style Sheets라는 이름에서 알 수 있다시피 HTML에서 style을 정의하는 언어이다.
HTML만을 활용해서도 Font나 Layout 등을 디자인할 수 있지만, 더 효율적으로 디자인을 관리하기 위해 만들어진 언어인 듯 하다.
CSS만의 몇 가지 특징이 있다.
- HTML에서 전역 설정을 위해서는 <style> </style>을 활용한다.
- HTML에서 지역 설정을 위해서는
속성을 활용한다. - 1과 같이 활용할 경우 ‘;’를 붙여줘야 한다.
- ’,’를 활용하여 여러 개의 Tag를 활용할 수 있다.
- <link>를 통해 .css 파일로 미리 정의하여 저장해 둔 스타일을 활용할 수 있다.
다른 언어들과 마찬가지로, 전역 설정이 우선이고 지역 설정이 다음 순서이다.
2. CSS Tag의 예시
CSS만의 Tag들이 있고, 몇 가지 예시로는 다음과 같다.
- color: 로 색상을 설정할 수 있다.
- font-size:% 로 폰트 크기를 설정할 수 있다. %, px 등 여러 단위를 사용할 수 있다.
- text-allign: center, left, right 로 글을 정렬할 수 있다.
3. CSS의 class와 id
1. class
class를 활용하여 여러 변수를 묶을 수 있다. 여러 개의 class가 동시에 있을 수도 있다.
ex) class=”a b” , class=”“
class를 활용할 때의 선택자는 ‘.’을 활용한다. ex) class=”asd”, <style>.asd</style>
2. id
id를 활용하여 class보다 높은 우선순위를 줄 수 있다. 다만, id는 이름이 중복될 수 없다.
id를 활용할 때의 선택자는 ‘~#’을 활용한다. id > class > tag 의 우선순위를 갖는다.
4. Block-level Element와 In-line Element
CSS는 Block 단위와 Line 단위로 적용할 수 있다. 각각 다음과 같다.
1. Block-level Element
- 화면 전체를 차지한다. 아예 전체는 아니고, 큼지막한 범위만큼을 차지한다.
Block 지정을 위한 Tag로는 <div> </div> 가 있다. Block-level Element로, 해당 Block을 묶어주기 위한 디자인 용도의 Tag로 활용된다.
2. In-line Element
- 해당 라인 만큼의 공간을 차지한다. 자신의 크기만큼 차지한다.
Line 지정을 위한 Tag로는 <span> </span> 이 있다. <div> 와 비슷한 기능이지만 In-line Element이다.
두 Element는 CSS의 Box Model로 불린다. display:inline, display:block 으로 지정해줄 수 있다.
padding을 통해서 여백을 줄 수 있고, margin을 통해 블럭과 블럭 사이의 간격을 정의해줄 수 있다.
5. 반응형 디자인
위와 같이 <div>와 <span>을 활용하여 반응형 디자인을 만들 수 있다.
반응형 디자인이란 어떤 디바이스에서 보는지에 따라 다르게 디자인하는 것을 의미하는데, 화면이 큰 모니터에선 좌우로 넓게, 화면이 작은 스마트폰 등에서는 압축하여 가시성이 좋게 보여주는 것을 예로 들 수 있겠다.
@media 태그를 활용하여 정의.
mid-width:800, max-width:~~ 등으로 활용할 수 있다.
max-width:500 이면 “사용자가 보고 있는 가로 길이가 500 이하일 시 해당 CSS를 따른다” 라는 의미이다.
이 블로그도 반응형 디자인이 정의되어 있는데, 화면을 일정 크기 이상으로 줄이면 좌측의 저자 프로필과 우측의 On This Page가 최상단으로 올라가게 된다. 어짜피 웹 페이지는 가시성이 우선되어야 하므로, 중요한 요소인 듯 하다. 모바일 웹 과는 다른 개념인 듯
6. 배운 점
CSS는 HTML과 함께 활용하며 웹 디자인을 하는 언어이며, Android Studio와 Java의 Layout등을 설정할 때에도 쓰인다. 또한 디자인을 구성하는 언어인 만큼, 미적인 감각도 필요해 보인다. 이전에 애플리케이션을 만들면서 내용도 몰랐지만 본능적으로 Layout을 설정해 본 경험이 있는데, 진작에 배울껄 하는 생각도 든다..하하
후에 블로그 공사할 일이 생기면 /assets/css/ 를 주의깊게 봐야겠다. 내 블로그를 꾸미는게 CSS를 써먹기 가장 좋은 기회일 것 같다.
다음은 Javascript를 배워볼 생각이다. Java랑 이름이 비슷하니까 어렵진 않겠지…?
댓글남기기