랄지 IT
CSS 기초 정리 본문
HTML이 웹페이지의 '뼈'라면 CSS는 '살'이라고 할 수 있습니다.
즉 HTML이 웹페이지의 정보를 표현한다면, CSS는 HTML을 보기 좋게 디자인하는 역할을 하는 언어입니다.
LESS는 CSS의 부족한 기능성을 보강해서 javascript와 같이 동적인 프로그래밍 언어의 기능인 변수, 함수와 같은 기능을 제공합니다. 유지보수의 공수가 드라마틱하게 줄어듭니다.
SASS는 LESS의 동일한 기능을 제공하는 다른 솔루션입니다
트위터에서 자신들의 웹서비스를 위해서 사용하던 UI 프래임웍을 오픈소스로 공개한 것이 Bootstrap입니다. 이것을 이용하면 HTML의 엘리먼트에 CSS 클래스 네임만 부여하면 그에 해당하는 디자인이나, 컴포넌트가 생성됩니다.
선택자
CSS 선택자는 주어와 서술어로 선언되어 있다고 할 수 있음
- 주어: 셀렉터=선택자, h1 등
- 서술어: 디크레이션=선언, color: red (:는 구분자, 세퍼레이터라고 함)
h1{
color: red
}
h1은 태그 선택자(=타입 선택자)
#h는 아이디 선택자
.h는 클래스 선택자
포함하는 것과 포함되는 것의 관계를 부모자식이라고 사용 함
CSS 선택자를 게임의 형식을 통해서 익힐 수 있는 사이트
css 치트시트 => 일종의 컨닝페이퍼, 검색해서 활용해보라
가상 클래스 (pseudo 수도) 클래스 선택자
- 클래스 선택자처럼 동작하지만, 클래스 선택자는 아니고, 어떤 여러가지 특수한 선택들을 하게 하는 선택자
- :hover, :active, :before, :after 등등
클래스 동급이면 가장 최근(나중)에 작성된 선택자 말 들음
시블링 셀렉터
- 형제, 자매 선택자, 인접한 선택자
- plate+apple => 플레이트 옆에 있는 애플 선택
제너럴 시블링 셀릭터
- a~b a에 인접한 모든 b
only-child
- 외동자식-손자 없는애들
even 짝수
odd 홀수
nth-of-type(숫자)
- 해당 숫자(순서)의 애들 선택
only-of-type
- 형제 없는 애들
:empty
- 아무것도 가지고 있지 않은 애들
속성
속성에 대한 통계
developer.microsoft.com/en-us/microsoft-edge/platform/usage/
이 자료에 따르면 가장 빈도수가 높은 속성은 아래와 같았습니다.
1. 타이포그래피
2. 박스모델
3. 컬러
타이포그래피
- 글꼴은 어렵지 않음, 하지만 단위가 어려움
- 주요 단위로는 px, em, rem 이 있음
★rem
html 태그에 적용된 font-size의 영향을 받습니다. html 태그의 폰트 크기에 따라서 상대적으로 크기가 결정되기 때문에 이해하기 쉽습니다. 가장 바람직한 단위입니다. 이것을 사용하세요.
px
모니터 상의 화소 하나의 크기에 대응되는 단위입니다. 고정된 값이기 때문에 이해하기 쉽습니다만, 사용자가 글꼴의 크기를 조정할 수 없기 때문에 가급적 사용을 하지 않는 것이 좋습니다.
em
부모 태그의 영향을 받는 상대적인 크기입니다. 부모의 크기에 영향을 받기 때문에 파악하기가 어렵습니다. rem이 등장하면서 이 단위 역시 사용이 권장되지 않습니다.
serif, sans-sarif : 장식유무
line-height : 자간
- 기본 1.2
- 단위(px, rem, em) 붙이지 않으면 배수니까 안붙이고 쓰는거
한번에 쓰려면 font: bold 5rem aria...., serif 이런식으로
폰트 랭킹 www.fontreach.com/#top
국내 무료폰트 software.naver.com/software/fontList.nhn?categoryId=I0000000#brandId=
lorem ipsum
- 의미없는 긴 단락
- 샘플용으로 카피해서 사용할때 유용함
글꼴 적용하고 싶을때?
- 구글 폰트 링크로 받아올 수 있고,
- 내가 가지고 있는 폰트를 웹폰트로 만들어서(확장자 여러개 => 여러 웹 브라우저에 대응 위해서임) 임폴트 해주면 됨, 만들어서 쓸 경우, @font-family{지정}해주고 사용할 것
폰트 생성기 font face generator > web font generate( 웹 폰트 생성기 )에 업로드하면 생성해줌.
css 상속 되는 속성이 있고, 상속되지 않는 속성이 있다 ex: 컬러(상속)랑 보더(노상속)
- stylish는 웹사이트의 디자인을 사용자 마음대로 수정할 수 있는 기능입니다. 이 기능을 이용해서 주어진데로 웹페이지를 소비하는 것이 아니라 자신의 취향을 반영할 수 있습니다. 또 다른 사람이 만든 디자인을 적용해서 간편하게 사이트의 디자인을 변경할 수도 있습니다.
- style extention > 크롬 확장 도구에 추가해보면, 해당 사이트의 스킨을 입힐 수 있음 다른 유저들이 제작한 것임.
그리고 우리도 만들 수 있음!
1990년대 html 등장후 css는 1994년정도에 등장함.
그동안 많은 것들이 고려되었지만, css가 채택된 이유는 캐스캐이딩(생산성 높고, 효율적) 때문이다.
css 우선순위
- 1. style attribut 2. id 3. class 4. tag
- 구체적이고 명시, 포괄적일 수록 순위 높음
bracket
- 아톰같은 편집기인데,
- adobe에서 만든 오픈소스 에디터로 html, css 코딩을 하는데 최적화된 좋은 도구임
- emmit 설치해서 사용하는 것 권장함
box-sizing
- 박스의 크기를 화면에 표시하는 방식을 변경하는 속성입니다. width와 height는 엘리먼트의 컨텐츠의 크기를 지정합니다. 따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵습니다. box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽습니다. 최근엔 모든 엘리먼트에 이 값을 지정하는 경우가 늘고 있습니다.
*
- 아스터리스크
- 전체 선택시 사용함
마진겹침(margin-collapsing) 현상
- 상하 마진값이 어떤 상황에서 사라지는 현상
- 형제들과 부모자식간에 발생함
- 어떤 태그의 시각적인 요소가 없으면, 위아래 마진 중 큰쪽의 크기를 갖는다
position(포지션)
- top right bottom left (위치)를 오프셋이라고 함
- 오프셋 우선순위(=즉 left, right / top, bottom 같이 선언되면) left top 이 짱먹음
레이아웃
- 예~전엔 표로 잡았다가... 포지션으로 했다가 float 썼는데,
- 마침내 flex 등장
flex
- flex (부모) flex-grow(자식) flrex-shrink(0이기적/1,2,..)
- 플렉스로 홀리 그레인 레이아웃 손쉽게 작성 가능
미디어쿼리 쓸때도 캐스캐이딩 생각해서 써야한다
- max-width: 500px / min-width: 600px 이런식으로 겹치면
- 최근에 작성(나중 작성) 애를 우선순위로 두므로, 이럴경우 600을 먼저해야 작성해야한다는 것
모바일에서 제대로 표현하려면 meta viewport 추가 해줘야함
float 으로 레이아웃 잡기
- 레이아웃 작성될 요소마다 float(폴롯)값 left 줌
- border값 각각 주게 되면 각 요소마다 걸쳐져있는데, margin-left: -1px해주면 보더 안겹치고 잘됨
- 전체 요소를 싸는 컨테이너에 고정값(min-width) 줘서 화면크기 줄여도 요소가 안내려가도록 해주고, *(전체선택자)에다가 box-sizing 보더박스줘서 계산 202 이런식으로 하지말고 200이렇게 딱 떨어지도록 해줘야함
multimulti_column
- 신문처럼 컬럼 나누는 레이아웃임
- column-count: 4 쓰면 4개로 나눠짐
filter
- 포토샵의 필터기능 생각하면 됨
blend
- 섞는다 배경, 이미지 등 어떤 블렌딩 모드로 하느냐에 따라 느낌 달라짐
벤더프리픽스
- 브라우저에서 실험적으로 지원하는 속성의 경우, 속성앞에 각 브라우저를 뜻하는 이름을 붙여주는 것임
여러 효과들 코드 등 참고할 것
transform
- 엘리먼트의 크기, 위치, 모양을 변경하는 속성입니다.
- 포토샵의 transform 생각하면 됨
- transform 효과는 디스플레이가 블록or인라인블록일때만 적용됨
- transition font-size 1s, transform 2s 이런식으로 여러개 효과마다 따로 적용도 가능 일괄적용은 all
- 여러개쓰고 싶으면 값에 한칸씩 띄우고 쭉 나열
- 코드펜 참조해서 여러개 참조할것, 3d효과등도 있음
- 라이브러리도 꽤 있음 transform library 등으로 검색해서 찾아보며 사용해볼것
translation
- 변화를 어떻게 표현할 것인가
- 자연스럽게 변형시킴
- CSS의 최신버전에서는 포토샵이나 플래쉬와 같은 프로그램으로 해야 했던 일을 CSS로도 할 수 있게 되었습니다.
전환은 효과가 변경되었을 때 부드럽게 처리해주는 CSS의 기능입니다. 이와 관련된 것으로는 아래와 같은 속성들이 있습니다.
transition-duration
transition-property
transition-delay
transition-timing-function
transition
svg
- 백터(vector) 이미지를 표현하기 위한 포맷으로 w3c에서 만든 백터 이미지 표준입니다. SVG 자체는 CSS가 아닙니다만 CSS를 이용해서 다양한 효과를 줄 때 SVG를 활용하는 경우가 많습니다.
- thenounproject.com svg이미지 다운
- svg는 xml으로 작성되어 있음
<svg 기본속성>
<rect 속성></rect> 이런식으로 사용
</svg>
href="#"
- 이동x
외부로 파일을 빼는 방법은 크게 두가지
1. <link rel="stylesheet" href="style.css">
2. <style>@import url("style.css")</style>
외부로 css파일빼서 사용하는 이유
- 웹브라우저는 캐시기능(임시저장 -> 재접속시 저장된 애들 다시 불러와서 사용) 이 있다
- 재사용성 높일 수 있고, 유지보수에 효과적임
minify
- 코드의 경량화
- 코드의 크기를 줄이는 것
preprocessor
- CSS는 뛰어난 언어입니다. 하지만 CSS가 모든 면에서 좋을수는 없습니다. 그래서 어떤 이들은 CSS에 편리한 기능을 더한 새로운 언어를 만들고 이 언어에 따라서 작성한 코드를 어떤 프로그램으로 실행시키면 결과적으로 CSS를 만들어주는 도구들을 개발했는데요. 이런 도구를 preprocessor이라고 합니다.
- 대표적 3개; lesscss, sass, stylus
- csspre.com : 3개의 프리프로세서 비교해좋은것임
- 문법, 컴파일러(변환기) 필요
- 실습은 stylus로 했음
.styl 확장자명임
npm에 설치해서 명령어로 실행하여 사용하거나, 에디터의 확장기능 추가(패키지 설치)하여 사용
- 네이스팅 기능: 다른 선택자가 내부에 들어오는 기능 ex) body { h1{} p{} }
- 믹스인: 함수와 비슷, 해당 값 넣어서 호출하여 사용
- 트랜스페어런트 믹스인: 원래코드 작성인 것 같지만, 해당 속성값 아규먼트로 미리 작성해놓고 선언후 사용하는 것임
- variable: 변수 사용할 수 있음
라이브러리(library)
- 도서관이라는 뜻입니다. 도서관이란 어떤 공간인가요? 공용으로 책을 공유하는 공간/체계를 우리는 도서관이라고 부릅니다. 소프트웨어에서 라이브러리는 도서관의 이런 역할을 비유로 채택한 것입니다. 즉 많은 곳에서 공통적으로 사용될 수 있는 코드를 부품화한 것이 라이브러리입니다. CSS에도 이런 라이브러리가 많습니다.
- fontello.com 폰트를 아이콘화 시킨것. 애니메이션 등도 적용할 수 있음.
- unicorn-ui.com/buttons 디자인된 간단한 버튼css 라이브러리
- Semantic ui 부트스트랩같은 웹페이지 구축용 ui 라이브러리
스터디 사이트: 생활코딩(css)