CSS / poiemaweb 220705-220711

---

PoiemaWeb을 보며 공부한 내용

---

2.1 CSS

CSS - Cascading Style Sheets

html xml 같은 doument를 어떻게 표현할 것인가에 대한 style

 

셀렉터(seletor)

스타일을 적용하고자 하는 html요소를 선택 할 수 있도록 도와주는 요소

 

h1 {color:red;} - 셀렉터 {선언블록(프로퍼티 : 값)};

이런것들을 Rule Set 이라고 하는데, 이런 집합을 스타일 시트라고 하는 것임

 

프로퍼티 - 표준 스펙이며 이미 있는 것들을 활용하는 것임

값 - 위와 같음 수치만 변경

 

HTML과 CSS를 연동하기 위해선, HTML에서 css파일을 link로 로드해줘야함

HTML에 embeded해서 사용해도 되지만 따로 파일이 분리되는것이 바람직함, 같은 이유로 인라인도 마찬가지

 

브라우저마다 기본적인 css가 적용되어있어서 reset css를 활용한 후, 디자인 작업을 하면

전부 일정한 디자인이 완성됨

 

2.2 셀렉터

복수개의 셀렉터를 활용할때는 쉬묘로 구분

 

* - 전체셀렉터 - html 요소 포함한 모든 요소가 선택(head도 포함)

 

태그명 - 태그셀렉터 - 지정된 태그명 가지는 요소 선택

 

id셀렉터 - id 값으로 요소 선택(중복 불가)

 

class셀렉터 - class 값으로 요소 선택(중복 가능)

 

어트리뷰터 셀렉터 - 지정된 어트리뷰트 갖는 모든 요소 선택

셀렉터[어트리뷰트], 셀렉터[어트리뷰트='값'], 셀렉터[어트리뷰트~='값'], 셀렉터[어트리뷰트|='값]... 등 많은 방법으로 선택 가능

=> 내생각엔 직관적이지 않아서 별로인듯

 

복합 셀렉터 - 상위요소 하위요소가 생기게 되는데 이를 자손요소 후손요소 이렇다고 말함

셀렉터1 셀렉터2 => 셀렉터 1 요소중 후손 요소중 셀렉터 2 요소

 

자식 셀렉터 

셀렉터1 > 셀렉터2 => 셀렉터 1의 모든 자식 요소 중 셀렉터 2와 일치하는 요소

 

형제 셀렉터

셀렉터1 + 셀렉터2 => 동위관계에서 뒤에 위치하는 요소를 선택할때 사용 셀렉터1 요소의 형제요소중 1바로 뒤에 위치하는 2요소를 선택

인접 셀렉터

 

일반 형제 셀렉터

셀렉터1 ~ 셀렉터2 => 셀럭터1의 형제 중 셀렉터1 뒤에 위치하는 셀렉터 2 포함 요소 모두 선택

 

가상 클래스 셀렉터

요소의 특정 상황에 따라 스타일을 정의할 때사용.

근데 이부분은 잇구나만 알고 다음에 필요할때 찾아서 쓰는게 효율적인 것 같음

 

2.3 유닛

각 프로퍼티에 따라 사용할 수 있는 키워드가 존재하는데 이번에는 유닛에 대한 이야기

대표적으로 px, em, %등이 있음

 

픽셀은 요소의 크기나 이미지의 크기 지정에 주로 사용

%는 대표적인 상대 사이즈를 설정함

em은 배수 사이즈인데, 요소에 지정된 디폴트 사이즈에 상대적인 사이즈를 설정하는 것임

rem 최상위 html의 요소에 따라 정해짐

 

뷰포인트도 비슷하게 다양하게 존재함

 

색상은 hex rgb rgba hsl hsla 등

 

2.4 박스모델

각 프로퍼티에 따라 사용할 수 있는 키워드가 존재하는데 이번에는 유닛에 대한 이야기

대표적으로 px, em, %등이 있음

 

브라우저는 박스 모델의 크기와 프로퍼티 위치를 근거로 렌더링을 실행한다.

웹 디자인은 콘텐츠 담을 박스모델 정의하고, CSS 프로퍼티를 통해 위치 정렬을 진행하는데

이 박스모델의 구성은 콘텐츠, 패딩, 테두리, 마진이 있다.

 

이 부분에서는 내가 까먹었던 내용만 잠시 메모하고 넘어감

 

box-sizing

boder-box = 전체 박스의 값

content-box = 마진을 제외한 콘텐츠 영역의 박스

 

box-sizing은 상속되지 않기 때문에, reset 통해서 진행하기도 함

 

2.5 디스플레이

display layout에서 사용되는 아주 중요한 프로퍼티임

block, inline, inline-block, none(해당 요소 화면에서 사라지게함 표시조차 안함)

상속안댐

 

block의 특징

항상 새로운 라인에서 시작

화면 크기의 전체 가로폭 차지

width,height, margin, padding 등의 프로퍼티 지정 가능

block 레벨 요소 내에 inline 레벨 요소 포함 가능

 

inline의 특징

문장 중간에 들어갈 수 있음

content의 너비만큼 가로 폭 차지

width, heigth, margin-top, margin-bottom 프로퍼티 지정 없음 - 상하여백 line-height로 지정

inline 레벨 요소 뒤에 엔터나 스페이스 있는경우 정의하지 않은 space가 지정됨

inline 레벨 요소 내 block 요소 포함 불가능

inline은 보통 block 안에서 포함되어 사용됨

 

inline-block의 특징

두개의 특징 둘다 가짐

 

visibility 프로퍼티

요소를 보이게 할것인지 아닌지 정하는것

visible 기본

hidden 해당 요소 앉보이게함 display:none;의 경우 해당 요소의 공간까지 사라지지만 hidden은 해당요소 공간 사라지지 않고 남음

collapse table요소 사용하며 행 열이 보이지 않게 함

none table요소의 row나 columm을 보이지 않게 한다. IE, FireFox에서 동작하며 크롬에서는 hidden과 동일하게 동작한다.

 

opacity는 투명도

 

 

2.6 배경

background-image

background-size

background-attachment

background-position

 

2.7 폰트

font-size

font-family

font-style,font-weight

line-height

lettering-space

text-align

text-decoration

white-space

text-overflow

word-wrap

word-break

 

2.8 포지션

static - default

relative

absolute

fixed

z-index

overflow

 

2.9 Float

float는 해당 요소를 가로나 세로 위에 띄워 이미지와 글자를 쓰기 위해 만들어졌음

이것도 일단 읽긴 했는데 실제로 만들어보면서 느껴야 할 부분인것 같음

 

overflow : hidden을 활용하면 원하는대로 정렬이 가능해질 확률이 높다

 

2.10 상속과 캐스캐이딩

 

상속은 상위 요소에 적용된 프로퍼티를 하위 요소가 물려 받는 것을 의미하며, 모든 프로퍼티가 상속되는 것은 아니다.

상속 o	상속 x
visibility	width/height
opacity	margin
font	padding
color	border
line-height	box-sizing
text-align	display
white-space	background
	vertical-align
	text-decoration
	position
	top/right/bottom/left
	z-index
	overflow
	float

상속되지 않는 경우, inherit 키워드를 활용해 명시적으로 상속받게 할 수 있다.

 

캐스캐이딩은 중요도의 의미로

이전에 css실전 설계 가이드 공부할때 배웠던 내용이랑 중복됨

 

1.중요도 - 어디에 선언이 되어있느냐

2.명시도 - 얼마나 특정하게 명시하냐

3.선언순서 - 누가 먼저 선언되어있냐

 

이 세가지 규칙에 따라 css적용 우선순위가 설정됨

 

2.11 벤더 프리픽스

 

텍스트와 요소의 선택을 방지하는 user-select 프로퍼티 처럼,

표준으로 확정되기 이전 또는 브라우저 개발사가 실험으로 제공하는 기능 사용하기 위한 설정

 

이건 몰랐는데, prefixfree 라이브러리 사용하면 편하게 사용 가능

 

2.12 쉐도우

 

text, box에 그림자를 넣을 수 있다.

 

2.13 그래디언트

 

직접 넣을려면 벤더 프리픽스 필요할수도 있고, 그냥 툴사용해서 넣는게 낫다.

 

2.14 트랜지션

 

내가 생각하기에 css의 꽃임

tansition 프로퍼티를 통해 주는데 만약 이 프로퍼티가 :hover같은 가상 클래스 선택자 안에 있다면

그 행위를 딱 수행할때만 수행됨

 

만약 마우스를 올리고 내리는데 둘다 그 애니메이션을 넣고싶다 하면, 그것보다 범위가 큰 녀석안에 트랜지션을 넣어야함.

 

혹은 자바스크립트를 활용해서 활용가능케 해줘야지 실행이 진행됨

 

모든 CSS요소가 트렌지션이 가능한 것은 아님.

그리고 layout에 영향을 주는 프로퍼티의 경우 트랜지션을 사용하지 않는 것이 바람직함.

 

2.15 애니메이션

 

애니메이션은 애니메이션을 나타내는 css스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임들로 이루어진다.

transition은 어떠한 액션에 의해 이루어지는 반면, 애니메이션은 하나의 스토리가 있다.

 

keyframes rule

애니메이션의 흐름 중 여러시점에서 css 프로퍼티를 정할 수 있음.

 

@keyframes move {

from {}

to {}

}

또는

@keyframes move{

0%

50%

100%

}

의 형태로 표현 가능

 

2.16 트랜스 폼

 

요소에 이동 회전확대축소 비틀기 등의 효과를 부여하기 위한 함수를 제공한다.

애니메이션 효과느 제공하지 않아 정의된 프로퍼티가 바로 적용되서 화면에 나온다.

만약 필요하다면 트랜지션이나 애니메이션과 함께 사용이 가능하다.

2d, 3d 전부 가능

 

2.17 웹 폰트

 

CDN or Local Font로 이용

 

2.18 레이아웃

 

header/nav bar

contents

footer

 

2.19 반응형 웹 디자인

 

해상도, 사용자 기기에 따라 알맞은 웹을 제공하는 것

핵심기술은 @media

이렇게 미디어별로 style을 지정하는 것을 미디어 쿼리라고 한다.

 

2.20 flex box layout

 

flexbox의 장점

1줄의 코드로 수평정렬 가능

요소의 상하좌우 정렬 순서 변경이 간단

요소간 간격 조절 간단

서로 다른 height 갖는 요소 수평 정렬시, 간단히 정렬 가능

 

flex-container 부모 요소에 자식요소들을 넣어서 배열하는 식으로 진행

부모에 flex or inline-flex 지정하면 자식들은 알아서 지정됨

 

2.21 수평 수직 중앙 정렬

 

뭐든 센터잡는게 중요함

예전에 홈페이지 만들때도 자꾸 센터가 안맞아서 애먹었는데

이것도 만들면서 점점 봐야함

 

2.22 타이포 그래피

 

글자를 보면 글자 전체의 길이와 글자의 baseline이 되는 길이가 다름.

피그마할때 많이 느꼈던 부분임 img요소 할때도 약간의 차이가 생기는데 이를 디센더가 적용되었다고 표현함

 

이 약간의 뜸을 없애기 위한 다양한 방법이 있음

 

첫번째, 만약 이미지라면 그 이미지 요소를 블록으로 변경시킴

두번째는 vertical-align프로퍼티를 사용해서 이미지 표시 위치를 조정시킴 - 기본이 baseline인데 bottom으로 변경시키기