#20230220 #CSS #C2
#코드카데미 CSS
<이전에 했던 것들>
1. 클레스101 조코딩 : CSS기초 배우기
2. 블록, 인라인 구분하기
CSS :
웹 개발자가 웹 페이지에서 HTML 콘텐츠의 스타일을 지정하는 데 사용하는 언어로써 색상, 글꼴 유형, 글꼴 크기, 이미지, 요소 위치 등을 수정할 수 있따.
▶ 규칙 세트 용어
• Selector 선택기 : 스타일을 지정할 요소를 대상으로 하는 데 사용되는 규칙 집합의 시작
• Declaration Block 선언 블록 : CSS 선언을 포함하는 {중괄호} 사이의 코드
• Declaration 선언 : 선택한 요소에 스타일을 적용하는 속성 및 값 쌍의 그룹 이름
• Property 속성 : 수정할 요소의 시각적 특성을 나타내는 선언의 첫 번째 부분.
• Value 값 : 속성 값을 나타내는 선언의 두 번째 부분
▶ 인라인 스타일 항
• Opening Tag 태그 열기 : HTML 요소의 시작. 스타일을 지정할 요소.
• Attribute 속성 : 스타일 속성은 HTML 요소에 CSS 인라인 스타일을 추가하는 데 사용
• Declaration 선언 : 선택한 요소에 스타일을 적용하는 속성 및 값 쌍의 그룹 이름
• Property 속성 : 수정할 요소의 시각적 특성을 나타내는 선언의 첫 번째 부분
• Value 값 : 속성 값을 나타내는 선언의 두 번째 부분
▶ Inline Styles 인라인 스타일
• HTML과 CSS는 다른 언어. but, 인라인 스타일을 사용하면 HTML시트 안에 CSS코드 작성 가능 (같은 시트)
• 오프닝 태그에 직접 추가 가능
• 스타일은 세미콜론(;)으로 끝나야함
• HTML 을 직접 스타일링하는 빠른 방법이지만, 웹 사이트를 만들 때는 거의 사용되지 않음 (가장 좋은 방법X)
▶ Internal Stylesheet 내부 스타일시트
• HTML시트 <head>섹션에서 <style>추가해서 CSS 코드작성 가능 (같은 시트)
• 인라인 스타일과 마찬가지로 같은 시트 안에서 작성됨
• 내부 스타일시트는 인라인 스타일에 비해 이점은 있지만, 모범사례는 아님
▶ External Stylesheet 외부 스타일시트
• HTML과 CSS 코드를 별도의 파일에 저장하여 코드 혼합을 방지
• HTML 파일에는 HTML 코드만, CSS 파일에는 CSS 코드만 포함 (.css 파일 확장자를 사용하여 분리)
• 파일 이름 확장자로 외부 스타일시트를 만듦 .style.css
• 장점 : HTML 가독성과 유지관리에 용이, 페이지 스타일을 지정하는 데 필요한 모든 CSS 코드 작성 가능
• <head>안에 link(닫는태그 불필요) 사용하여 파일연결 필요
• link 필요 요소
- hre : CSS 파일의 주소 또는 경로
- rel : HTML 파일과 CSS 파일 간의 관계 설명, 스타일시트에 연결하기 때문에 값은 스타일시트로
- 스타일시트 연결 방법 : URL, CSS파일이 HTML과 동일한 디렉토리에 저장되었다면 URL 대신 파일경로를 지정(보편)
memo
*CSS : hypertext markup language
하이퍼텍스트 마크업언어(WWW에서 구할수 있는 내용의 대다수를 만드는 데 사용되는 문서 포맷 언어)
*요소들 설명 : 코드카데미 용어설명 바로가기, TCP 용어설명 바로가기
*<p>가 단락의 paragraph의 약자였음.. (멍청이)
*디렉토리 : 다른 컴퓨터 파일, 가능한 다른 디렉토리에 대한참조를 포함하는 파일시스템 카탈로그 구조로 대부분 컴퓨터에서는 폴더나 서랍으로 알려져 있다. ex) SAP 하이라켓 화면
* 경로 : 디렉토리 나 페이지 계층 구조에서 고유한 위치를 지정하는 문자열
* 파일 시스템의 경우 계층 구조의 각 수준은 디렉토리
* URP의 경우 계층 구조의 각 수준은 페이지
* 경로의 다른 섹션은 슬래시(/)와 같은 경로 구분 기호로 구분함
* 서로 다른 섹션은 계층 구조에서 별도의 디렉토리 또는 페이지를 나타냄 ex) /home/user/python/test.py (상위→하위)
* URL은 운영 체제에 관계없이 항상 슬래시(/)를 경로 구분 기호로 사용하는 표준 형식을 따릅
* CSS관련 개념, 용어
https://www.codecademy.com/resources/docs/css
CSS | Codecademy
CSS, short for Cascading Style Sheets, is a style sheet language used to style websites. Colors, fonts, and page layouts for a site can all be managed using CSS. The more comfortable you are with CSS, the better equipped you will be to create an appealing
www.codecademy.com
* HTML, CSS 연습 공간
https://www.codecademy.com/workspaces/6410845de19fcd735ab8c718
| Codecademy
Codecademy is the easiest way to learn how to code. It's interactive, fun, and you can do it with your friends.
www.codecademy.com
'기록' 카테고리의 다른 글
| [코딩일지] #20230505 : 블로그 쓰면서 HTML 뒤적거리 (1) | 2023.05.05 |
|---|---|
| [코딩일지] #20230414 : 공부한 내용 적용, 블로그 오류 수정하기 (0) | 2023.04.14 |
| [코딩일지] #20230219 : CSS 기초 공부하기 _ CSS#1 (0) | 2023.02.19 |
| [코딩일지] #20230202 : Deploy와 도메인 등록 (0) | 2023.02.18 |
| [코딩일지] #20230125 : 코드카데미 HTML 연습하기 _ HTML#3 (0) | 2023.01.28 |
댓글