CSS 기초 스터디 Note

CSS관련 체험 및 적용된 효과를 보고 배울 수 있는 사이트 (codepen.io)

HTML이 정보를 전달하는 것이 목적이라고 하면 CSS는 HTML을 보기좋게 꾸며주는 역할을 하는 언어임.

HTML과 CSS는 필연적으로 붙어있어야 하며, HTML이 무엇이고, Tag가 어떻게 사용되는지에 대해서만 알면 배울 수 있는 쉬운 언어임.

CSS(Cascading Style Sheet)는 쉽지만 기능성이 떨어짐. 따라서 이를 보완하기 위한 여러 다른 언어들이 존재함.

• LESS
• SASS
• Twitter Bootstrap

HTML의 Font Tag가 따로 떼어져 나와서 CSS가 되었다라고 생각해도 됨.

• CSS 적용하기 (style)

head Tag 하위에 위치해 있으며 Tag명과 속성값들로 해당 Tag에 디자인을 적용함.

<style>

tag명{ tag속성:값;}

</style>

또는 Tag에 style="속성:값"을 이용하여 적용 시킬 수 있음.

CSS의 문법은 속성:값임. style 은 CSS가 적용된다는 것을 나타내주는 Tag 및 속성값이다.

• 선택자(Selector) {선언}

디자인 하려는 태그를 선택(선택자). 선택자로 사용할 수 있는 것들은 아래와 같음.

• 태그    :  Tag를 그대로 사용
• 클래스 : .class명 (복수의 선택이 가능함)
• 아이디 : #id명 (id는 유일 해야함.)

위의 세가지 선택자들을 응용하여 부모 자식들을 선택할 수 있음

• tag1 tagr2 {} 로 CSS를 선언하면, tag1하위의 Tag2를 선택한 것.
• id>tag {} 로 CSS를 선언하면 id에 해당하는 Tag 하위의 Tag2를 선택.
• ','를 이용하여 나열하면 각각의 선택자를 선택한것.

가상 클래스 선택자로 클래스 속성을 통해 따로 지정한 것은 아니지만, 해당 Tag의 상태에 따라 선택할 수 있게함

Tag:가상 클래스 형태로 선택 가능. 여러 클래스가 중복이 되는 경우 가장 마지막에 작성된 효과를 나타낸다.

• 타이포그래피 속성

• font-size
• px     :  고정되어 있음
• em    :  상속받아 크기가 결정되나, 어려움.
• rem   : 사용자가 font-size를 인터넷 설정으로 변경 할 수 있음
  
  
• text-align
• justify : 오른쪽끝이 불규칙적으로 들쑥날쑥할때 단어 사이의 간격을 조절하여 오른쪽끝역시 1자로 
  배열되도록 수정
  
• center, left, rigth : 설명 생략.
  
  
• font
• font-family 
  : font를 ','구분으로 여러가 선언할수 있으며 순서대로 사용함. PC에 해당 font가 없으면 다음 font로 설정해준다.
  serif(장식이 있는 font)/sans-serif(장식이 없는 font), monospace(고정폭)
• font-weigth : 강조
  
• font-height : 자간(dsfault = 1.2)
  
  
• 웹 폰트 
  : 사용자가 가지고 있지 않은 폰트를 웹페이지에서 사용할 수 있는 방법. 폰트 서버에서 다운로드하는 방식
  영문은 용량이 작으나 한글은 용량이 크므로 네트워키 비용및, 사용자가 다운받는 시간이 소요 될 수 있음.
  (google에서 제공하는 webfont 사이트 참조./ web font generator로 웹으로 올려 사용가능.) 

• 조화
  
• 상속
  자식은 부모의 속성을 물려받는데, 자식에 따로 속성을 부여할 수 있음. 속성마다 상속이 가능여부를 확인 가능함.
• stylish (crom 확장 app)
  해당 사이트를 사용자가 css를 customizing해서 공유하는 방식. 여기서 css적용하는 아이디어를 얻을 수 있을듯.
• Cascading
  하나의 Tag에 여러 CSS가 중첩되었을 경우 어느것이 우선시 되는지에 대해.
  style attribute>id selector>class selector>tag selector

• 레이아웃
• 인라인 VS 블럭레벨
• 인라인 element : 태그의 내용 사이즈 만큼 Layout차지하는 element
• 블럭레벨 element : 태그가 내용이 시작되는곳에서 부터 끝까지 Layout 차지 (해당 Line)하는 element
  
  
• Box Model (중요함)
  tag에 border 속성을 주었을때 나타나는 Box가 Box model의 기준이 됨.
• padding : box와 내부의 contents사이의 간격을 의미
• margin : box와 외부의 간격을 의미
  
  
• box-sizing
  박스의 크기를 화면에 표시하는 방식을 변경하는 속성. width와  height는 엘리먼트의 컨텐츠의 크기를 지정하므로 테두리가 있는 경우에는 테두리의 두꼐로 인해서 원하는 크기를 찾기 어려움. 따라서 box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉬움. 모든 엘리먼트에(*{}) box-sizing=border-box로 하여 사용하곤함.
  
  
• margin 겹침 현상
  겹쳐있는 margin값중 큰 값이 두 element 사이의 margin이 됨
  부모태그가 화면에 나타나지 않으면 자식의 margin값과 겹침 현상이 일어남(부모태그가 화면에 나타난다면 겹침현상 일어나지 않음.)
  
  
• Position 
• static(default) : 위치 설정을 하여도 자신이 위치해야할 곳에 element가 고정됨
  
• relative : 위치 설정을 한 경우 자신이 위치해야할 곳을 기준으로 element가 이동
• absolute
  : static이 아닌 부모의 위치 기준을 따름.(만약 모든 tag가 static이라면 최상위 tag인 html 기준이 됨.)
  자신의 크기는 자신의 컨텐츠 크기(원래는 부모의 크기에 따름
  부모 역시 absolute라고 지정된 자식의 공간을 남겨두지 않음(버림)
• fixed : 화면이 이동해도(스크롤을 움직여도) fixed로 지정된 elements들은 화면에 고정됨.(스크롤로부터 독립)
  
  
• flex (실습 : http://codepen.io/enxaneta/pen/adLPwv)
  엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구. flex를 사용하기 위해서는 컨테이너 태그에 display:flex속성을 부여해야 함.
  flex-direction을 이용해서 정렬방향을 바꿀 수 있음.
• flex-basis : flex가 적용될때 해당 tag의 기본 size 설정.
• flex-grow
  : flex속성을 가진 tag와 관련된 속성으로 커지는 비율을 지정하는 방법
  (해당 tag의 flex-grow 값) / (컨테이너 엘리먼트하위의 flex-grow total 값)의 비율로 나눠서 차지함
• flex-shrink
  : flex속성을 가진 tag와 관련된 속성으로 작아지는 비율을 지정하는 방법
  (해당 tag의 flex-shrink 값) / (컨테이너 엘리먼트하위의 flex-shrink total 값)의 비율로 줄어듬
• Holy Grail Layout (궁극의 레이아웃)
  
  
  
• Media query
  화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 cSS의 기능.(반응형 디자인의 핵심 기술)
  style tag에 @media(조건){} 로 미디어 쿼리 실행
  나중에 선언된 효과가 우선순위가 높기 때문에 범위가 좁은 효과가 아래로 가야 원하는 효과를 다 나타낼 수 있음.
  모바일에도 적용하기 위해서는 <meta name="viewport" content="width=device-width, initial-scale=1.0">
• float 편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법으로 레이아웃을 잡을 때도 사용 한다. 이미지를 넣으면 해당 row에는 컨텐츠가 들어가지 않는데, float효과를 이용해서 컨텐츠가 이미지를 피해 같은 열에 나타날 수 있다. 이와 반대로 'Clear:float 방향(left/right/both)'을 사용하면 해당 방향의 float효과를 무시할 수 있다.

• 그래픽
• background : 엘리먼트의 배경을 지정 할 수 있음.
• filter : CSS의 최신 기술. iframe, text, img 동영상까지 필터효과 적용 가능. 아직 전면적용되지 않았음.
• blend : 이미지와 이미지를 혼합해서 새로운 이미지를 만들어내는 기법.
• background-blend-mode : 다양한 효과가 있음. background 효과들 간의 blend해줌
• mix-blend-mode : content와 background img 사이의 블랜드 효과.
• transform : 엘리먼트의 크기, 위치, 모양을 변경하는 속성 (css transform library로 검색해서 얻어쓰면 효율적임)
  (shake library : http://elrumordelaluz.github.io/csshake/#1)
• SVG : 벡터 이미지를 표현하기 위한 포멧. (thenounproject.com : 벡테 이미지를 다운 받을 수 있는 사이트)
  

• 모션 그래픽 (transition : 전환)
  효과가 변경되었을 때 부드럽게 처리해주는 CSS의 기능.
• transition-duration : duration관련 사용자 customizing가능 (https://matthewlein.com/ceaser/)
• transition-property : Transigiton효과를 적용할 효과 (all은 모든 효과 속성 변형에 대해)
• transition-delay
• transition-timing-function
• transition

16.09.17  최초 작성 / 생활 코딩(https://opentutorials.org) 참조