Web Programming/Front-End11 [Front-End] 7) CSS Selector 학습 목표 기본적인 Selector 문법을 이해한다. 핵심 개념 CSS Selector id, class, tag selector nth-child 학습하기 CSS selector HTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법입니다. element에 style 지정을 위한 3가지 기본 선택자 tag로 지정하기 id로 지정하기 class로 지정하기 CSS Selector의 다양한 활용 id, class 요소 선택자와 함께 활용 그룹 선택 (여러 개 셀렉터에 같은 style을 적용해야 한다면) 요소 선택 (공백) : 자손요소 아래 모든 span태그에 red색상이 적용됨 자식 선택 (>) : 자식은 바로 하위엘리먼트를 가리킵니다. 아래는 span tag 2만 red 색상이.. 2019. 12. 19. [Front-End] 6) CSS 상속과 우선순위 결정 학습 목표 CSS 상속의 특징과 상속이 되지 않는 상황에 대해서 이해합니다. 핵심 개념 CSS 상속 선택자 우선순위 (CSS Specificity) 학습하기 상속과 우선순위 결정 (1) 상위에서 적용한 스타일은 하위에도 반영됩니다. 이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 됩니다. 하지만 모든 CSS 속성이 이런 특징을 갖게 되면, 몇 가지 문제가 생깁니다. 예를 들어 width 속성이 상속되면 하위 엘리먼트가 모든 같은 크기의 넓잇값을 가질 수 있습니다. 이런 것은 원하는 것이 아니죠. 그래서 box-model이라고 불리는 속성들(width, height, margin, padding, border)과 같이 크기와 배치 관련된 속성들은 하위엘리먼트로 상속.. 2019. 12. 19. [Front-End] 5) CSS 선언방법 학습 목표 CSS선언 방식을 이해하고 활용할 수 있다. 핵심 개념 inline internal external 학습하기 style을 HTML페이지에 적용하는 3가지 방법 1. inline HTML태그 안에다가 적용합니다. 다른 CSS파일에 적용한 것 보다 가장 먼저 적용합니다. 2. internal style 태그로 지정합니다. 구조와 스타일이 섞이게 되므로 유지보수가 어렵습니다. 별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없습니다. 3. external 외부파일(.css)로 지정하는 방식입니다. CSS 코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋습니다. 현업에서는 여러개의 CSS 파일로 분리하고 이를 합쳐서 서비.. 2019. 12. 18. [Front-End] 4) class 와 id 속성 학습 목표 CLASS와 ID의 목적을 이해하고, 구분해서 작성할 수 있다. 핵심 개념 HTML 태그 안에서 사용되는 class속성과 ID속성 학습하기 [영상보강] 영상 4:38 에 소개된 nav-section 클래스를 가진 section엘리먼트는 유심히 보면, nav만 감싸있는게 아닙니다. nav와 아래 section등도 모두 포함한 wrapper역할을 합니다. 영상에서는 nav-section이라는 이름을 주었지만,전체 영역을 모두 커버하는 class이름이 더 적당할 거 같네요. nav-section 클래스 이름이 적당한 엘리먼트는 그럼 무엇일까요? 네 section 바로 아래있는 nav엘리먼트에 그 클래스 이름을 주는 것이 어울 걸 겁니다. ID 고유한 속성으로 한 HTML 문서에 하나만 사용 가능합니.. 2019. 12. 18. 이전 1 2 3 다음
