본문 바로가기

강의64

부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-3 강의 정리 [1] 강의 웹 프로그래밍(풀스택) 3. CSS - FE 3) CSS Selector [2] 개념 정리 element에 style 지정을 위한 3가지 기본 선택자 tag로 지정하기 id로 지정하기 HELLO World! class로 지정하기 HELLO World! CSS Selector의 다양한 활용 id, class 요소 선택자와 함께 활용 #myid { color : red } div.myclassname { color : red } 그룹 선택 (여러 개 셀렉터에 같은 style을 적용해야 한다면) h1, span, div { color : red } h1, span, div#id { color : red } h1.span, div.classname { color : red } 요소 선택 (공백) :.. 2022. 3. 28.
부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-2 강의 정리 [1] 강의 웹 프로그래밍(풀스택) 3. CSS - FE 2) 상속과 우선순위 결정-2 [2] 개념 정리 만약 css.css에서 div color를 blue로 주었다면, 뒤에 선언된 external방식의 css내용이 반영됩니다. 따라서 blue색깔로 나오겠죠. 즉 internal과 external은 같은 우선순위로 결정된다고 아셔야 합니다. CSS는 여러가지 스타일정보를 기반으로 최종적으로 '경쟁'에 의해서 적절한 스타일이 반영된다는 점을 잘 기억해야 합니다. text.... #a{ color : red; } .b{ color : blue; } div{ color : green; } 위 코드에서 id, class, 엘리먼트 순으로 우선순위를 가집니다. id는 클래스보다 우선되고 클래스는 엘리먼트보다 우선.. 2022. 3. 24.
부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-2 강의 정리 [1] 강의 웹 프로그래밍(풀스택) 3. CSS - FE 2) 상속과 우선순위 결정-1 [2] 개념 정리 상위에서 적용한 스타일은 하위에도 반영됩니다. 이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 됩니다. 하지만 모든 CSS 속성이 이런 특징을 갖게 되면, 몇 가지 문제가 생깁니다. 예를 들어 width 속성이 상속되면 하위 엘리먼트가 모든 같은 크기의 넓잇값을 가질 수 있습니다. 이런 것은 원하는 것이 아니죠. 그래서 box-model이라고 불리는 속성들(width, height, margin, padding, border)과 같이 크기와 배치 관련된 속성들은 하위엘리먼트로 상속이 되지 않습니다. 이렇게 CSS는 꽤 똑똑한 방식으로 동작합니다. 아직 혼란스러.. 2022. 3. 24.
부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-1 강의 정리 [1] 강의 웹 프로그래밍(풀스택) 3. CSS - FE 1) CSS 선언방법 [2] 개념 정리 CSS를 HTML 안에 선언하는 방식 3가지에 대해서 알아보자 style을 HTML페이지에 적용하는 3가지 방법 1. inline HTML태그 안에다가 적용합니다. 다른 CSS파일에 적용한 것 보다 가장 먼저 적용합니다. ​ 2. internal style 태그로 지정합니다. 구조와 스타일이 섞이게 되므로 유지보수가 어렵습니다. 별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없습니다. ... 3. external 외부파일(.css)로 지정하는 방식입니다. CSS 코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋습니다. 현업에서는.. 2022. 3. 24.

티스토리툴바