2주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트

CSS 기본문법

선택자: 스타일(CSS)을 적용할 대상(Selector)

속성: 스타일(CSS)의 종류 (Property)

값: 스타일(CSS)의 값(Value)

{: 스타일 범위의 시작

}: 스타일 범위의 끝

---

CSS 선언방식

내장방식

<style>
  div {
    color: red;
  }
</style>

<style></style>의 내용(Contents)으로 스타일을 작성하는 방식. 

별도의 CSS파일을 따로 만들지 않아도 HTML파일내에서 바로 CSS내용을 적용할 수 있지만 CSS내용이 많아지면 HTML파일내에서 다 처리하기가 길어짐

프론트엔드개발할때는 HTML, CSS, JS파일을 구별해서 관리하는 것이 장점이 많음 그래서 내장방식은 단점이 많음. 권장하지 않는 방식(내장방식은 직접 코드를 작성하는 것이 좋은 방법이 아니기 때문)

프로젝트를 번들(한데 묶어서 서버에서 올리는 방식)할때 번들하는 과정에서 개발하는 내용을 제품화 시킬 때 컴퓨터가 자동으로 파일로 분류한 내용들을 내장방식으로 심는 경우들이 있음(이런경우는 내장방식이 문제가 안됨. 어쩌피 파일로 관리하고  그것을 제품화해서 내어줄때 중간에 자동으로 내장시키는 것이기 때문에 직접적으로 관리할 필요가 없기 때문)

 

링크방식

<link rel="stylesheet" href="./css/main.css" />

<link />로 외부 CSS문서를 가져와서 연결하는 방식

병렬방식으로 연결. 순서대로 가져오는 것이 아니라 한번에 가져와서 연결됨

 

인라인방식

<div style="color: red"></div>

요소의 style 속성에 직접 스타일을 작성하는 방식(선택자 없음)

유지보수하는데 악영향을 미치기 때문에 직접적으로 인라인방식으로 선언하는 방식은 권장하지 않음

 

@import방식

@import url("./box.css");

CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS문서를 가져와 연결하는 방식

직렬방식으로 연결. 직렬방식으로 연결되어 있기 때문에 import라는 코드가 해석되기 전까지는 import로 연결한 CSS는 HTML에 연결되지 못하고 적용이 될 수 없음 그래서 연결을 지연시키는 목적으로 사용되기도 하고 단점으로는 실제로 연결이 지연됨

---

CSS 선택자

[기본]

* {
  color: red;
}

*: 전체 선택자(Universal Selector). 모든 요소를 선택

li {
  color: red;
}

ABC: 태그선택자(Type Selector). 태그 이름이 ABC인 요소 선택

<span class="orange">오렌지</span>
<div class="orange">오렌지</div>

.orange {
  color: red;
}

.ABC: 클래스선택자(Class Selector). HTML class 속성의 값이 ABC인 요소 선택

<div id="orange">오렌지</div>

#orange {
  color: red;
}

#ABC: 아이디선택자(ID Selector). HTML id 속성의 값이 ABC인 요소 선택

---

[복합]

<span class="orange">오렌지</span>

span.orange {
  color: red;
}

ABCXYZ: 일치선택자(Basic Combinator). 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택. 태그선택자를 쓰길 원한다면 앞에 사용

<ul>
  <li class="orange">오렌지</li>
</ul>

ul > .orange {
  color: red;
}

ABC>XYZ: 자식선택자(Child Selector). 선택자 ABC의 자식 요소 XYZ 선택

<div>
  <ul>
    <li class="orange">오렌지</li> <!--선택-->
  </ul>
  <span class="orange">오렌지</span> <!--선택-->
</div>

div .orange {
  color: red;
}

ABC XYZ: 하위(후손)선택자(Descendant Combinator). 선택자 ABC의 하위 요소 XYZ 선택. '띄어쓰기'가 선택자의 기호!

<ul>
  <li>딸기</li>
  <li class="orange">오렌지</li>
  <li>수박</li> <!--선택-->
  <li>사과</li>
</ul>

.orange + li {
  color: red;
}

ABC+XYZ: 인접형제선택자(Adjacent Sibling Combinator). 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택

<ul>
  <li>딸기</li>
  <li class="orange">오렌지</li>
  <li>수박</li> <!--선택-->
  <li>사과</li> <!--선택-->
</ul>

.orange ~ li {
  color: red;
}

ABC~XYZ: 일반형제선택자(Adjacent Sibling Combinator). 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택

---

[가상클래스] 

● 동작을 나타내는 가상클래스 선택자

.box:hover {
  width: 300px;
}

ABC:hover : HOVER. 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택

.box:active {
  width: 300px;
}

ABC:active : ACTIVE. 선택자 ABC 요소에 마우스 클릭하고 있는 동안 선택

<div class="box" tabindex="-1"></div>
<input type="text">

input:focus{
  background-color: darkgrey;
}

ABC:focus : FOCUS. 선택자 ABC 요소에 포커스 되면 선택

-tabindex 속성을 통해 Focus가 될 수 있는 요소를 만들 수 있음. 이름에서도 알 수 있듯, Tab 키를 사용해 Focus 할 수 있는 순서를 지정하는 속성. 속성(값)로 -1이 아닌 다른 값을 넣는 것은 논리적 흐름을 방해하기 때문에 권장X

 

ABC:focus : FOCUS. 선택자 ABC 요소에 포커스 되면 선택

 

● 특정한 요소를 선택하는 가상클래스 선택자

<div class="fruits"> 
  <span>딸기</span> <!--선택-->
  <span>수박</span>
  <div>오렌지</div>
  <p>망고</p>
</div>

.fruits span:first-child {
  color: red;
}

ABC:first-child : FIRST CHILD. 선택자 ABC가 형제 요소 중 첫째라면 선택

만약 위에 예시에서 span:first가 아니고 p:first라면 p는 div에 첫째가 아니므로 CSS가 적용되지 않음

<div class="fruits">
  <span>딸기</span>
  <span>수박</span>
  <div>오렌지</div>
  <p>망고</p> <!--선택-->
</div>

.fruits p:last-child {
  color: red;
}

ABC:last-child : LAST CHILD. 선택자 ABC가 형제 요소 중 막내라면 선택

<div class="fruits">
  <span>딸기</span>
  <span>수박</span> <!--선택-->
  <div>오렌지</div>
  <p>망고</p>
</div>

.fruits *:nth-child(2) {
  color: red;
}

ABC:nth-child(n) : NTH CHILD. 선택자 ABC가 형제 요소 중(n)째라면 선택

n은 0부터 시작(Zero-Based Numbering).

n에 2n을 넣어 짝수마다 2n+1을 넣어 홀수마다 n+2를 넣어 2번부터 막내까지 CSS를 적용할 수도 있음

<div class="fruits">
  <span>딸기</span>
  <span>수박</span>
  <div>오렌지</div> <!--선택-->
  <p>망고</p> <!--선택-->
</div>

.fruits *:not(span) {
  color: red;
}

ABC:not(XYZ) : NOT. 선택자 XYZ가 아닌 ABC 요소 선택

 

---

[가상 요소]

content 속성을 사용

<div class="front">Content!</div> <!-- 앞!Content -->

.front::before {
  content: "앞!";
}

ABC::before : 인라인(글자) 요소. BEFORE. 선택자 ABC 요소의 내부 앞 내용(Content)을 삽입. content에 속성에 값을 명시. 글자를 명시하지 않더라도 모양을 부여할 수 있음

<div class="front">Content!</div> <!-- Content뒤! -->

.front::after {
  content: "뒤!";
}

ABC::after : 인라인(글자) 요소. AFTER. 선택자 ABC 요소의 내부 뒤 내용(Content)을 삽입. content에 속성에 값을 명시. 글자를 명시하지 않더라도 모양을 부여할 수 있음

---

[속성]

<input type="text" disabled>

[disabled] {
  color: red;
}

[ABC]: ATTR. 속성 ABC을 포함한 요소 선택. 특이한 속성을 가지고 있는 요소를 찾는데에는 적합하지만 일반적으로 가지고 있는 속성을 기준으로 어떤 요소를 특정해서 찾는데는 유용하지 않음

<input type="password" />

[type="password"] {
  color: red;
}

[ABC="XYZ"]: ATTR=VALUE. 속성 ABC을 포함하고 값이 XYZ인 요소 선택. ""를 생략할 수 있지만 붙이는 것을 권장.

 

---

스타일 상속

스타일(CSS)이 해당하는 요소의 자식요소 더 나아가 기타하위 요소들까지 영향을 미침

부모요소, 조상요소로부터 적용된 어떠한 스타일들이 요소의 자식이나 하위요소들로 상속되어져서 적용되는 것

 

상속되는 CSS 속성: 글자/문자 속성들(모든 글자/문자 속성은 아님)

font-style 글자 기울기, font-weight 글자 두께, font-size 글자 크기, line-height 줄 높이, font-family 폰트(서체), color 글자 색상, text-align 정렬 ..... 등등

 

강제 상속: 실질적으로 상속이 되지 않는 CSS내용도 강제적으로 상속 시킬 수 있는 방법

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  width: 300px;
  height: 400px;
  background-color: skyblue;
}
.child {
  width: 100px;
  height: inherit;
  background-color: palegreen;
}

inherit을 이용하여 상속을 함

---

선택자 우선순위

선택자는 HTML에 있는 특정한 요소들을 선택하기 위해서 여러가지 규칙에 의해서 작성할 수 있는 개념

우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법

1. 인라인선언을 우선함
2. ID - Class - 태그 - 전체 선택자 순
3. 우선순위가 같으면 가장 마지막에 해석된 선언이 우선함
4. 단, CSS에 !important가 있다면 가장 높은 우선순위로 올림

점수로 계산한다면

1. 인라인 선언 - 1000
2. ID선택자 - 100, Class선택자-10, 태그선택자-1, 전체선택자 - 0, 속성 - X
3. 점수가 같다면 가장 마지막에 해석된 선언이 우선
4. !important가 있다면 99999999999999

.list li.item {   /*클래스선택자2개 태그선택자1 총 21점*/
  color: red;
}
.list li:hover {   /*클래스선택자2개 태그선택자1 총 21점*/
  color: red;	   /*hover은 가상클래스선택자인데 가상떼고 클래스선택자로 보는 것*/	
}
.box::before {     /*클래스선택자1개 태그선택자1 총 11점*/
  color: red;	   /*:: 가상요소 선택자는 태그와 마찬가지로 1점, 요소≒태그 */
}
:not(.box)	   /*클래스선택자1개 부정선택자1개 총 10점 */ 
  color: red;	   /*not은 부정선택자로써 box를 부정함으로 not은 가상클래스 선택자이기는 하지만 점수계산X */
}