WEB2 CSS
CSS 이전
<font> 태그를 사용해 글씨에 색깔을 입힐 수 있다.
CSS 이후
더 다양하게 디자인할 수 있도록 개발됨. <style> 태그 내부에 CSS로 작성해서 사용한다.
🍯tip! HTML 내부에서 주석을 사용하고 싶은 경우 <!-- 주석 내용 블라블라 -->
기본 문법
CSS를 사용하는 방법은 크게 두 가지가 있다.
- 태그의 style 속성으로 작성하는 방법
- <style> 태그 내부에 작성하는 방법
CSS를 작성하는 큰 틀은 선택자(Selector)와 선언(Declaration)이다. 선언 부분은 속성(property)과 값(value)로 이루어져 있다. 선택자는 다양한 방식으로 태그에 접근할 수 있도록 되어있다. MDN이나 W3C를 참고해서 공부해 보고, 일반적으로 사용되는 선택자는 태그명, *(전체), .클래스명, #아이디명 네 종류가 자주 사용된다.
Selector {
declaration부분
property : value;
}
CSS에서 또 중요한 것은 우선 순위라고 할 수 있는데, 점점 디테일하게 들어갈수록 그리고 아래에 작성될수록 우선순위가 높다고 생각하면 편하다. 앞에서 말한 일반적인 선택자의 경우 태그명 < .클래스명 < #아이디명 순으로 적용된다. 자세한 내용은 아래 다른 글들을 참고해 보자.
MDN - Specificity, Zerocho - CSS 적용순서, Inpa Dev - CSS 속성 상속 개념 & 적용 우선순위
더 보충할 부분들도 많지만 내 글도 있다.
🍯tip! px은 가장 많이 사용되는 단위로
박스모델
박스모델은 CSS에서 display: block에 적용되는 부분이다. 그림으로 보고 싶다면 MDN 사이트를 참고하자.
내부 구성 요소
- content : 기본적인 내용이 들어가는 부분. width로 크기를 설정할 수 있다.
- padding : content와 border 사이의 공간을 설정하는 곳으로 내부 여백이라고 생각하면 편하다
- border : border는 말 그대로 해당하는 박스의 테두리를 의미한다.
- margin : padding이 내부 여백이었다면, margin은 외부 여백으로 보면 된다.
🍯tip! 웹 개발할 때 정말 유용한 개발자도구 웹에서 우클릭 > 검사(inspect)를 누르면 나오는 도구로 여러 가지를 확인할 수 있다. CSS를 적용할 때 요소(element) 탭의 스타일(styles)을 활용하면 적용된 스타일을 확인할 수 있고, 미리 수정해 볼 수 있다.
그리드(grid)
display 속성의 값 중 하나로 레이아웃을 다룰 때 편하게 도와주는 값이다. fr이라는 단위를 통해 고정된 값이 아닌 변하는 값을 자유롭게 적용할 수 있다.
grid 이외에도 flex를 이용해 레이아웃을 다루는 경우도 있다.
🍯tip! caniuse.com 웹 개발을 할 때 버전마다 적용되는 범위가 다른데 그것을 확인하기 좋은 사이트
반응형 디자인
웹이 만들어지고 기술이 발전하면서 웹이 하나의 환경이 아닌 다양한 환경 예를 들어 모니터, 태블릿, 휴대폰 등에서 사용되고 있다. 그래서 기본 웹이 모양이 이상하게 보이는 문제를 해결하기 위해서 화면에 사이즈에 따라 화면도 달라지는 방법이다. CSS를 작성할 때 미디어쿼리를 활용해 기술을 적용시킬 수 있다.
@media 미디어 타입(조건) {
적용 CSS
}
CSS 코드의 재사용
CSS를 매번 적용하기 위해서 하나의 html 파일마다 복사를 한다는 그런 끔찍한 일은 없어야 한다. 그렇기에 나온 방법이 css 파일을 만들어서 공통으로 적용되는 디자인을 모아서 <link> 태그를 통해 적용하는 방법을 사용한다.
<link rel="stylesheet" href="style.css">해당 요소를 <head> 태그 내부에 작성하면 자동으로 웹 브라우저가 가져와 디자인을 적용시킨다.
출처&참고
WEB2-CSS, 생활코딩, 2024.04.02
MDN-Selector, 2024.04.02
W3C-Selector, 2024.04.02
MDN - Specificity, 2024.04.02
Zerocho - CSS 적용순서, Zerocho, 2024.04.02
Inpa Dev - CSS 속성 상속 개념 & 적용 우선순위, Inpa, 2024.04.02
MDN-CSS_box model, 2024.04.02
caniuse.com, 2024.04.02
MDN-미디어쿼리, 2024.04.02
'개발' 카테고리의 다른 글
| [Git] 원하는 커밋에서 브랜치 만들기 (0) | 2024.06.28 |
|---|---|
| 웹 개발 3회차 with.생활코딩 (0) | 2024.04.04 |
| 웹 공부 1회차 with. 생활코딩 (0) | 2024.03.28 |
| JS Array.sort() (0) | 2024.03.11 |
| 프리온보딩 4회차 1월 (0) | 2024.01.12 |
