우선, 내부에서 웹사이트가 어떻게 생겼는지, 말하자면 정의해 봅시다. 자세히 설명하지 않고도 다음과 같이 말할 수 있습니다. 웹사이트는 파일의 집합입니다, 인터넷의 서버(호스팅)에 있으며 특정 시나리오에 따라 서로 상호 작용합니다. 이 상호 작용의 결과는 매일 보는 바로 그 페이지입니다.

따라서 사이트를 구성하는 이 모든 파일은 무언가로 채워져 있어야 합니다. 그렇구나, 그렇구나! 그리고 그것들은 코드로 가득 차 있습니다. 그래서 여기있다 각 비밀 약어는 언어입니다, 사이트를 구성하는 페이지와 스크립트가 작성됩니다.

HTML이란 무엇입니까?

HTML(하이퍼텍스트 마크 업 언어)는 하이퍼텍스트 마크업 언어입니다.. 완전히 명확하지 않죠? 정의를 단순화하면 HTML이 모든 페이지의 "골격"이라고 말할 수 있습니다.

예는 우리가 발명한 페이지의 다음 섹션입니다.

페이지 제목

링크의 보이는 부분(앵커)

페이지 제목

이것은 태그로 묶인 텍스트, 단락입니다. 일반적으로 HTML은 열리고 닫히는 태그로 구성되어 특정 요소를 구성합니다. 그리고 이제 텍스트의 단락이 끝나고 우리가 전달할 것입니다.

링크의 보이는 부분(앵커)

왜 "스켈레톤"인가?자세히 보면 해석된 코드가 전혀 서식이 지정되지 않습니다. 색상도, 크기도, 위치도 없습니다.

우리는 결론을 내릴 수 있습니다 HTML은 태그의 집합입니다., 인터넷의 모든 페이지의 기초를 형성합니다. 그들의 도움으로 우리는 제목, 단락, 링크, 그림 및 기타 요소를 선언합니다.

CSS 란 무엇입니까?

CSS(English Cascading Style Sheets - cascading style sheets) - 이것이 바로 "마법의 마술"입니다., HTML 마크업을 멋지게 보이게 합니다. ~에 CSS 도움말어떤 식으로든 마크업에 지정된 요소의 스타일을 지정할 수 있습니다.

예를 보여주는 것이 가장 좋다고 생각합니다.

얼룩말

착색


얼룩말에 대해 자세히 알아보세요!

얼룩말

얼룩말(위도 Hippotigris) - Burchell의 얼룩말(Equus quagga), Grevy의 얼룩말(Equus grevyi) 및 산 얼룩말(Equus zebra)을 포함하는 말 속의 아속. 얼룩말과 국내 말 사이의 잡종 형태는 얼룩말과 당나귀 사이의 얼룩말 - 얼룩말이라고합니다. 얼룩말은 새끼와 한 마리의 종마를 가진 암컷으로 구성된 작은 그룹으로 삽니다.

착색

얼룩말의 배경색과 관련하여 흰색 또는 검정색의 두 가지 상호 배타적인 위치가 종종 발견됩니다. 애틀랜타 동물원 대형 포유류 큐레이터 Lisa Smith는 전문가들이 얼룩말을 흰색 줄무늬가 있는 검은색 말로 가장 자주 묘사한다고 말합니다.

얼룩말

얼룩말(위도 Hippotigris) - Burchell의 얼룩말(Equus quagga), Grevy의 얼룩말(Equus grevyi) 및 산 얼룩말(Equus zebra)을 포함하는 말 속의 아속. 얼룩말과 국내 말 사이의 잡종 형태는 얼룩말과 당나귀 사이의 얼룩말 - 얼룩말이라고합니다. 얼룩말은 새끼와 한 마리의 종마를 가진 암컷으로 구성된 작은 그룹으로 삽니다.

착색

얼룩말의 배경색과 관련하여 흰색 또는 검정색의 두 가지 상호 배타적인 위치가 종종 발견됩니다. 애틀랜타 동물원 대형 포유류 큐레이터 Lisa Smith는 전문가들이 얼룩말을 흰색 줄무늬가 있는 검은색 말로 가장 자주 묘사한다고 말합니다.

용도를 확인하는 것은 어렵지 않다. CSS는 페이지 개발 프로세스의 필수적이고 중요한 부분입니다., 디자이너가 이전에 그린 모든 아름다움을 프로그래밍 방식으로 구현할 수 있는 스타일 시트이기 때문입니다.

CSS 코드는 일반적으로 페이지 마크업과 별도의 파일에 저장되며 이를 필요로 하는 모든 문서에 포함됩니다. 구문과 사용 규칙에 대해서는 이야기하지 않겠습니다. 이것은 우리 기사의 범위를 벗어나기 때문입니다. 그러나 CSS를 사용하여 열리는 모든 가능성에도 불구하고 CSS의 속성을 배우는 것은 매우 쉽다는 점을 유념할 것입니다.

PHP는 무엇입니까?

PHP(PHP의 재귀 약어: Hypertext Preprocessor)는 일반적인 프로그래밍 언어입니다.범용 오픈 소스. PHP는 웹 개발을 위해 특별히 설계되었으며 해당 코드를 HTML에 직접 삽입할 수 있습니다.

이것은 우리에게 무엇을 의미합니까? PHP를 사용하는 예를 살펴보겠습니다.

echo "안녕하세요! 저는 PHP 스크립트입니다.";
?>

안녕하세요 월드입니다! 저는 PHP 스크립트입니다.

특징적인 구별 기능 주어진 언어처리 결과가 일반 HTML 태그(HTML 코드). 그렇기 때문에 웹 프로그래밍 환경에서 활발히 사용되고 있습니다. HTML과 달리 PHP는 서버와 통신할 수 있을 뿐만 아니라 데이터베이스를 탐색할 수 있다는 점도 주목할 가치가 있습니다. 필요한 정보페이지에 표시합니다.

PHP 코드는 특수 시작 및 종료 태그로 구분됩니다., HTML 마크업 내부에서 "PHP 모드"로 "전환"하거나 "전환"할 수 있습니다. PHP 스크립트는 작업이 방대하고 많은 코드가 필요한 경우 마크업과 별도의 파일에 위치할 수도 있습니다.

프로그래밍 언어 덕분에 PHP처럼(및 PHP 자체)가 가능해졌습니다. CMS 생성(콘텐츠 관리 시스템, CMS) 또는 콘텐츠 관리 시스템.

지금 우리가 알아야 할 것은 무엇입니까? PHP 스크립트는 일종의 "접착 생성자"입니다., 사용자 화면에 다양한 정보 출력을 프로그래밍할 수 있습니다. 인터넷에서 일반 정적 페이지를 만들려면 충분합니다. HTML 사용 CSS와 짝을 이룹니다. 그러나 이 페이지(예: 뉴스)가 일부 동적 사이트의 일부인 경우 해당 페이지의 모양은 PHP 스크립트 실행의 결과일 가능성이 큽니다.

JS 란 무엇입니까?

JavaScript - 프로토타입 기반 스크립팅 언어. 항상 그렇듯이 정의는 프로그래머가 아닌 사람들에게 이해를 제공하지 않으므로 간단한 논문의 도움으로 이해하려고 노력할 것입니다.

우선 JS를 사용하여 수행할 수 있는 작업의 작은 예를 고려할 것을 제안합니다.








안녕하세요, 블로그 사이트 독자 여러분. 오늘은 CSS에 대해 자세히 이야기를 시작하려고 합니다(자료는 해당 자료에 축적됩니다).

Html을 배운 후 다음으로 넘어갈 시간입니다. 스타일 마크업 언어는 사이트 페이지의 외부 디자인을 담당하며 이를 이해하지 못하면 무언가를 수정, 이동 또는 정렬하기가 매우 어렵습니다.

물론 Css는 Html보다 훨씬 복잡해 보이지만 이것은 크로스 브라우저 레이아웃에 관한 것입니다. 그러나 자신의 사이트 디자인에서 약간의 수정에 관해서는 많은 마음이 필요하지 않습니다. 일반적으로 우리는 그 기초를 자세히 분석하려고 노력할 것이며, 선조 사용의 뉘앙스는 선택적 연구 (선택 사항)로 남습니다. 그러나 모든 웹마스터는 기본 개념을 알아야 합니다.

CSS 언어란 무엇이며 무엇을 위한 것입니까?

CSS는 Cascading Style Sheets 또는 러시아어 번역으로 Cascading Style Sheets의 약자입니다. 그것은 무엇이며 왜이 언어가 한 번에 발명 되었습니까?

따라서 조금 더 일찍 공부한 내용을 바탕으로 웹 문서의 마크업이 이 언어의 태그를 사용하여 수행된다고 말할 수 있습니다. 저것들. HTML의 도움으로 문서(웹 페이지)의 구조를 만듭니다. 예를 들어 순수 Html에서는 문서 구조의 다른 요소를 설정할 수 있으며 브라우저에서 필요한 모양을 제공할 수도 있습니다.

그러나 시간이 흐르면서 HTML에서 점점 더 많은 시각적 디자인 속성을 사용할 필요가 생겼습니다. 원천. 이와 관련하여 더 유망한 또 다른 개발 옵션이 제안되었습니다. 별도의 스타일 마크업 언어 생성 CSS. 그리고 이 옵션은 단순히 디자인 속성의 수를 늘리는 것보다 많은 이점이 있습니다.

왜요? 순수한 Html에서 텍스트 조각의 색상을 설정하는 방법을 기억하십니까? 맞습니다. 그리고 원하는 색상으로 텍스트의 여러 단락을 한 번에 색칠하고 싶다면?

그런 다음 각 태그 내부의 Color 속성에 원하는 색상 값이 있는 글꼴 태그를 삽입해야 합니다(P 단락 태그는 블록 태그이므로 인라인 글꼴 요소 내부에 배치할 수 없음).

이 모든 것은 사이트 로딩 속도가 저하되고 인터넷 통신 장비에 불필요한 로드가 생성되기 때문에 매우, 매우 바람직하지 않은 소스 코드를 엄청나게 복잡하게 만들 것입니다. 개발자는 이를 위해 "가는" 수 없습니다.

따라서 그들은 이러한 상황에서 다음과 같은 방법을 생각해 냈습니다. W3C 개발자는 웹 문서의 모든 시각적 표현을 Cascading Style Sheets 또는 간단히 CSS(CES로 발음)라는 특수 스타일 마크업 언어로 스타일 지정하기로 결정했습니다. 기술의 본질은 무엇인가?

결론은 스타일 마크업 언어를 문서(페이지)에 연결하여 이 문서에서 찾을 수 있는 모든 요소(Html ​​태그로 생성)의 시각적 표현을 설정할 수 있다는 것입니다.

인터넷에 다른 CSS 스타일 시트 파일이 포함되어 있기 때문에 웹 페이지가 어떻게 모양을 변경할 수 있는지 매우 명확하게 볼 수 있는 리소스가 있습니다. 제 생각에는 다음과 같은 질문에 대한 가장 좋은 답변이 될 것입니다. CSS 란 무엇이며 왜 필요한가요?.

다음 링크를 클릭하면 문서(웹 페이지)의 기본 보기를 볼 수 있습니다.

특별한 것은 없지만 왼쪽 메뉴에서 모든 디자인 보기 링크를 클릭하면 다른 스타일 디자인(다른 스타일 시트 파일)을 포함하여 동일한 웹 페이지에 대한 수십 또는 수백 개의 디자인 옵션을 볼 수 있습니다.

원래 HTML 코드는 정확히 동일하게 유지되며, 변경 사항만 CSS 스타일링 . 놀랍지 않나요?!

CSS는 예를 들어 Html과 같은 의미의 마크업 언어가 아닙니다. 이것은 스타일 마크업 언어입니다. 고유한 구문과 고유한 내부 내용이 있으며 여러 면에서 이전에 연구한 언어와 매우 다릅니다.

또한 HTML에 비해 스타일 마크업 언어는 훨씬 더 복잡합니다. 기본 개념 외에도 알아야 할 뉘앙스가 많이 있습니다. HTML에는 특별한 뉘앙스가 없었습니다. 모든 요소를 ​​연구하고 코드로 안전하게 작업할 수 있습니다. CSS는 체스와 비교할 수 있는 것 같습니다. 모든 조각이 어떻게 움직이는지 아는 것만으로는 충분하지 않고 게임도 할 수 있어야 합니다.

그렇다면 그것은 무엇이며 무엇으로 구성되어 있습니까? 이 주장된 언어는 두 부분으로 나누다:

  1. 요소가 화면에서 어떻게 보여야 하는지 브라우저에 알려주는 규칙입니다.
  2. 선택기는 브라우저가 이러한 규칙을 적용해야 하는 HTML 코드의 요소를 정확히 이해할 수 있도록 하는 레이블입니다.

이제 스타일에 정의된 스타일이 웹 페이지의 소스 코드와 어떻게 연결되는지 살펴보자. 세 가지 주요 방법이 있습니다 html과 CSS 사용:

  1. 중첩 - CSS 코드는 Style 속성을 사용하여 원하는 요소 태그에 직접 작성됩니다.
  2. 포함 - 웹 문서의 모든 스타일 코드는 Style 요소를 사용하여 헤더(Head 태그 내부)에 작성됩니다.
  3. 바인딩 - 모든 CSS코드는 헤더의 Link 요소를 사용하여 문서에 연결된 별도의 외부 파일에 배치(렌더링)됩니다.

글쎄, 당신은 우리가 이미 스타일 마크업 언어에 대해 어떻게 많이 배웠는지 알 수 있습니다. 이제 그것에 대해 이야기할 시간이다. 통사론. 일반적으로 매우 간단합니다.

CSS 코드의 한 규칙은 두 가지 요소로 구성됩니다. 하나는 속성(이 예에서는 입니다)과 값(이 예에서는 빨간색 및 #CCCCCC)입니다. 전제 조건은 콜론으로 속성을 값과 구분.

더 나아가. 하나의 규칙은 반드시 다른 규칙과 분리됩니다. 세미콜론. 마지막 규칙 이후에는 더 이상 세미콜론을 넣지 않아도 되지만, 과잉을 피하기 위해서는 항상 넣는 것을 규칙으로 하는 것이 좋습니다. CSS 코드에서는 의미가 없으며 재량에 따라 설정할 수 있습니다.

스타일을 사용하여 CSS를 HTML 코드에 연결

자, 이제 우리 문서에 스타일 규칙을 적용하는 모든 방법의 예를 살펴보겠습니다. 이 방법은 바로 위에서 일반적인 용어로 설명되어 있습니다.

첫 번째 방법을 방법이라고 합니다. html에 CSS 임베딩스타일 속성 사용:

어떻게 사용할 수 있는지 봅시다 이 방법단락의 색상과 배경을 설정하려면:

중첩 방법이란

보시다시피, 한 번의 쉬운 움직임으로 단락의 텍스트를 빨간색(color:red)으로 채색함과 동시에 회색 배경(배경:#cccccc). 스타일은 절대적으로 모든 태그와 함께 사용할 수 있는 6가지 중 하나입니다(스크린샷 하단에 나열됨).

Css에서 우리는 또한 보편적인 것들을 적극적으로 사용할 것입니다. 그러나 이것은 다음 기사들에서 논의될 것이지만, 지금은 스타일을 사용하여 특정 요소에 스타일 규칙을 연결하는 가능성을 고려했습니다. HTML 코드. 동일한 규칙 세트(무제한)를 값으로 사용할 수 있습니다.

Style 속성을 사용하는 중첩 방법은 실제로 구현하기가 매우 간단하지만 그럼에도 불구하고 실제 레이아웃입니다. 매우 드물게 사용. 그러나 다른 한편으로, 그것의 도움으로 아주 간단하게 무언가를 시도하고 실험할 수 있으며, 그런 다음에만 이러한 모든 규칙을 테이블이 있는 별도의 파일로 전송할 수 있습니다. CSS 스타일.

스타일 마크업 언어를 연결하는 다음 방법을 메서드라고 합니다. HTML에 CSS 포함. 이 방법은 이전에 고려된 중첩 방법과 근본적으로 다릅니다.

페이지의 모든 태그에 스타일 언어의 규칙을 포함하는 Style 속성을 포함하는 대신 이제 이 웹 문서에 필요한 모든 CSS 규칙을 하나의 단일 태그 안에 작성합니다. 스타일 태그, 차례로 이 문서의 헤더에 배치됩니다(Head 요소 사이).

웹 문서의 구조에서 Head가 무엇이며 어디에 쓰여 있는지 기억하십니까? 기억나지 않는다면 다음 순서도를 보십시오.

저것들. 코드에서 다음과 같이 보일 수 있습니다.

... ...

명확하지 않습니까? 글쎄, 이제 나는 그것을 설명하려고 노력할 것이다.

브라우저가 스타일 규칙을 하이퍼텍스트 마크업 언어로 허용하지 않도록 하려면 필수 속성을 Style 요소에 작성해야 합니다. 값이 "text/css"인 입력(캐스케이딩 스타일 시트용 미디어 콘텐츠 헤더). 저것. 이 요소에 포함된 코드는 브라우저에서 CSS로 해석됩니다.

위의 예를 살펴보겠습니다. 보시다시피 스타일 규칙 에 동봉 바지 멜빵 , 그리고 라틴 문자 "P"의 형태로 소위 선택기가 그 앞에 쓰여집니다. 이 선택기가 필요한 이유는 무엇입니까?

이 CSS 규칙이 단락 태그(선택자 P)에만 적용되어야 한다고 브라우저에 알릴 수 있는 다른 방법은 무엇입니까? 이 웹문서 및 다른 아무것도.

여기서 우리는 구문 문제를 다시 다루었습니다. 임베딩 및 중첩 방법을 사용할 때 모든 스타일 마크업 언어 규칙은 중괄호로 묶어야 하고 반드시 서다또는 다중 선택기:

CSS 선택기(속성: 값, 속성: 값)

중첩 방법을 사용할 때 선택자와 중괄호를 사용하지 않았습니다. 이러한 CSS 규칙은 Style 속성이 등록된 태그에 정확히 적용되어야 한다는 것이 브라우저에 이미 명확했습니다.

임베딩 또는 중첩 방법을 사용할 때 이러한 스타일 규칙의 주소를 결정하는 상황이 더 복잡해지고 중괄호와 선택기를 사용해야 했습니다. 저것. 우리는 이 CSS 규칙 세트(중괄호로 묶음)를 모든 단락에 친절하게 적용하고 이 세트는 다른 것을 위한 것임을 브라우저에 나타냅니다.

가장 간단한 경우에 태그 이름을 선택기로 사용할 수 있습니다. 선택기 이름 바로 뒤에 열리는 중괄호로 묶인 CSS 언어 규칙이 적용되어야 합니다. 이 예에서는 단락 태그 "P"의 이름이 선택기로 사용됩니다. 다음 기사에서 스타일 마크업 언어의 선택자에 대해 더 자세히 이야기할 것입니다(위 링크 참조).

HTML 문서에 CSS 코드를 포함하는 방법을 요약하자면 - 이 문서에 필요한 모든 스타일 규칙은 방금 설명한 중첩 방법을 사용하는 것처럼 여러 다른 요소가 아닌 하나의 단일 Style 태그에 설명됩니다. 위에.

링크를 사용하여 CSS 스타일시트를 별도의 파일로 이동

스타일 코드를 웹 문서에 통합하는 마지막 방법은 바인딩 방법. 이 방법을 설명하는 가장 쉬운 방법은 다음과 같습니다.

위에서 논의한 방법(중첩 및 임베딩)과의 주요 차이점은 연결 방법을 사용할 때 CSS 언어의 모든 규칙이 별도의 외부 파일에 배치. 다시 텍스트(Html ​​문서와 같이)가 되며 일반적으로 열기 위해 .css 확장자가 지정됩니다. 로컬 컴퓨터아래에 윈도우 컨트롤할당될 수 있었다 특별 프로그램 ().

외부 CSS 파일을 사용할 때 특별한 링크 태그, 웹 페이지 헤더의 여는 Head 요소와 닫는 Head 요소 사이에 다시 작성됩니다. 링크는 브라우저에 표시되지 않는 범주에 속합니다.

이 경우 브라우저는 지정된 스타일 시트 파일(Link 태그의 Href 속성에 지정되기 전에)을 찾아 로드하고 여기에 지정된 CSS 언어 규칙을 적용합니다. 외부 디자인현재 HTML 문서.

일반적으로 링크는 앞에서 설명한 Style 태그의 사용과 매우 유사하지만 사이트 페이지의 로딩 속도를 크게 높이고 인터넷 통신 장비의 부하를 줄일 수 있습니다.

Style 요소(임베딩 방법)를 사용할 때 브라우저는 문서의 HTML 코드, CSS 규칙 및 선택자와 함께 매번 로드해야 하며 외부 스타일 시트 파일을 사용하는 경우 브라우저는 Style.css를 한 번만 로드한 다음 사이트의 다른 페이지를 디자인할 때 자신의 캐시(사용자 컴퓨터 하드 드라이브의 영역)에서 가져오기만 하면 됩니다.

Link 태그의 type="text/css" 속성은 이 미디어 콘텐츠가 스타일 마크업 언어에 불과하다는 것을 의미합니다. 그러나 CSS 파일과 Html 문서를 연결할 때도 사용됩니다. 스타일시트 값이 있는 Rel 속성. 문제는 Link(서비스 하이퍼링크)가 완전히 다른 용도로 사용될 수 있다는 것입니다.

브라우저에서 이 페이지의 소스 코드를 보면 헤드 영역에 다양한 링크 태그가 있음을 알 수 있습니다.

그리고 이러한 각 서비스 하이퍼링크의 목적은 다음 값에 의해 결정됩니다. 상대 속성. 예를 들어, rel="shortcut icon"은 파일의 경로를 나타내는 데 사용되고 rel="alternate"는 페이지의 대체 버전을 나타내는 데 사용할 수 있습니다(Html ​​문서의 대체 표현의 예는 ). .

글쎄요, Link에서 rel="stylesheet" 속성을 사용하는 경우, 우리는 브라우저에게 스타일시트 파일 경로(Href 속성에서 이 경로는 절대 또는 상대 형식으로 지정할 수 있습니다.) 저것들. Rel 속성을 사용하여 브라우저에 파일이 어떻게 생겼는지, Href(스타일시트 - CSS 포함)에 지정된 경로를 알려줍니다.

사이트에서 bind 메소드는 거의 항상 사용됩니다. CSS 및 HTML(외부 스타일 시트 파일). 스타일 속성 및 태그는 일반적으로 테스트용으로만 사용되지만 사용이 정당한 경우(예: 장식할 때) 특정 작업이 있을 수 있습니다. 그러나 사이트의 실제 작업에서 사용되는 것은 외부 파일입니다. 연결 방법.

이를 위해 나는 휴가를 떠날 수 있으며 가까운 장래에 계속될 것임을 약속합니다. 다시 한 번 말하지만 CSS를 배우는 것은 일반적으로 HTML을 배우는 것보다 훨씬 더 어렵기 때문에 가능한 한 상세하고 기술적으로 설명하려고 노력할 것입니다.

행운을 빕니다! 블로그 페이지 사이트에서 곧 만나요

당신은 관심이있을 수 있습니다

목록 스타일(유형, 이미지, 위치) - HTML 코드에서 목록의 모양을 사용자 지정하기 위한 CSS 규칙
CSS에서 표시(차단, 없음, 인라인) - 웹 페이지에서 HTML 요소의 표시 유형 설정
CSS란 무엇이며 CSS 스타일 시트를 Html 문서에 연결하는 방법과 이 언어 구문의 기본 사항
CSS의 배경(색상, 위치, 이미지, 반복, 첨부) - 모두 배경색 설정 또는 배경 그림 HTML 요소
선택자, 사용자 및 작성자 스타일의 중요, 조합 및 그룹화로 인한 CSS의 우선 순위 및 증가
높이, 너비 및 오버플로 - 블록 레이아웃의 콘텐츠 영역을 설명하기 위한 CSS 규칙
CSS의 크기 단위(픽셀, Em 및 Ex) 및 규칙 상속 인테리어를 위한 다양한 디자인과 외부 링크 CSS를 통해
CSS의 유사 클래스 및 유사 요소 선택자(hover, first-child, first-line 등), HTML 코드 태그 간의 관계
CSS에서 부동 및 지우기 - 블록 레이아웃 도구

아마도 이전에 CSS에 대해 들어보았지만 그것이 무엇인지 모르십니까? 이 튜토리얼에서는 CSS가 무엇이며 무엇을 할 수 있는지 배울 것입니다.

CSS는 계단식 에스스타일 에스모자/캐스케이딩 스타일 시트.

CSS로 무엇을 할 수 있습니까?

CSS는 HTML 문서의 렌더링을 정의하는 스타일 언어입니다. 예를 들어 CSS는 글꼴, 색상, 여백, 선, 높이, 너비, 배경 이미지, 요소 위치 지정 및 기타 여러 가지를 처리합니다. 인내심을 갖고 보십시오!

HTML은 웹사이트를 디자인하는 데 (잘못) 사용될 수 있습니다. 그러나 CSS는 더 강력하고 더 정확하고 정교합니다. CSS는 현재 모든 브라우저(뷰어)에서 지원됩니다.

이 자습서의 몇 가지 수업에서 자신만의 스타일 시트를 만들고 CSS를 사용하여 웹 사이트를 멋지게 만들 수 있습니다.

CSS와 HTML의 차이점은 무엇입니까?

HTML은 페이지의 내용을 구성하는 데 사용됩니다. CSS는 이 구조화된 콘텐츠의 형식을 지정하는 데 사용됩니다.

동의합니다. 미친 소리처럼 들립니다. 하지만 계속 읽어주세요. 곧 모든 것이 명확해질 것입니다.

오래 전, Madonna가 처녀였고 Tim Berners Lee라는 사람이 World Wide Web을 발명했을 때 HTML은 구조화된 텍스트를 표시하는 데만 사용되었습니다. 작성자는 다음과 같은 HTML 태그를 사용하여 "이것은 표제입니다" 또는 "이것은 단락입니다"라는 텍스트만 표시할 수 있습니다.

그리고

웹 디자이너온라인 문서 형식을 지정하는 방법을 찾기 시작했습니다. 증가하는 소비자 요구를 충족하기 위해 브라우저 제조업체(당시 Netscape 및 Microsoft)는 다음과 같은 새로운 HTML 태그를 발명했습니다. , 정의했다는 점에서 원래 HTML 태그와 다릅니다. 모습, 구조가 아닙니다.

이것은 또한 다음과 같은 원래 구조화 태그로 이어졌습니다.

, 텍스트를 구조화하는 대신 페이지 디자인에 점점 더 많이 사용되고 있습니다. 다음과 같은 많은 새로운 디자인 태그 , 하나의 브라우저에서만 지원되었습니다. "이 페이지를 보려면 브라우저 X가 필요합니다."는 웹사이트에서 일반적인 거부입니다.

CSS는 웹 디자이너에게 모든 브라우저에서 지원하는 정확한 디자인 기능을 제공하여 이러한 상황을 해결하기 위해 만들어졌습니다. 동시에 프레젠테이션과 문서 내용을 분리하여 작업을 크게 단순화했습니다.

CSS는 나에게 어떤 이점을 제공합니까?

CSS의 출현은 웹 디자인의 세계에 혁명을 일으켰습니다. CSS의 특정 이점:

  • 단일 스타일 시트로 여러 문서의 표시를 관리합니다.
  • 페이지 모양에 대한보다 정확한 제어
  • 다양한 미디어(화면, 인쇄물 등)에 대한 다양한 보기
  • 복잡하고 정교한 디자인 기법.

다음 튜토리얼에서는 CSS가 실제로 어떻게 작동하고 어떻게 시작할 수 있는지 자세히 살펴보겠습니다.

1990년대에 웹의 인기가 높아짐에 따라 사이트에 특정 디자인을 적용하려는 의도도 커졌습니다. 웹 개발자는 웹 페이지를 향상시키기 위해 특정 HTML 태그에 의존했습니다.

  • 전체 HTML 문서의 글꼴을 결정했습니다.
  • 내부에 있는 텍스트의 서체, 색상 및 크기를 결정했습니다.
  • 모든 내용을 중심으로;
  • 텍스트 크기를 늘렸습니다.
  • 취소선으로 텍스트를 표시했습니다.

여러 HTML 속성도 사용할 수 있습니다.

  • bgcolor는 요소의 배경색을 정의했습니다.
  • 텍스트는 텍스트의 색상을 정의합니다.
  • 여백 속성은 요소의 양쪽에 공간을 추가하는 데 사용할 수 있습니다.

왜 테이블을 피합니까?

그러나 무엇보다도 열을 만들고 요소를 시각적으로 정렬하고 일반적으로 요소를 서로 상대적으로 배치하기 위해 웹 개발자는 요소를 사용했습니다.

웹페이지 디자인을 위해 그리드.

심벌 마크 태그라인
저작권 2015
왼쪽 메뉴 주요 내용 오른쪽 사이드바

이 접근 방식은 다음과 같은 이유로 번거로웠습니다.

  • HTML의 테이블 말 많은: 많은 상용구 코드가 필요합니다.
  • 마크업은 의미상 부정확: 다차원 데이터에는 테이블을 사용해야 합니다.
  • 레이아웃을 변경하려면 레이아웃을 변경해야 합니다. 왼쪽 열을 오른쪽으로 이동하려면 HTML 구조 수정;
  • 테이블은 경향이 있었다 구문 오류: 정확성을 위한 라인과 셀은 특정 방식으로 이동하고 중첩되어야 합니다.
  • 마크업은 읽을 수 없는: 열 내에서 추가 열을 얻기 위해 테이블이 다른 테이블 내에 중첩되었습니다.

이것이 테이블을 레이아웃 도구로 사용하는 것을 서서히 포기하고 대신 CSS를 사용하는 이유입니다.

CSS 란 무엇입니까

CSS(Cascading Style Sheets)는 Cascading Style Sheets의 약자로 HTML 또는 XML과 같은 스타일 마크업 언어입니다. 따라서 CSS는 HTML 문서와 연결되지 않는 한 그 자체로는 아무 것도 나타내지 않습니다.

CSS는 글꼴 선택, 색상 적용, 패딩 정의, 요소 위치 지정, 상호 작용 애니메이션 등을 HTML 문서로 변환합니다.

CSS 작동 방식

CSS 선택하다 HTML 요소(예: 단락)는 다음을 지정합니다. 재산변경(예: 색상) 및 특정 적용 의미(예: 빨간색):

P(색상: 빨강;)

"스타일"이라는 단어는 오해의 소지가 있습니다. CSS가 텍스트 색상, 글꼴 크기 및 유형을 변경하는 데만 사용된다고 생각할 수도 있습니다. 그러나 CSS는 높이, 너비, 여백, 여백, 위치, 열 등을 정의하여 HTML 문서의 레이아웃을 설정할 수 있습니다.

CSS는 어디에서 작성할 수 있습니까?

속성으로서의 CSS

CSS를 직접 작성할 수 있습니다. HTML 요소스타일 속성:

이것은 중요한 텍스트입니다.

CSS에서

당신은 태그를 사용할 수 있습니다

이 단락은 빨간색으로 표시됩니다.

별도 파일의 CSS

CSS를 별도의 .css 파일에 작성한 다음 태그를 사용하여 HTML에 연결할 수 있습니다. .

P (색상: 레드; )

헬로월드

이 단락은 빨간색으로 표시됩니다.

CSS 파일을 "호출"하는 이 HTML 문서, 우리의 경우 style.css라는 파일은 CSS 파일과 같은 폴더에 있습니다.

이것 세 번째 방법, 별도의 CSS 파일을 사용하는 것은 우선의.

CSS는 HTML 문서 내용의 모양을 제어할 수 있는 기술입니다. CSS는 Cascading Style Sheets의 약자로 계단식 스타일 시트로 번역됩니다.

CSS를 배우는 것은 HTML에 대한 지식을 의미합니다. HTML을 아직 배우지 않았다면 CSS를 배우기 시작하기에는 너무 이르다. Hypertext Markup Language를 먼저 배운 다음 Cascading Style Sheets로 이동하십시오.

요점을 파악하세요.

html 문서의 각 요소에는 고유한 기본 모양이 있습니다. 예를 들어 태그에서 가져온 텍스트

, 정의된 크기, 색상 및 글꼴을 갖습니다. 따라서 모든 기본 태그가 어떻게든 스타일을 형성하여 표시됩니다.

HTML 문서의 스타일은 간단히 말해서 브라우저에서 문서를 표시하는 것과 관련된 모든 것(글꼴, 크기, 색상, 제목과 텍스트의 간격, 들여쓰기 등)입니다. CSS를 사용하면 문서 요소의 형식을 제어할 수 있습니다.

이것은 정확히 어떻게 수행됩니까?

먼저 문서에 CSS를 첨부하는 한 가지 방법을 설명하겠습니다. 여러 가지 방법이 있지만 한 가지부터 시작해야 합니다.

따라서 생성한 사이트의 루트에서 텍스트 파일, 그러나 확장자는 .txt가 아니라 .css입니다. 사이트의 루트는 그렇게 선택되며 / css / 폴더를 만들고 거기에 파일을 넣을 수 있습니다.

이 파일을 css-file.css 라고 합시다. 이 파일에는 프로그래밍 코드스타일 시트. 스타일 시트는 웹 문서에서 HTML 태그의 형식을 제어하는 ​​템플릿입니다.

스타일 시트는 HTML 태그의 서식을 지정하기 위한 일련의 규칙입니다. 구문은 다음과 같습니다.

태그( 속성: 값 )

예를 들어, 이 제목을 파란색으로 만들고 크기를 16pt로 설정해 보겠습니다. 이를 위해 파일에 다음 줄이 추가됩니다.

h1 ( 색상 : 파란색 , 글꼴 크기 : 16pt )

이제 이 파일이 html 문서에 영향을 미치도록 해야 합니다. 호스팅에 배치하는 것만으로는 충분하지 않습니다. 이 섹션의 경우 다음 태그를 삽입하십시오.

HTML 문서지금 태그

파란색과 16pt 크기입니다.

또 다른 방법

HTML 문서에 CSS 규칙을 작성하는 또 다른 방법이 있습니다. 섹션에 필요한 태그에 스타일시트 추가

이제 이것이 어떻게 작동하는지 예를 들어 설명하겠습니다. 다음은 코드 샘플입니다.

<a href="https://bar812.ru/ko/vypadayushchee-menyu-s-ikonkami-css-fiksirovannoe-bokovoe-menyu-na-chistom-css-primer.html">CSS 예제</a>

안녕하세요!

헤더 h2!

CSS를 추가하는 또 다른 방법

태그에 스타일을 추가하는 또 다른 방법이 있습니다. 스타일 속성의 태그 자체에 필요한 스타일 매개변수를 지정하는 것입니다. 이러한 스타일을 내부 또는 인라인이라고 합니다. 사실, 이러한 스타일은 단일 태그의 확장입니다. 다음은 이 스타일을 사용하는 예입니다.

CSS 예제

스타일이 없는 헤더 h1

내부 스타일이 있는 헤더 h1

소계

그래서 우리는 문서에 스타일 시트를 추가하는 세 가지 방법을 알게 되었습니다.

  1. 바인딩 - 저장 CSS 테이블별도의 파일로 html 문서에 포함되어 있습니다. 이 방법을 사용하면 하나의 스타일 시트를 사용하여 여러 문서의 서식을 지정할 수 있습니다. 이러한 파일의 스타일을 연결된 스타일이라고 합니다.
  2. 포함 - 문서 머리글에서 직접 스타일 시트의 모든 규칙을 설정할 수 있습니다. 이러한 스타일을 전역 스타일이라고도 합니다.
  3. 문서 태그에 포함 - 특정 페이지 태그의 스타일 설정을 변경할 수 있습니다. 이를 내부 또는 인라인 스타일이라고도 합니다.

네 번째 방법도 있습니다. 수입, 하지만 지금은 생략하겠습니다.

이제 우리는 다음 질문에 관심이 있습니다. 태그가

스타일은 세 가지 방법으로 모두 지정됩니다.

스타일이 적용되는 방식에는 계층 구조가 있으므로 이를 염두에 두십시오. 내부 스타일이 우선 순위가 높은 다음 전역 스타일이 적용되고 연결된 스타일이 마지막에 적용됩니다.

아마도 스타일 시트를 캐스케이딩이라고 하는 것은 이 계층 구조 때문일 것입니다.

편리한 방법

스타일을 설정하는 가장 편리한 방법은 문서에 css 파일을 포함하는 것입니다. 제본. 한 곳에서 스타일을 변경할 수 있으므로 가장 자주 사용되는 사람입니다. 큰 숫자페이지.

CSS 구문 및 용어에 대해 자세히 알아보기

위에서 썼듯이 스타일 시트는 HTML 태그의 서식을 지정하기 위한 일련의 규칙입니다. 이에 대한 구문은 다음과 같습니다.

태그( 속성: 값 )

CSS 규칙은 태그를 표시하는 방법을 브라우저에 지시하는 것입니다.

모든 계단식 스타일 시트 규칙은 선택기와 정의의 두 부분으로 구성됩니다. 즉, 예제 구문은 다음과 같이 작성할 수 있습니다.

선택자( 정의 )

모든 선택자는 HTML 태그정의는 형식 지정 방법을 지정합니다. 정의 자체도 속성과 값의 두 부분으로 구성되며 콜론(:)으로 구분됩니다.

선택자( 속성: 값 )

하나의 CSS 규칙에서 여러 정의를 설정할 수 있으며 이 경우 세미콜론(;)으로 구분됩니다. 이는 위의 예에서 수행된 것과 동일합니다.

선택자
{
재산 가치;
재산 가치
}

세미콜론(;)은 마지막 정의 이후에 선택 사항입니다.

태그뿐만 아니라 클래스와 식별자도 선택기 역할을 할 수 있습니다. 그러나 이것은 별도의 기사에 대한 주제입니다.

CSS는 대소문자와 공백을 구분하지 않으므로 코드 가독성을 위해 줄 바꿈, 탭 및 공백을 마음대로 사용할 수 있습니다.

CSS 예제

제목 h1

제목 h2

이 예에서 첫 번째 규칙(선택기 h1용)은 한 줄에 작성되고 두 번째 규칙(선택기 h2용)은 다르게 작성됩니다. 각 선택기 정의는 다음과 같이 작성됩니다. 새로운 라인. 코드의 두 번째 버전이 더 읽기 쉽습니다.

CSS에서는 하나의 선택기가 각 속성을 개별적으로 지정할 수 있습니다. 다음은 이러한 코드의 예입니다.

이러한 형식의 표기법은 그다지 편리하지 않으며, 특히 하나의 선택기에 대해 많은 스타일 속성을 설정해야 하는 경우 이러한 코드에서 혼동하기 쉽습니다. 선호하는 표기법은 다음과 같습니다.

동일한 선택자에 대해 동일한 스타일 속성이 두 번 설정되었을 수 있습니다.

이 예에서 h1 선택기는 먼저 파란색으로 설정된 다음 빨간색으로 설정되었습니다. 이 경우 스타일 속성이 할당되며 규칙은 코드 아래에 작성됩니다. 이 경우 h1 태그는 빨간색으로 표시됩니다.

이러한 상황은 일반적으로 우연히 발생하지만 동일한 선택기가 포함된 문서에 다른 스타일 파일을 포함할 때도 발생할 수 있습니다. 이 원칙은 CSS 테이블이 제대로 작동하지 않을 때를 기억하는 데 유용합니다.

분명한 것은 각 속성은 해당 값만 가질 수 있다는 것입니다. color 속성의 경우 크기가 아닌 색상이 됩니다.