@@지난 강의에서는 HTML을 배웠다. 이번에는 CSS를 알아보자!@@
CSS(Cascading Style Sheets)란?
HTML로 이루어진 문서를 꾸미 스타일 시트
<즉, HTML은 뼈대를 만든다면 CSS는 살을 붙이는 것과 같다.>
CSS의 구조
선택자 - 꾸미고 싶은 HTML요소 (여기서는 h1)
속성명 - 꾸미고 싶은 속성명(여기서는 color)
속성값 - 어떻게 꾸밀지 입력(여기서는 blue)
인라스타일 VS 내부 스타일 VS 외부 스타일
인라인 스타일
HTML태그 안에다가 입력함.
내부 스타일
<head>태그 안에다가 입력함.
외부 스타일
CSS 파일을 외부에 정의, 외부에 정의한 CSS를 HTML파일에 연결하여 사용
외부파일은 파일명.css로 해야함
<link>태그로 외부와 연결.
CSS 출처 우선순위
사용자 !important > 제작 !important > 제작자 > 사용자 > 브라우저
CSS선택자
기본선택자 VS 그룹선택자 VS 결합자 VS 의사 클래스/요소
기본선택자
전체 선택자 ( * )
모든 요소 선택 - 브라우저 기본 스타일을 초기화 하려 할 때 사용
타입 선택자( 태그 이름 )
특정 태그 이름을 가진 모든 요소 선택
클래스 선택자( .클래스이름 )
주어진 class명을 가진 모든 요소를 선택
ID 선택자( # ID이름 )
id 속성에 맞는 요소를 선택
속성 선택자 ( [ ] )
주어진 속성을 가진 모든 요소를 검색
그룹선택자(선택자1, 선택자2 {스타일} )
선택자를 쉼표(,)로 구분해 여러 선택자를 나열
결합자
자손 결합자(A B)
첫 번째 요소의 자손인 태그를 선택
A선택자의 하위에 있는 B선택자 선택
자식 결합자(A > B)
첫 번째 요소의 바로 아래 자식인 태그를 선택
일반 형제 결합자 (A ~ B)
첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택
인접 형제 결합자 (A + B)
첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택
의사 클래스/요소
선택 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용
선택자: 의사클래스이름 {속성명 : 속성값;}
예) :visited - 사용자가 방문한 적이 있는 링크를 나타냄.
--- link, hover, active, focus.... 등등 많은 클래스가 있다. ---
의사 요소
해당 HTML 요소의 특정 부분만을 선택할 때 사용
선택자 :: 의사요소이름 {속성명 : 속성값;}
예) :: before - 특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입할 때 사용
--- first-letter, first-line after, selection... 등등 많은 요소가 있다. ---
CSS 적용 우선순위
!important > 인라인 스타일 > ID 스타일 > class 스타일 > tag 스타일
글꼴 관련 속성
font-family - 글꼴 종류 지정
기본값 : 웹브라우저 기본 글꼴
font-size - 글자 크기 지정
font-style - 글자 이텔릭체로 표시할지 지정
font-weight - 글자 굵기지정
font-variant - 소문자를 작은 대문자로 바꾸는 속성
단위 em, rem
px : 픽셀 단위
rem : 루트 요소의 글꼴 크기
em : 요소의 글꼴 크기
vw : viewport 너비의 1%
vh : viewport 높이의 1%
글자를 color속성을 통해 다양한 색상을 입힐 수 있다.
그 외에 다양한 속성들이 존재한다.
text-align - CSS: Cascading Style Sheets | MDN
The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box. This means it works like vertical-align but in the horizontal direction.
developer.mozilla.org
위 사이트 참고
표 꾸미기
<table>태그에 <border>를 사용하여 테두리를 그린다. background-color로 배경 색을 지정한다.
Box Model
모든 HTML 요소는 웹 페이지에서 일정 공간 차지 --> CSS에서는 박스 모델(Box Model)로 정의
Content - 텍스트나 이미지가 들어있는 HTML 요소의 실직적인 내용.
Padding -안쪽 여백
Border - Content를 감싸는 테두리
Margin - 바깥쪽 여백
Content
width - 가로 너비를 지정
height - 세로 너비를 지정
Padding
padding - padding 값을 조절하여 안쪽 여백을 지정
Border
border - border 속성을 사용하여 테두리를 설정
Margin
margin - margin 속성을 사용하여 바깥쪽 여백을 지정
display 속성
HTML 요소를 어떻게 표시할지를 결정
none
요소를 보이지 않게 설정
block
문서에서 문단을 표시할 때 사용
inline
컨텐츠만큼 영역을 차지
inline-block
block과 inline의 중간 형태, 요소는 inline인데 내부는 block처럼 표시함
@@강의를 보니 CSS의 절반을 본 것 같다. 시험공부하랴 웹 공부하랴 정신이 없지만 실습을 하면서 원하는 사이트를 만 들 수 있는 실력이 조금 되는 것 같아 뿌듯한 것 같다. 다음 강의는 ^^시험 준비로 인해 몰아서 봐야겠다^^ @@
'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글
| [2023 신입부원 심화 스터디] 조현상 #2주차 - 기초문법 part.2, 3 (0) | 2023.04.14 |
|---|---|
| [2023 신입부원 기초 스터디] 박민규 #2주차 - CSS는 화려하게 (Like 음주 텐겐) (0) | 2023.04.13 |
| [2023 신입부원 심화 스터디] 황현진 #2주차 - 기초문법 part.2, 3 (0) | 2023.04.13 |
| [2023 신입부원 기초 스터디] 정찬우 #2주차 -CSS가 뭐길래... (0) | 2023.04.13 |
| [2023 신입부원 기초스터디] 도승준 #2주차 Cascading 뭔가 단어가 멋있지 않나요 저만 그래요? (0) | 2023.04.13 |
