Home-theater-designers
웹사이트를 만드는 것은 자신을 표현할 수 있는 좋은 방법입니다. 많은 웹사이트 구축 도구가 있지만 직접 작성하는 것은 웹사이트가 이면에서 작동하는 방식에 대해 더 많이 배울 수 있는 재미있는 방법입니다. 좋은 초보자 프로젝트는 웹사이트를 만들고 CSS로 배경 이미지를 추가하는 것입니다. 이 프로젝트를 통해 HTML과 CSS를 모두 사용할 수 있습니다.
CSS 란 무엇입니까?
CSS는 Cascading Style Sheet의 약자입니다. 마크업 언어의 스타일을 지정할 수 있는 프로그래밍 언어입니다. 그러한 마크업 언어 중 하나는 HTML 또는 하이퍼텍스트 마크업 언어입니다. HTML은 웹사이트를 만드는 데 사용됩니다. HTML을 사용하여 웹사이트 스타일의 일부를 제어할 수 있지만 CSS는 훨씬 더 많은 제어 및 디자인 옵션을 제공합니다.
HTML로 기본 웹사이트 만들기
CSS는 스타일 언어이기 때문에 CSS를 사용하려면 먼저 스타일을 지정할 무언가가 필요합니다. 매우 기본적인 웹사이트만으로도 CSS를 다룰 수 있습니다. 페이지에 'Hello World'가 표시됩니다.
Hello World
HTML에 익숙하지 않은 경우 모든 요소가 수행하는 작업을 빠르게 살펴보겠습니다. 언급했듯이 HTML은 태그를 사용하여 텍스트가 무엇인지 표시하는 마크업 언어입니다. 로 둘러싸인 단어를 볼 때마다 그것은 태그입니다. 태그에는 를 사용하여 섹션의 시작을 표시하는 태그와 를 사용하여 섹션의 끝을 표시하는 태그의 두 가지 유형이 있습니다. 섹션 내의 텍스트는 이러한 구분을 더 쉽게 볼 수 있도록 하기 위한 것이기도 합니다.
이 예에는 4개의 태그가 있습니다. NS HTML 태그는 웹사이트의 일부인 요소를 나타냅니다. NS 머리 태그에는 페이지에 표시되지 않지만 페이지를 생성하는 데 필요한 헤더 정보가 포함됩니다. 표시된 모든 요소는 신체 태그. 표시되는 요소는 하나만 있습니다. NS 꼬리표. 웹 브라우저에 텍스트가 단락임을 알려줍니다.
관련된: 10분 안에 배울 수 있는 10가지 간단한 CSS 코드 예제
HTML에 CSS 추가
이제 간단한 페이지가 있으므로 CSS로 스타일을 사용자 지정할 수 있습니다. 우리 페이지는 지금 매우 간단하고 우리가 할 수 있는 일은 많지 않지만 테두리를 추가하여 배경과 구분할 수 있도록 단락을 눈에 띄게 만드는 것부터 시작하겠습니다.
Hello World
이제 단락이 검은색 테두리로 둘러싸여 있습니다. CSS의 스타일 설명을 단락 태그에 추가하면 웹사이트에 단락의 스타일을 지정하는 방법을 알 수 있습니다. 더 많은 설명을 추가할 수 있습니다. 단락 주위의 공백 또는 여백을 늘리고 텍스트의 중앙에 배치해 보겠습니다.
Hello World
웹사이트가 더 좋아 보이지만 HTML이 단락 태그의 모든 설명으로 인해 지저분해 보이기 시작했습니다. 이 정보를 헤더로 이동할 수 있습니다. 헤더는 웹사이트를 올바르게 표시하는 데 필요한 정보입니다.
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}
Hello World
이제 HTML을 더 쉽게 읽을 수 있습니다. 당신은 우리가 주위에 몇 가지를 변경해야한다는 것을 알 수 있습니다. style 태그는 웹 브라우저의 스타일 정보뿐 아니라 스타일을 지정할 대상도 알려줍니다. 이 예에서 우리는 스타일을 지정하기 위해 두 가지 다른 방법을 사용했습니다. NS NS 스타일 태그에서 모든 단락 태그에 해당 스타일을 적용하도록 웹 브라우저에 지시합니다. NS #our단락 섹션은 id가 있는 스타일 요소만 지시합니다. 우리 단락 . 그것을주의해라 ID 정보가 우리 몸의 p 태그에 추가되었습니다.
Android에서 외부 스피커가 작동하지 않음
웹사이트로 CSS 파일 가져오기
헤더에 스타일 정보를 추가하면 코드를 훨씬 더 쉽게 읽을 수 있습니다. 그러나 여러 페이지를 같은 방식으로 스타일 지정하려면 해당 텍스트를 모든 페이지 상단에 추가해야 합니다. 그것은 많은 작업처럼 보이지 않을 수 있습니다. 결국 복사하여 붙여 넣을 수 있지만 나중에 요소를 변경하려는 경우 많은 작업이 생성됩니다.
대신 CSS 정보를 별도의 파일에 보관하고 파일을 가져와 페이지의 스타일을 지정할 것입니다. 스타일 태그 사이의 정보를 복사하여 새 CSS 파일에 붙여넣습니다. 우리 CSS 파일.css .
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}그런 다음 파일을 HTML 파일로 가져옵니다.
Hello World
CSS로 배경 이미지 추가하기
이제 HTML과 CSS에 대한 견고한 기반을 갖추었으므로 배경 이미지를 추가하는 것은 케이크 조각이 될 것입니다. 먼저 배경 이미지를 제공할 요소를 식별합니다. 이 예에서는 전체 페이지에 배경을 추가합니다. 즉, 스타일을 변경하려는 신체 . body 태그에는 보이는 모든 요소가 포함되어 있음을 기억하십시오.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}CSS에서 본문 스타일을 변경하려면 먼저 신체 예어. 그런 다음 {} 이전에 했던 것처럼 중괄호를 추가합니다. 본문의 모든 스타일 정보는 중괄호 사이에 있어야 합니다. 변경하려는 스타일 속성은 배경 이미지 . 많은 스타일 속성이 있습니다. 그것들을 모두 외울 것이라고 기대하지 마십시오. 기억하고 싶은 속성으로 CSS 속성 치트 시트를 즐겨찾기에 추가하세요.
관련된: 누구나 웹사이트에 추가할 수 있는 8가지 멋진 HTML 효과
YouTube 비디오에서 노래를 찾는 방법
속성 뒤에 콜론을 사용하여 속성을 변경하는 방법을 나타냅니다. 이미지를 가져오려면 다음을 사용하십시오. URL() . 링크를 사용하여 이미지를 가리키고 있음을 나타냅니다. 파일 위치를 인용 부호 사이의 대괄호 안에 넣으십시오. 마지막으로 세미콜론으로 줄을 끝냅니다. CSS에서 공백은 의미가 없지만 들여쓰기를 사용하여 CSS를 더 쉽게 읽을 수 있습니다.
우리의 예는 다음과 같습니다.
이미지 크기 때문에 이미지가 제대로 표시되지 않는 경우 이미지를 직접 변경할 수 있습니다. 그러나 CSS에는 배경을 변경하는 데 사용할 수 있는 배경 스타일 속성이 있습니다. 배경보다 작은 이미지는 자동으로 배경에서 반복됩니다. 이 기능을 끄려면 다음을 추가하세요. 배경 반복:반복 금지; 당신의 요소에.
이미지가 전체 배경을 덮도록 하는 두 가지 방법이 있습니다. 먼저 background-size를 다음을 사용하여 화면 크기로 설정할 수 있습니다. 배경 크기: 100% 100%; , 하지만 이렇게 하면 이미지가 늘어나고 이미지가 너무 많이 왜곡될 수 있습니다. 이미지의 비율을 변경하지 않으려면 background-size를 다음으로 설정할 수도 있습니다. 씌우다 . Cover는 배경 이미지가 배경을 덮도록 만들지만 이미지를 왜곡하지는 않습니다.
배경색 변경
마지막으로 하나만 변경합시다. 이제 배경이 있으므로 단락을 읽기가 어렵습니다. 배경을 흰색으로 합시다. 과정은 비슷합니다. 수정하려는 요소는 #ourParagraph입니다. #은 'ourParagraph'가 id 이름임을 나타냅니다. 다음으로 설정하려는 배경색 흰색에 속성.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}훨씬 낫다.
CSS로 웹사이트 디자인 계속하기
이제 다양한 HTML 요소의 스타일을 변경하는 방법을 알았으므로 한계가 있습니다! 스타일 속성을 변경하는 기본 방법은 동일합니다. 변경하려는 요소를 식별하고 속성을 변경하는 방법을 설명합니다. 더 많이 배우는 가장 좋은 방법은 다양한 속성을 가지고 노는 것입니다. 다음에 텍스트의 색상을 변경하는 데 도전하십시오.
공유하다 공유하다 트위터 이메일 고품질 HTML 코딩 예제를 위한 8가지 최고의 사이트HTML을 배우고 웹사이트와 앱을 코딩하고 싶으십니까? 이 웹 페이지 예제와 소스 코드를 사용하여 HTML과 CSS를 스스로 배우십시오.
다음 읽기 관련 항목- 프로그램 작성
- HTML
- 웹 디자인
- CSS
J. Seaton은 복잡한 주제를 분류하는 데 전문적인 과학 작가입니다. 그녀는 서스캐처원 대학교에서 박사 학위를 받았습니다. 그녀의 연구는 온라인에서 학생 참여를 늘리기 위해 게임 기반 학습을 활용하는 데 중점을 두었습니다. 그녀가 일을 하지 않을 때는 책을 읽거나 비디오 게임을 하거나 정원을 가꾸고 있는 그녀를 볼 수 있습니다.
제니퍼 시튼이 참여한 작품 더보기뉴스레터 구독
뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!
구독하려면 여기를 클릭하세요.