빅데이터 부트캠프 78일차
CSS(Cascading Style Sheets)
정의
- HTML 등의 마크업 언어로 작성된 문서가 실제로 웹 사이트에 표현되는 방법을 정해주는 스타일 시트 언어
종류
1. 인라인 스타일
- 태그 안에 style 속성을 이용하여 CSS 적용
2. 임베디드 스타일
- <style>(HTML의 CSS 태그)을 이용하여 CSS 적용
3. 링크 스타일
- CSS 파일을 따로 만들어 CSS파일 링크를 통해 적용
선택자(Selector)
1. 태그 선택자 -> [태그명 {속성명 : 속성값;}] 형태로 입력하여 설정
2. 그룹 선택자 -> [태그명1, 태그명2, ... {속성명 : 속성값;}] 형태로 입력하여 여러 태그에 대해 공통적으로 설정
3. 클래스 선택자 -> [.클래스명 {속성명 : 속성값;}] 형태로 입력하여 설정
4. 아이디 선택자 -> 태그 내부에서 태그의 id를 지정했을 경우 [#id명 {}]을 통해 해당 특정 태그에만 CSS 적용 가능
특징
- /* ~ */ = 주석 설정
- 코드의 선언 순서(위 -> 아래)에 따라 우선순위가 반영되어 코드가 적용됨
(같은 태그에 관한 코드일 경우 나중에 입력된 것이 앞선 코드의 실행을 뒤집어씀)
- 태그의 클래스를 여러개 지정하고 같은 CSS설정에 대한 코드라 서로 겹치게 되면 CSS의 선언 순서가 가장 나중인 설정이 적용됨 (서로 다른 CSS설정에 대한 코드면 둘 다 적용됨)
- li{리스트$}*5 = <li> 태그 5개 생성 및 내용으로 "리스트1~5" 자동 입력
기본 property
- ul.before>li{$}*10 = <ul>태그 안에 <li>태그 10개 생성 + <li>태그 사이에는 1씩 증가하면서 숫자가 텍스트 추가
- opacity = 투명도(0~1)
- margin = auto; -> 가운데 정렬
- 클래스명^=접두사, 클래스명$=접미사
ex) [type="password"] = type이 password인 태그에 대한 CSS 설정
[class$="top"] = 클래스명이 top으로 끝나는 클래스들에 대한 CSS 설정
[class^="btn-"] = 클래스명이 btn-으로 시작하는 클래스들에 대한 CSS 설정
가상 클래스 선택자(:)
- 특별한 이벤트 발생시에 대한 설정을 위해 사용
- [선택자 태그명:가상 이벤트{}] 형식으로 입력
※ 가상 이벤트 종류
- hover = 마우스 커서를 갖다 댔을 경우에 대한 설정
- active = 마우스로 클릭 했을 경우에 대한 설정
- focus = input 창에서 입력하려고 할 경우에 대한 설정
- link = 방문한 적이 없는 링크 버튼에 대한 설정 (한번이라도 클릭 안했을 때)
- visited = 방문한 적이 있는 링크 버튼에 대한 설정 (한번이라도 클릭 했을 때)
- first-child/last-child = 해당 선택자의 여러개 존재하는 태그의 처음이나 끝 태그에 대한 설정
(만약 처음이나 끝에 지정한 태그가 아닌 다른 태그가 입력되어 있는 경우 적용 X)
- nth-child() = 기본적으로는 특정한 순서의 태그 하나만 적용 -> 2n 입력시 짝수 번째 태그 적용 가능 n+2는 두번째부터 모두 적용 (n=0부터)
- nth-of-type() = 특정 타입의 해당 순서 태그에 적용
- not() = 지정한 것만 제외하고 css 적용
가상 요소 선택자(::)
- 기존 텍스트에 새로운 텍스트를 추가시에 사용
- [선택자 태그명::가상 요소{}] 형식으로 입력
- 가상 요소 선택자(::) 사용시에는 content는 빈칸이라도 필수로 입력해야함
※ 가상 요소 종류
- before = 기존 텍스트의 앞에 지정 텍스트 추가
- after = 기존 텍스트의 뒤에 지정 텍스트 추가
폰트 사이즈 관련 property
- rem = 최상위 root(<html>)의 font-size 기준 폰트 사이즈
ex) <html>의 font-size가 14px이면 1rem=14px
- 50vh, 50vw = 브라우저 창의 50% 너비와 높이
- line-height = 글자 크기의 몇배만큼을 높이로 설정할 것인지
- text-decoration = 텍스트를 선으로 꾸미는 설정
※ 속성값 -> 글자 밑줄(underline), 윗줄(overline), 취소선(line-through), 글자에서 밑줄 제거(none)
- text-indent = 들여쓰기(양수)/내어쓰기(음수) 설정
배경 설정 관련 property
- background-attachment: fixed = 스크롤을 움직이면 이미지가 따라오는 느낌
- background-size: contain 크기가 유지되어 잘리지 않고 그대로 이미지 출력
- z-index= 이미지 맨앞 맨뒤 순서 설정 (값이 클수록 맨앞으로 나옴)
- border = 테두리 설정
- border-radius = 테두리 곡선 설정 (100% -> border=원)
- box-sizing = 원상태의 틀을 유지 -> CSS 설정시 *{box-sizing: border-box} 기본으로 입력할 것
- display = 요소를 어떻게 보여줄 지 설정
※ 속성값 -> none = 보이지도 않고 공간 차지도 X (마치 삭제된 것처럼 설정됨), block= 다른 요소와 같은 줄에 있지 않고 다음줄로 이동과 동시에 해당 줄의 모든 공간 차지
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"> = CSS 초기화 코드 (빈공간 사라짐) <style>태그 전에다가 입력
아이콘 참고 사이트
Noticon
noticon.tammolo.com
overflow
- overflow = 박스 공간에 비하여 넘치는 내용에 대해서 설정
- auto: 넘치면 scroll, scroll: 넘치지 않아도 scroll, visible : 넘쳐도 내용 보이게, hidden : 넘치면 내용 안보이게
박스 모델 구조
CSS 기본 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>로그인</title>
<style>
* {
box-sizing: border-box;
}
body {
background-color: gold;
margin: auto;
text-align: center;
padding: 160px 100px;
}
div.login-form {
background-color: lightgray;
height: 400px;
width: 500px;
margin: auto;
padding: 35px 30px;
}
div.login-form form input.text-field {
border-radius: 10px;
width: 400px;
margin: 10px 0px;
padding: 20px;
border: 1px solid white;
font-size: 20px;
}
div.login-form form input.submit-btn {
color: white;
font-size: 20px;
margin-top: 30px;
width: 430px;
height: 70px;
background-color: gold;
border: none;
border-radius: 10px;
}
div.links {
margin-top: 35px;
font-size: 20px;
}
div.links a{
color: gray;
text-decoration: none;
}
</style>
</head>
<body>
<div class="login-form">
<form>
<input
type="text"
name="email"
class="text-field"
placeholder="아이디"
/>
<br />
<input
type="password"
name="password"
class="text-field"
placeholder="비밀번호"
/><br />
<input type="submit" value="로그인" class="submit-btn" />
</form>
<div class="links">
<a href="#">비밀번호를 잊어버리셨나요?</a>
</div>
</div>
</body>
</html>