학습한 내용

이때까지 배웠던 html과 오늘 새롭게 배운 css내용을 비교하면서 학습을 하니 점점 더 복잡해지기 시작했다 html 에서 사용했던 태그와 태그의 속성들을 html이 아닌 css에서 적용이 가능한데 방법이 다르기 때문에 같은 것이라도 생각해야할 것이 늘었다는 뜻이다 그리고 추가된 내용들도 많기 때문에 내 것으로 만들기만 하면 처음보다 더 쉽게 도면 작업을 할 수 있을 것이다.
기존에는 태그안에 속성과 속성값을 넣어 style, color 등 변화를 줬다면 css에서도 가능하다 허나 중요한 것은 태그와 css에 동시에 추가를 하면 가독성이 떨어지므로 link 태그를 사용 하여 연동을 시켰다.
css에서 부모 태그의 속성을 변화 시키면 자식태그들 까지 속성이 변함
1) 부모가 가지는 속성을 자식이 모두 가지는건 아니다 ex) a태그
2) 부모가 가지는 속성을 자식이 속성을 전부 가지는건 아니다
실습하면서 학습하니 생각보다 이해가 쉬웠다.

html에 id="" => css에 #id 이름값
html에 class="" => css에 .class 이름값
class는 속성값으로 여러개의 별명을 지어 줄 수 있지만 id는 하나만 가능하고 만약 속성값을 2개를 넣으면 둘다 적용이 안된다 그리고 html에 id는 한개의 문서에 속성값이 하나만 있어야 한다. 이 밖의 css에 사용하는 소스들도 많이 배웠지만 기억에 남는건 우선순위에 대한 내용이다.
style 속성 > ID > Class > Tag 순으로 우선순위가 정해지는데 여기서 더 들어간다면
header h1이 가장 마지막에 적어서 결과도 red로 나올거 같았지만 ID > Tag 이기 때문에 #intro h1 인 blue가 나오고 #intro div h1와 비교 했을 땐 더 디테일 하게 적은 것이 우선순위가 더 크다 그 위에 #intro .container h1 을 보면 div는 Tag이고 .container 는 Class 이다 Class > Tag 이기 때문에 pink가 출력된다. 가장 맨 처음 소스를 적었다고 해도 하나하나 우선순위를 따져 가며 봐야한다 여기서 중요 포인트는 캐스캐이딩 이다. 캐스캐이딩이란 원본 코드는 유지한 상태로 새로운 속성을 추가함으로써 디자인을 덮으려고 할때 사용된다.

학습 중 어려웠던 내용

위에서 설명드렸다 시피 우선순위에 대한 내용은 처음엔 쉽다고 생각했지만 깊게 들어 갈수록 복잡해지다보니 집중해서 봐야 어떤 것이 출력될지 겨우 알 수 있을 정도로 어려웠다. 기본적으로 html만 보다가 css까지 보려고 하니 아직 머릿속에선 둘의 조화가 매끄럽게 연결이 안된다

해결방법

우선순위 같은 경우는 알아보는 방법을 단계별로 순서를 생각해 보았다.
첫 번째로 맨 앞에 ID인지 Class인지 Tag인지 구별 한 후 가장 높은 우선순위를 정한다 두 번째로는 높은 우선순위중 더 디테일 하게 들어 간 것을 확인한다. 마지막으로 디테일하게 들어간 속성들의 우선순위를 확인하여 구분한다.

html과 css의 연결을 쉽게 보기 위해선 막상 외우는 것 보다 계속 비교를 해가면서 html에선 되고 css에선 안되고 를 구분하며 외워야 한다

학습소감

오늘 내용은 집중해서 보지않으면 이해하기 어렵다고 생각한 내용이다.
그러나 어떻게 되었는가.. 완벽하진 않아도 이해를 잘했고 쉽지 않은 내용인데도 거부감 없이 잘 학습했다. 역시 김인권 강사님의 이해시키는 능력은 기립박수 백만개다 오늘도 잘 학습시켜주신 김인권 강사님과 대구 AI 스쿨 포에버~