CSS

/* ******* Selector ******* */
/* 1. 태그 선택자 : 태그 이름을 그대로 사용한다 */

p {
  _background: yellow;
}

/* 2. 아이디, 클래스 선택자 */
/* - 아이디 선택자는 #으로, 클래스 선택자는 .으로 지정한다 */
/* - 클래스는 반복 선택을 지정하고, 아이디는 고유 선택을 지정한다 : 관례 */
/* - 클래스와 아이디 모두 프로그래밍 상 반복 선택이 가능하지만 아이디는 반복해서 사용하지 않는다 */

#css {
  _color: red;
}

.js {
  _color: blue;
}

/* 3. 전체 선택자 */
/* - 전체 선택자는 * 이며, html, body는 태그 선택자다 */
* {
  _background: lightgreen;
  _border: 2px solid;
}

/* 4. 자식 선택자 : 특정 요소의 하위 자식을 선택하며, 직계자식과 후손으로 나뉜다 */
/* - 직계자직 : > 기호를 사용한다 */

h2 > span {
  _color: yellow;
}

h2 > p {
  color: red;
}

/* 5. 후손 선택자 */
/* - 후손 : 공백을 사용한다 */
/* - 후손은 자식을 포함한다. */

h2 p {
  color: red;
}

/* 6. 그룹 선택자 : 콤마로 표시하고 표시된 전체가 같은 속성이 적용된다 */
/* span, */
strong,
em {
  display: block;
  font-weight: normal;
  font-style: normal;
}

/* 7. 형제 선택자 : 이후 모든 요소(~), 다음 요소(+) */
.list4 + li {
  _background: red;
}

.list6 ~ li {
  _background: yellow;
}

/* 8. 가상 선택자 : :nth-child(n), :first-child, :last-child */
ul.a li:first-child {
  _background: red;
}

ul.a li:last-child {
  _background: red;
}

/* 콜론 앞쪽에 있는 태그가 누군가의 자식으로 몇 번째 있는지를 파악한다. */
ul.b li:nth-child(2) {
  _background: green;
}

/* even: 짝수, odd: 홀수 */
ul.b li:nth-child(odd) {
  _background: #ececec;
}

/* 9. 의제(psudo) 태그 선택자(?) */
h2 span::before {
  content: '['; /* content 속성은 의제 태그 작성 시 필수 */
}

h2 span::after {
  content: ']';
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 5000px;
}

header {
  display: flex;
  justify-content: space-between;
}

header .logo {
  position: relative;
}

header .logo a {
  position: relative;

  width: 65px;
  display: block;
  padding: 10px 0;
}

header .logo a b {
  text-indent: -999px;
  display: inline-block;
  position: absolute;
}

header .logo img {
  width: 100%;
}

.nav {
  /* width: 100%; */
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
  list-style: none;

  display: flex;
  gap: 40px;
  padding: 20px 25px;
}

.nav a {
  text-decoration: none;
  color: #555;
  position: relative;
}

/* nav의 자식인 li 중에서 active 클래스를 가진 요소의 자식 a 의제 태그에만 밑줄 */
.nav li a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  background: #555;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.4s;
}

.nav li:hover a::after,
.nav li.active a::after {
  width: 100%;
}

/* 10. 속성 선택자: 주로 input 태그에 작성 */
input[type='text'] {
  background: #ddd;
  padding: 5px 10px;
}

/* 1. font-family : 글꼴 */
/* - 콤마를 기준으로 글꼴을 검색하고, 모두 없으면 글자 모양 sans-serif(곧은 글씨), serif(장식체) 글꼴을 찾아 적용한다 */
/* - 주로 웹폰트(google font)를 사용한다 */
/* - 글자체는 콤마를 기준으로 앞에서부터 존재하는 글자체를 선택한다 */
/* - serif(장식체), sans-serif(비장식제)를 뜻하며, 콤마 앞의 글자체가 없을때 최종적으로 장식체 또는 비장식체 중 아무 글자체나 선택하여 적용하라는 의미 */

/* @import url('<https://fonts.googleapis.com/css2?family=Playwrite+CL:wght@100..400&display=swap>'); */

@import url(<https://fonts.googleapis.com/css?family=Nanum+Gothic:regular,700,800>);

@import url(<https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,200,300,regular,500,600,700,800,900>);

p {
  _font-size: 25px;
  _font-family: '체체', '아리아', sans-serif;
  _font-family: 'Playwrite CL', cursive;
  _font-family: 'Nanum gothic', sans-serif;
  _font-weight: 700;
}

h3 {
  font-family: 'Noto sans KR', sans-serif;
}

/* 2. font-weight : 글씨 두께 */
/* - thin과 normal은 같다. 따라서 thin은 사용하지 않는다 */
/* - bold와 bolder는 같다. 따라서 bolder는 사용하지 않는다 */
/* - 웹폰트의 경우 글씨 두께가 수치로 세분화 되어 있어 편하다 */
/* bold, normal만 사용할 수 있는 기본 값 */

p {
  font-weight: thin;
}

strong {
  font-weight: normal;
}

/* 3. font-style : 글씨의 기울임 */
/* - italic과 oblique는 같다. 따라서 oblique는 사용하지 않는다 */
/* - italic, normal만 사용할 수 있는 기본 값 */

p {
  _font-style: italic;
}

em {
  font-style: normal;
}

b {
  font-style: italic;
}

/* 4. color: 글자색  */
/* - 속성 앞에 font, text와 같은 이니셜이 붙지 않는 것에 주의 */

em {
  color: blueviolet;
}

/* 5. text-decoration : 글자 선긋기 */
/* - underline: 밑줄, overline:윗줄, line-through:취소선, none:선 없애기 */

h3 {
  text-decoration: underline;
  text-decoration: overline;
  text-decoration: line-through;
  text-decoration: none;
}

a {
  text-decoration: none;
  color: #222;
}

/* 6. text-align: 글자 정렬 */
/* - left(default), right, center, justify(양쪽 정렬) */
/* - 글자 좌우로 움직일 공간이 확보 되어야 적용 가능 */

/* 7. letter-spacing, word-spacing : 단어 및 글자 간격 */
/* - 주로 제목이나 슬로건, 텍스트 로고 디자인 시 사용된다 */

.align {
  background: yellow;
  text-align: justify;
  _word-spacing: 0.5rem;
  line-height: 1.6em;
  font-size: 30px;
}

/* 8. line-height : 줄간 */
/* - 줄간은 상대값(em)으로 작성해야 한다. 고정값으로 작성하면 글자 크기에 비례하지 않는다 */
/* - 디폴트 단위는 따라서 em이다 */
/* - 상대 기준 대비 단위 */

/* text-indent: 들여쓰기 */

.align {
  text-indent: 1.6em;
  font-size: 30px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /*padding을 넣었을 때 안쪽으로 적용되기 때문에 레이아웃을 유지할 때 사용*/
}

box-sizing: border-box;

padding을 넣었을 때 안쪽으로 적용되기 때문에 레이아웃을 유지할 때 사용

* {
  margin: 0;
  padding: 0;
}

/* 1. margin: 요소와 요소 사이의 간격 */
.margin {
  width: 100%;
  height: 100px;
  background: yellow;
  margin: 10px; /*값이 하나일 경우 4개면 동일하게 지정*/
}

.margin {
  margin: 20px 30px;
} /* 두개의 수치일 경우 첫번재는 위아래, 두번째는 좌우 */
.margin {
  margin: 20px 30px 40px;
} /* 세개의 수치일 경우 첫번재는 위, 두번째는 좌우 세번째는 아래 */
.margin {
  margin: 20px 30px 40px 50px;
} /* 네개의 수치일 경우 위에서부터 시계방향 */

/* 2. padding: 컨텐츠와 경계선 사이의 간격 */
/* - 축약형 표현은 마진과 동일 */
/* - box-sizing: 디폴트는 content-box - 패딩 크기가 외부로 커진다 */
/* 반면 border-box는 패딩 크기가 내부로 들어가서 전체 크기에 영향을 주지 않는다. */

.padding {
  width: 500px;
  height: 200px;
  background: lightcyan;
  box-sizing: border-box;
  padding: 20px;
}

/* 3. border: 패딩과 마진 사이의 선 - 박스의 경계선 */
/* - border-width : top, right, bottom, left */
/* - border-style : top, right, bottom, left */
/* - border-color : top, right, bottom, left : 생략이 가능(검정색) */
/* border: 축약형 사용 가능 width style color -  순서는 상관없으나, style을 누락하면 안된다 다른 값은 기본값으로 잡히지만 style은 없으면 아예 표시되지 않음*/

.border {
  width: 300px;
  height: 200px;
  /* 선두께 */
  border-width: 2px;
  /* 선종류 */
  border-style: solid;
  /* 선색 */
  border-top-color: red;
  border-right-color: yellow;
  border-left-color: green;
  border-bottom-color: blue;
}

p {
  width: 0px;
  background: #fff;
  border-top-color: red;
  border-right-color: #fff;
  border-left-color: #fff;
  border-bottom-color: #fff;

  border-width: 50px;
  border-style: solid;
}

body {
  height: 3000px;
}

/* 4. border-radius: 둥근 모서리 */
/*원을 만들때는 50% 또는 100% 적용*/
.radius {
  width: 200px;
  height: 200px;
  background: yellow;
  border: 5px solid red;
  /* border-radius: 20px; 원을 만들때는 50% 또는 100% 적용 */
  /* border-top-left-radius: 20px; */
  /* border-top-right-radius: 20px; */
  _border-radius: 10px 30px; /*왼쪽위, 오른쪽 아래 / 오른쪽위, 왼쪽 아래*/
  _border-radius: 10px 50px 30px; /*왼쪽위/ 오른쪽위, 왼쪽 아래/ 오른쪽 아래*/
  border-radius: 10px 20px 30px 40px; /*왼쪽위부터 시계방향*/
}

/* 5. background : 박스의 배경을 지정하며, 색 또는 이미지를 사용할 수 있다 */
/* - background-color : 색상만 지정 이미지 사용 불가*/
/* - background-image : 이미지 경로 지정 */
/* - background-repeat : 이미지 사용 시 반복 여부 지정 */
/* - background-position : 이미지 사용 시 사진 위치 지정 */
/* - background-size : 사진과 박스의 비율이 다를 경우 사진을 어떻게 채울지 지정 */

.bg {
  width: 500px;
  _height: 300px;
  _background: lightblue;
  border: 1px solid;
  _background-image: url(bg.jpg);
  _background-repeat: no-repeat;
  _background-position: center center; /*좌우, 위아래*/
  _background-size: cover; /*contain: 박스에 맞게 - 비율 안맞는 공간은 남긴다, cover: 박스를 다 채우게 cover는 남는 부분은 넘친다*/
  background: url(bg.jpg) no-repeat center top / cover;
  padding: 100px 0;
}

/* - 태그 이미지는 부모의 공간에 넘친다. background-image는 넘치는 부분이 가려진다. */
/* - 태그 이미지는 자식 요소의 높이를 자동으로 지정하지만, background-image는 자식 요소가 아니기 때문에 높이를 잡지 않는다. */

/* .bg > img {
  width: 100%;
  display: block;
} */

Position

/* position 속성은 중복되는 또는 나열되는 박스의 위치가 어떻게 정해지는지를 정의한다. */
/* 1. static 
- 모든 박스 요소가 만들어지면 기본적으로 가지는 디폴트 position 속성이다.
- 만들어진 위치가 정 위치이고 left, top과 같은 위치이동 속성 적용이 안된다.
2. relative
- 만들어진 위치가 정위치이나 left, top 등을 사용해서 위치이동을 할 수 있다.
- 위치 이동시 기준점(왼쪽 위 꼭지점)은 처음 만들어진 위치다.
3. absolute
- 독립적으로는 거의 사용하지 않고 어떤 요소의 자식으로 있을때 주로 사용된다.
- 특징은 static이 아닌 부모를 기준으로 그 부모 내부를 기준으로 위치 이동이 가능하다.(단 마이너스 값을 적용할 경우 부모의 반경을 넘을 수는 있다.)
4. fixed
- 만들어지는 위치는 static과 동일하지만 위치 이동 시 기준점은 부모를 무시하고 브라우저를 기준으로 한다. */

body {
  height: 3000px;
}

.a,
.b,
.d {
  width: 200px;
  height: 200px;
  background: yellow;
  position: relative;
}

.b {
  background: red;
  position: absolute;
  margin: auto;
  bottom: 50px;
}

/*relative 요소의 위치 이동은 최소화 한다.  */

.c {
  width: 100px;
  height: 100px;
  background: green;
  position: absolute;
  _right: 100px;
  left: 50%; 부모 크기에서 50% 만큼 왼쪽으로 이동하고 .c의 크기를 뺀만큼 오른쪽에 공간이 남음
  _margin-left: -50px;
  _transform: translate(-50%);
}
.d {
  background: blue;
  position: fixed;
  _top: 10px;
  right: 50px;
  bottom: 50px;
}

객체 내에 존재하는 함수를 메서드라고 한다. (괄호)는 실행할 수 있는 파라미터가 있다.