-
기초 CSS의 이해각종 학습 요약/Web 2022. 4. 27. 17:06
*** 마크다운으로 작성한 내용을 기본 에디터로 수정하다보니 깨져보이는 곳이 있을 수 있습니다. 양해바랍니다. ***
*** 문제되는 자료가 있을 시 댓글로 남겨주시면 수정하겠습니다. ***
CSS 기초
CSS란?
Cascading Style Sheets의 약자.
번역기 돌리면 '계단식 스타일 시트'라고 나오는데 솔직히 뭔 소린지 모르겠다.
근데 어쨌든 HTML의 시각적인 요소를 조작할 수 있는 웹 기술이다.기본 구조 형식(스타일시트 사용 시)
오늘 배운 html/css로 그려보았다. ㅎㅎ
- 셀렉터는 여러 종류가 있다. 태그 셀렉터, id 셀렉터, class 셀렉터, 수많은 수도 셀렉터와 상태 셀렉터들... 태그, id, class만 알아도 기본이지만, 필요에 따라 다른 것들도 익혀보자. 여기서는 말고, 구글링으로 각자 알아서.
CSS 기본 용법
사용하는 방식은 세 가지다.
- 요소(Element)의 속성(Attribute)에서 인라인으로 사용하는 방법(style="
~"). - 내부 스타일시트를 사용하는 방법(대개
<head>안에서<style>블록을 정의하여 사용). - 외부 스타일시트를 사용하는 방법(
<style rel="stylesheet" link="~~~.css">).
- 1번 스타일은 권장하지 않는다. 이유:
- 수정할 요소를 일일히 찾기 불편하다. 더불어 함께 있는 HTML까지 보기 어려워진다.
- 작성된 부분만 특정하게 적용되므로 스타일의 재사용성을 떨어트린다.
- 미디어쿼리(반응형) 적용이 안된다.
- 수도셀렉터 사용도 안된다.
- 수정해서 새로고침 하는 상황을 고려하면, 스타일의 캐싱이 html파일에 종속된다는 점은 좀 이상하다.
- 위의 세 가지 방법으로 한 요소의 스타일을 조작할 경우, 우선순위를 따진다.
- 속성값에
!important가 주어진 것을 최우선으로 한다.!important가 선언되지 않았거나 모두 선언되었을 경우, 아래의 우선순위를 따른다. - 인라인 스타일이 있을 경우, 인라인 스타일 우선.
- 내부 스타일시트 or 외부 스타일시트 혹은 둘을 같이 사용중일 경우, 화면에 늦게 로딩되는 스타일을 우선한다(코드의 아래쪽에 위치할 수록).
- 여러 셀렉터 접근 방식으로 한 요소의 스타일을 조작할 경우에도 우선순위를 따진다.
- 좁은 의미의 접근일 수록 표현 순위가 높다(예: tag 셀렉터 보다는 class 셀렉터, class 셀렉터 보다는 id 셀렉터).
자주 사용하는 속성
margin: 요소(Element)와 그 테두리(border) 바깥으로의 여백border: 요소를 감싸고 있는 테두리padding: 요소 테두리와 그 안쪽 컨텐츠 사이로의 여백color: 색상font-family: 글꼴font-size: 폰트 크기font-weight: 폰트 굵기text-align: 텍스트 가로 정렬letter-spacing: 자간line-height: 행간text-decoration: 밑줄, 가로줄 등의 텍스트 꾸밈.
이 밖에도 굉장히 많으니 필요에 따라 사용해보자!
'박스모델'이란게 있는데 말이야
기본적으로 HTML 요소들은 네모난 모양이다. 그래서 그 모양들을 부를 때 '박스'란 표현을 쓴다.
박스의 모양을 조절하는 속성이 있다.display라는 속성명을 가지고 있는 속성인데, 그 중 기본적으로 꼭 알아둬야 할 속성값은block,inline-block,inline, 이렇게 세 가지다.block: 브라우저 윈도우를 기준으로 화면 한 줄을 가로로 꽉 채우게 위치하는 특징이 있다.inline: 컨텐츠를 기준으로 컨텐츠 주변을 감싸는 특징이 있다.inline-block: 이름에서 알 수 있듯이 둘을 적절히 섞은 녀석이다.width와height를 적용할 수 있으면서도line-height를 적용할 수 있다.
자세한 차이는 아래 표에서 확인해보자
구분 block inline-block inline 줄바꿈 여부 줄바꿈이 일어남 줄바꿈이 일어나지 않음 줄바꿈이 일어나지 않음 기본적으로 갖는 너비 100% 글자가 차지하는 만큼 글자가 차지하는 만큼 width, height 사용 가능 여부 불가 가능 가능 이렇게 박스의 모양을 고르고 나면, 박스에 따라 모양이 정해진다.
이렇게 정해진 박스의 기본적인 모양을 박스모델이라고 하는데,
박스모델은 다시 몇 겹의 모양을 가지고 있다.
크롬 개발자 도구에서 흔히 봐왔던 것을 캡쳐해봤다. 이것이 박스모델이다.
- 박스모델의 가장 바깥은 margin이다. 위에서 설명했듯이, border 바깥으로의 여백을 말한다.
- margin은 border로부터 바깥쪽이니, 당연히 margin 안쪽은 border다.
- border에서 컨텐츠 쪽으로 향하는 여백은 padding이다.
- border에서 정해진 padding 만큼의 여백 안 쪽에는 컨텐츠가 있다.
위와 같이 박스모델이 구성되어있는 것이다.
그런데... 지금부터는 좀 골치 아플 수 있는 부분인데, 마무리에 아주 가볍게 정리가 되니 인내심을 갖고 마저 읽어보자.
문제를 하나 내겠다.전제 1. 가로 사이즈(
width)가300인 컨텐츠가 있다고 해보자.
전제 2. 이 컨텐츠에 두께가10인 테두리(border)를 설정했다.
전제 3.margin을5로 설정했다.Q. 브라우저를 켰을 때 이 컨텐츠의 가로사이즈(
width)는 몇일까?
A.300은 아니다(아마330정도 될 것 같다).- 330이면 330이지, '300은 아니다'는 뭘까? 브라우저마다 계산하는 방식이 다르기 때문이다.
- 뭘 계산하는 방식이 다르냐면, '박스모델'의 사이즈를 계산하는 방식이 다르다.
- 심지어 여기
padding까지 끼면 혼돈의 카오스가 된다. ㅜㅠ. 그럼 어떻게 해야 할까? - 박스모델의 사이징을 결정 방식을 하나로 통일하면 계산이 쉬울텐데. 근데! 마침 그게 있다. 바로
box-sizing이다. 모든 요소의box-sizing값을border-box로 통일해주자(본래 기본 값은content-box).
* {box-sizing: border-box;}(거의) 항상 이 속성을 적용해서 사용하면 정신건강에 좋다!
'각종 학습 요약 > Web' 카테고리의 다른 글
flex layout에 대한 간단한 이해 (3) 2022.04.30 HTML Page Layout : Flexbox로 레이아웃 잡기 (2) 2022.04.28 HTML Page Layout : 화면을 나누는 방법 (0) 2022.04.28 기초 HTML의 이해 (0) 2022.04.27 웹 개요 - 웹 개발, 프론트엔드와 백엔드 (0) 2022.04.27 웹 개요 - 클라이언트와 서버 (2) 2022.04.26