CSS Achievement Goals
-
CSS의 사용목적을 이해할 수 있다.
-> O
html만 가지고선 디자인이나 레이아웃을 설정하는데 한계가 있기 때문에 CSS를 사용한다
CSS는 Cascading Style Sheets의 약자이다.
선택자를 사용할때 cascading을 생각하면서 해야된다!
-
프론트엔드 개발자의 기초소양에 대해 이해할 수 있다.
-> O
프론트엔드 개발자라고 css를 모르면 안된다 프론트엔드의 기초중에 기초!!
백엔드 개발자 역시 꼭 알아야 한다.
-
CSS의 기본 문법과 구조를 이해할 수 있다.
-> O
기본 문법은 선택자 {} 이며 id는 #id {} 클래스는 .class{}로 나타내고
id는 중복x 1반 1번 학생 이라고 생각하면 되고 class는 중복o 1반 이라고 생각하면된다
그리고 만약<a class="a b" ></a>일 경우 css파일에서 .a 와 .b중 뒤에 있는 선택자가 우선이 된다.(중복값이 있으면 우선순위는 나중에 선언한 선택자!)
-
CSS를 HTML에 적용하는 방법에 대해서 이해할 수 있다.
-> O
<head>태그 안에<link rel='stylesheet' href='css이름.css'>처럼 외부에서 열거나
<style> body{wirdth:300px;} </style>처럼 내부에 직접 적용하거나
<a style='color: red;'></a>처럼 인라인 방식으로 적용할 수 있다
-
직접 HTML 안에 CSS를 정의하는 것을 권장하지 않는 이유를 이해할 수 있다.
-> O
관심사 분리 때문!
관심사 분리를 이용하면 프로그램의 설계, 디플로이, 이용의 일부 관점에 더 높은 정도의 자유가 생긴다
-
id 및 class와 관련된 selector 규칙을 이해할 수 있다.
-> O
위에서 설명했다!
-
CSS를 이용해 텍스트를 꾸밀 수 있다
-> O
텍스트를 가로로 정렬할땐 text-align, 굵기는 font-weight, 밑줄이나 가로줄은 text-decoration, 자간은 letter-spacing , 행간은 line-height, 폰트사이즈는 font-size, 글꼴은 font-family, 글 색은 color !
-
CSS에서 쓰이는 단위의 두가지 구분을 이해할 수 있다.
-> O
절대단위와 상대단위가 있다! 반응형 디자인을 사용하기 위해선 상대단위를 사용하는 것이 좋다 -
각 단위가 적합한 경우를 구분할 수 있다.
-> O
-
CSS 박스 모델을 이해할 수 있다
-> O
줄바꿈이 되는 block모델과 줄바꿈이 없는 inline, inline-block이 있다
box모델과 inline-block모델은 고유의 크기(width,height)를 가질 수 있지만
inline은 고유의 크기를 가질 수 없고 할당된 값(글자들의 크기)만 가진다 -
box model
-> O
- width, height
-> O
- margin, padding, border
-> O
마진은 바깥여백
보더는 테두리
패딩은 안쪽여백!
- 박스 크기를 측정하는 두가지 기준의 차이를 이해할 수 있다.
-> O
content-box 와 border-box가 있는데 기초 값은 content-box로 컨텐츠 영역에 패딩/보더 값이 더해져 내가 원하는 컨텐츠 값을 줄 수 없다. 그래서 border-box를 사용하여 패딩/보더 값에 영향을 안받고 내가 정한 컨텐츠 영역이 box사이즈와 딱 맞게 설정할 수 있다
모든 요소에 적용하는 것이 원칙이다(이렇게 하는게 가장 좋다!)
*{
box-sizing : border-box;
}
- MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다.
-> O
querySelector, textContent
오늘은 querySelector, textContent를 이용해서 계산기를 직접 만들어봤다..
처음엔 뭐가뭔지 몰라서 2시간동안 이것저것 만져보다가 겨우 easy난이도 문제를 풀었다
이후 이해가 좀 되었는지 normal문제를 1시간만에 풀었고
nightmare문제는.. 이제 막 해보는데 뭐가 뭔지 잘 모르겠다..
부딪혀보고 고민해보다가 스트레스 받는 과정이 힘들긴 한데 하나하나 해나갈때마다 성취감이 장난이 아니다
내일은 나머지 nightmare문제를 풀어야겠다.
