CSS 생활코딩

CSS는 head태그 안에 script태그를 만들어 작성한다. ->선택자로 선택후 CSS 값을 주는 구조

Html 태그 안에서 바로 값을 주는 방법도 있음.
<a ~~ style="color:red">이렇게 해도 됌!


선택자의 종류2 클래스선택자

id선택자는 #id, 클래스 선택자는 .class를 이용해서 선택한다.

id값은 하나의 태그에 대해서만 지정한다. 하나의 태그에 a라는 id값이 할당되었다면 다른 태그에는 a라는 아이디 값이 오면 안됌!! 문법은 아니고 약속!!
(Id값이 a인 태그가 많아도 잘 실행되기는 한다.)
다수의 태그를 하나의 묶음으로 묶을려면 class를 사용한다.

부모자식 선택자
ul li 이렇게 띄어쓰면 모든 ul태그의 자손인 li태그를 선택한것! 몇단계든 상관없이 아래의 모든 li태그를 선택.

ul>li 이렇게 쓰면 직계자손의 태그만 선택

그냥 li이라 하면 선택되는 것은 가장 겉에 있는 li부터 가장 자손에 있는 li까지 모두가 선택된다.

다수의 태그에 같은 css를 입힐때
ol, ul{}이렇게 쓰면 된다.

가상클래스 선택자(pseudo class selector)
a:active{}//클릭했을 때
a:hover{}//마우스를 위에 올려 놓았을 때
이런 것들을 할수 있다.

마우스로 a 태그를 클릭하고 마우스가 a태그 위에있는 경우 style태그 안에서 뒤쪽에 있는 명령을 따른다

a:visited {}는 방문한 주소는 보라색으로 표시되는 것을 다루는 태그임. 보안적인 문제로 이 태그 안에서 설정할 수 있는 것들은 제한적이다.

타이포그래피:font-size
글자크기 단위의 3가지 종류PX, EM, REM
특별한 일이 아닌 이상 rem쓰면 된다.

Rem은 사용자의 설정에 맞춰 글자크기가 변한다.

타이포그래피:color
css에서 색을 표현하는 3가지 방법
Color name, rgb, hex(16진수로 표현)

rgb를 이용해 만들어낼 수 있는 색은 "트루 컬러"라고 한다.

웹폰트ㅡ좀 어려움, 낯설다
브라우저에 접속할 때 내가 지정한 폰트를 다운받게 하는 방법.
영어폰트는 용량이 작지만 한글 폰트는 용량이 큰편이다. Google fonts에서 다양한 폰트검색, 사용가능

element=Html태그
Property=그 안에 들어가는 여러가지 속성들

상속
css의 모든 속성이 상속되는 것은 아니다. Color의 경우는 상속되지만, border같은 것은 상속되지 않는다.
Ex)body에 border속성을 줬다고 해서 body안의 모든 태그에 border가 생기지는 않는다.
어떤 것들은 상속되고 어떤 것들은 상속되지 않는다
자세한 내용은 css문서를 참조해라
css=cascading style sheet


케스트케이딩 실습
우선순위 :
1.제공자
2.사용자
3.브라우저
(제공자, 브라우저, 사용자가 같은 태그에 대해 다른 css를 적용시켰을 때 제공자가 정한 css가 가장 우선시된다.)

우선순위: html attribute<id selector<class selector<tag selector

우선순위를 1위로 만드는 방법 "!important"

Inline, block
Block level element: h1태그처럼 혼자 한 줄을 다 쓰는애들
Inline element: a 태그처럼 라인안에 들어가는 애들

h1{display:inline;}이런 설정으로 얼마든지 inline, block설정은 바꿀 수 있음
->display 설정은 flex에도 사용됨.

Box model
margin: element와 element의 간격
Padding: border와 text(contents)의 간격

Block요소에서 padding margin width hight(설정안하는게 나음)은 잘 동작하지만 inline에서는 width와 hight는 동작하지 않으며 margin은 inline의 특성에 맞게 다른 text과의 공백을 나타냄

Box-sizing
width, hight는 contents가 있는 부분에 대한 크기 지정이다. Border-width가 다르면 width랑 hight가 같아도 크기가 다르게 보인다.(box-sizing이 content-box인 상황. 이게 기본값임.)
이럴 때 box-sizing:border-box라고 지정하면 박스 전체에 대해서 width, hight값이 지정된다.
그래서 *{box-sizing:border-box}이렇게 자주 사용한다.

마진겹침현상1
2개의 element의 마진값 중 큰 값이 두 element의 거리가 된다. 작은값은 무시당함

마진겹침현상2
부모자식간의 마진겹침현상
부모 margin-top:100px
자식 margin-top:50px
일때 부모가 시각적으로 보이는게 있다면 예컨데 boder 값이 있다면 자식은 150px의 margin-top값을 가짐. But부모가 시각적으로 보이지 않을 때는 부모, 자식의 margin값 중 큰 값이 자식의 margin
값이 된다. 여기서는 100px가 된다.


마진겹침현상3
잘 이해못함. 깊게 알 필요는 없을듯

포지션1 relative : static
#id{left:100px}(왼쪽을 기준으로 100px간격두기)해도 element가 오른쪽으로100px을 가지 않는다. #id{position:relative; left:100px}하면 움직인다.

left와 right값을 동시에 줬을 때 코드의 순서에 상관없이 left를 따른다. top,bottom도 마찬가지로 top을 따른다.

position의 default 값은 static임.(포지션 값을 안만들면 스태틱인 것임.) static일때는 이런 위치와 관련한 속성을 듣지 않고 그냥 자신이 위치해야할 곳에 위치한다.

포지션2 absolute
relative은 부모를 기준으로 자신의 위치가 선정된다. (앵간하면 relative 쓸 듯.) 반면 absolute의 경우 html을 기준으로 자신의 위치가 선정된다.(브라우저의 가장 왼쪽 위를기준으로 엘리먼트가 위치하게 된다.)

position:absolute로 설정했을 때 left와 right값을 주지 않으면 디폴트 값은 position:absolute일 때로 자동으로 설정된다. 그러나 left와 right값은 브라우저의 가장 왼쪽 위를 기준으로 설정해야함.

#id{position: absolute;left:10px;} 라고 선언하면 이 엘레멘트는 더 이상 부모의 소속이 아니다.
독립적인 아이가 된다. 부모의 소속에서 벗어나기 때문에 이 엘리멘트의 크기는 딱 자신의 콘텐츠 만큼이 된다. 브라우저의 가장 왼쪽 위에서 왼쪽으로 10px움직인 곳에 해당 엘레멘트가 위치하게 된다. 부모나 현재 자신의 위치가 아닌 html페이지 전체에서 위치를 설정하는 방법.
@만약 부모가 position:static이 아닌 것이 나온다면 absolute는 html을 기준으로 하는 것이 아니라 그 부모를 기준으로 위치를 설정한다.

포지션3 fixed
fixed는 스크롤을 내리더라도 계속 화면에 보여지는 엘리멘트를 만들 때 사용! 언제든지 누를 수 있는 top으로 가는 버튼 같은 것을 만들 때 사용가능.
Fixed로 선언되면 부모, 자식의 연결이 끊기기 때문에 크기는 자신의 콘텐츠만큼이 되고 위치도 absolute 처럼 전체 html을 기준으로 작성하면 된다.

Flex1
Flex는 layout을 위한 것. 이때까지 layout을 표현하기위해 table을 쓰기도 했고 쌩으로 position을 이용해 엘리멘트들을 배치하기도 했지만 이젠 flex를 쓰면 된다.
Flex는 부모ㅡ자식의 관계가 있을 때 사용할 수 있는 것이다. 부모에게 부여되는 속성과 자식에게 부여되는 속성이 다르다. 따로따로 써야한다. 그냥은 못쓴다.

모든브라우저에서 지원되는 것은 아님..아직까진..
모바일에서는 모두 지원된다.

Flex2
자세한 내용은 강의참조
display:flex 를 명시함으로써 flex사용가능

flex-direction:row(기본값) column, column-reverse등등의 값이 있음.

위 두가지 속성은 부모 엘리먼트에 지정 해주어야 한다!

display에는 앞서 inline과 block값에 대해서 학습했었음.

Flex3 basis, grow, shrink
flex-basis:100px
flex-basis는 flex의 방향 (row, column)에 따라 크기을 지정하는 속성임.

flex-grow
기본값은 0임.
화면에서 크기의 비율을 상대적으로 표현한 것.
자세한 내용은 강의참조

flex-shrink
기본값은 화면이 줄어들면 여백있는 놈이 작아진다.
flex-basis값을 가지고 있을때, 브라우저가 작아지는 상황에서 해당 요소가 어떻게 반응할지 조작하는 속성.
이 값이 1인 엘리먼트와 2인 엘리먼트가 있을 때 브라우저 창이 줄어들면
값이 1인 엘리먼트는 1의 비율만큼 줄어들고
값이 2인 엘리먼트는 2의 비율만큼 줄어든다.

@flex-grow나 flex-basis값이 있을 때 얼마나 줄일지 설정하는 옵션이다.

Holy grail layout
Holy grail은 성배다.
Holy grail layout은 이미 정해져있는 layout중 하나.
모양은 성배와 상관이 없다. 다만 많은 사람들이 이 layout을 찾기위해 노력했다(?) 그래서 이름이 이렇다.

위에서 배웠던 flex를 어떻게 사용하는 것인지 보여주니 궁금하면 강의 보셈

flex5:기타속성들
flex의 여러가지 속성들에 대해 살펴봄.
강의 참조

Multi column
멀티컬럼은 신문에서 글을 배치하는 방법임.
글이 매우 길 때 줄의 길이가 너무 길면 읽기 힘들다.
column-count:2
text-align:justify(앞에서 배웠던 거임. 같이쓰면 신문과 같은 배치를 할 수 있음)
column-width:200px 컬럼의 폭을 설정할 수 있음.

count, width모두 절대적으로 지켜지는 값은 아님. 브라우저가 줄어들거나 늘어나면서 자동으로 조절된다. width와 count를 둘다 설정 했다면, 브라우저 크기가 변화하는 상황에서 최대 count까지의 커럼만 생긴다....(못알아 듣겠으면 강의보셈.)

count값, width값 둘 다 같이 쓰는 것 보단 하나만 쓰는게 나을듯?

이외에도 column-gap, column-rule-style, column-rule-width, column-rule-color, column-span 정도의 속성이 있음.

글 뿐만 아니라 이미지들도 저렇게 배치할 수 있음
(엄청 세련되 보임.)(생활코딩 핀터레스트 스타일 레이아웃 만들기에서 확인가능)

Media query
반응형 웹과 관련된 기술임.
반응형 웹: 요즘은 여러가지 출력매체들이 있다. 매체에 따라 페이지를 최적화 해서 보여주는 웹 기술.

Float1
Float는 flex가 나오기 전 layout을 잡을 때 많이 사용함.
기본적인 기능은 글과 사진을 같이 배치할 때 어울리게 배치할 수 있음.
img태그에 float:left값을 주면 사진을 왼쪽으로 보내면서 오른쪽에는 글이 들어가게 됨.

그런데 어떤 글을 float의 배치를 따르기 싫을 수 있다. img에 float값을 주기 때문에 이 글은 float의 영향을 안받는다고 그 글에다가 속성을 설정해 주어야함. p{clear:both}
both대신 right, left를 사용 할 수도 있는데. 이 의미는 float값이 left일때는 clear값에 left를 주어야 적용됨 right일 때도 마찬가지!

Float2: holy grail layout
그냥 float를 이용해 layout을 만드는 과정을 보여줌. 앞의 내용 복습도 할 겸. 프론트 엔드에 대한 감도 익힐겸 다시보면 괜찮을듯!

Back ground 배경
background-color:tomato
background-image:url('run.png')
background-repeat:no-repeat
//기본값은 repeat임. 이외에도 repeat-x, repeat-y등의 값이 있음.
background-attachment:fixed
(scroll도 있음, 스크롤이 기본값임.)
background-size:contain
(cover도 있음)

구글링 요령
css background-size contain cover
두 속성의 차이점에 대해 잘 말해줌.

background-position:left top
(center bottom, center center ...)
no-repeat일 때 배경에 표시되는 이미지의 위치를 조정가능.

css short hand(축약형 알아보기)

Filter
꾀 신기하니 궁금하면 강의보셈
이미지 뿐만 아니라, 동영상, 텍스트에도 이용가능함.
Filter기능은 비교적 최신기술이라서 일부 브라우저에서는 기능하지 않을 수 도 있다. 이런경우 vender prefix라고 실험적으로 지원하는 경우가 있는듯. 그래서 접두사를 붙여 코딩함.(자세한 내용은 강의 참조, 중반부분)

-webkit-filter //chrome, safari에서 사용하는 vender prefix임.

Blender
포토샾으로 처리해야할법한 일들을 css으로 처리 했을 때 좋은 것은 텍스트를 검색이 가능하게 되고, 선택할 수 있고, 누군가에게 보내줄 수 있고, hover같은 것들을 이용해 더 다양한 효과를 낼 수 있다

Blender2:background-blend-mode
그냥 배경이랑 사진을 blend하는 기법임.
영상 후반부에서 transition(변화를 부드럽게 하는 기법)에 대해서 알려주니 이것만 가져가면 될듯.

Blender3:mix-blend-mode
크게 뭐 없음...그냥 포토샾 배우는 느낌..
Blend 시리즈는 딱히 안들어도 될듯

Transform1
Transform은 엘리먼트를 움직이거나 모양을 바꾸거나 비틀거나 크기를 바꾸거나 등등을 할 수 있게 해줌. 강의 마지막에보면 생활코딩 사이트에 여러가지 값들을 잘 정리해놓은 것을 보여주니 참조.

transform2
Transform을 실감나게 구현하는 것은 어렵다. 중력의 느낌이라던지 이런것을 우리가 하나하나 하기는 어렵기 때문에 css transform library를 이용해서 하면 간편하게 구현할 수 있다.
영상 마지막에 라이브러리에 관해 소개하고 있으니 참조바람.

transition(전환, 변환)
display:inline-block은 뭐지??
Transform이라는 속성은 엘리먼트가 inline이면 작동하지 않는다. display를 통해 바꿔줘야함.
transition-property:all;
transition-duration:1s;
transition: all 1s

transition:font-size 1s, transform 3s;
이런식으로 하면 효과마다 duration을 다르게 설정할 수 있다.

클릭했을때 어떻게 변화할지는 a:active{}에다가 기술. 위와 같은 transition설정은 a{}에다가 한다.

Transition2
Transition을 적용해볼려면 transition1,2다 들어보는 것을 추천
transition:hight 1s;
transition-timing-function:ease;(이 설정을 안해줘도 기본값은 ease임!)
Ceaser웹사이트 활용방법에 관한 내용도 ㄱㅊ은듯.

Link&Import
두 코드가 완전히 같다고 판단하는 것은 상당히 고된 일이다. 하지만 함수나 파일로 따로 저장해서 불러오는 방식을 통하면 단번에 알아챌 수 있음

<head><link href="style.css" rel="stylesheet"></head>
style태그 없이 head태그에 바로 넣는다.

링크를 통해 css를 관리하더라도 유지보수가 편해진 것이지 웹사이트가 가벼워 지는 기능은 없다. 페이지에 접할때 마다 css파일을 다운받는 구조임. 그럼에도 웹페이지가 경량화된다고 하는 이유는 cache기능때문!
/////////////////////
<script>@import style.css</script>의 방식으로도 할 수 있다.
(@import url(~)의 방법도 가능! 로컬에 파일이 있지 않고 웹사이트에서 가져와야할 때)

Minify
clean css online과 같은 웹툴을 이용해서 경량화 가능

css코드의 공백같은거 줄여주는 프로그램인데, 30퍼정도 용량을 줄여주니 의미있는것 같음. 무조건 해야할듯

css뛰어넘기 preprocessor
css는 표준화된 기술임. 표준화된 기술은 개인이나 특정 단체가 확정하는 것이 아니다. 위원회가 있고 위원회에서 심의를 걸쳐 어떤 표준안이 작성되고 브러우저를 제공하는 업체에서 이 표준안을 제공하기 시작 한다. 더불어 많은 사용자들이 브라우저를 업그레이드 하고, 개발자.디자이너들이 이 기술을 수용해야 기술은 적용되는 것이다.

preprocessor는 어떤 단체가 css문법을 약간 수정해서 제공하는 것이다. preprocessor는 css에다가 자신만의 문법을 추가한 것과 컴파일러로이루어져 있다. Preprocessor의 문법에 맞춰 코딩하고 컴파일러로 css문법에 맞게 변환한다. 그다음 웹사이트에 적용시키면 브라우저는 preprocessor의 존재를 모른채 작동할 수 있게 된다.