html부터 웹사이트 개발까지! - CSS편

✏️ CSS

CSS란?

• Cascading Style Sheets의 약자
• HTML 태그들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어
• HTML4부터 모든 서식을 따로 분리하는 것이 가능

CSS를 사용하는 이유

• HTML만 이용해서 웹 페이지를 제작하면 HTML 태그마다 세부 스타일을 일일이 지정해주는 작업을 해야되는데, 이 작업이 시간이 많이 걸리고, 변경 및 유지보수가 어려움
• 웹 페이지의 스타일을 별도의 파일로 저장하여 사이트 전체 스타일을 손쉽게 제어 가능
• 스타일을 일관성 있게 유지, 유지 보수 쉬워짐

CSS 기본 문법

• 선택자와 선언부로 구성
• 선택자는 HTML 태그를 가리킴
• 선언부는 속성명과 속성값을 가지며, 콜론으로 연결, 마지막은 세미콜론

CSS 선택자

• HTML 태그 선택자
  • HTML 태그를 선택하여 CSS 스타일을 적용
  • 형태

    <style>
    	HTML태그 {
    		CSS속성 : 속성값;
    		...
    	}
    </style>

• 아이디 선택자
  • HTML 태그의 id 속성값을 이용해 특정 태그를 선택하여 CSS 스타일을 적용
  • HTML과 CSS에서는 중복된 id 속성값을 사용해도 문제없지만 자바스크립트 작업을 할때 오류가 발생한다. 되도록이면 동일한 웹 페이지에 속하는 경우 다른 아이디 값을 사용하거나 클래스를 사용하는 것을 추천
  • 형태

    <style>
    	#id속성명 {
    		CSS속성 : 속성값;
    		...
    	}
    </style>

• 클래스 선택자
  • HTML 태그의 class 속성값을 이용해 해당 태그들을 선택하여 CSS 스타일을 적용
  • 형태

    <style>
    	.class속성명 {
    		CSS속성 : 속성값;
    		...
    	}
    </style>

• 그룹 선택자
  • 여러 HTML 태그들을 선택할 때 사용
  • 형태

    <style>
    	태그명1, 태그명2, ... {
    		CSS속성 : 속성값;
    		...
    	}
    </style>

CSS 적용 방법

• 인라인 스타일(Inline style)
  • HTML 태그 내부에 style 속성을 사용해 CSS 스타일을 적용하는 방법
  • 해당 태그만 스타일을 적용할 수 있어, 스타일 변경이 많이 어려움.
  • 꼭 필요한 경우에만 사용
• 내부 스타일 시트(Internal style sheet)
  • HTML문서의 head 태그 내에 style 태그에서 CSS 스타일 코드를 작성하여 적용하는 방법
  • 해당 HTML 문서에만 스타일 적용
• 외부 스타일 시트(External style sheet)
  • 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줌.
  • head 태그에서 link태그를 사용하여 외부 스타일 시트를 포함해야 스타일 적용됨.
• 스타일 적용 우선순위
  1. 인라인 스타일
  2. 내부 / 외부 스타일 시트
  3. 웹 브라우저 기본 스타일

✏️ CSS 기본 속성

색상 속성 설정

• 색상 이름으로 표현
  • 영어 색상 이름을 통해 색상 설정
  • 형태

    <style>
    	태그명 {
    		color : blue; 
    	}
    </style>

• RGB 색생값으로 표현
  • RGB 값을 이용해 색상 설정
  • 형태

    <style>
    	태그명 {
    		color : rgb(100,100,100); 
    	}
    </style>

• 16진수 색상값으로 표현
  • RGB 색상 수치를 16진수로 변환한 것으로 00 ~ FF까지 범위를 가짐
  • 형태

    <style>
    	태그명 {
    		color : ##0000FF; 
    	}
    </style>

배경 속성 설정

• background-color 속성
  • 배경색을 설정
  • 형태

    <style>
    	태그명 {
    		background-color : 색상명;
    		background-color : rgb(red수치, green수치, blue수치);
    		background-color : #ffffff;
    	}
    </style>

• background-image 속성
  • HTML 태그의 배경으로 나타날 배경 이미지 설정
  • 기본적으로 태그 전체에 반복되어 표시됨.
  • 형태

    <style>
    	태그명 {
    		background-image : url(이미지 경로);
    	}
    </style>

• background-repeat 속성
  • 배경 이미지를 수평/수직 방향으로 반복되도록 설정
  • 형태

    <style>
    	태그명 {
    		background-image : url(이미지 경로);
    		background-repeat : repeat-x;
    		/*repeat-x : 수평, repeat-y : 수직, no-repeat : 반복X*/
    	}
    </style>

• background-position 속성
  • 반복되지 않는 배경 이미지의 상대 위치를 설정
  • 픽셀이나 퍼센트를 이용해 상대 위치를 직접 명시 가능, 이때 기준은 왼쪽 상단
  • 형태

    <style>
    	태그명 {
    		...
    		background-position: left top /*100px 200px도 가능*/; 
    	}
    </style>

• background-attachment 속성
  • 위치가 설정된 배경 이미지를 해당 위치에 고정
  • 스크롤과 무관하게 배경 이미지가 이동되지 않음
  • 형태

    <style>
    	태그명 {
    		...
    		background-attachment: fixed; 
    	}
    </style>

• background 속성
  • 모든 background 세부 속성을 포함하고 있는 속성으로 이 속성을 이용해 위에서 설명한 세부 속성들을 한번에 설정할 수 있다.

텍스트 속성 설정

• color 속성
  • 텍스트의 속성을 설정, 기본적으로 검은색
  • 형태

    <style>
    	태그명 {
    		color: 색상명;
    	}
    </style>

• direction 속성
  • 텍스트가 써지는 방향을 설정
  • 기본적으로 왼쪽에서 오른쪽 방향으로 써짐
  • unicode-bidi 속성과 같은 기능을 함.
  • 형태

    <style>
    	태그명 {
    		direction: rtl;
    		/*rtl : 오른쪽에서 왼쪽, ltr : 왼쪽에서 오른쪽*/
    	}
    </style>

• letter-spacing 속성
  • 텍스트 내에서 글자 사이 간격을 설정
  • 형태

    <style>
    	태그명 {
    		letter-spacing:픽셀;
    	}
    </style>

• word-spacing 속성
  • 텍스트 내 단어 사이의 간격을 설정, 띄워쓰기 간격?
  • 형태

    <style>
    	태그명 {
    		word-spacing:픽셀;
    	}
    </style>

• text-indent 속성
  • 단락의 첫 줄에 들여쓰기 여부 설정
  • 형태

    <style>
    	태그명 {
    		text-indent:픽셀;
    	}
    </style>

• text-align 속성
  • 택스트 수평 방향 정렬 설정
  • text-direction 속성과 상관없이 우선적으로 적용
  • 형태

    <style>
    	태그명 {
    		text-align:left;
    		/* left : 왼쪽 정렬, right : 오른쪽 정렬, center : 가운데 정렬 */
    	}
    </style>

• text-decoration 속성
  • 텍스트에 여러가지 효과 설정 및 제거
  • 링크가 설정된 텍스트의 밑줄 제거하는데 자주 사용
  • 형태

    <style>
    	태그명 {
    		text-decoration:overline;
    		/* 
    			overline : 글자 위에 선
    			line-through : 글자 중간에 선
    			underline : 글자 아래에 선
    			none : 선을 만들지 않음
    			initial : 기본값
    			inherit : 부모 요소의 속성값을 상속
    		*/
    	}
    </style>

• text-transform 속성
  • 텍스트에 포함된 영문자에 대한 대소문자를 설정
  • 단어의 첫문자만을 대문자로 변경 가능
  • 형태

    <style>
    	태그명 {
    		text-transform:none;
    		/* 
    			capitalize : 단어의 첫번째 글자를 대문자로 바꿈
    			uppercase : 모든 글자를 대문자로 바꿈
    			lowercase : 모든 글자를 소문자로 바꿈
    			none : 입력한 그대로 출력
    			initial : 기본값
    			inherit : 부모 요소의 속성값을 상속
    		*/
    	}
    </style>

• line-height 속성
  • 텍스트의 줄 간격을 설정
  • 형태

    <style>
    	태그명 {
    		line-height:실수;
    	}
    </style>

• text-shadow 속성
  • 텍스트에 간단한 그림자 효과 설정
  • 형태

    <style>
    	태그명 {
    		text-shadow:2px 1px 그림자색상;
    	}
    </style>

• vertical-align 속성
  • HTML 태그 내의 수직 방향 정렬을 설정
• white-space 속성
  • HTML 태그 내의 여백을 설정

글꼴 속성 설정

• font-family 속성
  • 하나 이상의 글꼴을 설정
  • 순서대로 글꼴을 읽어 있으면 해당 글꼴로 표시
  • 여러 단어로 이루어져있으면 따옴표로 묶어야함.
  • 형태

    <style>
    	태그명 {
    		font-family:폰트명1;
    		font-family:폰트명1, 폰트명2, ...;
    	}
    </style>

• font-style 속성
  • 글꼴에 스타일을 적용
  • 형태

    <style>
    	태그명 {
    		font-style:normal;
    		/* normal : 스타일X, italic : 텍스트를 이탤릭체로, oblique : 텍스트를 기울임 */
    	}
    </style>

• font-variant 속성
  • 소문자 크기의 대문자로 바꾸는 속성
  • 형태

    <style>
    	태그명 {
    		font-variant:normal;
    		/* normal : 그냥 그대로, small-caps : 소문사 크기의 대문자로 바꿈 */
    	}
    </style>

• font-weight 속성
  • 텍스트의 굵기 설정
  • 형태

    <style>
    	태그명 {
    		font-variant:normal;
    		/* 
    			normal : 보통 굵기 (400정도)
    			bold : 굵은 굵기 (700정도)
    			bolder : 상속된 값보다 굵은 굵기
    			lighter : 상속된 값보다 얇은 굵기 
    			속성값으로 숫자를 줘도됨.
    		*/
    	}
    </style>

• font-size 속성
  • 텍스트의 크기 설정
  • 절대적 크기는 텍스트의 크기를 명시된 크기 그대로 설정할 때 사용
    (모든 웹 브라우저에서 동일한 크기로 표현)
  • 상대적 크기는 텍스트를 둘러싸고 있는 HTML 태그의 크기에 따라 텍스트의 크기가 변하는 방식
    (웹 브라우저의 크기가 텍스트의 크기에 영향을 줌)
  • 크기 단위
    • 백분율 단위(%) : 기본 크기 100%, 그에 대한 상대적인 크기 설정
    • 배수 단위(em) : 기본 크기 1em, 그에 대한 상대적인 크기 설정
    • 픽셀 단위(px) : 스크린의 픽셀을 기준, 절대적인 크기 설정

CSS에서의 링크

• 링크에 CSS 속성을 적용하여 텍스트 밑줄을 제거하거나 할 수 있으며, 링크 상태에 따라 CSS 스타일을 다르게 적용할 수 있다.
• 링크의 상태
  • link : 링크의 기본 상태, 사용자가 한번도 해당 링크를 통해 연결된 페이지를 방문하지 않은 상태
  • visited : 사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태
  • hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태
  • active : 사용자가 마우스로 링크를 클릭하고 있는 상태
  • focus : 키보드나 마우스의 이벤트 또는 다른 형태로 해당 요소가 포커스를 가지고 있는 상태

CSS 리스트 속성 설정

• list-style-type
  • 리스트 요소의 마커를 설정
  • 형태

    <style>
    	태그명 {
    		list-style-type:circle;
    		/* 
    			circle : 빈원
    			square : 사각형
    			upperAlpha : 대문자
    			lowerRoman : 로마자 숫자
    		*/
    	}
    </style>

• list-style-image 속성
  • 마커를 자신이 지정한 이미지로 설정
  • 형태

    <style>
    	태그명 {
    		list-style-image:url(이미지 경로);
    	}
    </style>

• list-style-position 속성
  • 리스트 요소의 위치를 지정
  • 형태

    <style>
    	태그명 {
    		list-style-position:outside;
    		/* outside|inside */
    	}
    </style>

CSS 테이블 속성 설정

• border 속성
  • 테이블의 테두리 설정
  • 형태

    <style>
    	태그명 {
    		border : 테두리두께 테두리형태 테두리색상;
    	}
    </style>

• border-collapse 속성
  • 테이블의 테두리를 한 줄로 표현
  • 해당 속성을 사용하지 않으면 테이블 요소마다 테두리를 표시
  • 형태

    <style>
    	태그명 {
    		border-collapse : collapse;
    		/* 
    		collapse : 서로 이웃하는 테이블이나 셀의 테두리 선을 겹쳐서 표현 
    		separate : 기본값으로 서로 이웃하는 테이블이나 셀의 테두리선을 분리시켜 표현
    		*/
    	}
    </style>

• border-spacing 속성
  • 테이블 요소간의 여백을 설정
  • 형태

    <style>
    	태그명 {
    		border-spacing : 여백픽셀(위아래) 여백픽셀(양 옆);
    	}
    </style>

• text-align 속성
  • 태그 내부 텍스트의 수평 방향 정렬을 설정
  • 형태

    <style>
    	태그명 {
    		text-align : 정렬 위치;
    		/*left : 왼쪽정렬 center : 중앙정렬 right : 오른쪽정렬 justify : 왼족과 오른쪽 열에 맞추어 텍스트를 늘림*/
    	}
    </style>

• vertical-align 속성
  • 태그 내부 텍스트의 수직 방향 정렬을 설정
  • 형태

    <style>
    	태그명 {
    		vertical-align : 정렬 위치;
    	}
    </style>

CSS 이미지 스프라이트

• 이미지 스프라이트
  • 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지
  • 이미지 스프라이트를 사용하면 이미지 다운을 위한 서버 요청을 줄일수 있음

✏️ CSS 박스 모델

크기 단위

• 크기 단위 종류
  • 백분율 단위(%)
    • 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기 설정
  • 배수 단위(em)
    • 글꼴의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기 설정
  • 픽셀 단위(px)
    • 스크린의 픽셀을 기준으로 절대적인 크기 설정

크기

• height와 width 속성
  • HTML 태그의 높이와 너비를 설정
  • 박스 모델의 내용 부분만 대상
  • 형태

    <style>
    	태그명 {
    		height : 높이;
    		width : 넓이;
    	}
    </style>

• max-width(height)과 min-width(height) 속성
  • max-width(height)는 HTML 태그가 가질 수 있는 최대 너비(높이)를 설정
  • min-width(height)는 HTML 태그가 가질 수 있는 최소 너비(높이)를 설정
  • 형태

    <style>
    	태그명 {
    		max-width(height) : 최대 너비(높이);
    		min-width(height) : 최소 너비(높이);
    	}
    </style>

박스 모델

• 박스 모델이란?
  • HTML 태그는 박스 모양으로 구성되어 있으며, 이것을 박스 모델이라함.
  • 박스 모델은 HTML 태그를 패딩, 테두리, 마진, 내용으로 구분
• 실질적인 너비 및 높이 구하기
  • 너비(높이) 공식
    • 내용의 너비(높이) + 양 옆 패딩 값 + 양 옆 테두리 값 + 양 옆 마진 값 = 실제로 브라우저에 차지하는 너비(높이)

패딩(padding) 속성

• 패딩(padding)이란?
  • 내용과 테두리 사이의 간격인 패딩 영역을 설정
  • background-color 속성으로 설정한 배경색의 영향을 함께 받음
• 패딩 설정 속성
  • padding-top, padding-right, padding-bottom, padding-left가 존재
  • padding 속성으로 한번에 설정가능함.
  • 형태

    <style>
    	태그명 {
    		padding : top, right, bottom, left;
    		padding : top, left/right, bottom;
    		padding : top/bottom, left/right;
    		padding : top/bottom/left/right;
    	}
    </style>

테두리(border) 속성

• 테두리(border)란?
  • 내용(content)과 패딩(padding) 영역을 둘러싸는 테두리의 스타일을 설정
• CSS 테이블 속성에서 설명한 border 속성보러가기
• border-style 속성
  • 테두리 모양을 설정
  • 테두리 모양 종류
    • dotted : 테두리가 점선
    • dashed : 테두리가 약간 긴 점선
    • solid : 테두리가 실선
    • double : 테두리가 이중 실선
    • groove : 테두리가 3차원인 입체적인 선, border-color에 영향을 받음
    • ridge : 테두리가 3차원인 능선 효과가 있는 선, border-color에 영향을 받음
    • insert : 테두리가 3차원인 내지로 끼운 선, border-color에 영향을 받음
    • outset : 테두리가 3차원인 외지로 끼운 선, border-color에 영향을 받음
    • none : 테두리 X
    • hidden : 테두리가 있지만 표현 X
  • 형태

    <style>
    	태그명 {
    		border-style : 테두리 모양;
    	}
    </style>

• border-width 속성
  • 테두리의 두께를 설정
  • CSS 크기 단위 및 예약어(thin, medium, thick 등)을 사용할 수 있음
  • 형태

    <style>
    	태그명 {
    		border-width : 테두리 두께;
    	}
    </style>

• border-color 속성
  • 테두리의 색상을 설정
  • 기본적인 color 속성값 및 투명한 선을 나타내는 transparent 속성값을 사용할 수 있음.
  • 설정하지 않으면 color속성값을 그대로 물려받음
  • 형태

    <style>
    	태그명 {
    		border-color : 색상;
    	}
    </style>

마진(Margin) 속성

• 마진(Margin)이란?
  • 테두리와 이웃하는 요소 사이의 간격인 마진 영역 크기를 설정
  • 패딩 영역과 달리 background-color 속성에 영향을 받지 않음
• 마진 설정 속성
  • margin-top, margin-right, margin-bottom, margin-left가 존재
  • margin 속성을 이용해 한번에 설정 가능
  • 속성값을 inherit로 설정하면, 부모 요소의 margin 속성값을 그대로 물려받음
  • 형태

    <style>
    	태그명 {
    		margin : top, right, bottom, left;
    		margin : top, left/right, bottom;
    		margin : top/bottom, left/right;
    		margin : top/bottom/left/right;
    	}
    </style>

아웃라인(outline)

• 아웃라인이란?
  • HTML 태그의 가장 바깥 부분을 둘러싸고 있는 아웃라인 부분의 스타일 설정
  • border속성과 달리 HTML 태그의 전체 크기에는 포함되지 않음
• 아웃라인의 속성
  • outline-style 속성
    • 아웃라인의 모양을 설정(border-style 속성과 동일한 기능)
  • outline-width 속성
    • 아웃라인의 너비를 설정(border-width 속성과 동일한 기능)
  • outline-color 속성
    • 아웃라인의 색상을 설정(border-color 속성과 동일한 기능)

✏️ CSS 위치 속성

디스플레이

• display 속성
  • 웹 페이저의 레이아웃을 결정하는 CSS의 중요한 속성
  • display 속성값을 변경하여 웹 페이지를 개발자가 원하는 모양으로 변경 가능
  • display 속성값 종류
    • block : 태그가 새로운 라인에서 시작, 해당 라인의 모든 너비를 차지
    • inline : 태그가 새로운 라인에서 시작X, 태그 내용만큼만 차지
    • inline-block : 해당 태그는 inline 태그처럼 동작, 태그 내부에서는 block 태그처럼 동작
    • none : 해당 태그 숨기기
• visibility 속성
  • 태그가 웹 페이지에 표현될지 아닐지만 결정
  • 레이아웃과 코드 내에는 존재
  • visibility 속성값 종류
    • visible : 웹 페이지에 표시
    • hidden : 웹페이지에 표시X, 웹 페이지의 레이아웃에 존재
    • collapse : 동적 테이블에서만 사용, 테이블의 테두리를 한줄만 표시
• opacity 속성
  • 태그의 투명도 조절
  • 0.0 ~ 1.0까지 설정

포지션

• position 속성
  • HTML 태그의 위치 결정 방식을 설정
  • 정적 위치 지정 방식, 상대 위치 지정 방식, 고정 위치 지정 방식, 절대 위치 지정 방식 총 4가지 방식이 존재
  • 정적 위치 지정 방식
    • 속성값으로 static
    • 단순히 웹 페이지의 흐름에 따라 차례대로 요소를 위치시키는 방식
    • top, right, bottom, left 속성값에 영향X
  • 상대 위치 지정 방식
    • 속성값으로 relative
    • 태그의 기본 위치를 기준으로 위치를 설정하는 방식
    • 기본 위치란 해당 요소가 정적 위치 지정 방식일 때 결정되는 위치를 의미
  • 고정 위치 지정 방식
    • 속성값으로 fixed
    • 뷰포트를 기준으로 위치를 설정하는 방식
    • 웹 페이지를 스크롤해도 지정한 위치에 고정
  • 절대 위치 지정 방식
    • 속성값으로 absolute
    • 위치가 설정된 조상 태그를 기준으로 위치를 설정
• z-index 속성
  • HTML 태그의 위치를 설정하게 되면 태그의 위치 및 방식에 따라 서로 겹칠 수 있는데 겹쳐지는 태그들의 쌓이는 스택 순서를 설정
  • 숫자가 클수록 앞쪽에 위치
• cursor 속성
  • 표시되는 마우스 커서의 모양 설정
• clip 속성
  • 절대 위치 지정방식으로 위치한 태그를 자름

플로트(Float)

• float 속성
  • HTML 태그가 주변의 다른 태그와 자연스럽게 어울리도록 설정
  • 레이아웃을 작성할 때 많이 사용
• clear 속성
  • float 속성이 적용되고 이후 등장하는 모든 태그들은 정확한 위치를 설정하기 힘듬
  • float 속성을 사용한 후에 clear 속성을 사용하여 float 속성에 영향을 받지 않게 설정
• overflow 속성
  • HTML태그가 자신을 감싸고 있는 컨테이너 태그보다 클 때 자동으로 내부 태그의 크기가 커지도록 설정

✏️ CSS 선택자

선택자

• 전체 선택자
  • HTML 문서 내부 모든 태그를 선택
  • 형태

    <style>
    	* {
    		CSS 속성 : 속성값;
    	}
    </style>

• 기본적인 선택자

결합 선택자

• 자손 선택자(descendant selector)
  • 해당 태그의 하위 태그 중 특정 타입의 태그를 모두 선택
  • 형태

    <style>
    	태그1 태그2 { /* 태그1의 내부에 존재하는 모든 태그 중 태그2들을 선택 */
    		CSS 속성 : 속성값;
    	}
    </style>

• 자식 선택자(child selector)
  • 해당 태그의 바로 밑에 존재하는 하위 태그 중 특정 타입의 태그를 모두 선택
  • 형태

    <style>
    	태그1 > 태그2 { /* 태그1의 내부에 존재하는 자식 태그 중 태그2를 선택 */
    		CSS 속성 : 속성값;
    	}
    </style>

동위 선택자

• 동위 선택자(sibling selector)
  • 동위 관계에 있는 태그 중에서 해당 태그보다 뒤에 존재하는 특정 타입의 태그를 모두 선택
    ※ 동위 관계 : HTML 태그의 계층 구조에서 같은 부모 태그를 가지고 있는 요소들을 의미
• 일반 동위 선택자(general sibling selector)
  • 해당 태그와 같은 레벨인 위치에 있는 태그들 중 해당 태그 뒤에 존재하는 특정 타입의 요소를 모두 선택
  • 형태

    <style>
    	태그1 ~ 태그2 { /* 태그1와 같은 레벨인 태그들 중 태그1 이후에 나오는 태그2를 선택*/
    		CSS 속성 : 속성값;
    	}
    </style>

• 인접 동위 선택자(adjacent sibling selector)
  • 해당 태그와 같은 레벨인 위치에 있는 태그들 중 해당 태그 바로 뒤에 존재하는 특정 타입의 태그를 선택
  • 형태

    <style>
    	태그1 + 태그2 { /* 태그1와 같은 레벨인 태그들 중 태그1 바로 뒤에 나오는 태그2를 선택*/
    		CSS 속성 : 속성값;
    	}
    </style>

속성 선택자

• 속성 선택자(attribute selectors)
  • 특정 속성이나 특정 속성값을 가지고 있는 HTML 태그를 선택
  • 띄워쓰기를 기준으로 단어를 인식
    ex) 속성값-a 이런 형태이면 선택X, 속성값 a 이런 형태일 때 선택
  • 속성 선택자 종류
    • [속성이름] 선택자
    • [속성이름="속성값"] 선택자
  • 형태

    <style>
    	[속성이름|속성이름="속성값"] { 
    		CSS 속성 : 속성값;
    	}
    </style>

• 문자열 속성 선택자 종류
  • [속성이름~="속성값"] 선택자
    • 특정 문자열로 이루어진 하나의 단어를 포함하는 요소를 모두 선택
  • [속성이름|="속성값"] 선택자
    • 특정 문자열로 이루어진 하나의 단어로 시작하는 요소를 모두 선택
  • [속성이름^="속성값"] 선택자
    • 특정 문자열로 시작하는 요소를 모두 선택
  • [속성이름$="속성값"] 선택자
    • 특정 문자열로 끝나는 요소를 모두 선택
  • [속성이름*="속성값"] 선택자
    • 특정 문자열을 포함하는 요소를 모두 선택

의사 클래스

• 의사 클래스란?
  • 선택하고자 하는 HTML 태그의 특별한 상태를 명시할 때 사용
  • 의사클래스 종류
    • 동적 의사 클래스(dynamic pseudo-classes)
    • 상태 의사 클래스(UI element states pseudo-classes)
    • 구조 의사 클래스(structural pseudo-classes)
    • 기타 의사 클래스
  • 형태

    <style>
    	선택자:의사클래스명 { 
    		CSS 속성 : 속성값;
    	}
    </style>

• 동적 의사 클래스 종류
  • :link
    • 링크의 기본 상태, 사용자가 한 번도 링크를 통해 연결된 페이지를 방문하지 않은 상태
  • :visited
    • 사용자가 한 번이라도 링크를 통해 연결된 페이지를 방문한 상태
  • :hover
    • 사용자의 마우스 커서가 링크 위에 올라가 있는 상태
  • :active
    • 사용자가 마우스로 링크를 클릭하고 있는 상태
  • :focus
    • 키보드나 마우스의 이벤트 또는 다른 형태로 해당 태그가 포커스를 가지고 있는 상태
  • 사용 시 주의사항
    • :hover는 :link와 :visited가 정의된 후에 정의해야 정상적으로 동작
    • :active는 :hover가 먼저 정의된 후에 정의해야 정상적으로 동작
• 상태 의사 클래스 종류
  • :checked
    • input태그 중 체크된 상태의 input태그를 선택
  • :enabled
    • input태그 중에서 사용할 수 있는 input태그를 선택
  • :disabled
    • input태그 중에서 사용할 수 없는 input태그를 선택
• 구조 의사 클래스
  • :first-child
    • 모든 자식 태그 중에서 맨 앞에 위치하는 자식 태그를 모두 선택
  • :last-child
    • 모든 자식 태그 중에서 맨 마지막에 위치하는 자식 태그를 모두 선택
  • :nth-child(n)
    • 모든 자식 태그 중에서 앞에서 n번째에 위치하는 자식 태그를 모두 선택
  • :nth-last-child(n)
    • 모든 자식 태그 중에서 뒤에서 n번째에 위치하는 자식 태그를 모두 선택
  • :first-of-type
    • 모든 자식 태그 중에서 맨 처음으로 등장하는 특정 타입의 태그를 모두 선택
  • :last-of-type
    • 모든 자식 태그 중에서 맨 마지막으로 등장하는 특정 타입의 태그를 모두 선택
  • :nth-of-type
    • 모든 자식 태그 중에서 n번째로 등장하는 특정 타입의 요소를 모두 선택
  • :nth-last-of-type
    • 모든 자식 태그 중에서 뒤에서 n번째로 등장하는 특정 타입의 요소를 모두 선택
  • :only-child
    • 자식 태그를 단 하나만 가지는 태그의 자식 태그를 모두 선택
  • :only-of-type
    • 자식 태그로 특정 타입의 태그 단 하나만을 가지는 요소의 자식 태그를 모두 선택
  • :empth
    • 자식 태그를 가지고 있지 않은 태그를 모두 선택
  • :root
    • 해당 문서의 root 태그를 선택
• 기타 의사 클래스
  • :not
    • 해당 선택자를 반대로 적용하여 선택
    • 모든 선택자와 사용 가능
  • :lang
    • 사용자 컴퓨터의 언어 설정에 따라 다르게 표현할 때 사용

의사 요소

• 의사 요소란?
  • 해당 HTML 태그의 특정 부분만을 선택할 때 사용
  • 여러 개의 의사 요소를 동시에 적용 가능
  • 형태

    <style>
    	선택자::의사요소명 { 
    		CSS 속성 : 속성값;
    	}
    </style>

• ::first-letter
  • 텍스트의 첫 글자만 선택
  • 블록 타입의 요소에만 사용 가능
    • font 속성
    • color 속성
    • background 속성
    • word-spacing 속성
    • letter-spacing 속성
    • text-decoration 속성
    • text-transform 속성
    • line-height 속성
    • clear 속성
    • vertical-align 속성
• ::first-line
  • 텍스트의 첫 라인만 선택
  • 블록 타입의 요소에만 사용 가능
• ::before
  • 특정 태그의 내용 부분 바로 앞에 다른 요소(이미지, 텍스트 등)를 삽입할 때 사용
• ::after
  • 특정 태그의 내용 부분 바로 뒤에 다른 요소(이미지, 텍스트 등)를 삽입할 때 사용
• ::selection
  • 해당 태그에서 사용자가 선택한 부분만을 선택할 때 사용

✏️ CSS 고급

@규칙

• @import 규칙
  • 다른 스타일 시트에서 스타일 규칙을 가져올 수 있는 규칙
  • 문자 인코딩을 지정하는 @charset 규칙을 제외하고 모든 다른 규칙보다 앞에 명시해야함
  • HTML 문서를 통해 CSS 파일을 연결하면 웹 서버의 부하도 같이 커짐
  • 웹 서버 부하를 줄이기 위해 CSS 파일에서 CSS 파일을 추가하는 방법을 주로 사용
  • 미디어 쿼리를 통해 조건을 설정하여 조건에 따라 CSS파일을 가져올 수 있음
• @font-face 규칙
  • 웹 폰트를 정의할 때 사용하는 규칙
    ※ 웹 폰트 : 사용자의 컴퓨터에 설치되어 있지 않은 글꼴을 웹 브라우저가 사용할 수 있게 해줌.
• @media 규칙
  • 서로 다른 미디어 타입을 위한 맞춤식 스타일 시트를 지원

✏️ CSS3

• CSS3는 이 사이트를 보고 공부합시다!

---

참고 사이트

• TCPSchool-CSS부분