패스트캠퍼스 파이썬 웹개발 올인원 패키지 후기(21)
파이썬 웹개발 올인원 패키지 21 일차 후기 겸 학습기록 입니다.
벌써 파이썬 인강 패스트캠퍼스 파이썬 웹개발 올인원 패키지 수강 3주차까지 완료했네요.
시간이 참 빠르면서도 그동안 알차게 공부한 것 같아 보람이 있습니다.
오늘은 지난시간에 이어 CSS 셀렉터 등을 공부하였습니다.
그리고 본격적인 실습에 앞서 필요한 사항들을 몇가지 알아보았는데요.
제 학습 기록 확인해 보세요.
CSS - 셀렉터, 상속, 캐스케이딩
- 클래스 셀렉터 : . 뒤에 클래스명을 지정하여 사용 > 클래스는 한 문서에 여러개가 있을 수 있으므로 해당 클래스 요소들을 한번에 css 속성 적용할 수 있기 때문에 편리합니다.
.class-name {
color: red;
}
- 태그 셀렉터 : 태그명으로 사용 (사용 자제, 왜냐하면 유지보수성이 떨어지기 때문입니다.)
p { background-color: blue;}
- id 셀렉터 : # 뒤에 아이디명을 지정하여 사용 > 아이디는 한문서에서 유니크 합니다.
#id-name { font-weight: 900;}
- 적용 우선 순위
아이디 > 클래스 > 태그
- (띄어쓰기 있는 경우)div 요소 아래에 있는 region 클래스 아래에 p 태그를 선택
div .region p {
background-color: orange
}
- (띄어쓰기 없는 경우) class-a, class-b 가 모두 포함된 요소만 선택
.class-a.class-b {
color: black;
}
- 속성 선택 or 속성 + 속성 값까지 보고 선택
a[title] {
}
a[href="aaa.net"] {
}
- 가상선택자
a:hover
a:active
a:focus
li:first-child < li 요소 중 첫번째 요소 선택
li:last-child < 마지막 요소
li:nth-child(2) < 2번째 요소
li:nth-child(2n) < 짝수만 선택
- 가상 요소
h2:before {
content: ">"
/* h2 요소 앞에 가상 요소를 넣어 '>'라는 콘테츠를 넣는다. */
}
- 구체성 점수 : 더 구체적으로 요소를 선택한 것이 스타일 적용이 더 우선시 된다.
id 선택자: 100점
클래스 선택자, 가상 클래스 : 10점
태그 선택자, 가상요소 : 1점
참고 : https://specificity.keegan.st
Specificity Calculator
Specificity Calculator A visual way to understand CSS specificity. Change the selectors or paste in your own.
specificity.keegan.st
- 캐스캐이딩
CSS는 기본적으로 상위 태그의 스타일 속성을 상속 받습니다. 상속이란 상위 요소에 적용된 속성을 하위 요소가 물려받는 것을 의미하고, 대표적으로는 font나 color 같은 속성이 있습니다. 그 외에 position이나 box 관련 속성 등은 상속이 되지 않습니다. 상속이 된다고 생각하면 좀 이상하죠. 하여튼 상속이 가능하기 때문에 혼란스럽기도 하지만, 각 요소를 따로 지정해줄 필요가 없어 효율적이라고도 할 수 있습니다.
이렇게 CSS는 기본적으로 상위 태그의 스타일 속성을 상속받고, 하위 태그에 중복된 스타일 속성이 있다면 상위 태그의 내용을 덮어씁니다. 또, 셀렉터 구체성 점수나 언제 어느 위치에서 선언이 되었는지 등에 따라서 달라집니다. 스타일이 겹치는 부분을 잘 살펴봐야 하죠.
복잡한 것 같지만 한편으로는 스타일을 효율적이고도 합리적으로 적용하는 방법입니다.
-패스트 캠퍼스 홍지수 강사님-
VS code, 크롬 익스텐션, 파이어폭스
VS Code
파이썬 기초강의 때도 썼던 툴인데요, 웹 프론트엔드 개발 시에도 유용하게 사용할 수 있다고 합니다.
강의에서 추가로 설치한 기능 (Extension)
한국어팩(한글표시), live server(html,css 코드를 바로 보여주는 툴), html snippet(단축기능 사용), prettier(코드 포맷터; 코드 작성시 인덴트 등을 통해 보기 좋게 만들어주는 툴)
FireFox 브라우저 설치 : 그냥 설치
Chrome 확장프로그램 설치
web developer
whatfont
HTML 기본 문서 구조
<!DOCTYPE html> <!-- 독타입 선언 : 문서 최상단에 반드시 위치 -->
<html lang="en"> <!-- html 요소 : 루트요소, lnag 속성 : 검색엔진, 브라우저가 참고하여 우리가 작성한 문서가 어떤 언어로 되어 있는지 알려줌-->
<head> <!-- 문서의 기본 설정, css 연결 등, 문서에는 직접 표현되지 않음-->
<meta charset="UTF-8"> <!-- charset : 문자 인코딩 명시, 전세계 문자를 표현하기 위한 표준으로 UTF-8 널리 사용-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- viewport : 브라우저 크기, 기기의 크기에 따라 웹페이지의 크기를 맞춰서 표시-->
<title>The Web framework for perfectionists with deadlines | Django</title> <!-- 중요 : 문서의 제목 표시! 브라우저의 탭 이름으로 표시 됨.-->
<link rel="stylesheet" href="style.css"> <!-- 스타일 시트 연결 -->
<!-- 상대 요소 : 지금 현재 내 위치에서의 파일 위치
따라서 style.css 라고 써도 파일이 연결 됨.
혹은 ./style.css 라고 써도 됨.
만약 부모 디렉토리에 있따면
../style.css 등등등
-->
<!-- 절대 요소 : 내 위치와 관계 없이 절대적인 파일의 위치를 명시
ex: c:\web_example\style.css
-->
</head>
<body>
</body>
</html>
패스트캠퍼스 파이썬 인강 자세한 내용은 아래 링크를 참고해 주세요!
'Web,FrontEnd' 카테고리의 다른 글
| [패스트캠퍼스 수강 후기] 파이썬 인강 자기계발 챌린지 24 회차 미션 (0) | 2020.06.17 |
|---|---|
| [패스트캠퍼스 수강 후기] 파이썬 인강 자기계발 챌린지 22 회차 미션 (0) | 2020.06.15 |
| [패스트캠퍼스 수강 후기] 파이썬 인강 자기계발 챌린지 20 회차 미션 (0) | 2020.06.13 |
| [패스트캠퍼스 수강 후기] 파이썬 인강 자기계발 챌린지 19 회차 미션 (0) | 2020.06.12 |
| [패스트캠퍼스 수강 후기] 파이썬 인강 자기계발 챌린지 18 회차 미션 (0) | 2020.06.11 |
