<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
/* div {
box-sizing: border-box;
width: 500px;
height: 500px;
border: 1px solid red;
background-image: url("https://cdn.travie.com/news/photo/first/201710/img_19975_1.jpg");
background-repeat: no-repeat;
background-position: left top;
} */
body {
height: 1000px;
}
.container {
display: flex;
width: 300px;
height: 300px;
border: 2px solid black;
justify-content: space-between;
}
.item {
width: 60px;
height: 60px;
background-color: teal;
}
ul li {
text-align: center;
width: 50px;
background-color: red;
list-style: none;
}
.main_container {
display: flex;
justify-content: center;
/* x */
height: 300px;
align-items: center;
/* y */
}
</style>
</head>
<body>
<!-- <div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div> -->
<!--
div ul li << 이런 구조라면 컨테이너 - 부모 - 자식
div div ul li << 이런 구조라면 컨테이너 - 박스 - 부모 - 자식
flex 실무처럼 쓰기!
div box를 하나 더 감싸줘서 최상위 부모에게 flex를 줄 것!
기존 div ul li 의 구조였다면
정렬하고 싶은 요소들을 한 뭉텅이에 묶고 그 부모요소(즉 컨테이너)에게 display flex를 줄 것!
justify-contents : x축 가운데 정렬
align-items : y축 가운데 정렬
원하는대로 안움직인다? 싶으면 플렉스 걸어준 컨테이너 기점으로 높이 설정후 align-item center 쓰기 !
이것도 안되면 리스트나 유엘이나 높이설정에 방해가 있는요소 하이트 제거하기
특성 선택자
- 컨셉 : [class], [class="item"] -> 클래스가 존재하면 선택
- 값 확인
[class *="it"] -> 클래스 값에 it가 포함되는 요소
[class ^="it"] -> 클래스 값에 it로 시작되는 요소
[class $="it"] -> 클래스 값에 it로 끝나는 요소
결합 선택자
1. 자손 결합자
div p -> div 요소 안에 위치하는 모든 p요소 선택하기
div > p -> div 요소 바로 아래에 위치하는 모든 p 요소를 선택하기
2. 형제 결합자
h1 ~ p -> h1 요소의 뒤에 오는 형제 중 모든 p 요소를 선택하기
h1 + p -> h1 요소의 바로 뒤에 오는 형제 p 요소를 선택하기
형제 요소란 ? -> 같은 부모를 가지고있는 요소
의사 클래스 : 선택자에 추가하는 키워드로 요소가 특정한 상태가 되었을 때 요소를 선택하겠다는 의미
ex : [type="button"]:hover{}
hover : 마우스 포인터가 요소 위에 위치
active : 사용자가 요소를 활성화(마우스 클릭 등)
focus : 요소가 포커스를 받고 있다 ex:text input 창 클릭
disabled : 비활성 상태의 요소
nth-child() : 형제 사이에서의 순서에 따라 요소를 선택
의사요소
ex : 선택자 :: 의사요소 / li::first-letter
after : 요소의 뒤에 추가
before : 요소의 앞에 추가
first-line : 블록 레벨 요소의 첫 번째 줄
marker : 목록 기호의 스타일을 적용 ex : list의 점
placeholder : 입력 요소의 자리표시자 스타일을 적용(input 칸의 글자)
상속의 가능여부
상속이 되는 속성
color, font, text, cursor 등
상속이 되지않는 속성
background, display, border 등
공용 키워드 (모든 css 속성에 사용이 가능함)
inherit : 상위 요소로부터 해당 속성의 값을 받아 사용
initial : 해당 속성의 기본값을 요소에 적용
unset : 상속 속성에 대해서는 inherit 처럼 상속되지 않는 속성에 대해서는 initial처럼 적용
z-index
요소가 겹치면 x,y 뿐만아닌 화면 앞 즉 z축으로 요소가 쌓임
이때 쌓이는 순서를 결정할 수 있는 것이 z-index
기본값은 auto 이며 정수값으로 정의함
값이 클수록 전면에 표시된다
-->
<div class="main_container">
<div class="list_box1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="list_box2">
<ul>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</div>
</body>
<!--
전체 선택자, 태그 선택자, 클래스 선택자, 아이디 선택자, 그룹선택자
선택자 겹치는 경우 우선순위
아이디 > 클래스 > 태그
인라인 요소 -> width height 조절 불가능
inline - block 로 변경하여 조절 가능함
박스모델 - 바깥쪽 여백(margin) - 경계선(border-width) - 안쪽 여백(padding) - 콘텐츠 영역(width, height)
하위속성 정의하기 padding-left, padding-right, padding-top, padding-bottom
margin도 마찬가지로 가능
각각 정의하면 귀찮으니 한번에 정의하기
ex : margin : 10px 20px 30px 40px;
두 개 수치 지정 -> 상하 좌우 순서
세 개 수치 지정 -> 상 좌우 하 순서
네 개 수치 지정 -> 상 우 하 좌 순서 (시계방향)
box-sizing
- content-box : 기본값, 너비와 높이가 콘텐츠 영역만을 포함한다 -> 여백이 커지면 박스가 커진다
- border-box : 너비와 높이가 안쪽 여백과 테두리까지 포함한다 -> 여백이 커지면 콘텐츠 영역이 줄어든다
ex : box-sizing : border-box;
background : 콘텐츠의 배경을 정의한다
하위속성
- color : 배경 색
- image : 배경 이미지 -> url() 키워드를 통해 삽입 가능
- position : 배경 이미지의 초기 위치 -> left right top center bottom 두개 섞어서 사용 가능 'left bottom'
- size : 배경 이미지의 크기 -> 가로, 세로 순서로 지정 가능
cover -> 이미지가 찌그러지지 않는 선에서 최대한 채운다
contain -> 이미지가 찌그러지거나 잘리지 않는 선에서 최대한 채운다
- repeat : 배경 이미지의 반복 방법 -> 기본값이 사진이 배경보다 작을경우 반복하는것으로 되어있음 -> ': no-repeat'를 통해 하나만 삽입 가능
background는 하위속성 굳이 안적고 바로 사용 가능함 순서도 상관없음
ex : background: no-repeat url() red ~~
position
-relative 속성 : 일반적인 문서의 흐름에 따라 배치하지만 상하좌우 값에 따른 오프셋(띄우는 정도)를 적용해 위치를 조절한다 /문서의 흐름에 포함되며 다른 요소들이 오프셋이 적용되기전의 위치로 영향을 받음
-absolute 속성 : 상위요소 중 가장 가까운 포지션 요소를 기준으로 오프셋을 적용하여 위치를 조절 / 문서의 흐름에서 제외되어 다른 요소들이 영향받지 않음
-fixed 속성 : 문서 흐름에서 제외되고 위치가 고정됌(스크롤 내려도 그대로 있음)
-sticky 속성 : 일반적인 문서 흐름에 따라 배치하고, 스크롤되는 가장 가까운 상위 요소에 대해 오프셋을 적용하기(문서흐름대로 가다가 스크롤 이동할때 정해진 위치가 있으면 그곳으로 감)
flexbox : 요소의 진행방향을 가로로 바꿀 수 있음
display : flex;
flex-direction : flexbox의 진행방향 바꿀 수 있음
: row(기본값) = 행
: column = 열
: row-reverse = 오른쪽으로 데칼코마니
: column-reverse = 진행방향 뒤바뀐 열
-->
</html>선택자의 종류
전체 선택자, 태그 선택자, 클래스 선택자, 아이디 선택자, 그룹 선택자
선택자 겹치는 경우 우선순위
아이디 > 클래스 > 태그
인라인 요소 -> width height 조절 불가능
display를 통해 inline-block 요소로 변경하여 조절 가능함
박스모델의 구조
바깥쪽 여백(margin) > 경계선(border-width) > 안쪽 여백(padding) > 콘텐츠 영역(width, height)
하위속성 정의하기
- padding-left, padding-right, padding-top, padding-bottom
- margin도 같은 방법으로 정의
하지만 각각 정의하면 귀찮으니 한번에 정의하는것을 추천 !
ex : margin : 10px 20px 30px 40px;
- 두 개 수치 지정 -> 상하 좌우 순서
- 세 개 수치 지정 -> 상 좌우 하 순서
- 네 개 수치 지정 -> 상 우 하 좌 순서 (시계방향)
box-sizing
- content-box : 기본값, 너비와 높이가 콘텐츠 영역만을 포함한다 -> 여백이 커지면 박스가 커진다
- border-box : 너비와 높이가 안쪽 여백과 테두리까지 포함한다 -> 여백이 커지면 콘텐츠 영역이 줄어든다
ex : box-sizing : border-box;
background : 콘텐츠의 배경을 정의한다
하위속성
- color : 배경 색
- image : 배경 이미지 -> url() 키워드를 통해 삽입 가능
- position : 배경 이미지의 초기 위치 -> left right top center bottom 두개 섞어서 사용 가능 'left bottom'
- size : 배경 이미지의 크기 -> 가로, 세로 순서로 지정 가능
- cover -> 이미지가 찌그러지지 않는 선에서 최대한 채운다 ex : size: cover
- contain -> 이미지가 찌그러지거나 잘리지 않는 선에서 최대한 채운다
- repeat : 배경 이미지의 반복 방법 -> 기본값이 사진이 배경보다 작을경우 반복하는것으로 되어있음 -> ': no-repeat'를 통해 하나만 삽입 가능
background는 하위속성 굳이 따로 안적고 바로 사용 가능함 순서도 상관없음
ex : background: no-repeat url() red ~~
position
- relative 속성 : 일반적인 문서의 흐름에 따라 배치하지만 상하좌우 값에 따른 오프셋(띄우는 정도)를 적용해 위치를 조절한다 /문서의 흐름에 포함되며 다른 요소들이 오프셋이 적용되기전의 위치로 영향을 받음
- absolute 속성 : 상위요소 중 가장 가까운 포지션 요소를 기준으로 오프셋을 적용하여 위치를 조절 / 문서의 흐름에서 제외되어 다른 요소들이 영향받지 않음
- fixed 속성 : 문서 흐름에서 제외되고 위치가 고정됌(스크롤 내려도 그대로 있음)
- sticky 속성 : 일반적인 문서 흐름에 따라 배치하고, 스크롤되는 가장 가까운 상위 요소에 대해 오프셋을 적용하기(문서흐름대로 가다가 스크롤 이동할때 정해진 위치가 있으면 그곳으로 감)
flexbox : 요소의 진행방향을 바꿀 수 있음(인라인 블록 대체 가능)
- 사용 방법 : display : flex;
flex-direction : flexbox의 진행방향 바꿀 수 있음
: row(기본값) = 행
: column = 열
: row-reverse = 오른쪽으로 데칼코마니
: column-reverse = 진행방향 뒤바뀐 열
div - ul - li << 이런 구조라면 컨테이너 - 부모 - 자식
div - div - ul - li << 이런 구조라면 컨테이너 - 박스 - 부모 - 자식
flex 실무처럼 쓰기!
- div box를 하나 더 감싸줘서 최상위 부모에게 flex를 줄 것!
- 기존 div ul li 의 구조였다면 정렬하고 싶은 요소들을 한 뭉텅이에 묶고
그 부모요소(즉 컨테이너)에게 display flex를 주기
- justify-contents : x축 가운데 정렬
- align-items : y축 가운데 정렬
- 원하는대로 안움직인다? 싶으면 플렉스 걸어준 컨테이너 기점으로 높이 설정후 align-item center 사용
- 이것도 안되면 리스트나 유엘이나 높이설정에 방해가 있는요소 하이트 제거하기
특성 선택자
- 컨셉 : [class], [class="item"] -> 클래스가 존재하면 선택
- 값 확인
[class *="it"] -> 클래스 값에 it가 포함되는 요소
[class ^="it"] -> 클래스 값에 it로 시작되는 요소
[class $="it"] -> 클래스 값에 it로 끝나는 요소
결합 선택자
- 자손 결합자
div p -> div 요소 안에 위치하는 모든 p요소 선택하기
div > p -> div 요소 바로 아래에 위치하는 모든 p 요소를 선택하기- 형제 결합자
h1 ~ p -> h1 요소의 뒤에 오는 형제 중 모든 p 요소를 선택하기
h1 + p -> h1 요소의 바로 뒤에 오는 형제 p 요소를 선택하기
형제 요소란 ? -> 같은 부모를 가지고있는 요소
의사 클래스 : 요소가 특정한 상태가 되었을 때 요소를 선택하겠다는 의미
ex : [type="button"]:hover{}
hover : 마우스 포인터가 요소 위에 위치
active : 사용자가 요소를 활성화(마우스 클릭 등)
focus : 요소가 포커스를 받고 있다 ex:text input 창 클릭
disabled : 비활성 상태의 요소
nth-child() : 형제 사이에서의 순서에 따라 요소를 선택
의사요소
ex : 선택자 :: 의사요소 / li::first-letter
after : 요소의 뒤에 추가
before : 요소의 앞에 추가
first-line : 블록 레벨 요소의 첫 번째 줄
marker : 목록 기호의 스타일을 적용 ex : list의 점
placeholder : 입력 요소의 자리표시자 스타일을 적용(input 칸의 글자)
상속의 가능여부
- 상속이 되는 속성
color, font, text, cursor 등
- 상속이 되지않는 속성
background, display, border 등
공용 키워드(모든 css 속성에 사용이 가능함)
inherit : 상위 요소로부터 해당 속성의 값을 받아 사용
initial : 해당 속성의 기본값을 요소에 적용
unset : 상속 속성에 대해서는 inherit 처럼 상속되지 않는 속성에 대해서는 initial처럼 적용
z-index
- 요소가 겹치면 x,y 뿐만아닌 화면 앞 즉 z축으로 요소가 쌓이는데, 이때 쌓이는 순서를 결정할 수 있는 것이 z-index이다
- 기본값은 auto 이며 정수값으로 정의함
- 값이 클수록 전면에 표시된다
웹 개발 입문 3일차 CSS 기초 강의를 수강하며 정리한 내용들을 기록한다
이론 학습만으론 아직 직접 사용하기에 부족한 것 같아
내일부터는 JS 기초지식 공부와 함께 HTML+CSS를 복습하며 직접 웹사이트를 내 손으로
만들어보는 응용 실습 시간을 가지며 배운 지식들을 체화시키려고 한다
화이팅
