CSS 기초

10 Jan 2018 • Html&Css

CSS

Style sheet

  • 내부 style sheet
<style>
	#title-id{
		font-size: 50px;
		font-weight: bold;
		color: #98849;
	}
</style>
  • 인라인 style sheet
<a href="https://google.com" style="font-size: 30px; border: 3px 	solid black;">google</a>`
  • 외부 style sheet
<head><link rel="stylesheet" href="./css/03.external-style-sheet.css"></head>

CSS Selector

  • 전체 선택자 *{ }
  • 태그 선택자 ul{ }
  • ID 선택자 #id{ }
  • Class선택자 .class{}
  • 체인 선택자 div#id.class{ }
  • 그룹 선택자 #id1, #id2 { }
  • 복합 하위 선택자 ul ol{ }
  • 복합 자식 선택자 ul > li { }
  • 복합 인접 형제 선택자 h1 + ul{ }
  • 복합 일반 형제 선택자 h1 ~ ul{ }
  • 속성선택자 E['attr'] 등등
  • 가상선택자 E:visited, E:hober, E:after 등등

Css Cascading

AA가 가장먼저 적용 된다

스타일 특정도
important AA
Inline Selector A
Id Selector B
Class Selector C
Tag Selector D

###Font

  • 크기 color: red;
  • 색상 font-family: "돋움", dotum, "arial";
  • 크기 font-size: 20px;
  • 스타일 font-style: italic;
  • 굵기 font-weight: bold;
  • 간격 line-height: 20px(1.5);
  • 꾸미기 text-decoration: none;
  • 정렬 text-align: center;
  • 들여쓰기 text-indent: 1em; -일 경우 내어 쓰기
  • 대소문자 변환 text-tranform: capitalize;
  • 자간 letter-spacing: 5px;
  • 단어자간 word-spacing: 5px;
  • 수직정렬 vertical-align: middle;
  • 줄바꿈 white-space: pre-line;

Background

  • 색상 background-color: rgba(255,255,255, 0.1);
  • 이미지 background-image: url(../images/path.png);
    • 반복 background-repeat: norepeat;
    • 위치 background-position: center, bottom;
    • 고정 background-attachment: local;

Border

  • 방향 상우하좌(시계방향) top right bottom left
  • 굵기 border-width: 4px 5px; 상하 4px 좌우 5px
  • 스타일 border-style: solid;
  • 색상 border-color: red;

Box models

  • 마진->보더->패딩-> 컨텐츠 순으로 모델링 됨
  • block div h1 p등과 같이 width가 브라우저 전체 크기인 것
  • inline span i 등과 같이 width가 컨텐츠 크기이며 한줄로 표현하는 것
  • 마진이 겹치면 큰 마진쪽만 적용 된다.
  • padding은 내부 여백을 말한다.
  • 가로, 세로 width height
  • box-sizing: border-box 를 적용하면 요소의 width값에 마추어 padding과 border값을 제외한것이 width가 된다.

List Style

  • 리스트 불릿 스타일 지정 list-style-type: disc|demical;
  • 리스트 불릿 이미지 지정list-style-image: url('');
  • 리스트 불릿 위치 지정list-style-position: inside|outside;

Table Style

  • 테두리 합치기 border-collapse: collapse;
  • 테이블 셀간격 border-spacing: 10px;
  • 빈셀 표시 empty-cells: hide|show
  • 테이블 레이아웃 table-layour: fixed|auto fixed로 설정하면 셀 길이가 일정하게 유지 됨(width가 설정 되어 있어야 함)

화면 표시 속성

  • 화면 표시 방법
    • display: block block속성을 가지게해줌
    • display: inline inline속성을 가지게 해줌
    • display:inline-block inline속성처럼 취급되지만 block처럼 크기를 가짐
    • display: none 해당 요소의 하위 요소들도 보이지 않고 공간도 차지 하지 않음
    • visibility:hidden|visible 화면의 공간은 차지하나 투명해 진다.
  • 화면 넘침표시
    • over-flow:hidden 넘친 콘텐츠를 숨김
    • over-flow:visible 모두 보여줌
    • over-flow:auto 콘텐츠가 넘칠경우 스크롤바 생성
    • over-flow:scroll 항상 스크롤바가 있음

float

float 속성은 중간에 이미지를 넣은 단락을 만들고자 하는 경우에도 사용한다. 해당 요소를 문서의 흐름과 별개로 취급 하여 띄어 준다 float요소가 연속적으로 존재할경우 both를 사용하여 block처리 float: left|right;

clear

float속성과 겹치는 경우 clear로 속성 제거 가능 clear:left|right|both;

float-layout

리스트를 사용할경우 float을 사용하여 가로로 가능 앨범이나 슬라이드에 자주 쓰이는 레이아웃 float-layout을 사용하면 부모의 height가 없어짐 이를 해결하기 위해 부모의 float | over-flow | 가상 선택자 등을 사용한다. 보통 가상 선택자를 많이 사용

element::after {
	content=' ';
	display: block;
	height = 0;
	clear = both;
}

Css Position

  • static - 기본값
  • relative - 자기 위치를 기준으로 정렬
  • fixed - 브라우저 창 기준
  • absolute - 부모를 타고 올라가면서 static이 아닌 값이 나오는 부모를 기준으로

CSS Center position

  • 가로 가운데 정렬

    전체 크기가 정해져 있지 않을 경우, 내용의 width만 지정한 후 좌우 margin auto로 같게 처리 해줌.

  • 부모의 가로 세로 가운데 정렬

    가상선택자를 사용하여 부모의 첫번째 요소에 가상의 엘리먼트를 삽입하여 중앙 정렬과 크기를 부모와 동일하게 한 후 자식의 정렬을 가상 엘리먼트를 기준으로 중앙정렬함

SemanticTag

  • 접근성을 위해 하는 것으로 문서의 각 부분들이 어떤 역활을 하는지 쉽게 알려 주기 위한 것`
    • header : 머릿 말 페이지 맨 위나 왼쪽에 삽입
    • nav : 내비게이션 링크, 가로/세로 형태의 메뉴에 사용
    • section : 콘텐츠 영역
    • article : 콘텐츠의 내용
    • aside : 본문 이외의 내용
    • footer : 꼬릿말, 제작자 및 저작권 정보 표시

Sass

  • css전처리기로 좀더 프로그래밍 적인 느낌으로 작성하여 css로 파싱 임포트 가능함
    • expanded : 일반적인 형태 * nested : 중첩되어 있는 형태 * compact : 하나의 속성당 한줄 차지 * compressed : 한줄로 모두 표현

Sass의 문법

  • 주석 //은 컴파일후 없어짐 /* */ 은 있음
  • 중첩 하위 표현 > .container > #page
  • 부모 & #page { &:honer{...}}
  • 선택자 상속 @extend 만들어진 css를 가져다가 씀
  • 대체 선택자 % 가상의 css를 만들어 놓고 필요할때 가져다 씀
  • 변수 $로 변수 만들어 사용 가능
 Html&Css

Comments

Other Posts