1. HTML이 건물이라면 CSS는 내부입니다. CSS는 예쁘다.

css의 형식은 다음과 같습니다. “.” 스타일의 이름입니다. HTML(클래스)과 연결하여 스타일을 만듭니다.

.텍스트-빨간색 {

빨간색;

}

HTML 형식으로

2. 속성은 다음 링크에서 가져옵니다. https://www.w3schools.com/cssref/index.php

2-1) 헤더 아래 내용은 CSS 스타일을 가져오는 경로입니다. 이것은 절대로 만져서는 안되며 이름이 일치해야 합니다.

2-2) 텍스트에 여러 스타일을 추가하고 싶다면?

” “각 스타일은 스페이스 바로 구분하십시오.

2-3) 이미지 크기 조정(너비: #px 높이: #px)

.img-크기 {
너비: 200px;
높이: 200px;
}

2-4) 상자를 만들어 보자! (=border-blue 및 img-size, 마진/패딩 사용)

여기에 테두리를 제공하는 테두리 및 패딩이 있는 스타일을 추가합니다.

(여백은 대상을 벗어난 여백을 나타냅니다)

.margin-space {
여백 상단: 40px;
왼쪽 여백: 100픽셀;
여백 바닥: 40px;
}

(패딩은 객체의 안쪽에서 바깥쪽으로 테두리를 줍니다)
.패딩-스페이스 {
상단 패딩: 40px
}

3. 연습 1

<div>  
   <div class="box">Box 1</div> 
   <div class="box green">Box 2</div>  
   <div class="box blue">Box 3</div> 
</div>

스타일 만들기

.box{
  border: 50px solid red;
  width: 200px;
  padding: 50px;
  margin-top:20px;
}

.green{
  border: 50px solid green;
}

.blue{
  border: 50px solid blue;    // blue, green 대신 색깔코드를 입력해도 된다!  https://flatuicolors.com/palette/defo
}

또한 display:none 및 visibility:hidden을 사용하여 필드를 숨길 수 있습니다.

디스플레이: 없음: 화면에 보이지 않게 그것이 차지하는 공간도 손실됩니다.

가시성:숨김: 하지만 화면에 보이지 않는 그것은 그것이 차지하는 공간을 떠납니다.

4. 실습 2

선생님이 제공한 HTML로 이미지처럼 보이게 만드세요.

***이 스타일을 지정하는 방법

-직접 태그

피{

빨간색;

}

참고: 이 스타일은 모든 p 태그에 적용됩니다.

***

태그의 첫 글자만 200% 늘리고 색상 #2980b9(p::first-letter)를 지정합니다.

p::초기 {
글꼴 크기: 200%;
색상: #2980b9;
}

***주제 첨부: 이전

-태그(h1::이전)

h1::전에 {
콘텐츠: “주제: “
}

*** 첫 번째 센터

-첫날 : )

h1:첫 번째 자식 {
텍스트 정렬: 가운데;
}

***배경화면 전체를 왼쪽으로 옮기고 싶어요.

.챌린지2{

내부 코드는 생략하세요… (with background-color:, background-image:, linear-gradient() etc.)

왼쪽 여백: 15%

}

(저작권 여부를 몰라서 모든 코드는 올리지 않았습니다.)

완성 링크: https://css-yeonseub2gongcaeg-websaiteu.ourstar1345.repl.co/

반복하다

HTML 자습서 HyperText Markup Language 또는 HTML은 웹 브라우저에서 볼 수 있도록 설계된 문서의 표준 마크업 언어입니다. CSS(Cascading Style Sheets)와 같은 기술과 JavaScript와 같은 스크립팅 언어로 지원할 수 있습니다.

css-yeonseub2gongcaeg-websaiteu.ourstar1345.repl.co