Ch 7. CSS 개요

🎯이번 챕터는

마크업과 스타일링 작업을 하다보면 쓰기는 하지만 어떤 개념인지 정확히 모르고 쓰던

선택자를 중점적으로 배웠다.

매우 쓸만한 내용이었다.

배울때마다 느끼는 거지만 꼼꼼한 기초가 바탕이 되어야 더 멀리 탄탄하고 깊게

나아갈 수 있는 것 같다.

개념이 잘 잡히니 암기도 잘 되는 것 같다.

---

⭕01. 기본 문법, 주석

• 📌강의 정리
• css의 기본문법부터 알아보자.
• div의 내용을 보기좋게 꾸며주는 것을 스타일작업이라고한다.
• div태그를 선언하고 폰트사이즈와 컬러, 텍스트 데코레이션을 바꿔줄 수 있다.
• css의 기본문법을 보면 맨앞에 div라고 써져있는 부분이 있다.
• 이렇게 적은 내용의 중괄호에 있는 부분이 꾸미는 내용부분이다.
• span이라고 적혀있는 부분을 선택자라고 한다.
• 그 이후 중괄호의 내용이 적용되는 내용이다.
• 선택자 {속성 : 값;}
• 선택자는 스타일(css)을 적용할 대상 (selector)
• 속성은 스타일의 종류(property)이다.
• 값은 스타일의 값(value)이다.
• 속성은 값이다. 세미콜론 잊지말기
• 속성 은(:) 값 이다(;)
• {}은 스타일 범위의 시작과 끝이다.
• div{color: red;} 이면 div라는 태그를 글자색의 속성을 빨강이라는 값으로 바꿔주는 것이다.
• 이떄 div는 태그선택자이다.
• div안의 특정한 글자들은 빨간색을 가지게 되는 css이다.
• margin: 20px;이면 요소 외부 여백 이 20px이다.
• 4~5개 20개이면 해석하기 난해해진다.
• 그래서 들여쓰기와 내어쓰기를 이용해서 보기 편하게 해준다.
• 줄바꿈을 통해서 명확하게 볼 수 있게 해준다.
• 줄바꿈 해나가는 형태로 해주어야 한다.
• 코드는 우리만 보는것이 아니기 때문에 남들에게도 잘 볼 수 있도록 예쁜 코드를 짜야한다.
• css도 주석을 작성 할 수 있다.
• css의 설명을 안적어주면 힘들기 때문에 메모즉 설명을 적어 놓으면 좋다.
  /*이면 주석인데 물론 ctrl / 로도 주석을 달 수 있다.

 

📌느낀점

기본적인 css의 문법에 대해서 배웠다.

선택자의 아주 살짝 기초였는데 선택자를 빨리 본격적으로

배웠으면 좋겠다.

---

⭕02. 선언 방식

📌강의 정리

• css의 선언방식에는 내장방식 링크방식 인라인 방식, import방식 이렇게 총 4개가 있다.
• 첫번째는 내장방식이다.
• style요소의 내용으로 스타일을 작성하는 방식이다.
• 이 내장방식은 css내용을 html의 head안에 써서 스타일을 작성한다.
• 이런 방식은 별도의 css 파일을 만들필요가 없다는 장점이있지만 파일이 많아지면
  복잡해진다는 단점이 있다.
• 특히 유지보수측에서 단점이 많다.
• 프로젝트를 번들하는 과정에서 개발하는 내용을 제품화할때 내장방식으로 심는 경우가 있는데
  이때는 별 문제가 없다.
• 인라인방식은 html의 전역속성중 style속성을 직접적으로 추가해서 직접 스타일을 작성하는 방식이다.
• 이것은 선택자라는 개념이 없는데 이미 요소안에 들어가 있기 때문에 요소를 찾는 개념이 필요없기 때문이다.
• 하지만 html우선순위를 알게되면 인라인 방식이 우선순위가 높기 때문에 인라인은 유지보수측에서 단점이 있고
• 따라서 별로 권장하지 않는다.
• 링크방식은 <link /> 로 외부 CSS문서를 가져와서 연결하는 방식이다.
• link요소의 rel속성과 href속성으로 정의와 경로를 해주어서 html에 적용하는 방식이다.
• @import 방식은 실제로 코딩을 해본적은 없지만 어렵게 생각하지 말자.
• link태그를 통해 css파일을 가져오는데 이때 css파일내에 @import url(”./box.css”)을 쓸 수 있는데
  이것은 이 파일 주위의 또다른 css파일을 가져와서 연결하는 방식이다.
• CSS의 import규칙으로 CSS문서 안에서 또다른 CSS문서를 가져와 연결하는 방식이다.
• 이런 방식을 직렬로 연결한다고 할 수 있다.
• import가 연결되기 전까지는 다른 css파일은 연결되지도 해석되지도 않는 경우가 있다.
  연결이 지연된다는 장점&단점이다.
• 링크방식은 병렬방식이다.
• 한번에 가져오는 방식이다. import는 직렬이다.
• head요소 내에 link태그를 만들어서 연결해준다.
• 이 link와 연결된 css에 100px로 만들어주면 실제로 div가 100px이 된다.
• 이후 box.css를 만들어서 컬러를 red로 바꾸어 주고 main.css에서 import로 box.css를 가져온다.
• 이제 다시 확인해보면 100px에 red가 적용되는것을 확인할 수 있다.
• main.css의 내용이 많아서 해석이 느려지는 경우 import를 써서 해석의 지연을 유도할 수 있다.
• 또한 link는 꼭 한개만이 아닌 여러개를 사용할 수 있다.
• 그래서 병렬 방식이다.

 

📌느낀점

import방식을 통해 css의 직렬과 병렬의 개념을 배웠다.

실제로 하는 것을 직접 보니 이해가 빠르게 되는 것 같다.

css연결하는 것의 문법을 까먹을 때가 종종있는데

속성과 값이라는 개념을 잘 이해하고 지금 배운 4가지 방식을 통해 html과 연결되는 과정을 잘 알아두고 있어야겠다.

---

⭕03. 선택자_기본

📌강의 정리

• css의 선택자는 크게 5가지가 있다.
• 기본,복합,가상클래스,가상요소,속성 이렇게 5가지이다.
• *애스터리스크는 기본 선택자로 전체선택자이다.
• *{color: red;}라고 한다면 모든 요소를 선택하는 것이다.
• ABC는 기본 선택자인데. 태그선택자로써
• 예를 들면 li{color: red;}이면 그 선택요소들이 선택되는것을 알 수 있다.
• 태그의 이름만 명시되어 있으면 태그 선택자이다.
• 우리가 원하는 요소를 좀 더 잘 집어내기 위해 클래스 선택자가 있다.
• .ABC이면 HTML class속성의 값이 ABC인 요소를 선택한다.
• li class=”orange”이면 .orange{color: red;}로 중복되며 사타일을 해줄 수 있다.
• #ABC는 아이디 선택자인데 HTML id속성의 값이 ABC인 요소를 선택한다.
• 클래스와 비슷하지만 중복이 되지 않는다.
• #orange{color:red;} 이다.
• 순서는 기본선택자 4개만 적용된다.

 

📌느낀점

앞서 배웠던 선택자 4개에 대해서 다시 배웠다.

나중에 헷갈릴 수도 있기 때문에 잘 알아두어야 한다.

---

⭕04. 선택자_복합

📌강의 정리

• css의 복합선택자에 대해 알아보자.
• 일치선택자는 기본선택자 4개중에 2개를 붙여서 쓰면 일치선택자이다.
• span.orange 이면 span은 태그 선택자이고 orange는 클래스 선택자이므로
  선택자 ABC와 XYZ를 동시에 만족하는 요소를 선택한다.
• span class=”orange”이어야 선택된다.
• ABCXYZ처럼 붙여써야 하는데 태그선택자는 기호가 없기 때문에
  태그선택자가 뒤로 가면 구분을 못하기 때문에 orangespan이 되어 오류가 뜬다.
• 그러므로 태그선택자는 맨 앞에 적고 뒤에 다른 것을 써야 한다.
• 다음은 자식 선택자이다. 선택자 ABC의 자식 요소 XYZ를 선택한다.
• ABC는 XYZ의 부모이어야 한다.
• ul > .orange이다. 이러면 ul태그 내의 클래스가 오렌지인 요소를 찾는 것이다.
• 뒤에서 부터 해석하면 클래스가 오렌지인 요소중 부모요소가 ul인 요소를 찾는다.
• 하위(후손)선택자이다. ABC XYZ는 선택자 ABC의 하위 요소 XYZ 선택. ‘띄어쓰기’가 선택자의 기호!
• div .orange이다. div라는 기호가 붙지않은 태그 선택자를 찾고
  그 요소중 하위요소가 클래스가 orange인 요소를 찾는다.
• 하위 요소는 자식을 포함하여 감싸고 있는 모든 요소를 찾는다.
• 하위이기 때문에 바로 감싸지지 않아도 선택이되며 하위 선택자가 많이 쓰인다.
• ABC + XYZ 인데 인접 형제 선택자 라고 한다.
• 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택하다.
• .orange + li 인데 먼저 클래스 orange인 요소 이후에 같은 형제 요소인 li가 선택된다.
• 또한 하나 를 선택하는 점을 잘 생각하고 있자.
• ABC ~ XYZ 일반 형제 선택자이다.
• 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택한다.
• .orange ~li 이면 오렌지라는 클래스를 가지고 있는 요소 이후에 모든 요소가 선택되는 개념이다.
• 보통은 일반보다 인접을 써서 하나만 찾는경우가 많다.

 

📌느낀점

기본선택자들은 꽤 익숙했는데 복합선택자들은

처음보는게 있었다.

비록 많이 쓰이지는 않는다고 하나 안쓰이는것은 아니니

잘 기억해두어야겠다.

---

⭕05. 선택자_가상 클래스 (1)

📌강의 정리

• 가상클래스선택자에 대해서 알아보자.
• 우선 vscode에 기본적인 내용을 만들어주자
• div에 class는 “box”이다.
• main.css를 보면 .box{}로 클래스가 box인 요소들은 100px이고 백그라운드 컬러가 orange이다.
• 이제 main.css에 .box:hover라는 새로운 가상클래스 선택자 hover를 만들어 보자 width: 300px로
• 이 마우스 커서를 오렌지 박스위에 두면 오렌지상자의 크기가 커진다.
• 동작을 제어할 수 있는 일부분의 선택자가 hover가상클래스선택자이다.
• 전환효과를 주어보자.
• .box에 transition: 1s;를 하면 좀 더 부드럽게 구현 가능하다.
• 또한 백그라운드컬러도 바꿔주면 마우스를 올렸을 때 배경색상도 달라진다.
• 가상클래스선택자의 대표가 hover선택자이다.
• ABC:hover는 가상 클래스 선택자이며 선택자 ABC요소에 마우스 커서가 올라가 있는 동안 선택된다.
• a:hover 이면 브라우저에서 링크주소에 마우스에 올리면 글자색이 빨간색이 된다.
• 프론트엔드 개발을 하며 많이 쓰는 가상클래스 선택자이다.
• ABC:active 는 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택된다.
• 마우스가 클릭을 유지하고 있는 동안 선택이 되어진다.
• 이런 경우 우리가 아까 만든 오렌지박스에 마우스를 두어도 변하지 않지만
  클릭을 유지하고 있으면 색깔이 바뀐다.
• ABC:focus 선택자 ABC요소가 포커스되면 선택된다.
• 입력을 받는 요소들이 포커스가 된다라고 해석된다.
• 포커스가 가능한 요소에 포커스가되면 선택되는것이 포커스 선택자이다.
• input: focus{} 이다.
• html에 input type=”text”/ 를 해주고
• css에서 input과 input: focus 선택자들을 꾸며보자.
• 여기서 이제 인풋창을 클릭하면 orange로 바뀐다.
• focus가 가능한 요소에서만 가능한데 셀렉트또한 가능하다.
• div요소를 포커스가 가능하게 하려면 tabindex속성을 넣어주어 -1값을 넣어주면
  div요소도 focus가능요소로 만들어줄 수 있다.

 

📌느낀점

hover와 active, 그리고 focus요소에 대해 알아보았다.

다 잘 모르는 요소들이었는데 이것들을 이용하여

다른 사이트들에서 했던 여러가지 꾸미는 것들을 할 수 있을 것 같아 기대가 된다.

---

⭕06. 선택자_가상 클래스 (2)

📌강의 정리

• 가상클래스 선택자 허버 액티브 포커스 같은경우는 자바스크립트에서 다루는 동작에 해당하는것을 다룰수 있다.
• CSS는 주로 동작을 다루지 않는다는 것을 알아두자.
• ABC:first-child 선택자 ABC가 형제요소중 첫째라면 선택한다.
• html요소중 div가 많은 글자를 포함하는데
• .fruits span:first-child 이면 클래스 푸릇중에 하위 요소가 span인 요소인데
  이때 first-child이므로 두개가 같은 딸기와 수박중 첫번째인 딸기만 선택된다.
• 이걸 뒤에서부터 해석하면 span:first-child가 붙어 있으므로 일치선택자이며
  둘을 동시에 만족해야한다.
• ABC:last-child 선택자 ABC가 형제 요소 중 막내라면 선택한다.
• .fruit h3:last-child 이면 일치선택자로 h3이며 막내인데 선조가 fruit클래스 속성을 가지고 있어야 한다.
• ABC:nth-child(n) 선택자 ABC가 형제 요소 중 (n)째라면 선택한다.
• .fruits *:nth-child(2) 이면 애스터리스크가 있으므로 전체를 선택하는데
  클래스가 과일인 형제 요소 어떤 요소이든 상관없이 선택하되 2번째이면 선택한다.
• 또한 이때 n은 2n같이 키워드를 줄 수 있다.
• 2n이면 숫자를 0부터 시작한다. 이를 제로베이스드 넘버링이라고 한다.
• .fruits *:nth-child(2n)이면 n이 뭐든 2를 곱하겠다는 뜻이다.
• 그러므로 2번째와 4번째가 선택된다.
• 이런 방식으로 2n+1을 하면 홀수번째가 선택되어진다.
• n+2를 해주면 n은 0부터 시작을 하므로 형제중 첫번째는 제외하고
  2번째부터 끝까지 선택되는 개념을 만들어 줄 수 있다.
• ABC:not(XYZ) 선택자 XYZ가 아닌 ABC요소 선택한다.
• .fruits *:not(span) 이면 모든걸 선택하는데 띄어쓰기이므로 하위요소를 본다.
  이때 span이면 선택하지 않는다.
• 부정 선택자라고 한다.

 

📌느낀점

배우면서 제일 생각이든것은 복합선택자에서 하위선택자가

은근 까먹기 쉬운 복합속성이라는 점이다.

아무래도 띄어쓰기 하나기 때문인것 같은데 잘 기억해두고 있어야겠다.
그외에는 알고리즘에서 잘 등장하는 2n의 활용법이 눈에 띄었다.

선택자들의 복합을 잘 사용할 줄 알아야겠다.

---

⭕07. 선택자_가상 요소

📌강의 정리

• 가상 요소 선택자는 크게 2가지가 있다.
• ABC::before 선택자 ABC요소의 내부 앞에 내용을 삽입한다.
• 가상의 요소를 만들어 주고 매우 자주 사용되는 선택자이므로 잘 기억해두어야 한다.
• .box::before{content: “앞!”;}이면 div요소에 class=”box”만 있고
  content!라는 내용밖에 없었지만 css를 통해 앞!이라는 내용이 추가되며
  이때 가상의 인라인 요소로 추가되어진다.
• ABC::after 선택자 ABC 요소의 내부 뒤에 내용을 삽입한다.
• .box::after 인데 기존의 내용 뒤에 가상의 내용을 인라인으로 추가해준다.
• 이 두가지 다 사용하려면 content라는 css속성은 필수적이로 꼭 써야한다.
• main.css를 할때 .box::before{content: “Before”}이면 기존 내용의 전에 들어가게 된다.
  반드시 content속성은 미리 공백으로라도 넣어줘야 한다.
• 브라우저의 개발자도구의 엘리먼트로 확인하면 ::before로 index.html에 들어가 있음을 볼 수 있다.
• 실제로 삽입해주는 내용임을 알 수 있다.
• 이제 .box::after{content:””; width: 30px; height:30px; ....}를 해주면 뒤의 내용은 적용이 안된다
  왜냐면 인라인요소로 들어가기 때문이다.
• 따라서 css파일내에서 display: block;를 해주면 블록요소로 바뀌어 적용할 수 있고
  이는 html파일을 좀 더 단순하게 해주는 요소가 된다.

 

📌느낀점

매우 중요하게 느껴지는 ::before, ::after를 배웠다.

아직 실제 프로젝트에서는 써본적이 없지만 분명 아주 유용하게 많이 쓰일것만 같은 느낌이다.

특히 display: block; 로 블록요소로 만드는 점과

content: “”;로 공백으로라도 속성을 주는 점은 잘 기억해두어야 한다.

---

⭕08. 선택자_속성

📌강의 정리

• [ABC]속성 ABC을 포함한 요소 선택
• [disabled]라는 속성을 가진 요소가 red로 변함
• [type]이라는 속성을 하면 type속성을 가진 모든 요소가 다 달라진다.
• 특별한 속성을 선택할때는 좋지만 평범한 걸 쓸때는 잘 쓰이기 힘들다.
• [ABC=”XYZ”] 속성 ABC을 포함하고 값이 XYZ인 요소를 선택한다.
• [TYPE=”password”]이면 type속성을 가지고 있는 요소는 여러개가 있지만
  그 값이 password인 요소는 많지 않기에 쓰일 수 있다.
• input password이면 비밀번호가 안보이게 할 수 있다.
• 여기서 다시 떠올리면 data라는 전역속성을 이용해 나중에 JS와 연동해서 사용할 수 있는 속성도 있다.
• 이제 [type]{백그라운드컬러 오렌지}이면 type인 모든 요소가 오렌지가 되고 type=”password”이면 그런 값을 가진 요소만 변한다.
• [data-fruit-name]를 해도 그런 속성만 바꿀 수 있는 유용한 선택자이다.

 

📌느낀점

개인적인 생각으로 매우 잘 쓰일 수 있을 것 같은 선택자였다.

그냥 단순히 속성이면 범위가 너무 넓지만 속성 뒤에 값을 포함하는 선택자이면

특정 요소를 선출할때 매우 유용할 것 같다.

---

⭕09. 스타일 상속

📌강의 정리

• .animal 이면 animal이라는 클래스를 가지고 있는 요소를 선택하는 데
• 이때 html파일에서 div class=”animal”으로 묶어놓은 자식소와 기타 하위요소들까지 영향을 미치는데
• 이때의 개념을 스타일 상속이라고 한다.
• 상속이 스타일의 적용이다.
• 이런것을 css의 상속의 개념이다.
• fontsize글자두께, 글자크기,줄높이,폰트, 글자색상,정렬까지
  모두 글자/문자 관련 속성들이라는 것을 알 수 있다.
• 상속되는 CSS속성들은 글자 문자 관련속성이지만 모든 글자문자속성이 상속되는것은 아니다.
• 강제 상속이라는 개념이 있다.
• 이것은 원래는 상속이 되지 않는 CSS속성도 상속이 되게끔 할 수 있는 개념이다.
• HTML에서 link를 통해 main.css를 연결하고 body에서 parent클래스 하나 child클래스 하나를 설정해둔다.
• css파일에서 parent와 child요소의 백그라운드를 잘 바꿔주고 확인해둔다.
• 코딩할때 부모요소만 400만 하고 자식은 200px로 하는 누락이 생길 수 있다.
• 복잡한 코딩중에는 부모와 자식을 동일하게 해야하지만 복잡해지면 누락을 발견하기 쉽지않다.
• 이때 child의 height: inherit;을 하면 부모요소의 높이값 200px를 상속받아 사용할 수 있다.
• position: fixed;를 해주고 top: 100, right: 10을 해주면 viewfort기준으로 배치해줄 수 있는데
  이때 백그라운드를 상속으로 해주면 부모 요소를 그래로 물려받아 사용할 수 있다.
• 기본적으로 상속되는 속성들은 글자들인데 상속되지 않는 요소들은
  inherit을 통해 강제로 상속할 수 있다는 것이 강제 상속의 개념이다.

 

📌느낀점

강의에서 복잡한 코딩이라는 상황을 알려주니 그 개념의 필요성과 사용도가 좀 더 명확해졌다.

강제상속은 부모속성으로부터 링크되는 연결고리같은것 있는 개념으로 프로젝트를 진행할때 매우 유용하게 쓰일 수 있을 것 같다.

---

⭕10. 선택자 우선순위

📌강의 정리

• 선택하기 위해서 여러가지 개념들을 배웠는데 이때의 선택에는 우선순위가 있다. 중요하다.
• 우선순위란, 같은 요소가 여러 선언의 대상이 된 경우,
  어떤 선언의 CSS속성을 우선 적용할지 결정하는 방법이다.

1. 점수가 높은 선언이 우선한다.
2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선한다.

• html에서 div요소에 속성은 id와 class,style 이렇게 3개가 있는데 과연 글자색은 무엇일까?
• css파일에서는 선택자 # id으로는 yellow이고 . class로는 green이다.
  그리고 아까 html에서는 style에 orange가 있었다.
• 그리고 div는 태그선택자로 두개 가 있는데 하나는 레드로 important 이고 하나는 그냥 블루이다.
• *는 전체선택자인데 다크블루이고 body태그는 보라색이다.
• 이렇게 css파일의 모든 속성들이 컬러를 각각 다 주장하고 있는데
  색상은 하나만 적용되므로 어떤게 적용되어야 할까?
• 우선 html내부의 인라인 선언 방식의 style방식은 1000점을 가져간다.
• div 태그 선택자는 1점이지만 그 값에 !important는 점수가 무한대이다.
• ID선택자 같은경우는 100점 class선택자는 10점
• 전체선택자는 0점 body태그 선택자는 상속되면서 들어가기 때문에 점수를 별도로 계산하지 않는다.
• 그러므로 red가 점수가 제일 높으므로 빨간색글자가 나오게 된다.
• 점수계산을 명시도 important를 중요도 라 하고 이런 것들을 계산하는것은 선언 순서라고 한다.
• 이것들은 중요하지 않고 점수 계산법을 익히는 것이 중요하다.
• .list li.item이면 띄어쓰기가 있으므로 하위 선택자인데
• 클래스 두개 태그하나 해서 10 10 1로 21점이다.
• .list li:hover 이면 허버선택자도 클래스로 취급되어 10101해서 21점이다.
• .box::before 이면 클래스 하나 요소하나 인데 요소는 태그와 같으므로 10 1 이므로 11점이다.
• #submit span이면 아이디 선택자 하나 태그 선택자하나이므로 100 1로 101점 이다.
• 태그 클래스 태그 클래스로 22점 , 태그 하나는 1점
• 가상 클래스선택자에서 부정선택자는 빼므로
• :not(.box)일때 .box만 해석하므로 10점이다.
• vscode에서 link로 css파일을 연결하고 div로 hello를 출력하게 한다.
• 태그 선택자로 폰트사이즈를 70포인트
• 클래스선택자로 레드로 바꿔주고
• 아이디 선택자로 다시 레드로 바꿔주면 여전히 레드이다.
• 선언순서로는 선택자 적용이 변하지는 않는다.
• id선택자는 별로 많이 선택되지는 않는다.
• .hello 의 동일한 선택자 2개가 있을때는 더 나중에 작성된,해석되는 코드가 적용된다.
• 일치 선택자를 이용해서 div.hello를 해주면 일치선택자로 점수가 11점이되면
  뒤에 클래스선택자가 있어도 앞서 있는게 적용된다.
• 여기서 html에서 style로 인라인으로 직접 작성하면 1000이므로 바로 적용이된다.
• 이런 인라인 방식을 통한 명시는 쓸데없이 점수가 높으므로 수정이 힘들어 잘 쓰지 않는것이 좋다.
• css에서만 수정하는 것이 좋다.
• 또한 !important도 많이 쓰지 않는 것을 추천한다.
• 극히 일부분에만 사용하는것이 좋다.
• *를 통한 전체선택자 태그,클래스,아이디의 순서는 우선순위 점수가 늘어나는 형식이다. 기억해두면 좋다.

 

📌느낀점

처음에는 이게 왜 중요하지 싶었는데 다 듣고나니 매우 중요하다는 것을 깨달았다.

자칫 잘못하면 코드가 꼬여 돌이키기 힘들어지겠구나 싶었다.

항상 코드를 짤때 순서에 잘맞게 정돈해서 짜는 버릇을 들여야겠다.