본문 바로가기
기록

[코딩일지] #20230314 : 코드카데미 CSS 연습하기 _ CSS#2

by 게으른_직장인 2023. 3. 14.
320x100

 


 

#20230220 #CSS #C2

#코드카데미 CSS


<이전에 했던 것들>

1. 클레스101 조코딩 : CSS기초 배우기

2. 블록, 인라인 구분하기


CSS

웹 개발자가 웹 페이지에서 HTML 콘텐츠의 스타일을 지정하는 데 사용하는 언어로써 색상, 글꼴 유형, 글꼴 크기, 이미지, 요소 위치 등을 수정할 수 있따.

style link 걸기 전 / 후


칙 세트 용어
 • 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)

HTML시트 / 결과 화면

 

Internal Stylesheet 내부 스타일시트

  • HTML시트 <head>섹션에서 <style>추가해서 CSS 코드작성 가능 (같은 시트)

  • 인라인 스타일과 마찬가지로 같은 시트 안에서 작성됨

  • 내부 스타일시트는 인라인 스타일에 비해 이점은 있지만, 모범사례는 아님

HTML시트 / 결과 화면

 

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 대신 파일경로를 지정(보편)

HTML시트 / CSS시트 / 결과 화면


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

 

 

728x90
반응형