Css
CSS 기초
1. CSS
1.1. CSS?
- 웹 문서를 꾸미기 위한 Style Sheet 언어
1.2. 기본 문법
1.3. 내부 CSS, 외부 CSS, inlince CSS
- 내부 CSS : 웹 문서 안에 스타일을 작성
- 외부 CSS : 별도의 파일을 만들어서 스타일 코드 관리
- inline CSS : 태그에 직접 스타일 정의
1.4. CSS 주석
/* 주석 */
2. 선택자, 상속과 초기화
2.1. 전체 선택자
*: 문서 내의 모든 요소를 지정2.2. 태그 선택자
- 해당 HTML 태그에 해당하는 요소만 지정
2.3. id, class 선택자
- 해당 id 또는 class와 완전히 동일한 값을 갖는 요소만 지정
- id는
#으로 시작, class는.으로 시작2.4. 속성 선택자
- 요소가 가진 속성을 선택자로 한다.
- 대괄호 안에 속성 이름을 넣어 선택자로 사용할 수 있다.
2.5. 의사(가상) 클래스
- 기존 “선택자”에 추가하는 특별한 상태를 선택하는 선택자
- 대표적인 의사(가상) 클래스
:hover: 마우스를 올리면 적용:focus: 키보드의 탭 키로 이동시 적용:first-child: 자식 노드들 중 첫 번째 노드를 선택:nth-child(n): 자식 노드들 중 n번째 노드를 선택2.6. 의사(가상) 요소
- 기존 “선택자”에 추가하는 선택한 요소의 일부를 스타일링하는 선택자
- 대표적인 의사(가상) 요소
::before: 특정 요소의 전을 가리킴::after: 특정 요소의 앞을 가리킴::placeholder: input태그의 placeholder값을 선택2.7. 상속과 초기화
inherit: 부모 요소의 “스타일 값”을 이어받아 자식 요소에 적용하는 것initial: 브라우저가 지정한 속성의 초기값을 요소에 적용한다.(초기값은 예상치 못한 값일 수 있으니 주의해야 한다.)3. 결합자, 우선순위
3.1. 자손 결합자
- 앞 셀렉터의 자식 요소들 중에서 해당 선택자와 일치하는 요소를 선택한다.
- ` `(공백)을 주어 앞 셀렉터의 자식 요소를 선택한다.
3.2. 자식 결합자
- 앞 셀렉터의 직계 자식 요소들 중에서 해당 선택자와 일치하는 요소를 선택한다.
>을 주어 앞 셀렉터의 바로 아래 자식 요소를 선택한다.3.3. 일반 형제 결합자
- 앞 셀렉터의 다음에 위치한 모든 형제 요소들 중 해당 선택자와 일치하는 요소를 선택한다.
~를 주어 앞 셀렉터의 형제 요소를 선택한다.3.4. 인접 형제 결합자
- 앞 셀렉터의 형제 관계의 요소들 중에서 해당 선택자와 일치하는 요소를 선택한다.
+를 주어 앞 셀럭터의 바로 다음 형제 요소를 선택한다.3.5. 우선순위(명시도)
- 작성 순서, 결합, 선택자에 따라 우선순위는 변경된다.
- 기본 우선 순위
- 태그 선택자
- class,속성,의사(가상) 클래스 선택자
- id 선택자
- inline CSS
4. 단위
4.1. 고정 단위
px: Pixel은 정확한 크기를 나타내야 할 때 사용된다. 웹 브라우저 기본 폰트 크기는 16px이다. 소수점은 사용하면 안된다.pt: Point는 일반적으로 문서 등에서 사용되는 단위이다. 웹 브라우저의 기본 폰트 크기는 12pt이다. 소수점은 사용하면 안된다.4.2. 상대 길이 단위
em: 요소의 글꼴 크기에 상대적인 단위이다. 글꼴이20px로 정해지면1em은20px크기이다. 모든 상대 길이 단위에는 소수점 단위가 사용될 수 있다. 또한em은 합성값이기도 하다.font-size가em을 사용하여 중첩되어 정의되면 계속해서 커질 수 있다.rem: html 셀렉터에 정의된font-size를 기준으로 동작하는 단위이다. 합성을 회피하기 위해 만들어진 단위이다.%: 부모 요소의 해당 속성의 크기에 * n%만큼으로 크기가 정해진다.vw: Viewport Width(뷰포트 너비)는 화면의 너비에 따라 결정된다.vh: Viewport Height(뷰포트 높이)는 화면의 높이에 따라 결정된다.vmin: 너비와 높이 중에서 화면에서 가장 작은 값에 따라 결정된다.1vmin = (너비 or 너비) * 1%5. 꾸미기
5.1. 글꼴 꾸미기
font-size: 글자 크기를 변경할 수 있다.font-family: 글씨체를 변경할 수 있다.font-weight: 글짜 두께를 변경할 수 있다.color: 글자 색상을 변경할 수 있다.text-align: 글자를 가로로 정렬할 수 있다.line-height: 글자의 줄간격을 변경할 수 있다.letter-spacing: 자간을 변경할 수 있다.5.2. 배경 꾸미기
background-color: 배경색을 지정할 수 있다.background-image: 배경 이미지를 지정할 수 있다.background-repeat: 배경 이미지의 반복을 지정할 수 있다.background-size: 배경 이미지의 크기를 지정할 수 있다.background-position: 배경 이미지의 위치를 제어할 수 있다.background: 위 background 요소들을 한번에 작성할 수 있는 속성이다. 공백을 기준으로 구분하여 작성한다. 작성 순서는 상관없으나 위치/크기는 규칙에 맞게 함께 작성되어야 한다.6. 박스 모델
6.1. 크기 지정
width,height: 너비, 높이를 지정할 수 있다.- 블록 레벨 요소에서 사용할 수 있다.
- auto 값을 사용해 브라우저가 값을 계산해 지정하게 할 수 있다.
6.2. 최대/최소 크기 지정
max-width,max-height: 박스의 최대 너비, 최대 높이를 지정할 수 있다.min-width,min-height: 박스의 최소 너비, 최소 높이를 지정할 수 있다.6.3. 외부/내부 여백
margin,padding: 박스의 외부, 내부의 상하좌우 여백을 지정할 수 있다.- 블록 레벨 요소에 사용할 수 있다.
- 인라인 레벨 요소에는 좌/우만 적용할 수 있다.
- 작성 값의 개수에 따라 지정되는 방향이 다르다.
- margin은 음수값이 가능하다.
6.4. 여백 상쇄
- 경우에 따라 요소간의 외부 여백이 상쇄(결합)가 발생한다.
- 인접 형제간의 외부 여백은 상쇄된다.
- 제일 큰 여백을 따라간다.
- 부모와 자식 요소의 여백을 분리할 권한이 없을 경우 상쇄가 발생한다.
- 빈 블록도 상쇄가 발생한다.
6.5. 테두리
- 박스의 네 면에 테두리를 그릴 수 있다.
border:border-widthborder-styleborder-color순으로 값을 전달하여 박스의 테두리를 그린다.box-sizing: 박스 크기를 계산할 때 내부 여백, 테두리의 크기를 포함할 지 결정한다.content-box:padding,width/height,border-width의 크기가 모두 더해진다.border-box:width/height의 크기만 더해진다.6.6. 초과
overflow: 콘텐츠 내용이 지정한 박스의 크기를 초과했을 때 대처한다.- 기본값은
visible로 초과해도 내용이 그대로 노출된다. overflow-x,overflow-y로 분리해서 지정할 수 있다.- 적용 가능한 값
visible: 그대로 노출hidden: 숨김scroll: 스크롤바 무조건 노출auto: 브라우저가 자동으로 결정하여 스크롤바 노출6.7. 투명도
- 기본값은
opacity: 박스의 투명도를 조절한다.- 기본값은 1이며 0~1 사이의 소수점을 사용해 적용 가능하다.
- 투명도가 적용되면 자식 요소도 함께 투명해진다.
opacity값은 상속되지 않는다.7. 표시 유형과 레이아웃
7.1. 표시 유형
display: 요소를 블록, 인라인에 대한 처리의 선택과 자식 요소를 배치하는 레이아웃을 설정할 수 있다.block↔inline간의 변환을 해주는 유형inline-block:inline이지만 block의 가진 css도 사용할 수 있게 되는 유형none: 존재하지 않는 것처럼 처리
visibility: 레이아웃을 변경하지 않고 시각적으로 보이거나 숨길 수 있다.display의none과는 다르게 시각적으로 숨겨지기 때문에 레이아웃 상에서 공간은 그대로 차지하게 된다.7.2. float
float: 문맥의 흐름으로부터 빠져 좌우측에 배치되는 속성이다.7.3. position
position: 문서 상에 요소를 배치하는 방법을 지정한다.top,right,bottom,left값으로 offset(위치)를 제어할 수 있다.z-index값으로 z축을 제어해 쌓이는 순서를 정의할 수 있다.- 적용 가능한 값
static(기본값) : 문서의 흐름에 따라 배치되고 offset 및 z-index를 제어할 수 없다.relative: 문서 흐름에 따라 배치하고 현재 위치 기준으로 offset과 z-index를 제어한다.absolute: 문서 흐름에서 제거되고 가장 가까운 위치의 relative 요소에 상대적으로 배치된다.fixed: 문서 흐름에서 제거하고 브라우저의 화면 기준으로 배치된다.sticky: 문서 흐름에 따라 배치되나, 요소가 스크롤에 닿으면 따라다닌다.7.4. 유연한 상자 만들기(flexbox)
flex: 유연함을 가진 일차원 레이아웃을 만들 수 있다.justify-context: 가로축 정렬flex-start(기본값) : 왼쪽 정렬flex-end: 오른쪽 정렬center: 수평 가운데 정렬space-between: 양쪽 정렬space-around: n등분 후 요소별 가운데 정렬, 전체 양쪽 정렬space-evenly: 양 옆 공간을 동일하게 맞춤.
align-items: 세로축 정렬strech(기본값) : 요소를 세로축에 꽉 차게 늘림flex-start,flex-end: 위쪽, 아래쪽 정렬center: 수직 가운데 정렬baseline:font에 정의된baseline을 따라서 정렬
flex-grow,flex-shrink: 유연성 조절flex-basis: 크기 조절flex-direction: 축 바꾸기gap,order: 여백과 순서
- flex 연습해볼 수 있는 사이트 : Flexbox Froggy
- layout 만드는데 많이 쓰이니 꼭 기억할 것!
7.5. 바둑판 상자 만들기(Grid)
grid: 수평선과 수직선을 가진 2차원 레이아웃을 만들 수 있다.grid-template-columns : size size size ...: grid의 열의 개수를 조절한다.grid-template-rows : size size size ...: grid의 행의 개수를 조절한다.grid-template : row / column: 바둑판 조절하기repeat(count, size): 반복하기grid-row,grid-column: 셀 확장order: 시각적인 순서가 바뀜, HTML 순서는 그대로grid-template-areas,grid-area: 영역 지정하고 배치하기gap,order: 여백과 순서
-
전판적인 홈페이지의 구조(semantic tags)를 정할 때 grid를 쓰면 편리하다.
8. CSS 주의사항
- id,class명 사용 시 대소문자에 유의하라!
- 한글은 가급적 사용하지 마라!
- 계층을 매번 생각하며 코딩하라!
- HTML 순서랑 css 순서랑 되도록 같게 유지하라!
- id, class명 작성시 숫자부터 오면 안된다!