Summary
Introduction
김자영 강사님
HTML 과 CSS 활용할 수 있는 방법을 소개합니다.
Code, Conept & Explanation
CSS
Cascading Style Sheets
계단식의 스타일 무선들
Style sheet Language
Presentation
웹 페이지의 디자인과 레이아웃과 같은 스타일 규칙들을 체계적으로 관리하고 적용하는 기술
CSS 주요 기능
-
레이아웃 제어 : 요소들의 크기, 위치 간격
-
시각적 디자인 : 배경색, 테두리, 그림자 등의 시각적 효과
-
텍스트 스타일링 : 다양한 폰트와 텍스트 속성
-
반응형 디자인 : 다양한 디바이스마다 다르게 디자인
CSS 스타일시트 적용 방법
-
인라인 스타일
HTML 요소의 style 속성 사용 -
내부 스타일 시트
HTML 문서의 <'head> 섹션 내 <'style> 태그 안에 CSS를 직접 작성 -
외부 스타일 시트
별도의 .css 파일에 스타일을 정의
HTML 문서의 <'head> 섹션에서 <'link> 태그로 연결 -
@import
css에서 다른 css 파일을 가져오는 법
큰 프로젝트의 경우 보통 외부 스타일 시트를 활용
같은 HTML 페이지라도
CSS 에 따라서 전혀 다르게 표현됩니다
CSS 문법
선택자 {
속성1:속성값1;
속성2:속성값2;
속성3:속성값3;
}
p {
color: red;
text-align: center;
}
CSS 선택자의 종류
속성 선택자
크롤링할 때 속성 선택자를 주로 활용
-
태그[속성~=값] :
여러 값 중 특정 속성값이 포함된 속성 요소를 선택 -
태그[속성|=값] :
특정 속성값이 포함된 속성 요소를 선택
하이픈(-) 또는 공백으로 구분된 값의 첫 부분을 대상으로 한다. -
태그[속성^=값] :
특정 속성값으로 시작하는 속성 요소를 선택 -
태그[속성$=값] :
특정 속성값으로 끝나는 속성 요소를 선택 -
태그[속성*=값] :
일부 속성값이 일치하는 요소를 선
글꼴 스타일
font
한 줄에서 모든 폰트 속성을 설정할 때 사용
font-family
글꼴 종류
sans-serife 깔끔하고 현대적인 느낌을 주는 글꼴
font-size
글꼴 크기
px, em, rem
font-style
이탤릭체 표시
Normal, italic, oblique
font-weight
글자 굵기
normal, bold, lighter, bolder, 100~900
반응형 웹
화면의 크기에 반응하는 반응형 웹
뷰포트(viewport) 단위
1vw는 뷰포트 너비의 1%에 해당
1vh는 뷰포트 높이의 1%에 해당
미디어 쿼리
@media screen{
/화면용 스타일 작성 /
}
예시
@media screen and (min-width:1440px){
/뷰포트 너비가 최소 1440px인(1440px 이상인) 화면용 스타일*/
}
크기 제한을 둔다면 크기에 따라 다른 컬러로 구현 가능
display
아래는 자기자신 변화
block
항상 새로운 줄에서 시작
inline
줄 바꿈 없이 흐름대로 배치
inline-block
줄 바꿈 없이 흐름대로 배치
inline-block 을 보통 많이 사용
아래는 자식요소 변화
flex
유연한 레이아웃 구성
1차원적 레이아웃
자식 요소의 크기와 순서를 쉽게 제어
justify-content: center; /자식요소 가로정렬/
align-items: center; /자식요소 세로정렬/
flex-start 시작점에 맞추어 배치
flex-end 끝점에 맞추어 배치
center 중앙에 맞추어 배치
space-between 첫번째 항목의 시작, 끝 항목을 끝점에 배치
나머지 항목은 그 사이에 같은 간격으로 배치
space-around 모든 항목을 같은 간격으로 배치
j
grid
2차원 레이아웃 구성
행과 열을 동시에 제어
복잡한 레이아웃에 적합
Challenges & Solutions
Results
What I Learned & Insights
Conclusion
