■ CSS 란? CSS의 역할
○ CSS (Cascading Style Sheets)
- Cascading : 계단식 위에서 흐르는
- Style : 양식
- Sheets : 판, 한장
- 계단식으로 스타일을 정의하는 문서
- HTML 문서에 스타일을 더해준다. HTML은 계단식 구조를 지니고 있다.
○ CSS 기본문법
- 선택자 : 어떤 요소에 스타일을 적용할지 정보
- {중괄호} : 선택한 요소에 적용할 스타일을 정의 하는 구간
- 속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보
- 속성값 : 어느정도의 수치에 맞게 정의하고 싶은지에 대한 정보
○ html에서 연결방법
<head>
<link rel = "stylesheet" type="text/css" href = "css/style.css">
</head>
○ CSS주석처리
p{
background-color: blue;
/* p태그에 파랑 넣기 */
}
○ HTML에 CSS를 더해주는 방식
- 인라인 스타일 : 태그에 직접 기술 (잘 사용하지는 않는다.)
코드를 유지보수하기 어렵다. 직접 하나씩 하나씩 올려줘야 됨
- 스타일 태그 : 스타일 시트를 위한 HTML에 태그 추가 기술
- 문서 간의 연결 : 스타일 시트 문서를 따로 작성하여 HTML 문서와 연결
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<!-- 문서간 연결 -->
<style>#a{color: red;}</style>
<!-- 스타일 태그 -->
</head>
<body>
<p style="color: blue;">안녕</p>
<!-- 인라인 스타일 -->
<p id="a">안녕</p>
<p>안녕</p>
<body>
</html>■ 선택자 기본
○ 선택자
- 어떤 요소에 스타일을 적용 할 것인지에 대한정보
- 선택자 종류 : 기본, 그룹, 특성, 결합, 의사 클래스, 의사 요소
○ 기본 선택자
- 전체 선택자 : *(애스터리스크) 문서 내의 모든 요소를 의미 하는 기호
*{
background-color: aqua;
}
- 태그 선택자
주어진 이름을 가진 요소를 선택 '유형 선택자' 라고도 한다.
주어진 이름을 가진 요소가 다수일때 모두 선택
p{
background-color: aqua;
}
- 클래스 선택자
전역 속성으로 동일한 명의를 모두 선택
<body>
<p class="a1">안녕</p>
<p class="a1">안녕</p>
<p class="a2">안녕</p>
<body>
<style>
.a1{
background-color: red;
}
.a2{
background-color: blue;
}
</style>
- 아이디 선택자
고유한 식별자 역할을 하는 전역속성으로
id속성값을 가진 요소를 선택
id속성값을 동일하게 하면 여기에서는 HTML, CSS 에서는 문제
없어 보이지만 웹표준을 위반하게되어 Javascript에서 문제 발생할 수 있음
<body>
<p id="a1" class="a b">안녕</p>
<!--클래스 이름을 두개 선택하는 법-->
<p id="a2" class="a">안녕</p>
<p id="a3" class="a">안녕</p>
<body>
.a{
background-color: blueviolet;
}
.b{
background-color: aqua;
}
#a2{
background-color: red;
}
○ 그룹선택자
다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용한다.
쉼표(,)를 이용해 선택자를 그룹화한다.
<body>
<p id="a1">안녕</p>
<p id="a2">안녕</p>
<p id="a3">안녕</p>
<h1>제목1</h1>
<h2>제목2</h2>
<body>
#a1, h1{
background-color: blue;
}
○ 선택자 우선순위
선택자가 겹치는 경우, 기본적으로 나중에 작성된 스타일이 적용
선택자가 다르지만 요소가 겹치는 경우 선택자 우선순위에 의해 적용될 스타일이 결정
아이디 선택자 > 클래스 선택자 > 태그 선택자
- 나중 작성 스타일 우선 적용
<body>
<p id="a1" class="a">안녕</p>
<p id="a2" class="a">안녕</p>
<p id="a3">안녕</p>
<body>
.a{
background-color: blue;
color: white;
}
.a{
background-color: red;
/* 하얀색 글자는 넣어지지만 배경은 아래쪽이 우선 */
}
- 선택자 우선적용
<body>
<p id="a1" class="a">안녕</p>
<p id="a2" class="a">안녕</p>
<p id="a3">안녕</p>
<body>
#a2{
background-color: blue;
}
.a{
background-color: red;
/* 클래스는 a인데 id a2는 미적용 */
}
p{
background-color: aqua;
/* a 클래스에 미적용 */
color: white;
text-align: center;
}
■ 텍스트 꾸미기
○ font-family
- 택스트에 사용할 글꼴 지정할때 사용
- 사용자의 스스템에 해당 글꼴이 설치 되어 있지 않을경우를 대비 여러 글꼴을 백업으로 지정
- 기본사용법
선택자 {
font-family: 글꼴명, 글꼴계열;
}* 선택자 : 스타일을 적용할 HTML 요소 지정
* 글꼴명 : 사용할 글꼴 이름지정, 이름에 공백시 (" ")로 묶어줌
* 글꼴 계열 : 글꼴명이 사용할 수 없을 때 사용할 글꼴 계열 지정
- 글꼴 지정 예시
p {
font-family: Arial;
/* 단일 글꼴지정 */
}
body {
font-family: "Times New Roman", Times, serif;
/* 여러글꼴 및 글꼴 계열 지정 */
}
- 글꼴 계열
* serif : 획 일부끝이 돌출된 형태 (예: Times New Roman)
* sans-serif: 획 일부끝이 돌출 없는 글꼴 (예: Arial)
* monospace: 고정 너비의 글꼴 (예: Courier New)
* cursive: 필기체 스타일의 글꼴(예: Brush Script)
* fantasy: 장식적인 글꼴(예: Papyrus)
* 글꼴 계열을 지정하면 해당 계열의 기본 글꼴이 사용됨
사용자의 시스템에 특정 글꼴이 설치되어 있지 않을 경우 유용한 백업방법임
○ font-size
| 단위 | 의미 |
| px | 모니터 상의 화소 하나 크기에 대응하는 절대크기 |
| rem | <html> 기본글꼴에 대응하는 상대크기 |
| em | 부모태그(상위태그)의 font-size에 대응하는 상대크기 |
<body>
body
<div>
body - div
<div>
body - div - div
</div>
</div>
</body>
body{
font-size : 30px;
}
body > div {
font-size: 2em;
}
body > div > div{
font-size: 2rem;
}
○ text-align
- 블록 내에서 텍스트 정렬 방식을 정의한다.
| 속성값 | 의미 |
| left / right | 왼쪽 또는 오른쪽 정렬한다. |
| center | 가운데 정렬한다 |
| justify | 양끝 정렬한다. (마지막 줄 제외) |
<body>
<div class="lt">왼쪽</div>
<div class="rt">오른쪽</div>
<div class="ce">중앙</div>
<div class="lr">
비상계엄하의 군사재판은 군인·군무원의 범죄나 군사에 관한 간첩죄의 경우와 초병·초소·유독음식물공급·포로에 관한 죄중 법률이 정한 경우에 한하여 단심으로 할 수 있다. 다만, 사형을 선고한 경우에는 그러하지 아니하다.
</div>
<br>
<span class="rt">스판오른쪽</span>
</body>
.lt{
text-align: left;
}
.rt{
text-align: right;
}
.ce{
text-align: center;
}
.lr{
text-align: justify;
}
○ color
- 텍스트의 색상을 정의한다. 다양한 방법으로 색상을 지정할 수 있다.
| 속성값 유형 | 의미 |
| 키워드 | 미리 지정된 색상별 키워드 사용 |
| RGB 색상 코드 | # 여섯자리 16진수 값 형태로 지정 |
| RGB 함수 | Red, Green, Blue의 수준을 각각 정의해 지정한다. |
<body>
<span id="a1">색상1</span><br>
<span id="a2">색상2</span><br>
<span id="a3">색상3</span><br>
<span id="a4">색상4</span><br>
<span id="a5">색상5</span><br>
<span id="a6">색상6</span><br>
</body>
#a1{color: red;}
#a2{color: #f3c;}
#a3{color: #ff33cc;}
#a4{color: rgb(130, 10, 200);}
#a5{color: rgb(10%,255,60%);} /*혼합사용금지*/
#a6{color: rgb(100%,0%,0%,0.5);
font-size: 2rem;}
■ display 속성
| none | block | inline | inline-block |
| 보이지 않음 | 블럭 | 인라인 | 인라인 블럭 |
○ 인라인 요소
- 위치 같은 줄에 나란히 배치, 이전요소 바로 뒤에서 시작
- 크기는 콘텐츠의 너비만 차지 즉 너비와 높이를 직접 설정할수 없음
- 여백 상하 여백 미적용 또는 예상과 다르게 작동, 좌우여백은 적용
○ 블록 요소
- 새 줄에서 시작 사용 가능한 전체 너비를 차지, 다음요소는 블록 아래에 새줄로 배치
- 크기는 부모 요소의 전체 너비를 차지 너비와 높이 직접 설정 가능
- 여백은 상하 좌우 모든 방향의 여백 적용
○ 인라인 - 블록 요소
- 인라인 요소처럼 같은 줄에 나란히 배치, 블록 요소처럼 너비와 높이를 지정가능
- 크기는 콘텐츠의 너비만 차지 명시적으로 너비 높이 설정가능
- 여백은 상하좌우 모든 방향의 여백이 적용
■ 사용시나리오
○ 인라인 요소
- 텍스트의 일부를 스타일링할 때 사용
예를 들어, <span>을 사용하여 문장 내 특정 단어에 다른 색상, 폰트 또는 강조 스타일을 적용할 때.
- 하이퍼링크 생성
<a> 태그로 텍스트나 이미지에 링크를 추가할 때. 이는 문서 내에서 다른 섹션으로 이동하거나
다른 웹페이지로 네비게이션하는 데 사용
- 이미지나 다른 미디어
<img> 태그를 사용하여 텍스트와 함께 이미지를 인라인으로 배치할 때.
○ 블록 요소
- 주요 섹션 또는 레이아웃 요소를 구성할 때
<div>는 웹 페이지를 섹션으로 나누고, 컨테이너로서 스타일링과 구조를 제공하는 데 자주 사용됨
- 문단을 구분할 때
<p> 태그는 텍스트 블록을 문단으로 나누는 데 사용됨
- 제목과 하위 제목구분
<h1>부터 <h6>까지의 제목 태그는 문서의 제목과 하위 제목을 나타내는 데 사용됨
- 목록 생성
<ul>, <ol>, <li> 태그를 사용하여 순서가 있는(번호가 매겨진) 또는 순서가 없는(점으로 표시된) 목록을 만들 때.
○ 인라인 블록 요소
- 너비와 높이가 필요한 인라인 요소
예를 들어, 버튼 또는 작은 폼 요소를 인라인으로 배치하면서도 크기를 조정해야 할 때 사용됨
- 수평 메뉴 또는 네비게이션 바
메뉴 아이템을 가로로 나열하면서 각 아이템의 패딩, 마진, 크기를
조절할 수 있어야 할 때 인라인-블록이 사용됨
- 그리드 또는 타일 레이아웃
여러 요소를 가로로 나란히 배열하면서도 각각의 요소에 대한 레이아웃 제어가 필요한 경우
예를 들어 사진 갤러리나 카드 레이아웃을 구현할 때 사용됨
■ Inline-block 특징 및 종류
| 형태 | 특징 | 종류 |
| 인라인 요소 Inline Elements |
기본 너비 : 컨텐츠의 너비 한줄에 여러 개 배치 크기값을 가질수 없음 상하 마진은 가질 수 없음 |
span, a, small, big, em, u, ins, i, s, del, br, q, b, strong, mark, sub, sup, label, map, cite, addr, time |
| 블럭 요소 Block Elements |
기본 너비 : 100% 한 줄에 하나만 배치 너비와 높이를 가질수 있음 상하좌우 마진 가질 수 있음 |
div, p, table, ul, ol, li, dl, dd, td, tr, td th, form h1~h6, header, nav, footer, main, section, article, fiure figcaption, symmary, details, address, blockquote, aside |
| 인라인 블록요소 (Inline Block Elements) |
기본 너비 : 컨텐츠의 너비 값 한 줄에 여러개 배치 크기값을 가질수 있음 상하좌우 마진 가질수 있음 |
img, button, select input, textarea, video, audio 대부분의 font icon 태그 |
■ display 속성
○ 여러속성
- none
요소가 차지하던 공간도 사라지고, 화면에 표시되지 않음
- block
새 줄에서 시작하며, 가능한 한 많은 너비를 차지
- inline
블록 레벨과 달리, 너비와 높이를 갖지 않으며, 내용의 너비만큼만 공간을 차지
- inline-block
인라인 레벨로 배치되지만, 블록 레벨 요소처럼 너비와 높이를 가질 수 있음
- flex
플렉스 컨테이너로 만들어, 자식 요소를 플렉스 아이템으로 배치
플렉스박스 레이아웃을 사용하여 요소를 효율적으로 정렬하고 분배
- grid
그리드 컨테이너로 만들어, 자식 요소를 그리드 아이템으로 배치
그리드 레이아웃을 사용하여 복잡한 두 차원 배열을 쉽게 설계
- table, table-row, table-cell
전통적인 HTML 테이블 레이아웃을 CSS로 재현
- inline-flex
인라인 플렉스 컨테이너로 만들어, 플렉스 아이템으로 자식 요소를 배치
요소가 인라인 요소처럼 배치되면서도 내부에서는 플렉스박스 레이아웃의 이점을 활용
- inline-grid
요소를 인라인 그리드 컨테이너로 만들어, 그리드 아이템으로 자식 요소를 배치
인라인 요소처럼 배치되면서도 내부에서는 그리드 레이아웃을 활용
○ display 처리
- 인라인요소 및 블록으로 변경
<body>
<div>안녕</div><div>안녕2</div>
<span>우리</span>
<span>우리</span>
</body>
div{
display: inline;
background-color: red;
}
span{
display: block;
background-color: blue;
}
○ border 속성
요소가 차지하고 있는 영역에 테두리를 그릴수 있다.
border 속성에는 속성값으로 테두리의 두께, 모양, 크기 등을 함께 지정이러한 속성을 단축속성이라고 한다.
| 속성명 | 속성값 |
| border-color | color 정의와 동일 |
| border-width | thin(1px), medium(3px), thick(5px) 또는 px, em, rem |
| border-style | none(기본), solid(직선), dotted(점선), dashed(긴 점선) 등 |
-border 사용방법
a{
border: 5px solid blue;
/*크기 종류 색*/
}
-border-width 사용
a{
/* 상,하 | 좌,우 */
border-width: 5px 20px;
/* 상 | 좌,우 | 하*/
border-width: 5px 20px 3px;
/* 상 | 우 | 하 | 좌*/
border-width: 1px 10px 1px 10px;
}
- 적용
<body>
<div>안녕</div><div>안녕2</div>
<span>우리</span><span>우리</span>
</body>
span{
border-width: 5px;
border-style: solid;
border-color: red;
}
div{
border: 5px solid blue;
}
■ 박스모델(Box-Model)
○ 박스모델이란?
브라우저가 요소를 렌더링 할 때 각각의 요소는 사각형 형태로 영역을 차지
이영역을 박스라 표현하며 CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리)을 결정할 수 있다.
- 박스의 영역
* 콘텐츠 영역 : 실제 콘텐츠를 포함 너비와 높이가 기본크기를 지정
* 안쪽 여백 : padding Area로 콘텐츠를 둘러싸는 공간, 콘텐츠와 테두리 사이 내부 여백 지정
* 배경색이나 배경이미지에 영향을 받음
경계선(테두리) : borde Area 패딩을 감싸는 테두리로 요소의 외곽선을 형성
* 바깥쪽 여백 : Margin Area로 테두리 바깥쪽 공간으로 다른 요소와의
외부 여백을 제공요소의 배경색이나 배경 이미지에 영향을 받지 않는다.
○ 박스 기본
<body>
<div>콘텐츠</div>
<span>기본</span><span>기초</span>
</body>
div{
border: 2px solid red;
padding: 10px 20px 5px;
margin: 20px;
width: 100px;
height: 50px;
}
span{
border: 1px solid blue;
width: 50px;
height: 50px;
display: inline-block;
}
○ Padding 과 Margin
- 테두리를 기준으로 안쪽 여백은 Padding, 바깥쪽 여백은 Margin
- 여백은 상하좌우 네 개의 면에 존재하는 영역으로 개별 적으로 두께를 정의할수 있다.
- Padding : padding-하위속성 top, right, left, bottom
- Margin : Margin-하위속성 top, right, left, bottom
<body>
<div></div>
</body>
div{
width: 100px; height: 100px;
padding : 30px;
/* 30px로 되어 있지만 아래쪽이 우선이다. */
padding-left: 10px;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 20px;
border: 5px solid red;
}
○ 박스모델
- 실제크기 (콘텐츠, 안쪽 여백, 경계선까지)
- 바깥쪽 여백은 요소마다 간격을 설정한다.
<div></div>
div{
width: 100px; height: 100px;
border: 5px solid blue;
padding: 10px;
/* 총 너비는 130px 높이 130px */
}
○ box-sizing
- 요소의 너비와 높이를 계산하는 방법을 지정
| 속성값 | 의미 |
| content-box | 기본값, 너비와 높이가 콘텐츠 영역만을 포함 |
| border-box | 너미와 높이가 안쪽 여백과 테두리까지 포함 |
div{
width: 100px; height: 100px;
border: 5px solid blue;
padding: 10px;
box-sizing: border-box;
/* 총 너비는 100px 높이 100px */
/* 콘텐츠의 너비는 70px 높이 70px */
}
○ background
- 콘텐츠의 배경을 정의한다.
- 단축속성으로 색상이미지 반복등 정의 할 수 있다.
| 하위속성 | 역할 |
| background-color | 배경색 정의 |
| background-image | 배경 이미지를 정의 |
| background-position | 배경 이미지의 초기 위치 정의 |
| background-size | 배경 이미지의 크기를 정의 |
| background-repeat | 배경 이미지의 반복방법을 정의 |
- background-image : 기본적으로 배경이미지가 콘텐츠보다 작으면 배경이미지에 대해서 반복적으로 실행됨
{
background-image: url(주소);
}
- background-repeat : 배경이미지의 반복속성을 변경한다.
repeat(반복)기본값, no-repeat(반복안함)
■ line-height / Vertical-align
○ line-height
- 텍스트 내의 각 줄의 높이를 설정하여, 줄 간의 수직 간격을 조정
- 속성 사용방식
* 단위 없는 숫자 : 권장되는 방식으로 요소의 글꼴 크기에 곱해져 줄 높이를 결정
다른 CSS속성에는 값은 사용할 수 없음, 0이라는 수치는 사용가능단위를 넣어줘도 모두 같은 의미를 가지기 때문에 없음을 의미
* 길이 단위 사용 : 절대적 또는 상대적 단위 사용가능
* 백분율로 글꼴 크기에 따라 줄 높이가 조절됨
<div class="main">
CSS 클래스 이름을 지정할 때는 가독성, 유지보수성, 그리고 확장성을 고려해야 합니다.
</div>
*{
border: 1px solid #000;
}
.main{
width: 300px; height: 200px;
background-color: tan;
line-height: 2;
}
○ Vertical-align
- 인라인, 인라인-블록, 테이블 셀요소의 수직정렬을 조정하는데 사용
- 이 속성은 주로 텍스트나 이미지같은 인라인 요소들 사이에서 수직배치 제어
- 블록 레벨 요소에는 적용되지 않음
| 속성값 | 의미 |
| baseline | 기본값, 요소의 기준선을 포함 라인의 기분선 맞춤 |
| top | 요소의 상단을 라인 박스의 최상단과 맞춤 |
| bottom | 요소의 하단을 라인 박스의 최하단과 맞춤 |
| middle | 요소의 중앙을 라인 박스의 기준선 기준으로 약간 위쪽으로 정렬, 부모요소의 x-height의 중간 |
- 문자와 baseline
<div class="main">
<span class="text">Apple</span>
<span class="badge">New</span>
</div>
div{
border: 1px solid #000;
}
.main{
width: 300px; height: 200px;
background-color: tan;
}
.text{
background-color: red;
color: #fff;
font-size: 3rem;
}
.badge{
background-color: #000;
color: #fff;
}
노란선이 baseline임
- Vertical-align 작동
.badge{
background-color: #000;
color: #fff;
vertical-align: bottom;
}
- baseline으로 인한 문제
* a클래스가 div로 inline-block이면서 기준점을 baseline을 잡아서글자가 아래쪽으로 보이듯 나옴
<div class="main">
글자
<div class="a"></div>
</div>
div{
border: 1px solid #000;
}
.main{
width: 300px; height: 200px;
background-color: tan;
}
.main>.a{
width: 50px; height: 50px;
display: inline-block;
vertical-align: baseline;
background-color: red;
}
- 인라인 블럭 정렬
vertical-align을 중앙정렬, 품고 있는 main의 line-height에 반응하여 중앙으로 이동
main의 line-height가 기본값일때는 특이사항 없음
<div class="main">
글자
<div class="a"></div>
</div>
div{
border: 1px solid #000;
}
.main{
width: 300px; height: 200px;
background-color: tan;
line-height: 100px;
}
.main>.a{
width: 50px; height: 50px;
display: inline-block;
vertical-align: middle;
background-color: red;
}
- 인라인 블럭 내부 글자
main의 line-height로 인해 내부에 있는 a태그까지 반응되었고
태그내 텍스트도 line-height를 100px 품고 있음
a태그내 line-height를 1로 변경 하면 해결
<div class="main">
<div class="a">a내부</div>글자
</div>
div{
border: 1px solid #000;
}
.main{
width: 300px; height: 200px;
background-color: tan;
line-height: 100px;
}
.main>.a{
width: 50px; height: 50px;
display: inline-block;
vertical-align: middle;
background-color: red;
}
- Vertical-align과 글자
<div class="main">
<div class="a1">a1내부</div>글자
<br>
<div class="a2">a2내부</div>글자
</div>
div{
border: 1px solid #000;
}
.main{
width: 300px; height: 200px;
background-color: tan;
line-height: 100px;
}
.main>div{
width: 50px; height: 50px;
display: inline-block;
background-color: red;
}
.a1{
line-height: 2;
}
.a2{
line-height: 1;
}
- 인라인 블럭에 Vertical-align 적용
<div class="main">
<div class="a">
<div class="a1"></div>
<div class="a1"></div>
</div>
<div class="a"></div>
a
</div>
div{
border: 1px solid #000;
box-sizing: border-box;
}
.main{
width: 300px; height: 200px;
background-color: tan;
}
.main>.a{
width: 50px; height: 50px;
display: inline-block;
background-color: red;
/* vertical-align: bottom; */ /* vertical-align 해주면 baseline 사라짐 */
font-size: 0;
}
.a>.a1{
width: 50%; height: 100%;
display: inline-block;
}■ Float and clear
○ float속성
문서의 일반적 흐름에서 제외되어
자신을 포함하고 있는 컨테이너 왼쪽이나 오른쪽에 배치
※ 문서의 흐름 : HTML 문서에다 여러 요소를 만들면 먼저 만들어 놓은 것 부터
차례대로 브라우저에 표시되고 이런 차례를 말한다.
※ 컨테이너 Container : 특정 요소를 포함하고 그룹화하는 용도로 사용되는 요소
HTML문서 내에서 여러 요소를 논리적으로 묶고,
그룹화된 요소에 스타일을 적용하거나 레이아웃을 조정하기 위해 사용하는 요소
- float 하위요소
| 속성값 | 의미 |
| none | 기본값, 원래 상태 |
| left | 자신을 포함하고 있는 박스의 왼편에 떠있어야 함 |
| right | 자신을 포함하고 있는 박스의 오른편에 떠 있어야 함 |
<div id="a"></div>
<div id="b"></div>
<p>문단태그</p>
<div id="c"></div>
#a{
width: 200px; height: 100px;
background-color: orange;
float:right;
}
#b{
width: 100px; height: 100px;
background-color: aqua;
float: left;
}
#c{
width: 200px; height: 200px;
background-color: blue;
}
○ clear
float 요소 이후에 표시되는 요소가 float을 해제하여
float 요소의 아래로 내려갈때 사용
| 속성값 | 의미 |
| none | 기본값, 아래로 이동되지 않음 |
| left | float이 left인 요소의 아래로 내려감 |
| right | float이 right인 요소의 아래로 내려감 |
| both | float이 left및 right인 요소의 아래로 내려감 |
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
#a{
width: 200px; height: 50px;
background-color: orange;
float:right;
}
#b{
width: 100px; height: 100px;
background-color: aqua;
float: left;
}
#c{
width: 200px; height: 200px;
background-color: blue;
clear: right;
}
■ position
○ position
문서상의 요소를 배치하는 방법을 정의
position이 요소의 배치방법을 결정하면
top, bottom, right, left가 최종 위치를 결정
-> 위치 지정은 필요에 따라 선택적으로 사용
○ position 속성값
| 속성값 | 의미 |
| static(정적) | 기본값, 요소를 일반적인 문서 흐름에 따라 배치 |
| relative(상대적) | 일반적 문서 흐름에 따라 배치, 상하좌우 위치 값에 따라 오프셋 적용 |
| absolute(절대적) | 일반적 문서 흐름에서 제거 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋 적용 |
| fixed(결정된) | 일반적 문서 흐림에서 제거, 지정한 위치에 고정된다. |
| sticky | 일반적인 문서 흐름에서 제거, 스크롤 동작이 존재하는 가장 가까운 요소에 오프셋 적용 |
○ relative : (상대적)
문서의 흐름에 따라 배치하되, 위치값에 따라 위치를 이동시켜서 배치하는 것
상대적인 위치를 뜻함
<div id="a1"></div>
<div id="a2"></div>
#a1{
width: 200px; height: 200px;
background-color: aquamarine;
position: relative;
top: 100px;
}
#a2{
background-color: sandybrown;
width: 300px; height: 200px;
}
○ absolute (절대적)
일반적인 무서흐름에 제거 상위 요소중 가장 가까운
position 지정 요소에 대해 상대적으로 오프셋지정
position 지정요소 : position속성에 속성값이 정의 되어 있는 요소
<div id="a1">1번</div>
<div id="a2">2번</div>
#a1{
width: 100px; height: 100px;
background-color: aquamarine;
position: absolute;
top: 50px;
}
#a2{
width: 200px; height: 200px;
background-color: sandybrown;
}
- 부모의 position 속성이 없으면 브라우저 화면을 기준으로 따로 들어감
- 흐름에서도 벗어나서 개별적으로 들어감
<div id="z1">
<div id="a1" class="a">1번</div>
<div id="a2" class="a">2번</div>
</div>
<div id="z2">
<div id="a3" class="a">3번</div>
<div id="a4" class="a">4번</div>
</div>
body{
background-color: sandybrown;
}
#z1, #z2{
width: 300px; height: 300px;
border: 1px solid #000;
background: yellowgreen;
margin-left: 100px;
}
#z2{
position: relative;
}
.a{
width: 100px; height: 100px;
border: 1px solid #000;
background: khaki;
}
#a1{
position: absolute;
left: 150px; top: 0px;
/* Z1번은 position속성이 없어서 상위로 들어감 따로 들어감*/
}
#a3{
position: absolute;
left: 150px;
}
○ fixed(결정된)
absolute처럼 일반적인 문서 흐름에서 제거, 지정된 위치 고정
absolute는 상위의 position지정 요소를 찾지만 fixed는 고정
<div id="z">
<div id="a1" class="a">1번</div>
<div id="a2" class="a">2번</div>
<div id="a3" class="a">3번</div>
</div>
#z{
background-color: yellowgreen;
margin-left: 100px;
width: 300px; height: 300px;
position: relative;
}
.a{
background-color: yellow;
width: 100px; height: 100px;
}
#a1{
position: absolute;
top: 50px; left: 50px;
}
#a2{
position: fixed;
top: 0px; left: 0px;
}
○ sticky
일반적인 문서흐름에 따라 배치하고 스크롤되는 가장 가까운 상위에 오프셋적용
스크롤 이동으로 요소가 움직여도 고정상태 유지
<div id="a1" class="a">1번</div>
<div id="a2" class="a">2번</div>
<div id="a3" class="a">3번</div>
#a1,#a3{
background-color: yellow;
width: 200px; height: 1000px;
}
#a2{
background-color: red;
width: 100px; height: 100px;
position: sticky;
top: 0px;
}
■ flexbox
○ flexbox란
박스내 요소간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델
레이아웃을 다룰때 한번에 하나의 차원(행이나 열)만을 다룸
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.item{
width: 50px; height: 50px;
background-color: yellowgreen;
border: 1px solid #000;
}
.container{
display: flex;
}
○ 주축과 교차축
- 주축 : 1차원 레이아웃으로 요소의 진행방향을 지정하는 방향
- 교차축 : 주축의 엇갈리는 방향을 의미
- 주축은 기본적으로 가로방향임
- 사용자는 목적에 따라 방향을 변경할 수 있음
○ flex-direction
flex 내 요소를 배치할 때 사용할 주축 및 방향을 지정(정방향, 역방향)
| 속성값 | |
| row | 기본값, 주축은 행으로 가로 콘텐츠 방향과 동일 |
| row-reverse | 주축은 행으로 가로 콘텐츠 방향과 반대 |
| column | 주축은 열으로 세로 콘텐츠 방향과 동일 |
| column-reverse | 주축은 열으로 세로 콘텐츠 방향과 반대 |
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.item{
width: 50px; height: 50px;
background-color: yellowgreen;
border: 1px solid #000;
}
.container{
width: 200px; height: 200px;
background-color: yellow;
display: flex;
flex-direction: row-reverse;
}
○ flexbox 다루기
| 속성 | 내용 |
| justify-content | 주축 배치방법 flex-start(시작부분에 정렬), flex-end(끝부분정렬), center(가운데 정렬), space-between(시작 마지막 맞추고 사이간격 동일), space-around(중심으로 동일 여백, 좌우는 공간의 절반) space-evenly(모든 아이템사이 컨테이너의 시작과 끝에 동일 간격) |
| align-item | 교차축 배치방법 stretch(기본), flex-start(시작부분 정렬), flex-end(끝부분 정렬), center(가운데 정렬), baseline(기준선 정렬, 텍스트의 바닥선일치) |
| align-self | 교차축 개별요소 배치 방법 item에 직접 설정 stretch(기본), flex-start(시작부분 정렬), flex-end(끝부분 정렬), center(가운데 정렬), baseline(기준선 정렬, 텍스트의 바닥선일치) |
| flex-wrap | 한줄에 들어가지 않을 경우 줄 바꿈 여부 nowrap(기본값 크기를 줄여서라도 컨테이너 넣기), wrap(새로운 줄로 배치), wrap-reverse(반대방향으로 래핑) |
■ 기타 선택자
○ 특성선택자
주어진 속성의 존재 여부나 그 값에 따라 요소를 선택한다.
- class 속성을 가지고 있는 요소 선택
[class]{
background-color: red;
}
- class가 "x"인 요소 선택
[class = "x"]{
background-color: red;
}
- class가 "x"로 시작하는 요소 선택
[class ^= "x"]{
background-color: red;
}
- class가 "x"를 포함하는 요소 선택
[class *= "x"]{
background-color: red;
}
- class가 "x"로 끝나는 요소 선택
[class $= "x"]{
background-color: red;
}
○ 결합선택자 / 자손결합자
- 두개 이상의 선택자를 결합시켜 결합된 조건을 만족하는 요소를 선택
- 자손 결합자 두개의 선택자 중 첫 번째 선택자 요소의 자손을 선택할수 있다.
- div p : div 요소 안에 위치하는 모든 p 요소를 선택
- div>p : div 요소의 바로 아래에 위치하는 모든 p요소를 선택하기
div p {
color:red;
}
div > p {
color:red;
}
- 자손결합자 실습
body .a 로 클래스 명이 바로 아래의 a클래스(1번) 및 내부에 있는 (5번) 먼저 red를 실행
body>.a 로 바로 아래 (1번)이 blue 실행 1번 red에서 blue로 변경
body .a 가 밑에 있었으면 선택자 우선순위에 우위에 있어 모두 red임
<h1>결합선택자</h1>
<p class="a">1번</p>
<p>2번</p>
<div>
<p class="b">3번</p>
<p>4번</p>
<p class="a">5번</p>
<p>6번</p>
</div>
p{
margin: 0px 0px;
}
body .a{
background-color: red;
}
body>.a{
background-color: blue;
}
○ 결합선택자 / 형제 결합자
- 두개의 선택자 중 첫 번째 선택자 요소의 형제를 선택할 수 있다.
- 형제 : 상위, 하위 태그도 아닌 동일 선상에 있는 태그
- h1 ~ p : h1 요소의 뒤에 오는 형제 중 모든 p 요소를 선택하기
- h1 + p : h1 요소의 바로 뒤에 오는 형제 p요소를 선택하기
h1 ~ p {
color: red;
}
h1 + p{
color: blue;
}
- 형제선택자 실습
.b~p : b클래스 형제인 p태그 (4,5,6) red로 배경
.a+p : a클래스 바로 뒤의 형제인 p태그 (2,6) blue로 배경 6번 red-blue 변경
<h1>결합선택자</h1>
<p class="a">1번</p>
<p>2번</p>
<div>
<p class="b">3번</p>
<p>4번</p>
<p class="a">5번</p>
<p>6번</p>
</div>
p{
margin: 0px 0px;
}
.b~p{
background-color: red;
}
.a+p{
background-color: blue;
}
■ 의사 클래스 (가상 클래스)
○ 의사 클래스
- 선택자에 추가하는 키워드로 요소는 고정되어 있지 않는다.
어떤 특정한 상태가 되었을 때 (사용자와의 상호작용 시점마다) 스타일을 다양하게 적용해주는 것
선택자:의사클래스{
속성명: 속성값;
}
| 의사 클래스 | 의 미 |
| hover | 마우스 포인터가 요소 위로 올라올때 |
| active | 사용자가 요소를 활성화 ( 마우스 클릭등) |
| focus | 요소가 포커스를 받고 있다. |
| disabled | 비활성 상태의 요소 |
| nth-child() | 형제사이에서의 순서에 따라 |
○ hover
- 마우스 커서가 올라오면 변경하겠다.
<div class="main">
<div class="contents">
</div>
</div>
.main{
width: 300px; height: 300px;
background-color: aquamarine;
}
.contents{
width: 100px; height: 100px;
background-color: blue;
}
.contents:hover{
background-color: red;
}
○ active
- 요소를 선택하면 변경된다.
<div class="main">
<div class="contents">
버튼
</div>
</div>
.main{
width: 300px; height: 300px;
background-color: aquamarine;
}
.contents{
width: 100px; height: 30px;
background-color: blue;
border-radius: 10px;
line-height: 30px;
text-align: center;
color: black;
}
/* .contents:hover{
background-color: blueviolet;
color: red;
} */
.contents:active{
background-color: rosybrown;
color: white;
}
○ focus
- focus가 가르키고 있으면 실행
<div class="main">
<input class="contents1" type="text">
<input class="contents2" type="text">
</div>
.main{
width: 300px; height: 300px;
background-color: aquamarine;
}
.contents1:focus{
background-color: red;
}
.contents2:focus{
background-color: blue;
}
○ nth-child()
- 형제 사이에서의 요소를 선택
body{
display: flex;
justify-content: space-between;
}
.box{
width: 100px; height: 100px;
background-color: red;
}
.box:nth-child(3){
background-color: blue;
}
- nth-child(2n) : n에 0부터 들어오는데 그것에 맞게 0 2,4,
.box:nth-child(2n){
background-color: blue;
}
- nth-child(n+3) : 3번부터 시작
.box:nth-child(n+3){
background-color: blue;
}
■ 의사요소
○ 의사요소(pseudo-elements)
- 선택자에 추가하는 키워드로 요소의 특정 부분에 대한 스타일을 정의 할 수 있다.
선택자::의사요소{
속성명:속성값;
}
○ first-line (첫번째 줄만), first-letter (첫번째 글자)
<p>
의사요소 처음 부분
의사요소 처음 부분
의사요소 처음 부분
의사요소 처음 부분
의사요소 처음 부분
의사요소 처음 부분
</p>
p::first-line{/* 첫줄 */
color: red;
background-color: blueviolet;
}
p::first-letter{ /* 첫글자 */
background-color: yellow;
font-size: 20px;
font-weight: 900;
}
○ marker : 블릿 (기호) 가 있는 부분을 표시한다.
<ul>
<li>강아지</li>
<li>고양이</li>
<li>호랑이</li>
<li>타조</li>
</ul>
li::marker{
color: red;
}
○ before(요소의 앞), after(요소의 뒤)
<p>기본요소</p>
p::before{
content: "앞";
background: aqua;
}
p::after{
content: "글자";
color: red;
background: violet;
}
■ 상속
○ 상속(Inheritance) : 하위요소가 상위요소의 스타일 속성값을 물려 받는 것
상위요소로 부터 상속이 이루어지는 속성이 있는 반면 그렇지 않는 속성도 있다.
| 상속 되는 속성 | 상속 되지 않은 속성 |
| line-height, font-family, font-size, font-weight, text-align, cursor, color |
background-color, background-repeat, border, display, |
※ 상속관련 링크
- 실습
color 속성과 font-size 속성은 상위 요소에 작성해도 하위 요소가 상속상속되지 않는 속성들은 적용안됨상속되지 않는 속성들은 자기 자신에서 완성 시킬수 있고상속되는 속성들도 자기 자신에서 작성해도 문제 없음상속은 우선순위에서도 낮은 순위임
<div>
<p>p태그</p>
</div>
div{
width: 300px; height: 300px; /* 상속 안됨 */
color: red; /* 상속 */
font-size: 30px; /* 상속 */
border: 1px solid #000; /* 상속 안됨 */
}
○ 상속과 관련된 공용된 키워드
- 모든 CSS속성에 사용가능한 키워드
| 키워드 | 의미 |
| inherit | 상위 요소로부터 해당 속성의 값을 받아 사용 |
| initial | 브라우저에 지정된 기본 속성을 적용 |
| unset | 상속값을 초기화 시킨다 |
- unset 사용이유 : 대규모 웹 사이트나 애플리케이션에서 CSS복잡성을 관리
예상치 못한 스타일 상속을 방지, 유지보수를 용이 하게 한다.
<div id="a">
<p>p태그</p>
</div>
div{
width: 300px; height: 300px;
color: red;
font-size: 30px;
border: 1px solid #000;
}
p{
color: initial;
border: inherit;
font-size: unset;
}
■ z-index
○ z-index : 요소의 쌓임 순서를 정의할 수 있다.
Z축값을 정리 할수 있다.
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
div{
width: 100px; height: 100px;
position: relative;
border: 1px solid #000;
}
.a1{
background-color: red;
}
.a2{
background-color: blue;
bottom: 50px;
}
.a3{
background-color: blueviolet;
bottom: 100px;
}
.a4{
background-color: brown;
bottom: 150px;
}
- z-index 사용
겹쳐져 있는 순서가 사라진다.
position이 있는 상태에서 정의된다.
z-index의 값이 높을 수록 위로 올라가고 순서값을 -, 100 이런식으로 작성해도 문제 없음
div{
width: 100px; height: 100px;
position: relative;
border: 1px solid #000;
}
.a1{
background-color: red;
z-index: 4;
/* 가장 위로 */
}
.a2{
background-color: blue;
bottom: 50px;
z-index: 3;
}
.a3{
background-color: blueviolet;
bottom: 100px;
z-index: 2;
}
.a4{
background-color: brown;
bottom: 150px;
z-index: 1;
/* 가장 밑으로 */
}
'UIUX > 내용' 카테고리의 다른 글
| grid (1) | 2024.04.08 |
|---|---|
| CSS 기본 사용형태 (0) | 2024.04.08 |
| 텍스트 스타일 (0) | 2024.04.08 |
| EMMET 약어 예제 (0) | 2024.04.03 |
| HTML 기초 (0) | 2024.03.29 |