[ 3장 CSS 기본 문법 빠르게 끝내기 ]
HTML에 CSS 연결하기
에디터에서 외부 CSS 파일 입력하기
- 에디터는 visual studio code 사용
link:css 를 입력 후 enter를 누르면 css파일은 연결하는 자동 완성 구문이 나타난다.
<link>태그의 href 속성에 경로를 넣어준다.
폴터 루트는 다음과 같이 구성하였다.
css 파일을 열어 문자 인코딩 방식을 작성한다.
인코딩 : utf-8
CSS 문법
h1 : 선택자
color : 속성명
blue : 속성값
속성명과 속성값의 연결은 콜론( : ) 으로 나누고, 세미콜론( ; ) 으로 선언들을 구분한다.
전체 선택자
예제)
See the Pen css1 by yejin (@geniest) on CodePen.
CSS 파일에서 기호 " * " 는 전체 선택자를 의미한다.
그러므로 html 파일에 있는 <body>, <div>, <p> ,<a> 태그에 모두 빨간색 실선 테두리가 생김.
태그 선택자 - 태그명을 이용하여 선택
예제 )
See the Pen Untitled by yejin (@geniest) on CodePen.
CSS 파일에 각 태그 요소를 선택하여 테두리 소겅과 속성값을 입력했다.
자손 선택자 - 자식과 하위 요소 모두 선택
예제)
See the Pen Untitled by yejin (@geniest) on CodePen.
<p> 태그의 자식 요소인 <strong> 태그에만 테두리 표시
자식 선택자 - 직계 자식 요소만 선택
예제)
See the Pen Untitled by yejin (@geniest) on CodePen.
자식 요소와 자손 요소 모두에게 테두리 적용
See the Pen Untitled by yejin (@geniest) on CodePen.
부모 요소인 ul 과 자식 요소인 li 사이에 ' > ' 기호를 넣으면 직계 자식 요소에만 테두리가 적용된다.
그룹 선택자 - 여러 개의 요소를 그룹으로 선택
예제)
See the Pen group by yejin (@geniest) on CodePen.
같은 CSS를 사용하는 경우에는 그룹으로 묶어서 사용가능하다.
콤마( , ) 를 이용하여 그룹으로 지정함
순서 선택자 - 형제 요소의 순서를 이용하여 선택
nth-of-type() 속성 사용
See the Pen nth-of-type by yejin (@geniest) on CodePen.
li 태그 뒤에 :nth-of-type(n) 속성을 붙이고 괄호 안에 번호를 입력한다
이 속성은 같은 유형의 n번째 형제를 선택하는 의미이다.
수열 선택자 - 수식 이용하여 선택
See the Pen Untitled by yejin (@geniest) on CodePen.
괄호안에 수식을 입력하여 요소를 선택할 수 있다.
예시로는 2의 배수와 홀수 선택을 나타냈다. (홀수 짝수 나타내는 건 수식 대신 odd, even을 입력해도 된다.)
odd - 홀수
even - 짝수
마지막 요소 선택자 - 형제 요소 중 마지막 요소 선택
See the Pen Untitled by yejin (@geniest) on CodePen
속성 선택자 - 속성값을 이용하여 선택
See the Pen Untitled by yejin (@geniest) on CodePen.
input 태그의 type 속성값에 따라 css를 줄 수 있다.
가상 선택자 - 가상의 요소 선택
See the Pen Untitled by yejin (@geniest) on CodePen.
hover는 마우스 포인터를 올렸을 때 스타일이 적용
[ 가상 선택자 ::before ::after ]
크롬에서 개발자 도구열어서 html 코드를 살펴보면 ::before ::after로 가상 요소가 생성된 걸 확인 할 수 있다.
[ 의사 클래스 | pseudo classes ]
| 의사 클래스 | 설명 |
| :link | 사용자가 아직 한 번도 해당 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 모두 선택함. (기본 상태) |
| :hover | 사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 모두 선택함. |
| :focus | 초점이 맞춰진 input 요소를 모두 선택함. |
| :enabled | 사용할 수 있는 input 요소를 모두 선택함. |
| :first-child | 모든 자식(child) 요소 중에서 첫 번째에 위치하는 자식(child) 요소를 모두 선택함. |
| :nth-child | 모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함. |
| :nth-of-type | 모든 자식(child) 요소 중에서 n번째로 등장하는 특정 요소를 모두 선택함. |
| :empty | 아무런 자식(child) 요소도 가지지 않는 요소를 모두 선택함. |
| :lang(언어) | 특정 요소를 언어 설정에 따라 다르게 표현할 때에 사용함. |
참조 : https://www.tcpschool.com/
[ 의사 요소 | pseudo-element ]
대표적인 CSS 의사 요소
- ::first-letter
- ::first-line
- ::before
- ::after
- ::selection
클래스 선택자 - 클래스명으로 요소 선택 | 아이디 선택자 - 아이디명으로 요소 선택
css에서는
이런 구조로 나타낸다.
See the Pen Untitled by yejin (@geniest) on CodePen.
아이디는 #아이디명을 붙여서 나타낸다.
클래스 선택자와 동일하게 태그명 생략 가능.
폰트 스타일
폰트 크기
기본 단위 : px
| 속성명 | 속성값 | 설명 |
| font-size | px | 픽셀 단위로 폰트 크기 설정 |
| rem | 최상위 부모인 <html> 태그를 기준으로 폰트 크기 설정 | |
| em | 부모 요소를 기준으로 폰트 크기 설정 |
rem 단위는 최상위 요소인 html 의 폰트 크기 기준으로 크기를 지정할 수 있어서 모든 폰트를 일일이 수정해야하는 문제를
해결할 수 있음.
See the Pen Untitled by yejin (@geniest) on CodePen.
폰트 모양
| 속성명 | 속성값 | 설명 |
| font-family | "폰트명" | 폰트의 모양을 설정 |
구글 웹 폰트
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
See the Pen Untitled by yejin (@geniest) on CodePen.
폰트 어썸(fontawesome)
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
가입은 알아서,,,
이렇게 적용한 걸 확인할 수 있다.
폰트 색상
| 속성명 | 속성값 | 설명 |
| color | 영문명 | 영어 색상명으로 표기 |
| #000000 | 16진수로 표기 | |
| rgb(0, 0, 0) | RGB로 표기 |
텍스트 줄 간격, 정렬, 자간
See the Pen Untitled by yejin (@geniest) on CodePen.
줄 간격 속성
| 속성명 | 속성값 | 설명 |
| line-height | 실숫값 | 폰트 크기에 맞춰 실수 배율로 지정 |
| 픽셀값 | 고정된 px 단위로 지정 |
텍스트 정렬 속성
| 속성명 | 속성값 | 설명 |
| text-align | left | 왼쪽 방향으로 정렬 |
| center | 중앙 정렬 | |
| right | 오른쪽 방향으로 정렬 | |
| justify | 양쪽 정렬 |
텍스트 자간 속성
| 속성명 | 속성값 | 설명 |
| letter-spacing | 1px | 텍스트의 간격을 px단위로 지정 |
웹 페이지 영역별 크기 정하기
너비와 높이 속성
| 속성명 | 속성값 | 설명 |
| width, height | px | 너비랑 높이를 px단위로 지정 |
| % | 부모태그 기준으로 너비랑 높이 % 단위로 지정 | |
| vw | 웹 브라우저의 너비를 기준으로 너비랑 높이를 백분율로 지정 | |
| vh | 웹 브라우저의 높이를 기준으로 너비랑 높이를 백분율로 지정 |
<body>
<article>100px</article>
<article>20%</article>
<article>10vw</article>
<article>10vh</article>
</body>article{
border: 1px solid red;
}
article:nth-of-type(1){
width: 100px;
height: 100px;
}
article:nth-of-type(2){
width: 20%;
height: 20%;
}
article:nth-of-type(3){
width: 10vw;
height: 10vw;
}
article:nth-of-type(4){
width: 10vh;
height: 10vh;
}
vw ( viewport width ) , vh ( viewport height ) 단위는 웹 브라우저 크기를 기준으로 한다.
바깥쪽 여백 지정 - margin
- margin-top
- margin-right
- margin-bottom
- margin-left
이 순으로 지정.
See the Pen Untitled by yejin (@geniest) on CodePen.
auto 는 항상 중앙에 배치
안쪽 여백 배치 - padding
See the Pen Untitled by yejin (@geniest) on CodePen.
padding은 안쪽 여백 값을 지정.
위의 예제에서 box2를 살펴보면 padding 값이 지정된 만큼 박스의 크기도 증가함.
박스 크기를 유지하면서 여백만 설정할 때에는
box-sizing을 설정해주면 된다.
인라인 요소와 블록 요소
블록 요소 ( Block element )
- 줄을 자동으로 바꿈
- 너비와 높이를 지정할 수 있다.
- 너비를 지정하지 않으면 부모 요소의 너비값의 100%를 상속받음
- 블록 요소와 인라인 요소 모두 묶을 수 있다.
인라인 요소 ( Inline element )
- 자동 줄 바꿈이 되지 않고 옆으로 나열
- 너비와 높이 지정할 수 없음
- 인라인 태그를 사용한 텍스트의 크기가 해당 요소의 크기가 된다.
- 인라인 요소만 묶을 수 있음
See the Pen Untitled by yejin (@geniest) on CodePen.
첫 번째 예시를 살펴보면 height 값을 200px을 줬는데 적용되지 않음.
( 인라인 요소는 높이값 적용 X )
강제로 지정하는 방법은
display : inline-block 속성을 주면 높이값이 적용되는 것을 볼 수 있다.
display : block 속성은 인라인 요소를 강제로 block 요소로 변경한다.
'스터디 > front' 카테고리의 다른 글
| Do It! 인터랙티브 웹 페이지 만들기 | Chapter05 정리 (0) | 2023.10.19 |
|---|---|
| Do It! 인터랙티브 웹 페이지 만들기 | Chapter04 정리 (0) | 2023.10.10 |
| Do It! 인터랙티브 웹 페이지 만들기 | Chapter03 정리 (2) (0) | 2023.10.10 |
| Do It! 인터랙티브 웹 페이지 만들기 | Chapter02 정리 (0) | 2023.09.19 |
| Do It ! 인터랙티브 웹 페이지 만들기 | Chapter01 정리 (0) | 2023.09.19 |