CSS란?
css란 Cascading Style Sheets의 약자로 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어입니다.
글꼴, 배경색, 너비와 높이, 위치등을 지정할 수 있습니다.
HTML에 CSS를 적용시키는 방법
- 인라인 스타일 시트 : HTML태그 직접 CSS코드 작성
- 내부 스타일 시트 : <style>태그 안에 CSS코드 작성
- 외부 스타일 시트 : 별도의 CSS파일 안에 CSS코드 작성
우선순위
하나의 요소에 같은 속성, 다른 값의 CSS값이 적용되었나면 우선순위는 인라인 > 내부 > 외부의 순서로 적용됩니다.
선택자
선택자를 사용하여 특정 요소에 스타일을 적용할 수 있습니다.
전체 선택자 태그 선택자
아이디 선택자 클래스 선택자
자식, 자손 선택자 가상클래스 선택자
전체 선택자 : 모든 요소를 선택하는 선택자, *{ 속성 : 속성 값; }
태그 선택자 : HTML태그를 선택하는 선택자, 태그명 { 속성 : 속성 값; }
아이디 선택자 : 특정한 아이디를 선택하는 선택자, #아이디이름 { 속성 : 속성 값; }
클래스 선택자 : 특정한 클래스를 선택자, .클래스이름 { 속성 : 속성 값; }
자식 선택자 : 자식요소를 선택하는 선택자, 부모태그 > 자식태그 { 속성 : 속성 값; }
자손 선택자 : 자손요소를 선택하는 선택자, 부모태그 자손태그 { 속성 : 속성 값; }
가상 클래스 선택자 : 가상에 존재하는 요소를 선택하는 선택자, 요소:가상클래스 { 속성 : 속성 값; }
아이디 선택자 vs 클래스 선택자
페이지 내에서 여러 번 반복되는 스타일 = 클래스 선택자 사용
한 번 유일하게 적용되는 스타일 = 아이디 선택자 사용
클래스 속성은 중복이 가능하지만 아이디 속성은 중복이 불가능하기 때문입니다.
효율적으로 CSS를 공부하는 방법
https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/
엄청나게 많은 CSS 에서 효율적으로 공부를 하려면 이런 지표를 통해서 많이 쓰이는 코드먼저 배우는 것을 추천합니다.
예시
아래 코드는 드래그를 하면 text에 그림자와 색 배경 색을 바꿔주는 코드입니다. 가상선택자인 ::selection를 사용하여 만들어 주었습니다. 이 코드가 현재 이 사이트에서 글자를 드래그하면 보라색으로 나오는 코드입니다. 또 아래 버튼은 가상선택자 :hover를 사용하여 마우스를 올리면 box-shadow가 생기게 만들어 주었습니다.
See the Pen by nabomhalang (@nabomhalang) on CodePen.
위와 같이 가상선택자를 잘 사용하면 아주 예쁘게 꾸밀수가 있습니다. 예쁜 css를 또 예시로 보여주자면
See the Pen CSS 3D Blend Mode Buttons by Lisi (@lisilinhart) on CodePen.
See the Pen wallet - icon animation by Mike Aparicio (@peruvianidol) on CodePen.
위와 같은 코드들을 JS가 없이 만들 수 있습니다.
더욱 더 예쁜 버튼들을 구경하고 싶으시다면 https://freefrontend.com/css-buttons/ 에 접속해보세요.
우리가 웹사이트에서 가장 눈에 띄는 것이 디자인(css)이므로 css는 굉장히 중요하다고 생각이 듭니다. 꼭 잘 익혀 두시길 바랍니다.
CSS란?
css란 Cascading Style Sheets의 약자로 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어입니다.
글꼴, 배경색, 너비와 높이, 위치등을 지정할 수 있습니다.
HTML에 CSS를 적용시키는 방법
- 인라인 스타일 시트 : HTML태그 직접 CSS코드 작성
- 내부 스타일 시트 : <style>태그 안에 CSS코드 작성
- 외부 스타일 시트 : 별도의 CSS파일 안에 CSS코드 작성
우선순위
하나의 요소에 같은 속성, 다른 값의 CSS값이 적용되었나면 우선순위는 인라인 > 내부 > 외부의 순서로 적용됩니다.
선택자
선택자를 사용하여 특정 요소에 스타일을 적용할 수 있습니다.
전체 선택자 태그 선택자
아이디 선택자 클래스 선택자
자식, 자손 선택자 가상클래스 선택자
전체 선택자 : 모든 요소를 선택하는 선택자, *{ 속성 : 속성 값; }
태그 선택자 : HTML태그를 선택하는 선택자, 태그명 { 속성 : 속성 값; }
아이디 선택자 : 특정한 아이디를 선택하는 선택자, #아이디이름 { 속성 : 속성 값; }
클래스 선택자 : 특정한 클래스를 선택자, .클래스이름 { 속성 : 속성 값; }
자식 선택자 : 자식요소를 선택하는 선택자, 부모태그 > 자식태그 { 속성 : 속성 값; }
자손 선택자 : 자손요소를 선택하는 선택자, 부모태그 자손태그 { 속성 : 속성 값; }
가상 클래스 선택자 : 가상에 존재하는 요소를 선택하는 선택자, 요소:가상클래스 { 속성 : 속성 값; }
아이디 선택자 vs 클래스 선택자
페이지 내에서 여러 번 반복되는 스타일 = 클래스 선택자 사용
한 번 유일하게 적용되는 스타일 = 아이디 선택자 사용
클래스 속성은 중복이 가능하지만 아이디 속성은 중복이 불가능하기 때문입니다.
효율적으로 CSS를 공부하는 방법
https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/
엄청나게 많은 CSS 에서 효율적으로 공부를 하려면 이런 지표를 통해서 많이 쓰이는 코드먼저 배우는 것을 추천합니다.
예시
아래 코드는 드래그를 하면 text에 그림자와 색 배경 색을 바꿔주는 코드입니다. 가상선택자인 ::selection를 사용하여 만들어 주었습니다. 이 코드가 현재 이 사이트에서 글자를 드래그하면 보라색으로 나오는 코드입니다. 또 아래 버튼은 가상선택자 :hover를 사용하여 마우스를 올리면 box-shadow가 생기게 만들어 주었습니다.
위와 같이 가상선택자를 잘 사용하면 아주 예쁘게 꾸밀수가 있습니다. 예쁜 css를 또 예시로 보여주자면
위와 같은 코드들을 JS가 없이 만들 수 있습니다.
더욱 더 예쁜 버튼들을 구경하고 싶으시다면 https://freefrontend.com/css-buttons/ 에 접속해보세요.
우리가 웹사이트에서 가장 눈에 띄는 것이 디자인(css)이므로 css는 굉장히 중요하다고 생각이 듭니다. 꼭 잘 익혀 두시길 바랍니다.
