CSS_basic grammar1

CSS란?
HTML, XHTML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어
글꼴이나 배경색, 너비와 높이, 위치 등을 지정하거나 웹 브라우저, 스크린 크기, 장치에 따라서 화면을 다르게 표시될 수 있도록 지정할 수 있음

HTML 언어 하나로 문서의 뼈대를 만들고 꾸밀 수 있으나 이럴 경우 HTML 문서를 수정할 때 모든 문서를 하나씩 수정해야는 번거로움 발생
그래서 CSS는 문서의 내용과 표현을 분리하여 CSS 파일 하나만 수정하면 스타일에 해당하는 HTML 문서가 한번에 수정되는 장점을 가짐

HTML에 CSS 연결하기

3-HTML-CSS

스타일 시트 제작

html 파일에 작성하던 <style>태그 안 내용을 복사하여 파일 형식이 css인 파일에 붙여 넣어준다
- 프로젝트 폴더 안에 css 폴더를 따로 만들어 확장자를 .css로 저장

html에 외부 css파일 연결하기

html 파일의 <head>요소 안에 <link>요소 추가 : <link>를 이용해 css파일을 불러옴

        
      
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="style.css"/>
	</head>
	<body></body>
</html>

rel 속성 : 브라우저에 현재 문서와 링크된 문서 사이의 연관 관계를 알려줄 수 있음

<link>태그에서 주로 사용되는 rel 속성 종류 및 값

rel="alternate"	대체 버전의 문서와의 관계를 나타내는 링크를 의미
rel="canonical"	문서의 본질적인 버전을 나타내는 링크를 의미
rel="stylesheet"	HTML 문서에 CSS 스타일 시트 연결 시 사용
rel="icon"	HTML 문서에 아이콘 연결 시 사용
rel="preconnect"	문서와 사전연결되는 리소스와의 관계를 나타내는 링크 의미
rel="prefetch"	사전 로드되는 리소스와의 관계를 나타내는 링크 의미
rel="preload"	리소스의 사전 로드를 나타내는 링크 의미

href 속성 : 가져올 파일 경로 지정

절대 경로와 상대경로
절대 경로 : 최초 디렉터리를 기준으로 경유한 경로를 모두 기입하는 방식(풀경로)
상대 경로 : 현재위치(작업위치) 기준으로 목적지까지의 상대적 경로

/ : 가장 최상의 디렉터리
./ : 현재 위치(생략가능)
../ : 현재 위치 기준 상위 디렉터리

type 속성 : 연결할 리소스의 타입 정의
- 스타일 시트 : text/css 가 타입이 됨
  
  css가 웹에서 사용되는 유일한 스타일시트 언어이기 떄문에, 타입은 포함하지 않는 것이 일반적
media 속성 : 언제 특정 스타일시트를 불러올지 지정하는 데에 사용
- 선택적 속성(있어도 되고 없어도 되는 존재)
- 이 속성의 값은 반드시 미디어타입/미디어 쿼리여야 함
- 다른 스크린 사이즈와 장치에 각각 다른 스타일을 적용하고자 할 때 유용

CSS 파일의 문자 인코딩 방식 지정하기

그림이나 글 등이 깨지지 않게 지정 습관화

        
/*웹 문서에서 한글을 지원한다는 인코딩 방식*/

@charset "utf-8";

CSS로 HTML 요소 다양하게 선택하기

선택할 HTML 요소를 선택자로 지정하고 이 요소의 바꿀 속성명에 속성값을 대입

예시

전체 선택자 - 모든 HTML 요소를 한꺼번에 선택하기

HTML의 모든 태그 전체를 선택할 수 있음
전체 선택자 기호 : * {}
- {}로 그룹을 지정

태그 선택자 - 태그명을 이용하여 선택하기

HTML 파일의 특정 태그 요소를 선택하여 사용할 수 있음
선택자와 같은 태그에 적용
선택할 태그 {}
- ex_h1 {border: 1px solid red;}
  : <h1>선택자에 1px 빨간색 테두리 지정

자손 선택자 - 자식과 하위 요소를 모두 선택하기

특정 HTML 요소의 자식 요소를 포함하여 그 하위에 있는 모든 요소를 선택할 수 있음
HTML태그 자식태그 {} : 자식 태그 포함 뒷 요소들 포함
- ex_section p {color:red;}
  
  <section>선택자의 자식인 <p> 포함 그 하위 요소들 모두 빨간색으로 지정
선택자를 여러개 쓰는 복합 선택자
자손은 자식을 포괄하는 의미로 모든 하위 요소를 의미

자식 선택자 - 직계 자식 요소만 선택하기

특정 HTML 요소의 직계 자식 요소를 선택하여 사용
부모 선택자 > 자식 선택자 {} : 앞 요소의 자식인 뒷 요소 선택
- ex_section > p {color:red;}
  
  <section>선택자의 자식인 <p>만 빨간색으로 지정
선택자를 여러개 쓰는 복합 선택자
바로 아래의 자식 요소에만 적용

그룹 선택자 - 여러 개의 요소를 그룹으로 선택하기

태그, 태그, 태그 {} : 선택하고자 하는 요소를 콤마를 사용하여 그룹으로 지정
- h1, h2, h3 {color:red;}
  
  <h1>, <h2>, <h3> 빨간색으로 지정

순서 선택자 - 형제 요소의 순서를 이용하여 선택하기

HTML 요소의 순서를 이용하여 필요한 요소만 선택할 수 있음
태그 자식태그:nth-of-type() {}

태그 안에 있는 자식 태그 중 ()번째 태그
태그 자식태그:first-child {}

태그 안에 있는 자식 태그 중 첫번째 태그

수열 선택자 - 수식을 이용하여 선택하기

배수 또는 특정한 규칙에 따라 요소를 선택
태그 자식태그:nth-of-type(2n) {}

자식 태그의 요소 중 2의 배수 선택

()에 들어가는 숫자를 3n으로 바꾸면 3의 배수 선택
태그 자식태그:nth-of-type(2n-1) {}

자식 태그의 요소 중 홀수 선택

= 태그 자식태그:nth-of-type(odd) {}

마지막 요소 선택자 - 형제 요소 중 마지막 요소를 선택하기

태그 자식태그:last-child {}

태그 안에 있는 자식 태그 중 마지막 태그

홀수, 짝수 선택자 - 홀수 또는 짝수 요소를 선택하기

태그 자식태그:nth-of-type(odd) {}

태그 안에 있는 자식 태그 중 홀수 순서
태그 자식태그:nth-of-type(even) {}

태그 안에 있는 자식 태그 중 짝수 순서

속성 선택자 - 속성값을 이용하여 선택하기

특정 속성을 가진 요소를 선택
주로 <type> 속성의<input> 요소와 함께 쓰임
[속성명] {속성 : 값;}
- ex_input[type="text"] {color:red;}
  
  text 속성은 빨간색으로 지정

가상 선택자 - 가상의 요소를 선택하기

가상 클래스(= 가상 선택자)
- 동적 가상 클래스(선택자)
  - hover : 마우스 커서를 올려뒀을 때 활성화
    - 태그:hover {color: red;}
      
      마우스 커서를 올렸을 때 빨간색
  - active : 클릭 시 활성화
    - 태그:active {color: red;}
      
      클릭시 빨간색
  - link : 방문하지 않은 링크일 경우 활성화
    - 태그:link {color: red;}
      
      방문하지 않은 링크는 빨간색
  - visited : 링크 중 방문 기록이 있을 경우 활성화
    - 태그:visited {color: red;}
      
      방문 기록이 있는 경우 빨간색
  - focus : input 타입의 요소 등을 클릭으로 선택할 경우 활성화
    - input:focus {color: red;}
      
      선택 등을 하여(입력 태그) 포커스되면 빨간색
  - disable : 해당 요소가 비활성화 됐을 경우 활성화
    - input:disable {color: red;}
      
      해당 요소가 비활성화 되면 빨간색
      
      반응 선택자 : hover, active
      상태 선택자 : focus, disabled
      링크 선택자 : link, visited
- 구조적 가상 클래스(선택자) : css 선택자를 사용하지 않고 구조에서의 요소를 선택하기 위해 사용
  - ex_첫 번째 있는 요소, 마지막에 있는 요소, 짝수 번째 요소 등
    
    순서 선택자, 수열 선택자, 마지막 요소 선택자, 홀수, 짝수 선택자
- 가상 선택자 중 link, visited, hover, active는 정의 순서가 있음
  
  :link > :visited > :hover > :active
  
  스타일 적용 순서가 바뀌면 적용이 정상적으로 되지 않기도 함
  
  LOVE & HATE로 외우면 쉽게 외워짐
  :hover은 무조건 콜론 1개
가상 요소 : 두개의 콜론을 사용(::)하며 선택자에 의해 선택된 요소의 특정 부분에 스타일 적용
- ::before : 요소의 내용 앞에 추가시킬 태그를 지정
  - 요소의 내용 앞에 가상의 콘텐츠 생성
- ::after : 요소의 내용 뒤에 추가시킬 태그를 지정
  - 요소의 내용 뒤에 가상의 콘텐츠 생성
- ::selection : 드래그하여 선택되는 영역을 지정
  - 드래그로 선택한 글자의 스타일 지정
    
    ::before, ::after는 content라는 속성을 사용하여 앞(before), 뒤(after)에 content를 삽입
    
    가상 클래스
    
    여러 태그 중 원하는 태그를 선택하기 위해 사용하는 선택자
    
    요소의 상태를 이용해 선택자 지정
    
    특정 상황에 스타일 지정
    가상 요소
    
    내용의 일부만 선택해 스타일을 적용할 때 사용
    
    존재하는 것처럼 취급해 선택자 지정
    
    가상 클래스와 가상 요소를 함께 사용한다면 가상클래스 : 가상요소 순서를 지켜야함

클래스 선택자 - 클래스명으로 요소를 선택하기

같은 태그가 여러개 있을 경우 각각 다른 효과를 주고 싶을 때 태그마다 class를 붙여 사용
HTML에서 clss=클래스명으로 클래스 선택자 생성
- 이렇게 만든 클래스 선택 시 : css에서 태그명.클래스명 (태그명은 생략 가능)

아이디 선택자 - 아이디명으로 요소를 선택하기

태그에 고유한 이름을 붙여 특정 기능을 개발하기 위해 사용
아이디는 고유의 값이므로 이름이 같은 아이디를 중복 지정할 수 없음
아이디 속성은 웹 페이지에서 중요하거나 특정 영역을 지정할 때 자주 사용 : 시맨틱 태그(영역 지정 태그)에서 주로 사용
HTML에서는 id=아이디명으로 아이디 선택자 생성
- 이렇게 만든 아이디 선택 시 : css에서 태그명#아이디명 (태그명은 생략 가능)

클래스 : 동일한 html 파일 내에서 여러번 사용 가능
아이디 : 동일한 html 파일 내에서 한번만 사용 가능

폰트 스타일링하기

폰트 굵기 바꾸기

font-weight 속성 사용

속성명	속성값	설명
font-weight	nomal	폰트를 보통 굵기로 표시
font-weight	bold	폰트를 굵게 표시

태그 {font-weight: normal;}

태그 요소의 폰트는 기본 굵기로 표시

폰트 크기 바꾸기

font-size 속성 사용

속성명	속성값	설명
font-size	px	픽셀 단위로 폰트 크기 설정
	rem	최상위 부모인 html 태그를 기준으로 폰트 크기 설정
	em	부모 요소를 기준으로 폰트 크기 설정

px 단위
- 부모태그 자식태그 {font-size : 60px;}
  
  부모태그 안에 자식 태그의 폰트 크기를 60px로 표시
rem 단위
- 부모태그 자식태그 {font-size : 3rem;}
  
  부모태그 안에 자식 태그의 폰트 크기를 html 요소 기준 3배 크게 표시
- rem 단위 사용 시 html 요소의 font-size만 변경하여 다른 요소의 폰트 크기를 같은 비율로 일괄 수정 가능
  
  ex_html {font-size: 16px;}
  section h1 {font-size : 3rem;}
  = html 폰트 사이즈는 16px, h1 폰트 사이즈는 16px의 3배
em 단위
- 부모 태그를 기준으로 크기 기준 설정
- 잘 사용하지 않음

폰트 모양 바꾸기

font-family 속성 사용
태그 {font-family : 폰트명;}

ex_h1 {font-family : "돋움";}

h1태그의 텍스트는 돋움체
한글 폰트, 글꼴 이름이 두 단어 이상일 경우 큰따옴표로 감싸서 표기

속성명	속성값	설명
font-family	"폰트명"	폰트의 모양 설정

폰트 색상 바꾸기

태그 {color: 색상명;}

속성명	속성값	설명
color	영문명	폰트 색상을 영어 색상명으로 표기
	#000000	폰트 색상을 16진수로 표기
	rgb(0, 0, 0)	폰트 색상을 RGB로 표기

16진수 표기법이나 RGB 표기법을 사용할 경우 색상을 좀 더 세밀하게 설정할 수 있음

텍스트 줄 간격 바꾸기

line-height : 줄 간격 전체 높잇값

속성명	속성값	설명
line-height	실숫값	줄 간격을 폰트 크기에 맞춰 실수 배율로 지정
line-height	픽셀값	줄 간격을 고정된 px 단위로 지정

        
      
태그1 {
	/* 픽셀값 */
	font-size: 20px;
	line-height: 40px;
	/* 줄간격 : 40px 고정 */
}
태그2 {
	/* 실숫값 */
	font-size: 20px;
	line-height: 1.5;
	/* 줄간격 : 폰트 사이즈(20px)의 1.5배 */
}

텍스트 정렬 방향 지정하기

text-align 속성 사용
태그 {text-align: 속성값}

속성명	속성값	설명
text-align	left	텍스트 왼쪽정렬
	center	텍스트 중앙정렬
	right	텍스트 오른쪽정렬
	justify	텍스트 양쪽정렬

텍스트 자간 지정하기

자간은 px 단위 사용하여 설정
태그 {letter-spacing: 0px;}

속성명	속성값	설명
letter-spacing	1px	텍스트의 간격을 px단위로 지정

웹 페이지에서 영역별 크기 정하기

블록 요소와 인라인 요소 때문에 모든 태그의 영역과 여백 크기를 지정할 수는 없음

너비와 높이 지정하기

width, height 속성 사용

속성명	속성값	설명
width, height	px	px 단위로 지정
	%	부모 태그 기준 %단위로 지정
	vw	웹 브라우저의 너비 기준 백분율로 지정
	vh	웹 브라우저의 높이 기준 백분율로 지정

        
      
태그1 {
	width: 100px;
	height: 100px;
}
태그2 {
	width: 20%;
	height: 20%;
}
태그3 {
	width: 10vw;
	height: 10vw;
}
태그4 {
	width: 10vh;
	height: 10vh;
}

px 단위
- 너빗값과 높잇값이 고정
  
  웹 브라우저의 크기를 늘리거나 줄여도 변하지 않음
% 단위
- 웹 브라우저의 크기가 달라질 때마다 부모태그 기준으로 너빗값 변화
  
  높잇값은 영향받지 않음
  
  % 단위는 부모 요소 크기에 비례해서 크기를 정하기 때문에 높잇값은 동작하지 않음
vw 단위
- 웹 브라우저의 너빗값을 백분율로 환산
vh 단위
- 웹 브라우저의 높잇값을 백분율로 환산

바깥쪽 여백 지정하기

margin 속성 사용

속성명	속성값	설명
margin	px	px 단위로 지정
	%	부모 태그 기준 %단위로 지정
	vw	웹 브라우저의 너비 기준 백분율로 지정
	vh	웹 브라우저의 높이 기준 백분율로 지정

        
      
 태그1 {
	/* 상하좌우 여백 10px */
	margin: 10px;
 }
 태그2 {
	/* 상하 여백 10px, 좌우 20px */
	margin: 10px 20px;
 }
 태그3 {
	/* 상하 여백 10px, 좌우 중앙 */
	margin: 10px auto;
 }
 태그4 {
	/* 상단 여백 10px, 좌우 중앙, 하단 20px */
	margin: 10px auto 20px;
 }
 태그5 {
	/* 상, 우, 하, 좌 순으로 지정 */
	margin: 0px 10px 20px 30px;
 }
 태그6 {
	/* 좌측으로 10px */
	margin-left: 10px;
 }
 태그7 {
	/* 우측으로 10px */
	margin-right: 10px;
 }
 태그8 {
	/* 상단으로 10px */
	margin-top: 10px;
 }
 태그9 {
	/* 하단으로 10px */
	margin-bottom: 10px;
 }

안쪽 여백 지정하기

padding 속성 사용 : margin 속성과 사용법 동일
padding은 기존 요소 크기에 안쪽 여백을 추가해줌

기존 크기 + 추가한 여백크기

height : 100px, padding : 30px

너빗값, 높잇값 각각 160px (상하, 좌우로 30px씩 추가되기 때문)

속성명	속성값	설명
padding	px	px 단위로 지정
	%	부모 태그 기준 %단위로 지정
	vw	웹 브라우저의 너비 기준 안쪽 여백을 100등분한 단위로 지정
	vh	브라우저의 높이 기준 안쪽 여백을 100등분한 단위로 지정

기존 박스 크기를 유지하면서 안쪽 여백 지정하기

추가된 padding값만큼 너빗값, 높잇값을 다시 빼줌
box-sizing 속성 이용
- 속성값 종류
  - content-box : content 영역(박스 안 내용)을 기준으로 박스의 크기를 정함
  - border-box : border 영역(테두리)을 기준으로 박스의 크기를 정함
  - initial : 기본값으로 설정
  - inherit : 부모 요소의 속성값을 받음

        
      
태그 {
	padding: 10px;
	box-sizing: 속성값;
}

테두리의 형태 지정하기

굵기, 모양, 색상 지정 가능

속성명	속성값	설명
border-width	px	테두리 굵기 지정
border-style	solid, dashed, dotted	테두리 모양 지정
border-color	색상명, 16진수, rgb	테두리 색상 지정
border	width style color	테두리 굵기, 모양, 색상 한꺼번에 지정 (축약형)

solid : 실선
dashed : 짧은 직선
dotted : 점선

        
      
태그 {
	/* 축약형 */
	border: 1px solid red;
}

블록 요소와 인라인 요소 태그

HTML 태그를 선택해서 태그의 크기와 테두리 등을 지정할 때 블록 요소와 인라인 요소의 태그에 따라 다르게 적용

블록 요소 : 웹 페이지 영역을 구분하는 레이아웃과 관련
인라인 요소 : 글의 서식과 관련

CSS_basic grammar1

HTML에 CSS 연결하기

스타일 시트 제작

html에 외부 css파일 연결하기

CSS 파일의 문자 인코딩 방식 지정하기

CSS로 HTML 요소 다양하게 선택하기

전체 선택자 - 모든 HTML 요소를 한꺼번에 선택하기

태그 선택자 - 태그명을 이용하여 선택하기

자손 선택자 - 자식과 하위 요소를 모두 선택하기

자식 선택자 - 직계 자식 요소만 선택하기

그룹 선택자 - 여러 개의 요소를 그룹으로 선택하기

순서 선택자 - 형제 요소의 순서를 이용하여 선택하기

수열 선택자 - 수식을 이용하여 선택하기

마지막 요소 선택자 - 형제 요소 중 마지막 요소를 선택하기

홀수, 짝수 선택자 - 홀수 또는 짝수 요소를 선택하기

속성 선택자 - 속성값을 이용하여 선택하기

가상 선택자 - 가상의 요소를 선택하기

클래스 선택자 - 클래스명으로 요소를 선택하기

아이디 선택자 - 아이디명으로 요소를 선택하기

폰트 스타일링하기

폰트 굵기 바꾸기

폰트 크기 바꾸기

폰트 모양 바꾸기

폰트 색상 바꾸기

텍스트 줄 간격 바꾸기

텍스트 정렬 방향 지정하기

텍스트 자간 지정하기

웹 페이지에서 영역별 크기 정하기

너비와 높이 지정하기

바깥쪽 여백 지정하기

안쪽 여백 지정하기

기존 박스 크기를 유지하면서 안쪽 여백 지정하기

테두리의 형태 지정하기

블록 요소와 인라인 요소 태그

Further Reading

CSS_basic grammar2

CSS_css handling

CSS_flex 방식으로 레이아웃 만들기