1. CSS 기초
1) HTML 부모-자식 구조
- HTML 요소(태그)는 "누구 안에 누가 있느냐"를 파악하는 것이 중요
- 부모: 포함하는 태그
- 자식: 포함되는 태그
# 자식은 부모의 속성값을 상속받는다. # 속성값을 직접 주면 상속된 값은 무시된다. # 즉, 속성값을 따로 주지않은 경우에만 상속을 받는다.<head> <style> .a {color: green; font-size: medium} .b {font-family: cursive; font-size: small} .c {font-size: large} </style> </head> <body> <div class="a"> 나는 a이고 b와 c의 부모! <div class="b"> 나는 b이고 a의 자식, c의 부모! <div class="c"> 나는 c이고 a와 b의 자식 </div> </div> </div> </body>나는 a이고 b와 c의 부모!나는 b이고 a의 자식, c의 부모!나는 c이고 a와 b의 자식
주석
/*주석 내용*/주석처리 하고싶은 라인 선택 → [ctrl+/]
CSS 파일 분리
1. css 파일을 같은 폴더에 만들기 → "(css파일이름).css"2. head 태그에서 불러오기 ↓ <link rel="stylesheet" type="text/css" href = "(css파일이름).css">
2) CSS 적용
CSS 적용
1. <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성 2. 꾸미려는 대상을 가리킴 → 선택자 3. 중괄호 {} 안에 꾸밀 내용을 작성 # ';' 을 사용해 여러 내용을 작성
선택자
- 전체 선택자
* {} : HTML 해당 페이지 내부의 모든 태그를 선택
- 태그(요소) 선택자: div, p, ul, span 등 HTML 요소(태그)를 선택하는 선택자
div {} : 모든 div 태그를 선택 p {} : 모든 p 태그를 선택 ul {} : 모든 ul 태그를 선택 …
- 클래스 선택자: 특정 값을 class 값으로 갖는 요소를 선택
1) 클래스 선택자 앞에 요소가 있을 때 div.mytitle {} : div 태그 중에 mytitle 값을 가진 태그를 선택 2) 클래스 선택자 앞에 아무 것도 없을 때 mytitle {} / .mytitle {} : mytitle 값을 가진 모든 태그를 선택
- 자식 선택자: 특정 요소의 자식 요소를 선택
1) 특정 태그의 자식 태그를 선택 div > p : div 태그 안의 p 태그만 선택 2) 특정 값을 갖는 부모 안에 있는 특정 태그를 선택할 때 .mytitle > h1 {} : mytitle 값을 갖는 태그 안의 h1 태그만 선택 3) 특정 태그의 특정 값을 갖는 자식 요소를 선택할 때 div > .mytitle {}
2. 자주 사용되는 CSS
- initial: 기본값으로 설정
- inherit: 부모 요소의 속성값을 상속받음1) 배경
- background-color : 배경색을 정하는 속성
background-color: transparent | color | initial | inherit - transparent: 배경색 X, 기본값 - color: 원하는 색으로 설정
- background-image : 배경 이미지를 정하는 속성
background-image: none | url | initial | inherit - none: 배경 이미지 X, 기본값 - url: 이미지의 URL 입력 → background-image: url("이미지 URL 입력")
- background-size : 배경 이미지의 사이즈를 정하는 속성
background-size: auto | length | cover | contain | initial | inherit - auto: 이미지 크기 유지, 기본값 - length: 값 두 개 → 가로 크기, 세로 크기 / 값 한 개 → 가로 크기 - cover: 배경 크기에 맞게 이미지 확대 or 축소 - contain: 배경 크기에 벗어나지 않게 최대 크기로 이미지 확대 or 축소
- background-position : 배경 이미지의 위치를 정하는 속성
background-position: (가로 위치) (세로 위치) | initial | inherit - (가로 위치): left, center, right, 백분율, 길이 - (세로 위치): top, center, bottom, 백분율, 길이#주로 (background-image, background-size, background-position)을 세트로 사용
2) 사이즈
- 요소의 너비와 높이 설정
- width: 요소의 너비 설정 - height: 요소의 높이 설정
3) 폰트
font-size font-weight font-family color
문법
- 속성
font-family는 글꼴을 설정하는 속성
- 값
- family-name: 글꼴 이름 - generic-family: 글꼴 유형 - initial: 웹 브라우저 기본 글꼴로 설정 - inherit: 부모 요소의 속성값을 그대로 따름
- 예시
font-family: 'Nanum Gothic', sans-serif; - 'Nanum Gothic': 폰트 이름 # 폰트 이름에 공백이 있으면 따옴표 사용 - sans-serif: 글꼴 유형
구글 웹폰트 적용하는 방법
- https://fonts.google.com/?subset=korean 접속
- 마음에 드는 폰트 눌러서 [+select this style] 클릭
- 오른쪽 상단 아이콘 클릭
- link 태그 복사
- head 안에 붙여넣기
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 5. head 안에 폰트 링크 붙여넣기↓ --> <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet"> </head> <body> <h1>글꼴 적용하기</h1> </body> </html>
- CSS 복사
- head > style 안에 붙여넣기
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet"> <!-- 7. head > style 안에 글꼴 CSS 붙여넣기 ↓ --> <style> * {font-family: 'Nanum Pen Script', cursive;} /**/ </style> </head> <body> <h1>글꼴 적용하기</h1> </body> </html>
4) 간격
- margin : 요소 안쪽 여백
- margin: x y z w - margin-top: x - margin-right: x - margin-bottom: x - margin-left: x
- padding : 요소 바깥쪽 여백
- padding: x y z w - padding-top: x - padding-right: x - padding-bottom: x - padding-left: x
- margin, padding 속성값 → 시계방향으로 적용(상 우 하 좌)
- margin: x y z w → 시계방향(상→우→하→좌)으로 여백 적용 - margin: x = margin: x x x x - margin: x y = margin: x y x y - margin: x y z = margin: x y z y
5) 기타
- border-radius : 테두리를 둥글게 만드는 속성
# 테두리마다 둥글기를 다르게 적용 할 수 있음
- border : 테두리 만드는 속성
border: 두께 모양 색 - 두께: medium(기본값) | thick | thin | length - 모양: none(기본값) | solid | dashed | dotted | double | groove | hidden | inset | outset | ridge
- text-align : 문단 정렬 방식을 정하는 속성
text-align: left | right | center | justify - justify: 가운데 정렬
- :hover : 마우스 오버
→ 마우스 올렸을 때 적용할 CSS 작성|예시| button:hover {border: 2px solid white;} → button 위에 마우스 올렸을 때 2px, 실선, 하얀색 테두리로 설정
3. flexbox
1) 개념
- flexbox는 박스 안 요소들을 자유롭게 배치하기 위해 필요함
속성값
1) container(박스)에 적용할 수 있는 속성값이 존재 - display | flex-direction | flex-wrap | flex-flow | justify-content | align-items | align-content 2) 각각의 item에 적용할 수 있는 속성값이 존재 - order | flex-grow | flex-shrink | flex | align-self
중심축과 반대축
중심축을 수평이나 수직으로 설정할 수 있음 - 수평축이 중심축: item이 왼쪽에서 오른쪽으로 정렬 - 수직축이 중심축: item이 위에서 아래로 정렬
2) 적용
1. 부모와 자식 구조일 때 2. 부모 태그에 display: flex; 속성을 주면 flexbox 레이아웃으로 바꿈1. flex 적용 예시 - 요소 가운데로 정렬
display: flex; 1. flexbox 레이아웃으로 설정 flex-direction: column; 2. 요소의 배열 방향 설정 justify-content: center; 3. 가로축을 기준, 요소들의 좌우에 대한 정렬 설정 align-items: center; 4. 세로축 기준, 요소들의 상하에 대한 정렬 설정
4. 부트스트랩
부트스트랩이란?
- Bootstrap : 프론트엔드 오픈 소스 툴킷
※ 잘 찾아서 자신의 디자인 목적에 맞게 잘 고쳐 쓰기!→ 입력 창, 버튼, 각종 레이아웃 등 HTML 및 CSS 기반의 디자인 템플릿으로 제공 → 추가적인 자바스크립트 확장들도 포함 → 오픈소스로 공개되어 있어 기존의 디자인을 재사용하거나 자유롭게 수정 및 재배포 가능
5. 반응형 웹디자인
- 웹브라우저의 크기가 변하는 것에 따라 각 요소도 그에 맞춰 변하도록 설정
<예시> max-width: 500px; 1. 요소의 너비가 최대 500px까지 커지도록 설정 width: 95%; 2. 그 전까지는 부모 요소의 너비의 95% 만 차지하도록 설정
