본문 바로가기

Web Programming52

[Front-End] 8) CSS 기본 Style 변경하기 들어가기 전에 글자색, 배경색, 글꼴은 어떻게 바꾸는 것일까요? 이번 시간에는 텍스트 속성 및 옵션값을 변경하는 방법에 대해서 배워보도록 하겠습니다. 학습 목표 CSS 없이 먼저 HTML구조를 설계할 수 있다. 핵심 개념 font-size background-color font-family 학습하기 CSS style 적용은 글자색, 배경색 등이 가장 자주 사용되는 것들입니다. 이런 속성은 위치 값과 크기를 지정하는 것과 달리, 색상 위주로 값을 부여합니다. 색상 관련 값은 다양한 색을 일관된 방법으로 표현하기 위해 주로 16진수 표기법을 사용합니다. font 색상 변경 color : red; color : rgba(255, 0, 0, 0.5); color : #ff0000; //16진수 표기법으로 가장 .. 2019. 12. 20.
[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.

티스토리툴바