자주 사용되는 css

CSS란 무엇인가?

CSS(Cascading Style Sheets)는, HTML(이나 XML)로 작성된 웹 페이지의 모양과 스타일, 즉 디자인을 지정하는 데 사용하는 언어입니다.
CSS를 사용하면 글꼴, 색상, 배경 이미지, 레이아웃 등을 조정하여 웹 페이지를 사용자의 취향에 맞게 디자인할 수 있습니다.
화면상의 웹 페이지뿐만 아니라 다양한 매체, 예를 들어 프린트할 때 종이에 어떻게 디자인할지 지정할 수 있으며, 시각장애인을 위한 스크린 리더의 음성 스타일도 일부 디자인할 수 있습니다.

 

 

ui/ux 즉 사용자 경험 디자인은 사용자가 제품, 서비스 혹은 시스템을 사용하거나 체험하는 데 있어 지각하는 것이 가능한 조직적 상호교감적인 모델을 창조하고 개발하는 디자인의 한 분야이다.  일부 사람 마다 용어를 퍼블리싱, 퍼블리셔이라고 부릅니다.

 

 

레이아웃 사용법 : 

 

 

아주 아주 구석기때는 table 코딩으로 홈피를 만들었습니다...

레이아웃 나누기 힘들때... 이를 해결하기 위해서 자주 사용했습니다.

그러고 플래시가 인기가 한참이고 2011년 이후에 스티브잡스로 인해서 플래시가 퇴출되었는데 아직도 쓰는 곳이 있어서 한참동안 미루다가... 2020년 완전히 퇴출 되었습니다~

 

옛날에는 레이아웃을 나누려면 display, float, position 위주로만 사용했습니다. 그러다가 나날이 발전하는 브라우저에서 제공되는 css 도 다양해졌습니다.

dipslay 속성이 다양해서 일부를 추린다면 block, inline-block, inline-content, flex, grid 위주로 공부하면됩니다. 

 

 

float 은 좌, 우 배치할때 사용됩니다.

배치하다보면 뭔가 어설픈 부분이 있는데 이럴 경우 클리어를 줘서 쓰면됩니다.

 

아래 참고하면 이해 하기 쉽습니다. 

https://aboooks.tistory.com/79#google_vignette

[html/css] clear 속성에 대해 배워 보자 (clear:none, right, left, both)

 

 

 

 

 

다시 설명을 덧붙이자면 clear 방식은 div 클래스에다가 clear:both를 주어서 할수 있고 

 

가상선택자 :after를 줘서 사용하면됩니다. 가상선택자를 할 경우 부모 클래스에서 사용하면됩니다. 

예를들어서 이렇게 합니다.

 

https://goodbyefin.tistory.com/46

[CSS] float 사용시 clear: both 를 왜 적어야할까?

 

 

실무에서는 목록에서 2개를 배열로 했을때 가로 2xn으로 표현할때 사용됩니다. 

 

여기서 li 마크업 속성값으로  float:left; width:20%; 가로 비율을 줘서 하는방법이 있습니다.

클리어는 li에서 가상선택자나 내부에 클리어 div를 따로 만들면 됩니다. 

 

 

그리고 position도 배치를 하기 위해서사용 됩니다.

 

https://www.daleseo.com/css-position/

CSS의 5가지 position 속성 값 기본 정리

 

 

 

덧붙어서 설명하자면 자주 사용되는 속성은 fiexd 와 absolute 를 자주 사용됩니다.

fiexd 는 고정할때 쓰이고 보통 스크롤을 내릴때 헤더가 고정되게 하는 디자인을 구현하기 위해서 사용됩니다.

absolute 도 유사한 내용이지만 이걸로 했을때는 그대로 고정되고 어떠한 효과를 줄수 없습니다. 

여기서 주의 사항이 absolute 만 처리하면 그 영역에서 벗어나게됩니다. 만약에 벗어나게 하지 않으려면 부모 클래스를 줘서 relative와 static을 둘중을 사용해서 처리하면 영역에서 벗어나지 않습니다. 

요근래 경험 담을 하나 또 추가하자면 사이드바를 양쪽(좌,우) 에서 있고 스크롤 움직일때마다 효과를 주려면 sticky로 속성을 주면됩니다.  fiexd로 하게될 경우 구현하기 까다로워 스티키로 처리하면 말끔히 처리됩니다. 

나머지 플랙스와 그리드 방식은 

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

 

 

 

 

실무에서는 목록에서 2개를 배열로 했을때 가로 2xn으로 표현할때 사용됩니다. 

 

부모 클래스에선 diplay:flex; flex-wrap:wrap;justify-content: flex-start;를 사용합니다.

justify-content는 상황에 따라서 변형하면됩니다.

자식클래스에선 width:20%; 혹은 flex:1 0 20%; 로 주면됩니다.

여기서 비율을 약간 늘린다면 

flex-grow: 1; 으로 하거나 flex-shrink: 1; 으로 줄이면됩니다. (상황에 따라서 다릅니다.)

약간 미세한 공간이 있어서 조율해주면됩니다.

그리고 grid 방식은 플렉스 다음으로 자주 쓰는 방식입니다.

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

 

 

 

요즘엔 그리드 방식을 선호하는 경우가 많더라구요 어쨌든 상황에 맞게 그리드나 플렉스를 써서 레이아웃을 나누면 됩니다.

여기서 레이아웃만 잘 사용한다면 퍼블리싱 반은 성공한것이라 레이아웃 위주로 설명 하였습니다. 

 

나머지 애니메이션 위주로 공부를 하면됩니다. 플래시 이후로 퍼포먼스를 주기위해서 생긴 css입니다. 

간단하게 애니메이션 주는 방법을 배우고나서 https://www.codingfactory.net/10953

CSS / 애니메이션 / transition / 속성을 서서히 변화시키는 속성

 

 

 

js 애니메이션 라이브러리를 공부하면 도움이 됩니다.

백그라운드 와 기본 이미지 방법

 

img 마크업 와 background css를 이용해서 이미지 비율을 주는 방법이 설명합니다.

 

 

https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%82%AC%EC%9D%B4%EC%A6%88-%EB%B9%84%EC%9C%A8-%EB%A7%9E%EC%B6%94%EB%8A%94-3%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95-object-fit-background-size-position

🌟 이미지 사이즈 비율 맞추는 3가지 방법 (object-fit / background-size / position)

 

 

 

 

https://velog.io/@leejpsd/css-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%B9%84%EC%9C%A8-%EC%9C%A0%EC%A7%80

css 이미지 비율 유지 및 조정

 

 

실무에서 썸네일 때문에 자주 욕먹는 상황이 생깁니다. 

이럴때 참고해야될것은 이미지가 퀄리티 있는지 체크해보고 사이즈는 넒어주세요.

구현할때 좀 길게 잡아주셔야됩니다.

 

https://hyung1.tistory.com/40

반응형에서 이미지 비율 유지하기

 

 

 

 

 

본 개발자는 자주 사용해본 css 토대로 올린것이니 다르거나 잘못된 내용이 있으면 댓글로 남겨주세요

(그렇다고 비꼬아서 상처주진 마세요.. ㅜㅜ)