'중복을 제거함으로써 얻을 수 있는 막대한 효과' 하나의 페이지에 CSS 디자인을 입히기 위해 여러 CSS code들을 장황하게 만들었다. 허나 적용해야할 페이지의 수가 무한히 많다면? 이 문제를 해결하기 위한 방법을 얘기해보고자 한다. 반복되는 CSS code들을 하나의 파일로 엮고, HTML파일에서 CSS파일을 참조하게 한다면 각 페이지에 들어갈 code문장은 단 하나로 줄일 수 있다. 이는 코드를 작성함에 있어서 굉장히 효율적일뿐 아니라, 코드를 유지보수함에 있어서도 비교도 안될만큼 효율적이다. w3schools에서 CSS를 다음과 같이 설명한다. "CSS saves a lot of work. It can control the layout of multiple web pages all at once..

'반응형 웹, 반응형 디자인' 반응형화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것 형식 : @media() ex) screen width > 800px = @media(min-width:800px) screen width < 800px = @media(max-width:800px) "반응형 웹 디자인을 배우면서, 단순히 웹의 기능 구현 만큼, 편리하고 직관적인 UI의 구현이 굉장히 중요하다는 것을 생각해보게 한 강의였던 것 같다."

div , span tag div : block level element span : inline level element 부모 tag, 자식 tag (그룹화 개념) display:grid; grid-template-columns:150px 1fr; CSS tag 선언 시에 필요에 따라 구체적으로. 동일한 tag 종류에서도 각각의 element에 적용하려는 속성이 다를 수 있기 때문에 필요에 따라 세분화하여 선언해줘야함. (나중에 선언된 tag에서 작성한 코드로 이전 것을 덮어씌워버리므로 주의)

block level element : default값으로 화면 전체 폭을 사용하는 element inline level element : default값으로 자신의 contents만큼만의 폭을 사용하는 element display 속성을 부여해 default값을 벗어나 다르게 표현할 수 있다.

*이 글은 유튜브 '생활코딩'의 강의 내용을 요약하여 표현해보고자 만든 게시글입니다. 같은 Selector의 경우 '순서'상 나중에 선언된 Selector에 우선순위가 있다. 그렇다면, 서로 다른 Selector들의 나열에서는 어떻게 적용이 될까. CSS에서 Selector 에는 크게 3가지가 있고, 이 3가지 사이에서도 '우선순위'가 존재한다. 결론부터 말하자면, tag < class < id 이다. 즉, 3가지 중 가장 우선적으로 표현하는 것은 id selector 이다. 그렇다면, 이렇게 주어지는 우선순위에 대해 어떻게 이해하면 좋을까? 먼저, id selector의 핵심은 id=identification의 의미가 가리키듯, '중복이 허용되지 않는다' 이다. 즉, 상단에 선언된 "active"라는 ..