웹 프로그래밍(풀스택)

[코스설계] Front-End 윤지수

http://www.boostcourse.org/web316/notice/2474

부스트코스 교수자 2020.03.09

아래의 글은 BOOSTER 서포터즈로 활동하고 로리(mitty0***)님이
작성한 부스트코스 후기입니다.
여러분들의 성원에 더 노력하는 부스트코스가 되겠습니다.
감사합니다.
******************************************

1)링크:https://blog.naver.com/mitty0304/221801195340

2)작성 날짜: 20/02/08

(본문 내용)

사진을 누르면 강좌 페이지로 이동합니다.

CSS는 웹의 스타일을 결정하는 역할을 합니다. 이번 시간에는 CSS의 기초적인 문법과 CSS를 HTML에 적용하는 방식을 알아보도록 하겠습니다.

※ 이 글은 커넥트재단의 실무형 온라인 교육 프로그램인 부스트코스 웹 프로그래밍 과정을 기반으로 작성되었습니다.

2-4 CSS 기초 (1)

1. css 선언 방법

h1 { color : red; }

h1 : 선택자, selector

color: 속성, property

red: 값, value

2. style을 HTML에 적용하는 방법

1) inline

HTML 태그 안에 스타일을 바로 지정합니다.

2) internal

<head> <style> p { font-size : 2em; border:1px solid gray; color: red; } </style> </head> <body> <div><p>...</p></div> </body>

3) external

외부 CSS 파일을 만들어서 <head> 부분에 <link> 태그를 이용하여 경로를 지정합니다.

만약 어떤 선택자(p)의 속성(color)에 대하여 inline, internal, external 방식을 이용해 각각 다른 값(red)을 지정해주었다면?

inline - internal - external 순으로 스타일이 적용됩니다. 즉, inline 방식이 최우선적으로 적용됩니다. 참고로, 문서의 구조를 표현하는 HTML에 스타일 요소를 넣는 것은 유지보수가 어려워지기 때문에 추천되는 방식은 아닙니다.

3. 태그에 CSS를 적용하는 방법

1) tag로 지정하기

span { color: red; }

2) id로 지정하기

#box { color: red; }

3) class로 지정하기

.box { color: red; }

4) id, class 요소 선택자와 함께 사용하기

span#myspan{ color: red } span.myspan{ color: red }

위의 첫 번째 예시는 span 태그 중에서 id가 myspan인 요소들에만 스타일을 지정합니다. class도 같은 방식으로 지정할 수 있습니다. 이 방법은 단순히 id나 class만으로 지정하는 방법보다 구체적으로 선언할 수 있습니다.

5) 그룹으로 지정하기

h1, span, div { color : red }

여러개의 요소에 같은 style을 지정할 수 있는 방법입니다. h1 태그, span 태그, div 태그에 동일한 스타일이 설정됩니다.

6) 하위의 자손 요소 선택하기

하위의 자손 요소에 스타일을 지정하는 방법은 3가지가 있습니다.

첫 번째로 '공백' 을 이용하는 방법입니다.

#myid span { color : red }

id가 "myid"인 영역 내의 모든 span 태그에 스타일이 지정됩니다.

두 번째는 '>' 을 이용하는 방법입니다.

#myid > span { color : red }

id가 "myid"인 영역의 바로 하위 span 태그에만 스타일이 지정됩니다.

첫 번째와 두 번째 방식을 구별할 필요가 있습니다. 아래의 소스코드를 실행해보면 바로 이해할 수 있을 것입니다.

<!DOCTYPE html><html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width"/><title>HTML Practice</title><style>.box p { color: red;}.box > p { color: blue;}</style></head><body><div class="box"><div><p>여기는 div 1입니다.</p></div><p>여기는 div 2입니다.</p></div></body></html>

세 번째는 n 번째 자식 요소를 선택하는 방법입니다.

p:nth-child(2) { color : red }

'nth-child(숫자)'는 하위의 모든 요소에 대하여 해당 순서에 있는 태그 요소에 스타일을 지정하는 것입니다. 위 예시의 경우, 하위의 모든 요소에 대하여 2번째에 있는 p태그에 스타일이 지정됩니다. 만약 하위의 2번째 자식 요소가 p 태그가 아닐 경우, 스타일이 지정되지 않습니다.

<!DOCTYPE html><html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width"/><title>HTML Practice</title><style> #box p:nth-child(2){ color: red;}</style></head><body><div id="box"><h1>단락 선택</h1><p>첫번째 단락입니다</p><p>두번째 단락입니다</p><p>세번째 단락입니다</p><p>네번째 단락입니다</p></div></body></html>

코드 실행 결과, box 영역에서 2번째 하위 요소이고 p 태그인 요소에 스타일이 지정됩니다. 따라서, '첫 번째 단락입니다.' 에 폰트 색이 빨간색으로 지정됩니다.

******************************************