[카카오 클라우드스쿨 개발자 과정] CSS (1)

신하늘·2022년 11월 2일

CSS

HTML 언어에 시각적인 효과를 부여하기 위한 언어

작성방법

별도의 파일에 작성하고 가져와서 사용(external)
HTML 문서안에 style 태그를 만들고 작성(internal)
태그 안에 style 속성에 작성(inline)

나는 기본적으로 css를 외부 파일에 작성한 다음에 link rel로 불러오는 방식으로 사용하였는데, 이 경우에 프로젝트가 규모를 갖춰가면 갈수록 로딩하는데 시간이 오래 소요되는 경향성이 있었다. 이에 대해 강사님께 여쭈어보니, 공통적으로 사용하는 부분은 파일 내부에 style 태그로 작성을 하고, 각 페이지별로 따로 쓰는 (공통적인 기능이 아닌) 경우에는 외부 파일에 작성하는 방식으로 진행하는 것이 좋다고 하셨다.

기본 선택자

*이다.
tag, .class(여러 요소를 그룹화하기 위해서 사용, 대부분 스타일 적용에 사용)
#id(문서 내에서 구별하기 위해서 사용, 대부분 자바스크립트에서 사용)

속성 선택자

선택자[속성이름]: 선택장 안에 속성이 존재하는 경우만 적용한다.
a[href]:{}
선택자[속성이름=값]: 선택자 안에 속성의 값까지 일치하는 경우만 적용.
input[type="text"]{}
input 태그 중에서 type이 text인 경우에만 적용.

부분일치
A^=B: A 속성의 값이 B로 시작하는 경우
A$=B: A 속성의 값이 B로 끝나는 경우
A*=B: A 속성의 값에 B가 포함된 경우

복합 선택자

일치 선택자: 선택자1선택자2...
공백없이 여러 선택자를 나열하면 모든 선택자가 일치해야 한다.
div.content{} -> div 태그 중에서 class 속성이 content인 경우에 적용

자식 선택자: 선택자1 > 선택자2
선택자1에 포함된 선택자2인데 선택자2가 바로 아래 레벨에 있어야한다.

<div><span></span></div>
<div><ul><span></span></ul></div>

div > span으로 작성하면 위의 경우에만 적용

하위 선택자: 선택자1 선택자2
공백을 이용해서 선택자를 나열
선택자2가 선택자1에 포함되어 있으면 적용한다.

인접 형제 선택자: 선택자1 + 선택자2
선택자1과 동일한 레벨에서 다음에 나오는 선택자2에 적용

<h1>대제목</h1>
<h2>제목1</h2>

<h2>제목2</h2>

h1 + h2 -> 이경우에는 제목1에만 적용

그룹 선택자: ,로 구분
,와 나열을 하게되면 나열된 선택자 중에 포함되면 적용

pseudo-classes selector (의사 클래스 선택자)

선택자 뒤에 :을 하고 작성
a:link -> 링크에 모두 적용
a:visited -> 링크를 한번이라도 누른 경우 적용
동작 - hover(마우스를 올려두면), active(마우스를 누르면), focus(input에서 포커스가 오면)

상속

하위 요소가 상위 요소의 값을 물려받는지의 여부이다.
속성별로 다르게 적용되지만 폰트는 관련된 속성은 대부분 상속됨
어떤 속성이 상속되지 않는 경우 상속을 받고자하면 inherit로 값을 설정하면 된다.

우선 순위

하나의 요소에 동일한 속성의 값을 2개 이상 적용하는 경우 충돌이 발생
마지막에 적용된 요소가 우선 순위를 갖음
태그 안에 작성한 style이 우선 순위가 가장 높음
외부 파일에 작성한 것과 style 태그 안에 작성한 것은 나중에 작성한 것이 우선 순위가 높다.
동일한 방식으로 작성된 경우는 특정도를 가지고 우선 순위를 적용한다.
inline - 1000
id 선택자 - 100
의사 클래스 - 10
class 선택자 - 10
의사 요소 - 1
tag 선택자 - 1

단위

절대 단위 : 불변의 단위
cm,mm,inch 등...
px : Pixel. 1/96인치이다. 해상도 같은 것을 표현할 때 사용하는 단위이다. 1920 * 1024라고 하면 해당 만큼의 점을 출력할 수 있다는 뜻이다. 화면의 확대 축소에 따라 변하기도 하기 때문에 상대 단위로 여기는 사람들도 있다.
em: font-size가 기준, 글꼴 크기가 16px이면 1em은 16px, rem은 최상위 요소의 글꼴 크기이다. 1.5배 크기를 원하면 1.5em 같이 사용하면 된다.
vw : 화면의 가로크기를 100으로 설정
vh : 화면의 세로크기를 100으로 설정
vmin : 가로나 세로중의 작은 것을 100으로 설정
vmax : 가로나 세로중의 큰 것을 100으로 설정
ex : 소문자 x의 높이로 em의 절반
ch : 숫자 0의 너비
deg, rad : 각도

최근에는 디바이스 크기가 다양하기 때문에 화면 출력을 할 때에는 상대 단위를 사용하는 것을 권장하고, 인쇄를 할 때에는 절대 단위를 사용하는 것을 권장한다.

Typography

문자나 기호에 적용

Font-family
폰트 종류 결정. 폰트가 없을 때 다른 폰트를 적용하기 위해서 나열한다.
font-family:돋움, sans-serif
돋움체가 없으면 sans-serif를 적용한다.

@font-face
폰트가 없을 때 다운로드를 받을 수 있도록 해주는 속성
@font-face { font-familt:글꼴 이름
src:url(글꼴 파일의 경로) format(파일 유형) }

font-size
글꼴 크기
키워드(xx-small, x-small, small, medium, large, x-large, xx- large, smaller, larger..)로 설정할 수 있고 직접 단위 설정 가능하 다. em 단위로 설정하는 것을 권장한다.

font-weight
글자 두께
100부터 900까지 100 단위로 설정 가능하고 normal, bold, bolder, lighter와 같은 키워드 설정가능

font-style
italic을 설정하면 기울임체

font-varient
small-caps를 설정하면 소문자를 작은 대문자로

font
앞의 6가지를 한꺼번에 적용하기 위해서 사용
font: weight style variant size line-height font-family
다른 모든 속성은 생략이 가능하지만 font-size와 font- family는 생략이 불가능하다.

color
요소의 전경 색상 - 대부분 글자에만 적용됨.
키워드로 설정할 수 있고 #Hexcode 6자리, rgb(0~255, 백분율, rgba 사용시 투명도도 가능, hsl도 있음)
색상 키워드 : https://www.learnwebdesign.com/colornames.html
색상 추출 : https://www.webfx.com/web-design/color-picker
text-decoration
밑줄이나 취소선 등의 효과를 설정
none, underline, overline, line-through, blink 등으로 설정
a 태그를 이용해서 버튼 효과를 나타낼 때 none으로 설정하는 경우가 있음
요즈음은 a 태그에 밑줄을 긋는 것 보다는 색이나 두께를 변경해서 알 려주는 것을 권장
일반 텍스트에는 underline을 하지 않고 강조를 하고자 하면 italic 으로 기울임을 설정하는 것을 권장

white-space
공백문자 설정
normal : 여러 개의 공백을 하나로 처리
nowrap : 여러 개의 공백을 하나로 처리하고 영역 너비를 넘어가면 줄 바꿈하지 않고 한 줄로 표시
pre : 여러 개의 공백을 그대로 처리하고 영역 너비를 넘어가면 줄바꿈해서 표시
pre-wrap : 여러 개의 공백을 그대로 처리하고 영역 너비를 넘어가면 줄 바꿈해서 표시
pre-line : 여러 개의 공백을 하나로 처리하고 영역 너비를 넘어가면 줄 바꿈해서 표시

Paragraph

gradation
css3에서 지원하는 것으로 여러 속성을 혼합해서 사용하는 속성
> vendor-prefix : css3의 기능 중에는 표준으로 채택되지 않아서 브라우저 별로 별도로 기능을 제공할 때 사용하는 기호
> safari / chrome은 -webkit-을 추가
> MS의 브라우저는 -ms-를 추가
> Opera는 -o-를 추가

>linear-gradation
선형 그라데이션
linear-gradient(각도, 색상값을 나열)
vendor prefix 이용

>radial-gradation
원형 그라데이션
radial-gradient(시작점의 위치, circle의 모양, 색상 나열)

그라데이션을 생성해주는 사이트 : www.colorzilla.com/gradient-color